Guppy Docs

Appearance

Features ​

Inhalt dieser Seite:

Optimierungen des Themes ​

Bootstrap-Konfiguration ​

Der Shopware Standard nutzt Bootstrap 5 als Frontend-Framework. Mit Guppy wird die Konfiguration von Bootstrap-Variablen stark vereinfacht. Alle Anpassungen, wie Abstände und weitere Bootstrap-Konfigurationen, werden in der Datei bootstrap.scss zentral verwaltet. Dadurch können Änderungen ohne tiefgreifende CSS-Kenntnisse vorgenommen werden.

bootstrap.scss

Liste der Variablen

VariableBeschreibung
$whiteDefiniert die Farbe Weiß.
$blackDefiniert die Farbe Schwarz.
$gray-100 bis $gray-900Definiert verschiedene Grautöne von hell (100) bis dunkel (900).
$body-bgHintergrundfarbe der Webseite oder des Bodys.
$body-colorTextfarbe der Webseite oder des Bodys.
$enable-roundedAktiviert oder deaktiviert abgerundete Ecken für Elemente.
$enable-shadowsAktiviert oder deaktiviert Schatten für Elemente.
$spacerBasiswert für Abstände, der für den Aufbau von Spacern verwendet wird.
$spacersDefiniert Abstände als Multiplikatoren des Basiswerts $spacer.
$grid-breakpointsDefiniert die Breiten für die verschiedenen Breakpoints im Grid-System.
$container-max-widthsLegt die maximale Breite für Container bei verschiedenen Breakpoints fest.
$grid-gutter-widthAbstand zwischen den Spalten im Grid-System.
$container-padding-xHorizontale Polsterung innerhalb von Containern.
$border-widthStandard-Breite von Rahmen.
$border-colorStandard-Farbe von Rahmen.
$border-radiusStandard-Rundung für Ecken.
$border-radius-smKleinere Rundung für Ecken.
$border-radius-lgGrößere Rundung für Ecken.
$border-radius-xlExtra große Rundung für Ecken.
$border-radius-2xlSehr große Rundung für Ecken.
$border-radius-pillMaximale Rundung für Pillenformen.
$box-shadowStandard-Schatten für Boxen.
$box-shadow-smKleinere Schatten für Boxen.
$box-shadow-lgGrößere Schatten für Boxen.
$box-shadow-insetEingelassene Schatten.
$component-active-colorTextfarbe für aktive Komponenten.
$component-active-bgHintergrundfarbe für aktive Komponenten.
$font-size-baseBasis-Schriftgröße für den Text.
$font-size-smKleinere Schriftgröße basierend auf der Basisgröße.
$font-size-lgGrößere Schriftgröße basierend auf der Basisgröße.
$font-weight-lighterGewichtung für leichten Text.
$font-weight-lightGewichtung für etwas leichteren Text.
$font-weight-normalStandard-Gewichtung für Text.
$font-weight-semiboldMittlere Gewichtung für Text.
$font-weight-boldGewichtung für fetten Text.
$font-weight-bolderGewichtung für extra fetten Text.
$font-weight-baseStandard-Gewichtung für den Basistext.
$line-height-baseZeilenhöhe für Standardtext.
$line-height-smKleinere Zeilenhöhe für Text.
$line-height-lgGrößere Zeilenhöhe für Text.
$h1-font-size bis $h6-font-sizeSchriftgrößen für Überschriften (H1 bis H6).
$headings-margin-bottomAbstand unterhalb von Überschriften.
$headings-font-familySchriftart für Überschriften.
$headings-font-styleSchriftstil für Überschriften.
$headings-font-weightSchriftgewicht für Überschriften.
$headings-line-heightZeilenhöhe für Überschriften.
$headings-colorTextfarbe für Überschriften.
$paragraph-margin-bottomAbstand unterhalb von Absätzen.
$input-padding-yVertikale Polsterung für Eingabefelder.
$input-padding-xHorizontale Polsterung für Eingabefelder.
$input-border-colorFarbe der Rahmen bei Eingabefeldern.
$input-border-radiusRundung der Rahmen bei Eingabefeldern.
$btn-padding-yVertikale Polsterung für Buttons.
$btn-padding-xHorizontale Polsterung für Buttons.
$btn-font-sizeSchriftgröße für Buttons.
$btn-border-radiusRundung der Ecken für Buttons.
$breadcrumb-font-sizeSchriftgröße für Breadcrumb-Navigation.
$spinner-widthBreite des Spinners.
$spinner-heightHöhe des Spinners.
$spinner-border-widthBreite des Spinner-Rahmens.
$offcanvas-horizontal-widthBreite des horizontalen Offcanvas-Bereichs.

Custom-Konfiguration ​

Zudem gibt es noch eine custom.scss in der Bootstrap-Unabhängige Variablen gepflegt werden können.

custom.scss

Liste der Variablen

