Konfigurationsreferenz

Diese Referenz enthält alle verfügbaren Theme-Konfigurationsoptionen des Guppy Themes, organisiert nach Kategorien.

Inhalt dieser Seite:

Zugriff auf die Konfiguration

Alle Einstellungen sind über das Shopware Admin-Panel verfügbar: Inhalte > Themes > Guppy Theme

Layout & Container

Container-Breiten

Konfiguration	Typ	Standard	Beschreibung
`guppy-container-width-default`	text	`1400px`	Standardbreite für Container
`guppy-container-width-fluid`	text	`100%`	Fluid-Container Breite
`guppy-container-width-sm`	text	`1230px`	Kleine Container-Breite

Container-Paddings

Breakpoint	Konfiguration	Standard
XXL	`guppy-container-default-padding-x-xxl`	`48px`
XL	`guppy-container-default-padding-x-xl`	`48px`
LG	`guppy-container-default-padding-x-lg`	`48px`
MD	`guppy-container-default-padding-x-md`	`48px`
SM	`guppy-container-default-padding-x-sm`	`24px`
Mobile	`guppy-container-default-padding-x-mobile`	`10px`

CMS-Section Abstände

Das Guppy Theme erweitert die Shopware Erlebniswelten um zusätzliche Padding-Optionen für Sections. Diese Einstellungen sind direkt in der Section-Konfiguration im Erlebniswelten-Editor verfügbar.

Horizontales Padding

Steuert den horizontalen Abstand (links/rechts) der Section.

Konfiguration	Typ	Standard	Beschreibung
`guppy-cms-section-padding-x`	text	`48px`	Horizontales Padding für Sections

Vertikales Padding

Steuert die vertikalen Abstände (oben/unten) der Section.

Konfiguration	Typ	Standard	Beschreibung
`guppy-cms-section-padding-y`	text	`48px`	Standard vertikales Padding
`guppy-cms-section-padding-y-2x`	text	`96px`	Extra großes Padding (2x)

Section-Optionen im Erlebniswelten-Editor

Beim Bearbeiten einer Section im Erlebniswelten-Editor stehen folgende Optionen zur Verfügung:

Option	Beschreibung
Horizontales Padding	Aktiviert/deaktiviert das horizontale Padding der Section
Padding Oben & Unten	Standard vertikales Padding oben und unten
Extra Groß (2x)	Doppeltes vertikales Padding für mehr Abstand
Padding Oben	Nur Padding oben (mit Option "Kein Abstand")
Padding Unten	Nur Padding unten (mit Option "Kein Abstand")

Verwendung

Die Padding-Optionen ermöglichen eine flexible Gestaltung der Abstände zwischen Sections:

┌─────────────────────────────────────────┐
│           Padding Oben (48px)           │
│  ┌───────────────────────────────────┐  │
│  │                                   │  │
│  │         Section-Inhalt            │  │
│  │                                   │  │
│  └───────────────────────────────────┘  │
│          Padding Unten (48px)           │
└─────────────────────────────────────────┘
     ↑                               ↑
  Padding X                       Padding X
   (48px)                          (48px)

Anpassung im Child-Theme

scss

// overrides.scss
$guppy-cms-section-padding-x: 32px;
$guppy-cms-section-padding-y: 64px;
$guppy-cms-section-padding-y-2x: 128px;

Header-Varianten

Konfiguration	Typ	Optionen	Standard
`guppy-header`	select	`default`, `compact`, `extended`, `simple`	`extended`

Varianten-Beschreibung:

default: Shopware Standard-Header
compact: Guppy Standard - Kompakte Variante
extended: Erweiterte Variante mit Top-Bar
simple: Minimalistische Variante

Header-Optionen

Konfiguration	Typ	Standard	Beschreibung
`guppy-header-max-height`	text	`22px`	Maximale Logo-Höhe
`guppy-header-skip-to-main-content`	boolean	`false`	Skip-Link zum Hauptinhalt
`guppy-header-skip-to-main-nav`	boolean	`false`	Skip-Link zur Navigation
`guppy-header-skip-to-search`	boolean	`false`	Skip-Link zur Suche

Konfiguration	Typ	Optionen	Standard
`guppy-footer`	select	`default`, `guppy-default`	`guppy-default`

Konfiguration	Typ	Standard	Beschreibung
`guppy-footer-border-top-color`	text	`default-border`	Obere Rahmenfarbe
`guppy-footer-show-payment-methods`	boolean	`false`	Zahlungsarten anzeigen
`guppy-footer-show-shipping-methods`	boolean	`false`	Versandarten anzeigen

Häufig kommt es vor, dass sich Versand- und Zahlungsarten im Footer mit demselben Logo wiederfinden. Zum Beispiel "DHL" und "DHL International" haben beide ein DHL-Logo. Um dies eigenständig steuern zu können, wird mit der Installation von Guppy ein Set an Zusatzfeldern erstellt: guppy_footer_options

