Guppy Docs

Deutsch

English

Deutsch

English

Appearance

Features-Übersicht ​

Das Guppy Theme bietet umfassende Anpassungsmöglichkeiten für Shopware 6 Shops mit Fokus auf Performance, Barrierefreiheit und Benutzerfreundlichkeit.

Inhalt dieser Seite:

🚀 Theme-Optimierungen ​

Bootstrap-Integration ​

  • Zentrale Konfiguration: Alle Bootstrap-Variablen in einer bootstrap.scss
  • 230+ Konfigurationsfelder in 12 Hauptkategorien
  • Responsive Line Heights (RLH): Erweitert Bootstrap RFS um responsive Zeilenhöhen
  • Performance-optimiert: Ohne Shopware Standard-Styling für schlanke CSS-Dateien

Erweiterte Features ​

  • 12 Header-/Footer-Varianten: Von minimalistisch bis erweitert
  • Responsive Design: Mobile-first Ansatz mit optimierten Breakpoints
  • Icon-System: Einfache Integration eigener Icons
  • Custom Properties: Bootstrap-unabhängige Variablen für erweiterte Anpassungen

🎨 Design-System ​

Farbsystem ​

  • 9 konfigurierbare Grautöne (Gray 100-900)
  • Flexible Farbpalette: Primär- und Sekundärfarben anpassbar
  • Konsistente Anwendung: Automatische Farb-Vererbung in allen Komponenten

Typografie ​

  • Responsive Schriftgrößen: Automatische Anpassung über alle Viewports
  • 6 Headline-Ebenen: H1-H6 mit konfigurierbaren Größen und Zeilenhöhen
  • Custom Fonts: Plugin-Unterstützung für eigene Schriftarten

Layout-System ​

  • Flexible Container: Konfigurierbare Breiten für verschiedene Layouts
  • Responsive Paddings: Viewport-spezifische Abstände
  • CSS Grid Integration: 11 zusätzliche Grid-Layouts via Plugin

🧩 Komponenten-System ​

Header-Varianten ​

  1. Shopware Standard: Klassisches Header-Layout
  2. Guppy Standard (Kompakt): Optimiertes, schlankes Design
  3. Erweitert: Mit Top-Bar und zusätzlichen Elementen
  4. Simpel: Minimalistisches Design

Features:

  • Konfigurierbare Logo-Höhe (Standard: 22px)
  • Skip-Links für Barrierefreiheit
  • Responsive Navigation mit Keyboard-Support
  • Guppy Standard Footer: 3-Sektionen-Layout
  • Social Media Integration: 8 Plattformen unterstützt
  • Payment/Shipping Icons: Automatische Integration
  • Custom Sections: Bis zu 4 benutzerdefinierte Bilder

Produktkarten ​

  • Barrierefreie Guppy-Variante: Vollständig zugänglich
  • Konfigurierbares Aspect-Ratio: Standard 10:9
  • Schutz-Rahmen: Produktbild-Optimierung
  • Object-Fit Optionen: contain oder cover
  • Flyout-Varianten: Standard und kompakt
  • Einstufige Kategorien: Vereinfachte Navigation möglich
  • Vollständige Barrierefreiheit: Screen-Reader und Keyboard-Support
  • Responsive Accordion: Mobile-optimierte Darstellung

🛒 E-Commerce Features ​

USP-Banner ​

  • Responsive Anzeige:
    • Desktop: 1-4 USPs statisch
    • Tablet: 1-2 USPs als Slider
    • Mobile: 1 USP als Slider
  • Tooltip-System: Automatisch bei längeren Inhalten
  • Konfigurierbare Layouts: Standard und Benefits

Produktdetailseite ​

  • Buybox-Varianten: Standard, mit Rahmen, mit Hintergrund
  • Galerie-Optionen: Scrollendes oder fixes Layout
  • Tab-System: Eigenschaften als separater Tab möglich
  • Kontakt-Integration: Optional anzeigbare Kontaktdaten

Checkout-Optimierung ​

  • Kompakte Variante: Platzsparende Darstellung
  • Progress-Tracking: Visueller Fortschritt
  • Auto-Save: Automatisches Speichern von Formular-Daten
  • Erweiterte Validierung: Client-Side-Formularvalidierung

Badges-System ​

  • Konfigurierbare Farben: Für alle Badge-Typen
  • Outline-Unterstützung: Optional aktivierbare Rahmen
  • Accessibility-optimiert: Kontrast-geprüfte Farben

♿ Barrierefreiheit ​

Implementierte Features ​

  • Skip-Links: Zum Hauptinhalt, Navigation und Suche
  • Focus-Management: Einheitliche, konfigurierbare Focus-Styles
  • Keyboard-Navigation: Vollständige Tastaturunterstützung
  • Screen-Reader: ARIA-Labels und semantisches HTML
  • Touch-Optimierung: 44px Mindestgröße für Touch-Targets

Guidelines ​

Umfassende Accessibility Guidelines für die Implementierung von Barrierefreiheit in Shopware-Projekten.

🔧 Entwickler-Features ​

JavaScript-Plugins ​

  • Splide-Slider: Ersetzt Tiny-Slider mit besserer Performance
  • Product Box Click: Erweiterte Produktkarten-Interaktionen
  • USP Banner: Interaktives Banner-System
  • Custom Checkout: Optimiertes Checkout-Erlebnis
  • Quantity Selector: Erweiterte Mengenauswahl

SCSS-Architektur ​

  • Modularer Aufbau: Komponenten-basierte Struktur
  • Abstract Layer: Functions, Mixins und Variables
  • Responsive Mixins: RLH für responsive Zeilenhöhen
  • Performance-Optimiert: Conditional Imports

Templating-System ​

  • Theme-Integration: Dynamische Anpassungen über theme.json
  • Varianten-System: Einfache Erstellung neuer Komponenten-Varianten
  • Child-Theme-Support: Vollständige Vererbung und Überschreibung
  • Twig-Extensions: Custom Funktionen für erweiterte Features

Console Commands ​

  • guppy:theme:create: Automatische Child-Theme-Erstellung
  • guppy:install:plugins: Interaktive Plugin-Installation
  • Asset-Management: Automatisches Kopieren von Standard-Assets

🔌 Plugin-Ecosystem ​

Guppy Plugins ​

  • Emotionworld Elements: Erweiterte CMS-Elemente

DMF Plugins ​

  • Custom Fonts: Eigene Webfonts integrieren
  • Custom Grid: 11 zusätzliche CMS-Grid-Layouts
  • Dropdown Navigation: Barrierefreie Navigation mit erweiterten Features

📊 Performance ​

Optimierungen ​

  • Schlanke CSS: Ohne Shopware Standard-Styling
  • Lazy Loading: Automatisch für Bilder
  • Responsive Images: Optimierte Bildgrößen
  • JavaScript-Optimierung: Moderne ES6+ Plugins
  • Build-System: Optimierte Compilation-Pipeline

Best Practices ​

  • Mobile-First: Responsive Design von Grund auf
  • Progressive Enhancement: Grundfunktionen ohne JavaScript
  • Accessibility-First: Barrierefreiheit als Standard
  • Semantic HTML: Korrekte HTML-Struktur

🚀 Erste Schritte ​

Quick Start ​

➡️ Qick Start - Schnellste Einrichtung

Detaillierte Anleitungen ​

Für Entwickler ​

Das Guppy Theme bietet die perfekte Balance zwischen Benutzerfreundlichkeit und Entwicklerflexibilität für moderne Shopware 6 Projekte.

Copyright © 2025-heute digital.manufaktur GmbH