VariableBeschreibung
$icon-base-sizeBasisgröße für Icons, verwendet für Standardmaße.
$icon-base-colorStandardfarbe für Icons, basierend auf der aktuellen Textfarbe.
$icon-accessibility-touch-sizeGröße für Touch-Interaktionen, um die Zugänglichkeit zu verbessern.
$h1-line-heightZeilenhöhe für Überschrift H1, basierend auf einer systemweiten Variable.
$h2-line-heightZeilenhöhe für Überschrift H2, ebenfalls systemweit definiert.
$h3-line-heightZeilenhöhe für Überschrift H3, für kleinere Überschriften.
$h4-line-heightZeilenhöhe für Überschrift H4, für mittlere Überschriften.
$h5-line-heightZeilenhöhe für Überschrift H5, kleinere Standardüberschrift.
$h6-line-heightZeilenhöhe für Überschrift H6, die kleinste Überschrift.
$product-image-heightStandardhöhe für Produktbilder, nützlich für Layouts.
$product-image-height-lgHöhe für Produktbilder in größeren Layouts, passt sich dem Inhalt an.
$product-image-aspect-rationSeitenverhältnis von Produktbildern, berechnet als 10:9.
$product-image-backgroundHintergrundfarbe für Produktbilder, basierend auf einer systemweiten Farbe.
$focus-outline-widthBreite der äußeren Umrandung, wenn ein Element fokussiert wurde.
$focus-outline-colorFarbe der äußeren Umrandung.
$focus-outline-offsetAbstand zwischen der äußeren Umrandung und dazu gehörigem Element.
$focus-outline-box-shadowSchatten für die äußere Umrandung.

Responsive line heights (RLH) ​

Neben dem RFS Mixing von Bootstrap haben wir Guppy so erweitert, dass wir auch den Zeilenabstand dynamisch über alle Viewports anpassen können mit dem responsive line heights (RLH) Mixin.

rlh.scss

Verwendung ​

Basis-Mixin: @mixin rlh ​

Das rlh-Mixin bietet die volle Funktionalität, um line-height-Werte responsiv zu machen.

scss
@mixin rlh($values, $property: line-height) {
    @if $values != null {
        $val: rfs-value($values);
        $fluidVal: rfs-fluid-value($values);

        // Do not print the media query if responsive & non-responsive values are the same
        @if $val == $fluidVal {
            #{$property}: $val;
        }
        @else {
            @include _rfs-rule {
                #{$property}: if($rfs-mode == max-media-query, $val, $fluidVal);

                // Include safari iframe resize fix if needed
                min-width: if($rfs-safari-iframe-resize-bug-fix, (0 * 1vw), null);
            }

            @include _rfs-media-query-rule {
                #{$property}: if($rfs-mode == max-media-query, $fluidVal, $val);
            }
        }
    }
}
Shorthand-Helper-Mixin: @mixin line-height ​

Dieses Mixin dient als bequemer Helfer, um schnell responsive line-height-Werte zu definieren.

scss
@mixin line-height($value) {
    @include rlh($value);
}
Beispiel: Line-Heights ​

Hier ist ein Beispiel, wie du RLH in deinem Projekt einsetzen kannst:

scss
body {
    @include line-height(1.5); // Responsive line-height
}

h1 {
    @include rlh(1.2); // Alternativ kannst du das rlh-Mixin direkt verwenden
}

p {
    @include line-height(1.75);
}

Theme ohne Shopware-Standard-Styling ​

Im Guppy Theme wurde das Standard-Styling von Shopware direkt integriert. Weitere Informationen findest du hier: Theme with Bootstrap Styling

json
{
    ...
    "style": [
		"app/storefront/src/scss/overrides.scss",
		"@StorefrontBootstrap",
		"@Plugins",
		"app/storefront/src/scss/skin/shopware/base.scss",
		"app/storefront/src/scss/base.scss"
	],
}

INFO

Der vollständige Shopware-Skin wurde in Guppy integriert. Das Hauptziel besteht nun darin, diesen übertragenen Skin gezielt zu optimieren, um Design und Funktionalität weiter zu verbessern.

Dies ermöglicht es uns, die CSS-Datei schlank und performant zu gestalten, indem wir Anpassungen direkt im Skin vornehmen und doppeltes Überschreiben von Styles vermeiden. Zudem können wir das von Shopware vorgegebene Styling gezielt optimieren und anpassen.

Theme-Konfiguration ​

Die theme.json Datei wurde erweitert, um neue Konfigurationsmöglichkeiten bereitzustellen. Wie die Theme-Konfiguration generell aufgebaut ist, kann in der Shopware Dokumentation nachgeschaut werden.

Übersicht der Konfiguration ​

Das Guppy Theme bietet über 230 Konfigurationsfelder in 12 Hauptkategorien:

