Konfigurationsschema

Vollständige Referenz aller Felder aus theme.json des DmfGuppyTheme, gruppiert nach Bereich. Zugriff im Admin: Inhalte → Themes → Guppy Theme → Konfigurieren.

• Layout & Container
  • Container-Breiten
  • Container-Padding
• CMS-Section-Padding
• Header
  • Header-Variante
  • Header-Optionen
• Footer
  • Footer-Variante
  • Footer-Konfiguration
  • Zusatzfelder für Versand-/Zahlungsarten
  • Social-Media-Links
  • Custom-Section-Bilder (1–4)
• USP-Banner
  • Basis
  • Benefits-Layout
  • Standard-Layout
• Productcards
• Productdetail
  • Buybox
  • Galerie und Tabs
• Checkout & Login
• Badges
  • Basis
  • Neu-Badge
  • Top-Seller-Badge
  • Discount-Badge
• Alerts
  • Farben
  • Optionen
• Farbsystem
  • Brand
  • Graustufen
• Typografie
  • Schriftgrößen
  • Zeilenhöhen
• Buttons & Inputs
• Verwendung in Code
  • In Twig
  • In SCSS
• Verwandt

Layout & Container

Container-Breiten

Konfiguration	Typ	Default	Beschreibung
guppy-container-width-default	text	1400px	Standard-Container
guppy-container-width-fluid	text	100%	Fluid-Container
guppy-container-width-sm	text	1230px	kleine Container

Container-Padding

Breakpoint	Konfiguration	Default
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-Padding

Erweitert Erlebniswelten-Sections um zusätzliche Padding-Optionen, direkt im Section-Settings-Modal:

Konfiguration	Typ	Default	Beschreibung
guppy-cms-section-padding-x	text	48px	horizontales Padding
guppy-cms-section-padding-y	text	48px	vertikales Standard-Padding
guppy-cms-section-padding-y-2x	text	96px	extra vertikales Padding (2x)

Section-Optionen im Editor:

Option	Wirkung
Horizontales Padding	aktivieren/deaktivieren
Padding Oben & Unten	Standard-Y-Padding
Extra Groß (2x)	doppeltes Y-Padding
Padding Oben	nur oben (mit Option Kein Abstand)
Padding Unten	nur unten (mit Option Kein Abstand)

Anpassung im Child-Theme:

$guppy-cms-section-padding-x:    32px;
$guppy-cms-section-padding-y:    64px;
$guppy-cms-section-padding-y-2x: 128px;

Header

Header-Variante

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

Variante	Beschreibung
default	Shopware-Standard-Header
compact	Guppy Standard, kompakt
extended	mit Top-Bar
simple	minimalistisch

Header-Optionen

Konfiguration	Typ	Default	Wirkung
guppy-header-max-height	text	22px	maximale Logo-Höhe
guppy-header-skip-to-main-content	bool	false	Skip-Link zum Hauptinhalt
guppy-header-skip-to-main-nav	bool	false	Skip-Link zur Navigation
guppy-header-skip-to-search	bool	false	Skip-Link zur Suche

Footer

Footer-Variante

Konfiguration	Typ	Optionen	Default
guppy-footer	select	default, guppy-default	guppy-default

Footer-Konfiguration

Konfiguration	Typ	Default	Wirkung
guppy-footer-border-top-color	text	default-border	obere Rahmenfarbe
guppy-footer-show-payment-methods	bool	false	Zahlungsarten anzeigen
guppy-footer-show-shipping-methods	bool	false	Versandarten anzeigen

Zusatzfelder für Versand-/Zahlungsarten

DmfGuppyTheme legt das Custom-Field-Set guppy_footer_options an:

Feld	Typ	Wirkung
guppy_hide_in_footer	bool	wenn aktiv: Methode nicht im Footer anzeigen
guppy_alternative_label	text	überschreibt den Tooltip-Namen beim Hover

Social-Media-Links

Konfiguration	Typ
guppy-footer-social-media-instagram	text
guppy-footer-social-media-facebook	text
guppy-footer-social-media-linkedin	text
guppy-footer-social-media-youtube	text
guppy-footer-social-media-x	text
guppy-footer-social-media-tiktok	text

Custom-Section-Bilder (1–4)

