Guppy Docs

Deutsch

English

Deutsch

English

Appearance

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 ​

KonfigurationTypStandardBeschreibung
guppy-container-width-defaulttext1400pxStandardbreite für Container
guppy-container-width-fluidtext100%Fluid-Container Breite
guppy-container-width-smtext1230pxKleine Container-Breite

Container-Paddings ​

BreakpointKonfigurationStandard
XXLguppy-container-default-padding-x-xxl48px
XLguppy-container-default-padding-x-xl48px
LGguppy-container-default-padding-x-lg48px
MDguppy-container-default-padding-x-md48px
SMguppy-container-default-padding-x-sm24px
Mobileguppy-container-default-padding-x-mobile10px

Header-Varianten ​

KonfigurationTypOptionenStandard
guppy-headerselectdefault, compact, extended, simpleextended

Varianten-Beschreibung:

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

Header-Optionen ​

KonfigurationTypStandardBeschreibung
guppy-header-max-heighttext22pxMaximale Logo-Höhe
guppy-header-skip-to-main-contentbooleanfalseSkip-Link zum Hauptinhalt
guppy-header-skip-to-main-navbooleanfalseSkip-Link zur Navigation
guppy-header-skip-to-searchbooleanfalseSkip-Link zur Suche
KonfigurationTypOptionenStandard
guppy-footerselectdefault, guppy-defaultguppy-default
KonfigurationTypStandardBeschreibung
guppy-footer-border-top-colortextdefault-borderObere Rahmenfarbe
guppy-footer-show-payment-methodsbooleanfalseZahlungsarten anzeigen
guppy-footer-show-shipping-methodsbooleanfalseVersandarten anzeigen
KonfigurationTypStandardBeschreibung
guppy-footer-social-media-instagramtext""Instagram-URL
guppy-footer-social-media-facebooktext""Facebook-URL
guppy-footer-social-media-linkedintext""LinkedIn-URL
guppy-footer-social-media-youtubetext""YouTube-URL
guppy-footer-social-media-xtext""X (Twitter)-URL
guppy-footer-social-media-tiktoktext""TikTok-URL

Custom Section Images ​

KonfigurationTypStandardBeschreibung
guppy-footer-custom-section-image-1media""Custom Bild 1
guppy-footer-custom-section-image-1-linktext""Link für Bild 1
guppy-footer-custom-section-image-2media""Custom Bild 2
guppy-footer-custom-section-image-2-linktext""Link für Bild 2
(bis Bild 4).........

USP Banner ​

Basis-Konfiguration ​

KonfigurationTypStandardBeschreibung
guppy-usp-activebooleanfalseUSP Banner aktivieren
guppy-usp-layoutselectbenefitsLayout-Typ

Benefits Layout ​

KonfigurationTypStandardBeschreibung
guppy-usp-layout-benefit1text""Erstes Verkaufsargument
guppy-usp-layout-benefit2text""Zweites Verkaufsargument
guppy-usp-layout-benefit3text""Drittes Verkaufsargument
guppy-usp-layout-benefit4text""Viertes Verkaufsargument

Standard Layout ​

KonfigurationTypStandardBeschreibung
guppy-usp-layout-texttext""Banner-Text
guppy-usp-layout-linktext""Banner-Link
guppy-usp-layout-newTabbooleanfalseIn neuem Tab öffnen

Produktkarten ​

Produktkarten-Varianten ​

KonfigurationTypOptionenStandard
guppy-productcard-configselectdefault, guppy-defaultguppy-default

Produktbild-Konfiguration ​

KonfigurationTypStandardBeschreibung
guppy-productcard-protective-framebooleantrueSchutzrahmen um Produktbild
guppy-productcard-image-object-fitselectcontainBild-Füllmethode (contain, cover)

Produktdetailseite ​

Buybox-Konfiguration ​