Konfigurationstabs ​

  1. Layout - Container, Sections, Responsive Einstellungen
  2. Header - Header-Varianten und Logo-Konfiguration
  3. Footer - Footer-Varianten und Social Media Links
  4. USP Banner - Verkaufsargumente und Darstellung
  5. Login & Register - Anmelde- und Registrierungsseiten
  6. Cart & Checkout - Warenkorb und Checkout-Prozess
  7. Product Card - Produktbox-Konfiguration
  8. Product Detail - Produktdetailseiten-Einstellungen
  9. Input & Button - Formular- und Button-Styles
  10. Badges - Produkt-Badges und Auszeichnungen
  11. Alerts - Benachrichtigungen und Meldungen
  12. Guppy Cards - Spezielle Karten-Komponenten

Detaillierte Konfigurationsbereiche ​

Farbsystem ​

Das Guppy Theme stellt ein umfassendes Farbsystem bereit, das alle wichtigen UI-Elemente abdeckt und vollständige Kontrolle über das Design ermöglicht.

Kern-Markenfarben ​

sw-color-brand-primary (Primärfarbe)
Standard: #215AFF
Spezifische Verwendung:

  • Bootstrap Primary Buttons: Alle .btn-primary Buttons über $primary Variable
  • Bootstrap Primary Komponenten: Primary Alerts, Badges, Progress Bars
  • Hauptnavigation Links: .main-navigation-link:hover, .main-navigation-link.is-open, .main-navigation-link.active Text- und Rahmenfarben
  • Focus-Umrandung: $focus-outline-color für Barrierefreiheits-Focus-Indikatoren
  • Formular-Input Focus: Eingabefeld Focus-Rahmenfarben
  • Account-Sidebar: Account-Menu Link-Text und Rahmenfarben
  • Filter-Panel: Filter-Button Hover-Hintergrund (Schattierungsvariante)
  • Slider: Slider-Handle Rahmen- und Hintergrundfarben
  • Kategorie-Navigation: Aktive Kategorie-Element Rahmenfarbe
  • Checkout-Fortschritt: Progress Bar aktive Schritt-Hintergründe in linearen Verläufen
  • Produkt-Detail Konfigurator: Produktvarianten-Auswahl Rahmenfarbe
  • Tab-Menu: Tab Hover und aktive Rahmenfarben über CSS-Variablen
  • Top-Bar Dropdowns: Dropdown-Link Hover und aktive Farben
  • Custom Form Controls: Aktive Checkbox/Radio-Button Hintergründe
  • Komponenten Aktive Zustände: $component-active-bg für Bootstrap aktive Komponenten

sw-color-brand-secondary (Sekundärfarbe)
Standard: #0B1845
Spezifische Verwendung:

  • Bootstrap Secondary Buttons (.btn-secondary): Checkout Register-Buttons, Warenkorb Discount Apply-Buttons, Filter-Panel Schließen-Buttons
  • Bootstrap Secondary Badge (.bg-secondary): 3D-Badge in Bildergalerie
  • Bootstrap Utilities: Beeinflusst .text-secondary und .border-secondary Klassen
Hintergrund & Struktur ​

sw-background-color (Hintergrund)
Standard: #FFFFFF
Spezifische Verwendung:

  • Body-Hintergrund: Hauptseiten-Hintergrundfarbe über $body-bg
  • Offcanvas-Warenkorb: Einkaufswagen-Sidebar Hintergrundfarbe
  • Eingabefeld-Hintergründe: Alle Formular-Eingabefeld-Hintergründe über $input-bg

sw-border-color (Rahmenfarbe)
Standard: #CFD1D7
Spezifische Verwendung:

  • Globale Rahmenfarbe: Bootstrap $border-color für alle Standard-Rahmen
  • Eingabefeld-Rahmen: Formular-Eingabefeld Rahmenfarbe
  • Header-Abschnitte: Header untere Rahmen und Top-Bar-Trenner
  • Footer-Trenner: Footer-Abschnitt Teiler und Zahlungsarten-Rahmen
  • Navigation-Trenner: Hauptnavigation unterer Rahmen
  • Checkout-Komponenten: Checkout-Schritt Rahmen, Warenkorb-Element Trenner, Sidebar-Rahmen
  • Produkt-Detail-Elemente: Buybox-Rahmen, Tab-Trenner, Varianten-Auswahl Rahmen
  • Karten-Rahmen: Bedingte Karten-Rahmen wenn Guppy Cards Rahmen-Einstellung aktiviert
  • Pagination-Rahmen: Pagination-Button Rahmen in allen Zuständen
  • Dropdown-Rahmen: Dropdown-Menu Rahmen
Typografie-Farben ​

sw-text-color (Textfarbe)
Standard: #1B1F29
Spezifische Verwendung:

  • Body-Textfarbe: Haupttext-Farbe über $body-color
  • Slider-Komponenten: Slider-Pfeil Farben, Pagination-Punkte, Bedienelemente
  • Footer-Text: Footer-Link und Inhaltstext-Farben
  • Produkt-Informationen: Produktvarianten-Info-Text (mit 70% Opazität)
  • Breadcrumb-Navigation: Breadcrumb-Link und Trenner-Farben
  • Kategorie-Navigation: Kategorie-Navigation Element-Textfarbe
  • Zahlungsarten: Zahlungsarten-Auswahl Textfarbe
  • Mengen-Selektor: Mengen-Eingabefeld Textfarbe
  • Base Slider-Bedienelemente: Base Slider-Pfeil Farben und aktive Zustände
  • Tabellen-Streifen-Zeilen: Gestreifte Tabellen-Textfarbe
  • Eingabefelder: Formular-Eingabe Textfarbe