Folgende Zusatzfelder können an einer Versand- oder Zahlungsart gepflegt werden:

Bezeichnung	Typ	Beschreibung
`guppy_hide_in_footer`	boolean	Wenn aktiv, wird die Versand-/Zahlungsart im Footer nicht angezeigt.
`guppy_alternative_label`	text	Wenn hier Inhalt angegeben ist, wird dieser anstelle des Namens der Methode beim Hover auf dem Bild angezeigt.

Konfiguration	Typ	Standard	Beschreibung
`guppy-footer-social-media-instagram`	text	`""`	Instagram-URL
`guppy-footer-social-media-facebook`	text	`""`	Facebook-URL
`guppy-footer-social-media-linkedin`	text	`""`	LinkedIn-URL
`guppy-footer-social-media-youtube`	text	`""`	YouTube-URL
`guppy-footer-social-media-x`	text	`""`	X (Twitter)-URL
`guppy-footer-social-media-tiktok`	text	`""`	TikTok-URL

Custom Section Images

Konfiguration	Typ	Standard	Beschreibung
`guppy-footer-custom-section-image-1`	media	`""`	Custom Bild 1
`guppy-footer-custom-section-image-1-link`	text	`""`	Link für Bild 1
`guppy-footer-custom-section-image-2`	media	`""`	Custom Bild 2
`guppy-footer-custom-section-image-2-link`	text	`""`	Link für Bild 2
(bis Bild 4)	...	...	...

Basis-Konfiguration

Konfiguration	Typ	Standard	Beschreibung
`guppy-usp-active`	boolean	`false`	USP Banner aktivieren
`guppy-usp-layout`	select	`benefits`	Layout-Typ

Benefits Layout

Konfiguration	Typ	Standard	Beschreibung
`guppy-usp-layout-benefit1`	text	`""`	Erstes Verkaufsargument
`guppy-usp-layout-benefit2`	text	`""`	Zweites Verkaufsargument
`guppy-usp-layout-benefit3`	text	`""`	Drittes Verkaufsargument
`guppy-usp-layout-benefit4`	text	`""`	Viertes Verkaufsargument

Standard Layout

Konfiguration	Typ	Standard	Beschreibung
`guppy-usp-layout-text`	text	`""`	Banner-Text
`guppy-usp-layout-link`	text	`""`	Banner-Link
`guppy-usp-layout-newTab`	boolean	`false`	In neuem Tab öffnen

Produktkarten

Produktkarten-Varianten

Konfiguration	Typ	Optionen	Standard
`guppy-productcard-config`	select	`default`, `guppy-default`	`guppy-default`

Produktbild-Konfiguration

Konfiguration	Typ	Standard	Beschreibung
`guppy-productcard-protective-frame`	boolean	`true`	Schutzrahmen um Produktbild
`guppy-productcard-image-object-fit`	select	`contain`	Bild-Füllmethode (`contain`, `cover`)

Produktdetailseite

Buybox-Konfiguration

Konfiguration	Typ	Standard	Beschreibung
`guppy-detail-buybox-styling`	select	`default`	Buybox-Design (`default`, `border`, `background`)
`guppy-detail-headline-buybox`	boolean	`true`	Produktname in Buybox
`guppy-detail-buybox-contact`	boolean	`false`	Kontaktinformationen anzeigen
`guppy-detail-buybox-contact-hotline`	boolean	`false`	Hotline-Nummer anzeigen
`guppy-detail-buybox-hide-quantity-buttons`	boolean	`false`	Mengen-Buttons ausblenden
`guppy-detail-mobile-title-above-gallery`	boolean	`false`	Produkttitel auf Mobilgeräten über der Galerie anzeigen

Galerie-Konfiguration

Konfiguration	Typ	Standard	Beschreibung
`guppy-detail-gallery-scroll`	boolean	`false`	Galerie scrollt mit Inhalt

Tab-Konfiguration

Konfiguration	Typ	Standard	Beschreibung
`guppy-detail-display-properties-as-tab`	boolean	`false`	Eigenschaften als separater Tab

Checkout

Checkout-Varianten

Konfiguration	Typ	Optionen	Standard
`guppy-checkout`	select	`default`, `compact`	`compact`

Konfiguration	Typ	Optionen	Standard
`guppy-login-register`	select	`default`, `compact`	`default`

Badges

Badge-Basis-Konfiguration

Konfiguration	Typ	Standard	Beschreibung
`guppy-badges-show-outline`	boolean	`false`	Outline-Rahmen für alle Badges

New Badge

Konfiguration	Typ	Standard
`guppy-badges-new-background-color`	color	`#22C087`
`guppy-badges-new-color`	color	`#FFFFFF`
`guppy-badges-new-outline-color`	color	`#FFFFFF`

Top Seller Badge

Konfiguration	Typ	Standard
`guppy-badges-top-seller-background-color`	color	`#F89C00`
`guppy-badges-top-seller-color`	color	`#FFFFFF`
`guppy-badges-top-seller-outline-color`	color	`#FFFFFF`