KonfigurationTypStandardBeschreibung
guppy-detail-buybox-stylingselectdefaultBuybox-Design (default, border, background)
guppy-detail-headline-buyboxbooleantrueProduktname in Buybox
guppy-detail-buybox-contactbooleanfalseKontaktinformationen anzeigen
guppy-detail-buybox-contact-hotlinebooleanfalseHotline-Nummer anzeigen
guppy-detail-buybox-hide-quantity-buttonsbooleanfalseMengen-Buttons ausblenden

Galerie-Konfiguration ​

KonfigurationTypStandardBeschreibung
guppy-detail-gallery-scrollbooleanfalseGalerie scrollt mit Inhalt

Tab-Konfiguration ​

KonfigurationTypStandardBeschreibung
guppy-detail-display-properties-as-tabbooleanfalseEigenschaften als separater Tab

Checkout ​

Checkout-Varianten ​

KonfigurationTypOptionenStandard
guppy-checkoutselectdefault, compactcompact

Login & Register ​

Login-Varianten ​

KonfigurationTypOptionenStandard
guppy-login-registerselectdefault, compactdefault

Badges ​

Badge-Basis-Konfiguration ​

KonfigurationTypStandardBeschreibung
guppy-badges-show-outlinebooleanfalseOutline-Rahmen für alle Badges

New Badge ​

KonfigurationTypStandard
guppy-badges-new-background-colorcolor#22C087
guppy-badges-new-colorcolor#FFFFFF
guppy-badges-new-outline-colorcolor#FFFFFF

Top Seller Badge ​

KonfigurationTypStandard
guppy-badges-top-seller-background-colorcolor#F89C00
guppy-badges-top-seller-colorcolor#FFFFFF
guppy-badges-top-seller-outline-colorcolor#FFFFFF

Discount Badge ​

KonfigurationTypStandard
guppy-badges-discount-background-colorcolor#E10036
guppy-badges-discount-colorcolor#FFFFFF
guppy-badges-discount-outline-colorcolor#FFFFFF

Alerts ​

Alert-Farben ​

KonfigurationTypStandardBeschreibung
guppy-alert-color-successcolor#D3F2E7Erfolg-Hintergrundfarbe
guppy-alert-color-success-textselectdarkErfolg-Textfarbe
guppy-alert-color-infocolor#CEEDFEInfo-Hintergrundfarbe
guppy-alert-color-info-textselectdarkInfo-Textfarbe
guppy-alert-color-warningcolor#FFEFD4Warnung-Hintergrundfarbe
guppy-alert-color-warning-textselectdarkWarnung-Textfarbe
guppy-alert-color-dangercolor#FDE2E7Fehler-Hintergrundfarbe
guppy-alert-color-danger-textselectdarkFehler-Textfarbe

Alert-Optionen ​

KonfigurationTypStandardBeschreibung
guppy-alert-alert-outline-activebooleanfalseOutline-Rahmen für Alerts

Farbsystem ​

Basis-Farben ​

KonfigurationTypStandardBeschreibung
sw-color-brand-primarycolor#215AFFPrimärfarbe
sw-color-brand-secondarycolor#0B1845Sekundärfarbe

Grautöne ​

KonfigurationStandard
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 ​

KonfigurationTypStandard
sw-font-size-basetext1rem

Headline-Größen ​

KonfigurationStandard
sw-h1-font-size32px
sw-h2-font-size24px
sw-h3-font-size20px
sw-h4-font-size18px
sw-h5-font-size16px
sw-h6-font-size15px

Zeilenhöhen ​

KonfigurationStandard
sw-h1-line-height44px
sw-h2-line-height36px
sw-h3-line-height32px

Buttons & Inputs ​

Button-Konfiguration ​

KonfigurationTypStandardBeschreibung
sw-input-btn-font-sizetext16pxButton-Schriftgröße
sw-input-btn-border-radiustext4pxButton-Eckenrundung
sw-input-btn-font-weightselectnormalButton-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.

Copyright © 2025-heute digital.manufaktur GmbH