sw-headline-color (Überschrift-Farbe)
Standard: #1B1F29
Spezifische Verwendung:

  • Bootstrap-Überschriften: Alle Überschrift-Elemente (h1-h6) Farbe über $headings-color
  • Produkt-Detail Preis-Wrapper: Verschiedene Preis-Wrapper-Komponenten
E-Commerce-spezifische Farben ​

sw-color-price (Preis)
Standard: #1B1F29
Beeinflusst:

  • Produktpreis-Anzeigen
  • Warenkorb-Gesamtsummen
  • Checkout-Preisinformationen

sw-color-buy-button (Kaufen-Button)
Standard: #215AFF
Beeinflusst:

  • "In den Warenkorb"-Buttons
  • Primäre Kauf-Aktionen
  • Checkout-Abschluss-Buttons

sw-color-buy-button-text (Kaufen-Button Text)
Standard: #FFFFFF
Beeinflusst:

  • Textfarbe auf Kaufen-Buttons
  • Primäre Button-Textfarbe
Status & Alert-Farben ​

Wichtiger Hinweis

Das Guppy Theme verwendet ein eigenes benutzerdefiniertes Alert-System (guppy-alert-color-* Variablen) anstelle der Bootstrap-Alerts. Die Bootstrap-Status-Farben unten werden größtenteils nicht im aktuellen Theme verwendet, außer in spezifischen genannten Fällen.

sw-color-success (Erfolg) - Standard: #22C087 - Nicht verwendet in Guppy
sw-color-info (Information) - Standard: #0CA4FA - Nicht verwendet in Guppy
sw-color-warning (Warnung) - Standard: #F89C00 - Nicht verwendet in Guppy
sw-color-danger (Fehler) - Standard: #E10036 - Begrenzt verwendet für Produktpreis-Anzeigen

Graustufen-System ​