Discount Badge

Konfiguration	Typ	Standard
`guppy-badges-discount-background-color`	color	`#E10036`
`guppy-badges-discount-color`	color	`#FFFFFF`
`guppy-badges-discount-outline-color`	color	`#FFFFFF`

Alerts

Alert-Farben

Konfiguration	Typ	Standard	Beschreibung
`guppy-alert-color-success`	color	`#D3F2E7`	Erfolg-Hintergrundfarbe
`guppy-alert-color-success-text`	select	`dark`	Erfolg-Textfarbe
`guppy-alert-color-info`	color	`#CEEDFE`	Info-Hintergrundfarbe
`guppy-alert-color-info-text`	select	`dark`	Info-Textfarbe
`guppy-alert-color-warning`	color	`#FFEFD4`	Warnung-Hintergrundfarbe
`guppy-alert-color-warning-text`	select	`dark`	Warnung-Textfarbe
`guppy-alert-color-danger`	color	`#FDE2E7`	Fehler-Hintergrundfarbe
`guppy-alert-color-danger-text`	select	`dark`	Fehler-Textfarbe

Alert-Optionen

Konfiguration	Typ	Standard	Beschreibung
`guppy-alert-alert-outline-active`	boolean	`false`	Outline-Rahmen für Alerts

Farbsystem

Basis-Farben

Konfiguration	Typ	Standard	Beschreibung
`sw-color-brand-primary`	color	`#215AFF`	Primärfarbe
`sw-color-brand-secondary`	color	`#0B1845`	Sekundärfarbe

Grautöne

Konfiguration	Standard
`sw-color-gray-100`	`#F9F9F9`
`sw-color-gray-200`	`#EEEEEE`
`sw-color-gray-300`	`#BCC1C7`
`sw-color-gray-400`	`#CED4DA`
`sw-color-gray-500`	`#ADB5BD`
`sw-color-gray-600`	`#798490`
`sw-color-gray-700`	`#495057`
`sw-color-gray-800`	`#4A545B`
`sw-color-gray-900`	`#212529`

Typografie

Basis-Schriftgrößen

Konfiguration	Typ	Standard
`sw-font-size-base`	text	`1rem`

Headline-Größen

Konfiguration	Standard
`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`

Zeilenhöhen

Konfiguration	Standard
`sw-h1-line-height`	`44px`
`sw-h2-line-height`	`36px`
`sw-h3-line-height`	`32px`

Buttons & Inputs

Button-Konfiguration

Konfiguration	Typ	Standard	Beschreibung
`sw-input-btn-font-size`	text	`16px`	Button-Schriftgröße
`sw-input-btn-border-radius`	text	`4px`	Button-Eckenrundung
`sw-input-btn-font-weight`	select	`normal`	Button-Schriftgewicht

Verwendung der Konfiguration

In Templates

twig

{% if theme_config('guppy-header') == 'extended' %}
    {# Erweiterte Header-Logik #}
{% endif %}

In SCSS

scss

// Über CSS Custom Properties verfügbar
.custom-component {
    background-color: var(--sw-color-brand-primary);
    font-size: var(--sw-font-size-base);
}

Prüfung der aktuellen Konfiguration

Die aktuell gesetzten Werte können im Shopware Admin unter: Inhalte > Themes > [Verkaufskanal] > Konfiguration eingesehen und geändert werden.

Konfigurationsreferenz ​

Zugriff auf die Konfiguration ​

Layout & Container ​

Container-Breiten ​

Container-Paddings ​

CMS-Section Abstände ​

Horizontales Padding ​

Vertikales Padding ​

Section-Optionen im Erlebniswelten-Editor ​

Verwendung ​

Anpassung im Child-Theme ​

Header ​

Header-Varianten ​

Header-Optionen ​

Footer ​

Footer-Varianten ​

Footer-Konfiguration ​

Footer Zusatzfelder ​

Social Media Links ​

Custom Section Images ​

USP Banner ​

Basis-Konfiguration ​

Benefits Layout ​

Standard Layout ​

Produktkarten ​

Produktkarten-Varianten ​

Produktbild-Konfiguration ​

Produktdetailseite ​

Buybox-Konfiguration ​

Galerie-Konfiguration ​

Tab-Konfiguration ​

Checkout ​

Checkout-Varianten ​

Login & Register ​

Login-Varianten ​

Badges ​

Badge-Basis-Konfiguration ​

New Badge ​

Top Seller Badge ​

Discount Badge ​

Alerts ​

Alert-Farben ​

Alert-Optionen ​

Farbsystem ​

Basis-Farben ​

Grautöne ​

Typografie ​

Basis-Schriftgrößen ​

Headline-Größen ​

Zeilenhöhen ​

Buttons & Inputs ​

Button-Konfiguration ​

Verwendung der Konfiguration ​

In Templates ​

In SCSS ​

Prüfung der aktuellen Konfiguration ​