Konfiguration	Typ
guppy-footer-custom-section-image-1	media
guppy-footer-custom-section-image-1-link	text
guppy-footer-custom-section-image-2	media
guppy-footer-custom-section-image-2-link	text
(bis Bild 4)	…

USP-Banner

Basis

Konfiguration	Typ	Default
guppy-usp-active	bool	false
guppy-usp-layout	select	benefits

Benefits-Layout

Konfiguration	Typ
guppy-usp-layout-benefit1	text
guppy-usp-layout-benefit2	text
guppy-usp-layout-benefit3	text
guppy-usp-layout-benefit4	text

Standard-Layout

Konfiguration	Typ	Default
guppy-usp-layout-text	text	""
guppy-usp-layout-link	text	""
guppy-usp-layout-newTab	bool	false

Productcards

Konfiguration	Typ	Optionen	Default
guppy-productcard-config	select	default, guppy-default	guppy-default
guppy-productcard-protective-frame	bool	–	true
guppy-productcard-image-object-fit	select	contain, cover	contain

Productdetail

Buybox

Konfiguration	Typ	Default	Wirkung
guppy-detail-buybox-styling	select	default	default, border, background
guppy-detail-headline-buybox	bool	true	Produktname in Buybox
guppy-detail-buybox-contact	bool	false	Kontaktinfo anzeigen
guppy-detail-buybox-contact-hotline	bool	false	Hotline anzeigen
guppy-detail-buybox-hide-quantity-buttons	bool	false	Mengen-Buttons ausblenden
guppy-detail-mobile-title-above-gallery	bool	false	Produkttitel über der Galerie auf Mobile

Galerie und Tabs

Konfiguration	Typ	Default	Wirkung
guppy-detail-gallery-scroll	bool	false	Galerie scrollt mit Inhalt
guppy-detail-display-properties-as-tab	bool	false	Eigenschaften als separater Tab

Checkout & Login

Konfiguration	Typ	Optionen	Default
guppy-checkout	select	default, compact	compact
guppy-login-register	select	default, compact	default

Badges

Basis

Konfiguration	Typ	Default
guppy-badges-show-outline	bool	false

Neu-Badge

Konfiguration	Typ	Default
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	Default
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	Default
guppy-badges-discount-background-color	color	#E10036
guppy-badges-discount-color	color	#FFFFFF
guppy-badges-discount-outline-color	color	#FFFFFF

Alerts

Farben

Konfiguration	Typ	Default	Wirkung
guppy-alert-color-success	color	#D3F2E7	Erfolg-Hintergrund
guppy-alert-color-success-text	select	dark	Erfolg-Textfarbe
guppy-alert-color-info	color	#CEEDFE	Info-Hintergrund
guppy-alert-color-info-text	select	dark	Info-Textfarbe
guppy-alert-color-warning	color	#FFEFD4	Warnung-Hintergrund
guppy-alert-color-warning-text	select	dark	Warnung-Textfarbe
guppy-alert-color-danger	color	#FDE2E7	Fehler-Hintergrund
guppy-alert-color-danger-text	select	dark	Fehler-Textfarbe

Optionen

Konfiguration	Typ	Default	Wirkung
guppy-alert-alert-outline-active	bool	false	Outline-Rahmen für Alerts

Farbsystem

Brand

Konfiguration	Typ	Default	Verwendung
sw-color-brand-primary	color	#215AFF	Primärfarbe
sw-color-brand-secondary	color	#0B1845	Sekundärfarbe

Graustufen

Konfiguration	Default
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

Schriftgrößen

Konfiguration	Typ	Default
sw-font-size-base	text	1rem
sw-h1-font-size	text	32px
sw-h2-font-size	text	24px
sw-h3-font-size	text	20px
sw-h4-font-size	text	18px
sw-h5-font-size	text	16px
sw-h6-font-size	text	15px

Zeilenhöhen

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

Buttons & Inputs

Konfiguration	Typ	Default	Wirkung
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 in Code

In Twig

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

In SCSS

Theme-Werte sind als CSS Custom Properties verfügbar:

.custom-component {
    background-color: var(--sw-color-brand-primary);
    font-size: var(--sw-font-size-base);
}

Verwandt

• Theme-Variablen: SCSS-Pendant der Konfigurationsfelder.
• Twig-Blöcke: Override-Pfade in Templates.
• Twig-Overrides: Verwendung in eigenen Templates.
• Variablen & Tokens: SCSS-Architektur und Mixins.