sw-color-gray-100 (Standard: #F9F9F9)
Verwendung: Footer-Hintergrund, Account-Sidebar, Kategorie-Navigation, Produkt-Detail-Hintergründe, Login-Panel, Checkout-Abschnitte

sw-color-gray-200 (Standard: #EEEEEE)
Verwendung: Eingabe-Deaktiviert-Hintergrund, Tabellen-Streifen-Hintergrund, Kategorie-Navigation-Hover, Login-Komponenten, Warenkorb-Zeilen

sw-color-gray-300 bis sw-color-gray-900
Verschiedene Bootstrap-Komponenten und UI-Elemente

Guppy-spezifische Farben ​

guppy-btn-light-bg-color (Button Light-Hintergrundfarbe)
Standard: #EEEEEE
Verwendung: Bootstrap .btn-light Klasse mit adaptiven Hover-Effekten

guppy-link-color / guppy-link-hover-color (Link-Farben)
Standard: leer (erbt Bootstrap-Standard)
Verwendung: Überschreibt Bootstrap Link-Farben wenn definiert

sw-color-placeholder (Eingabe-Platzhalter-Farbe)
Standard: #757575
Verwendung: Formular-Eingabe-Platzhalter-Text

sw-color-product-image (Produktbild-Hintergrund)
Standard: #ECEEEF
Verwendung: Produktbild-Wrapper, Produkt-Info-Hintergrund, Produkt-Detail-Galerie-Grid

Badge-Farbsystem ​

Verfügbare Badge-Typen:

  • Neu-Badge (.badge-new): Hintergrund #22C087, Text #FFFFFF, Umrandung #FFFFFF
  • Top-Seller-Badge (.badge-topseller): Hintergrund #F89C00, Text #FFFFFF, Umrandung #FFFFFF
  • Rabatt-Badge (.badge-discount): Hintergrund #E10036, Text #FFFFFF, Umrandung #FFFFFF
  • Badge-Umrandungs-Kontrolle: guppy-badges-show-outline kontrolliert Umrandungs-Display
Guppy Custom Alert-System ​

Das Guppy Theme implementiert ein eigenes Alert-System mit benutzerdefinierten Farben:

  • Erfolg-Alerts: $guppy-alert-color-success (#D3F2E7)
  • Info-Alerts: $guppy-alert-color-info (#CEEDFE)
  • Warnung-Alerts: $guppy-alert-color-warning (#FFEFD4)
  • Gefahr-Alerts: $guppy-alert-color-danger (#F9CCD7)

Features: Textfarb-Schemata, Umrandungs-Kontrolle, benutzerdefinierte SVG-Icons

USP Banner-Farben ​

USP Banner-System:

  • guppy-usp-text-color (#2b3136): USP-Banner Links und Text
  • guppy-usp-hover-color (#0042a0): Link-Hover-Effekte
  • guppy-usp-background-color (#EEEEEE): Top-Bar-Hintergrund

Typografie-System ​

json
{
  "sw-font-size-base": "1rem",
  "sw-h1-font-size": "32px",
  "sw-h2-font-size": "24px",
  "sw-h3-font-size": "20px",
  "sw-h4-font-size": "18px",
  "sw-h5-font-size": "16px",
  "sw-h6-font-size": "15px",
  "sw-h1-line-height": "44px",
  "sw-h2-line-height": "36px",
  "sw-h3-line-height": "32px"
}

Responsive Container ​

json
{
  "guppy-container-width-default": "1400px",
  "guppy-container-width-fluid": "100%",
  "guppy-container-width-sm": "1230px",
  "guppy-container-default-padding-x-xxl": "48px",
  "guppy-container-default-padding-x-xl": "48px",
  "guppy-container-default-padding-x-lg": "48px",
  "guppy-container-default-padding-x-md": "48px",
  "guppy-container-default-padding-x-sm": "24px",
  "guppy-container-default-padding-x-mobile": "10px"
}

Header-Varianten ​

json
{
  "guppy-header": {
    "type": "text",
    "value": "extended",
    "custom": {
      "componentName": "sw-single-select",
      "options": [
        {"value": "default", "label": "Shopware Standard"},
        {"value": "compact", "label": "Guppy Standard"},
        {"value": "extended", "label": "Erweitert"},
        {"value": "simple", "label": "Simpel"}
      ]
    }
  }
}
json
{
  "guppy-footer": "guppy-default",
  "guppy-footer-show-payment-methods": false,
  "guppy-footer-show-shipping-methods": false,
  "guppy-footer-social-media-instagram": "",
  "guppy-footer-social-media-facebook": "",
  "guppy-footer-social-media-linkedin": "",
  "guppy-footer-social-media-youtube": "",
  "guppy-footer-social-media-x": "",
  "guppy-footer-social-media-tiktok": ""
}

Allgemeine Konfigurationen ​

  • Flexible Anpassung von Grautönen: 9 konfigurierbare Grautöne (Gray 100-900)
  • Erweiterte Typographie: Basis-Schriftgröße sowie alle Headline-Größen und Zeilenabstände
  • Responsive Design: Breakpoint-spezifische Einstellungen für alle Gerätetypen
  • Accessibility Features: Konfigurierbare Skip-Links und Focus-Styles

Input & Buttons ​

  • Anpassbares Inputs und Button-Design: Möglichkeit zur Konfiguration von Eckenradien, Rahmenbreiten und Schriftgrößen für Buttons und Inputs, um diese perfekt an das Corporate Design anzupassen.

USP-Banner ​

  • Vielfältige Konfigurationsoptionen: Anpassung von Aussehen und Darstellung des USP-Banners, um einzigartige Verkaufsargumente optimal hervorzuheben. Es lassen sich bis zu 4 Verkaufsargumente deffinieren. Der Inhalt jeder Verkaufsargument wird in einer Höhe von zwei Zeilen begrenzt. Wird der Inhalt länger, werden Tooltips angezeigt (beim Hover).

Anzahl der sichtbaren Verkaufsargumente pro Gerät:

  • Desktop: 1 bis 4 (statische Darstellung)
  • Tablet: 1 bis 2 (als Slider mit einer Endlosschleife)
  • Smartphones: 1 (als Slider mit einer Endlosschleife)

Layout ​

  • Viewport-spezifische Containerbreiten: Festlegung der Containerbreiten für Desktop, Tablet und Mobile.
  • Paddings und Margins: Konfiguration von Abständen für Sections, um ein harmonisches Layout zu schaffen.
  • Kopfzeilen- und Navigationsvarianten: Auswahl verschiedener Designs für Kopfzeilen und Navigationselemente.

Header-Varianten ​

  1. Shopware Standard: Das klassische Shopware Header-Layout
  2. Guppy Standard (Kompakt): Optimiertes, schlankes Header-Design
  3. Erweitert: Header mit zusätzlichen Elementen und erweiterter Funktionalität
  4. Simpel: Minimalistisches Header-Design

Konfiguration:

  • Logo-Höhe: Maximale Höhe des Logos (Standard: 22px)
  • Skip-Links: Konfigurierbare Accessibility-Navigation
  • Top-Bar: Erweiterte Kopfzeile mit zusätzlichen Informationen
  1. Shopware Standard: Klassisches Navigationslayout mit vollständiger Funktionalität
  2. Kompakt: Schlanke Version mit optimierter Darstellung

Features:

  • Vollständige Barrierefreiheit: Keyboard-Navigation und Screen-Reader-Support
  • Responsive Design: Automatische Anpassung an alle Bildschirmgrößen
  • Flyout-Varianten: Verschiedene Dropdown-Styles
  • Category Navigation: Einstufige Kategorienavigation verfügbar

INFO

Die Navigation ist vollständig barrierefrei implementiert und unterstützt Keyboard-Navigation sowie Screen-Reader.

  1. Shopware Standard: Das klassische Shopware Footer-Layout
  2. Guppy Standard: Erweiterter Footer mit individuell konfigurierbaren Sektionen

Die Guppy Footer Variante wurde speziell entwickelt, um den Footer-Bereich eines Shops individueller und vielseitiger zu gestalten. Der Footer-Bereich ist in drei Sektionen geteilt:

Obere Sektion ​
  • Footer-Navigation: Strukturierte Navigation mit Kategorien
  • Responsive Accordion: Mobile Darstellung als aufklappbare Bereiche
  • Barrierefreie Navigation: Vollständige Keyboard-Unterstützung
Mittlere Sektion ​

Konfigurierbare Blöcke mit folgenden Optionen:

  1. Zahlungs- und Versandarten

    • Einzeln aktivierbar/deaktivierbar
    • Automatische Icon-Integration
    • Responsive Darstellung

  2. Individuelle Sektion

    • Bis zu 4 benutzerdefinierte Bilder
    • Konfigurierbare Links
    • Alt-Text-Unterstützung
    • Responsive Anordnung

  3. Social-Media-Links

    • Unterstützte Plattformen: Instagram, Threads, LinkedIn, YouTube, X (Twitter), Facebook, TikTok, Xing
    • Icon-Integration: Automatische Icons für alle Plattformen
    • Accessibility: Aria-Labels und Screen-Reader-Unterstützung
    • Responsive Design: Optimierte Darstellung auf allen Geräten
Untere Sektion ​
  • Sprachumschalter: Automatische Anzeige bei mehrsprachigen Shops
  • Rechtliche Hinweise: Links zu Datenschutz, AGB, Impressum
  • Copyright-Hinweise: Konfigurierbare Copyright-Informationen
json
{
  "guppy-footer-border-top-color": "default-border",
  "guppy-footer-show-payment-methods": false,
  "guppy-footer-show-shipping-methods": false,
  "guppy-footer-custom-section-image-1": "",
  "guppy-footer-custom-section-image-1-link": "",
  "guppy-footer-social-media-instagram": "",
  "guppy-footer-social-media-facebook": "",
  "guppy-footer-social-media-linkedin": "",
  "guppy-footer-social-media-youtube": ""
}

Login & Registrierung ​

  • Kompakte Varianten: Auswahl einer kompakten Darstellung für Login- und Registrierungsseiten.

Warenkorb & Checkout ​

Checkout-Varianten ​

  1. Guppy Standard: Optimiertes Standard-Layout
  2. Kompakt: Vereinfachte, platzsparende Darstellung

Features ​

  • Verbesserte Benutzerführung: Klare Schritt-für-Schritt-Navigation
  • Responsive Design: Optimiert für alle Gerätegrößen
  • Erweiterte Validierung: Client-Side-Formularvalidierung
  • Progress-Tracking: Visueller Fortschritt durch Checkout-Schritte
  • Auto-Save: Automatisches Speichern von Formular-Daten
  • Accessibility: Vollständige Tastaturnavigation

Warenkorb-Optimierungen ​

  • Quantity-Selector: Erweiterte Mengenauswahl mit Validierung
  • Line-Item-Management: Verbesserte Produkt-Bearbeitung
  • Delivery-Information: Dynamische Lieferinformationen
  • Offcanvas-Cart: Optimierte Seitenleiste

Konfiguration ​

json
{
  "guppy-checkout": "compact",
  "guppy-detail-buybox-hide-quantity-buttons": false,
  "guppy-detail-buybox-contact": false,
  "guppy-detail-buybox-contact-hotline": false
}

Kategorie & Produktdarstellung ​

Produktbox-Varianten ​

  1. Shopware Standard: Klassisches Produktbox-Layout
  2. Guppy Standard: Optimierte, barrierefreie Produktbox

Produktbild-Konfiguration ​

  • Schutz-Rahmen: Produktbild mit Schutzzone zur Produktbox
  • Füllmethode:
    • Contain: Bild behält Proportionen bei
    • Cover: Bild füllt die komplette Box aus
  • Aspect-Ratio: Standardmäßig 10:9 Seitenverhältnis
  • Hintergrundfarbe: Konfigurierbare Produktbild-Hintergrundfarbe

Guppy Standard Produktbox ​

Die Guppy-Standard-Produktbox ist auf Barrierefreiheit optimiert:

Features:

  • Vollständige Klickbarkeit: Gesamte Box ist klickbar
  • Keyboard-Navigation: Vollständige Tastaturunterstützung
  • Focus-Management: Korrekte Focus-Behandlung
  • Screen-Reader: Optimierte Beschriftungen
  • Touch-Optimierung: Ausreichende Touch-Targets
  • Responsive Design: Optimiert für alle Bildschirmgrößen

Konfiguration:

json
{
  "guppy-productcard-config": "guppy-default",
  "guppy-productcard-protective-frame": true,
  "guppy-productcard-image-object-fit": "contain"
}

Erweiterte Produktbild-Einstellungen ​

  • Lazy Loading: Automatisches Lazy Loading für bessere Performance
  • Responsive Images: Automatische Bildoptimierung
  • Alt-Text-Management: Automatische Alt-Text-Generierung
  • Zoom-Integration: Nahtlose Zoom-Funktionalität

Produktdetailseite ​

Buybox-Konfiguration ​

  • Produktname & Hersteller: Anzeige in der Buybox konfigurierbar
  • Buybox-Styling: Verschiedene Darstellungsvarianten
    • Standard: Ohne Rahmen oder Hintergrund
    • Mit Rahmen: Rahmen um die gesamte Buybox
    • Mit Hintergrund: Grauer Hintergrund für bessere Abgrenzung
  • Kontaktinformationen: Optional anzeigbare Kontaktdaten
  • Quantity-Selector: Konfigurierbare Plus/Minus-Buttons

Galerie-Optionen ​

  • Scroll-Verhalten: Bildbereich kann mit dem Inhalt mitscrollen
  • Zoom-Integration: Erweiterte Zoom-Funktionalität
  • Thumbnail-Navigation: Synchronisierte Thumbnail-Ansicht
  • Touch-Gestures: Erweiterte Touch-Interaktionen

Tab-Konfiguration ​

  • Eigenschaften-Tab: Produkteigenschaften als separater Tab
  • Responsive Tabs: Optimierte Darstellung auf allen Geräten
  • Accessibility: Vollständige Tastaturnavigation

Konfiguration ​

json
{
  "guppy-detail-gallery-scroll": false,
  "guppy-detail-buybox-styling": "default",
  "guppy-detail-headline-buybox": true,
  "guppy-detail-buybox-contact": false,
  "guppy-detail-buybox-contact-hotline": false,
  "guppy-detail-buybox-hide-quantity-buttons": false,
  "guppy-detail-display-properties-as-tab": false
}

Badges ​

Badge-Konfiguration ​

  • Outline-Unterstützung: Aktivierbare Rahmen für alle Badges
  • Flexible Farbgestaltung: Individuelle Farben für jeden Badge-Typ
  • Responsive Design: Optimierte Darstellung auf allen Geräten

Badge-Typen ​

New Badge ​
  • Hintergrundfarbe: Standard #22C087 (Success Green)
  • Textfarbe: Standard #FFFFFF (Weiß)
  • Outline-Farbe: Konfigurierbar (Standard #FFFFFF)
Top Seller Badge ​
  • Hintergrundfarbe: Standard #F89C00 (Orange)
  • Textfarbe: Standard #FFFFFF (Weiß)
  • Outline-Farbe: Konfigurierbar (Standard #FFFFFF)
Discount Badge ​
  • Hintergrundfarbe: Standard #E10036 (Rot)
  • Textfarbe: Standard #FFFFFF (Weiß)
  • Outline-Farbe: Konfigurierbar (Standard #FFFFFF)

Konfiguration ​

json
{
  "guppy-badges-show-outline": false,
  "guppy-badges-new-background-color": "#22C087",
  "guppy-badges-new-color": "#FFFFFF",
  "guppy-badges-new-outline-color": "#FFFFFF",
  "guppy-badges-top-seller-background-color": "#F89C00",
  "guppy-badges-top-seller-color": "#FFFFFF",
  "guppy-badges-discount-background-color": "#E10036",
  "guppy-badges-discount-color": "#FFFFFF"
}

Accessibility ​

  • Kontrast-Optimierung: Automatische Kontrast-Prüfung
  • Screen-Reader: Semantische Badge-Beschriftungen
  • Color-Blind-Friendly: Zusätzliche visuelle Indikatoren

Icon-System ​

Icon-Integration ​

Icons können direkt in das Theme mit selben Namen unter src/Resources/app/storefront/dist/assets/icon hochgeladen werden und das Guppy Theme überschreibt automatisch alle verwendeten Icons im Shop. Somit kann die Standard Shopware Funktion {% sw_icon %} auch ohne Namespace verwendet werden:

html
{% sw_icon 'stack' %}

Icon-Konfiguration ​

Verfügbare Parameter:

ParameterBeschreibungBeispielAnmerkungen
sizeLegt die Größe des Icons festsize="24"Standard: 22px
packWählt das Icon-Pack auspack="custom"Verschiedene Icon-Sets
colorLegt die Farbe des Icons festcolor="primary"Bootstrap-Varianten oder CSS-Farben
classDefiniert CSS-Klassenclass="icon-large"Zusätzliche Styling-Optionen

Icon-Variablen ​

scss
$icon-base-size: 22px !default;
$icon-base-color: currentColor !default;
$icon-accessibility-touch-size: 44px !default;

Accessibility ​

  • Touch-Targets: Mindestgröße von 44px für Touch-Interaktionen
  • Color-Inheritance: Icons erben die Textfarbe des Elternelements
  • Screen-Reader: Automatische Alt-Text-Generierung

Beispiele ​

html
<!-- Standard Icon -->
{% sw_icon 'arrow-right' %}

<!-- Großes Icon -->
{% sw_icon 'search' with { size: '32' } %}

<!-- Farbiges Icon -->
{% sw_icon 'heart' with { color: 'danger' } %}

<!-- Icon mit CSS-Klasse -->
{% sw_icon 'star' with { class: 'icon-favorite' } %}

Barrierefreiheit ​

Mit Guppy legen wir großen Wert auf Barrierefreiheit und arbeiten kontinuierlich daran, das Theme vollständig barrierefrei zu gestalten.

Darüber hinaus stellen wir umfassende Accessibility Guidelines bereit, die dir dabei helfen, Barrierefreiheit in deinem Shopware-Projekt umzusetzen. Unsere Richtlinien findest du unter dmf-accessibility-guidelines.vercel.app.

Implementierte Barrierefreiheits-Features ​

Focus-Management ​

  • Einheitliche Focus-Styles: Konsistente visuelle Fokusindikatoren
  • Focus-Mixin: Wiederverwendbare SCSS-Komponente für Focus-Styles
  • Focus-Visible: Moderne :focus-visible Pseudo-Klasse
  • Box-Shadow Integration: Zusätzliche visuelle Hervorhebung
  • Skip to Main Content: Direkter Sprung zum Hauptinhalt
  • Skip to Navigation: Sprung zur Hauptnavigation
  • Skip to Search: Sprung zur Suchfunktion
  • Theme-Konfiguration: Aktivierung über Admin-Panel

Tastaturnavigation ​

  • Vollständige Keyboard-Unterstützung: Alle interaktiven Elemente
  • Logische Tab-Reihenfolge: Intuitive Navigation
  • Escape-Key-Unterstützung: Schließen von Modals und Overlays

Screen-Reader-Unterstützung ​

  • ARIA-Labels: Aussagekräftige Beschreibungen
  • Semantic HTML: Korrekte HTML-Struktur
  • Live-Regions: Dynamische Inhaltsänderungen

Touch-Optimierung ​

  • 44px Mindestgröße: Ausreichende Touch-Targets
  • Touch-Gestures: Native Touch-Unterstützung
  • Hover-Alternative: Touch-freundliche Interaktionen

Bereits optimierte Bereiche ​

  • Navigation: Vollständige Keyboard- und Screen-Reader-Unterstützung
  • Produktboxen: Optimierte Fokusführung und Beschriftung
  • Footer: Responsive Accordion-Navigation
  • USP-Banner: Tooltip-System für Screenreader
  • Formulare: Erweiterte Validierung und Fehlermeldungen
  • Slider: Barrierefreie Slider-Navigation
  • Checkout: Optimierte Benutzerführung

Technische Implementierung ​

SCSS-Mixins ​

scss
@mixin focus-style {
    outline-offset: $focus-outline-offset;
    outline: $focus-outline-color solid $focus-outline-width;
    box-shadow: $focus-outline-box-shadow;
}
scss
.skip-link {
    position: absolute;
    left: -10000px;
    &:focus {
        left: 0;
        z-index: 1010;
    }
}

JavaScript-Integration ​

javascript
// Automatisches Focus-Management
this.el.addEventListener('keydown', (event) => {
    if (event.key === 'Escape') {
        this._handleEscape();
    }
});

JavaScript-Plugins ​

Das Guppy Theme erweitert Shopware um moderne JavaScript-Funktionalitäten:

Splide-Slider ​

  • Ersetzt Tiny-Slider: Moderne Alternative mit besserer Performance
  • Vollständige Barrierefreiheit: Keyboard-Navigation und Screen-Reader-Support
  • Responsive Design: Automatische Anpassung an alle Bildschirmgrößen
  • Touch-Unterstützung: Native Touch-Gesten für mobile Geräte
  • Autoplay-Management: Intelligente Autoplay-Behandlung

Mehr Details: Splide-Slider

Weitere JavaScript-Plugins ​

  • USP Banner Plugin: Interaktive USP-Banner mit Tooltip-Funktionalität
  • Product Box Click Plugin: Verbesserte Produktbox-Interaktionen
  • Custom Checkout Plugin: Optimierte Checkout-Erfahrung
  • Quantity Selector Plugin: Erweiterte Mengenauswahl
  • Remove Extra H1 Plugin: SEO-Optimierung durch H1-Management
  • Delivery Information Plugin: Dynamische Lieferinformationen
  • Collapse Footer Plugin: Responsive Footer-Navigation

Mehr Details: JavaScript-Plugins Dokumentation

Copyright © 2025-heute digital.manufaktur GmbH