Deutsch

English

Deutsch

English

Erscheinungsbild

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 ​

KonfigurationTypDefaultBeschreibung
guppy-container-width-defaulttext1400pxStandard-Container
guppy-container-width-fluidtext100%Fluid-Container
guppy-container-width-smtext1230pxkleine Container

Container-Padding ​

BreakpointKonfigurationDefault
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

CMS-Section-Padding ​

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

KonfigurationTypDefaultBeschreibung
guppy-cms-section-padding-xtext48pxhorizontales Padding
guppy-cms-section-padding-ytext48pxvertikales Standard-Padding
guppy-cms-section-padding-y-2xtext96pxextra vertikales Padding (2x)

Section-Optionen im Editor:

OptionWirkung
Horizontales Paddingaktivieren/deaktivieren
Padding Oben & UntenStandard-Y-Padding
Extra Groß (2x)doppeltes Y-Padding
Padding Obennur oben (mit Option Kein Abstand)
Padding Untennur unten (mit Option Kein Abstand)

Anpassung im Child-Theme:

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

Header-Variante ​

KonfigurationTypOptionenDefault
guppy-headerselectdefault, compact, extended, simpleextended
VarianteBeschreibung
defaultShopware-Standard-Header
compactGuppy Standard, kompakt
extendedmit Top-Bar
simpleminimalistisch

Header-Optionen ​

KonfigurationTypDefaultWirkung
guppy-header-max-heighttext22pxmaximale Logo-Höhe
guppy-topbar-background-colorcolor#EEEEEEHintergrundfarbe der Top-Bar
guppy-header-skip-to-main-contentboolfalseSkip-Link zum Hauptinhalt
guppy-header-skip-to-main-navboolfalseSkip-Link zur Navigation
guppy-header-skip-to-searchboolfalseSkip-Link zur Suche
KonfigurationTypOptionenDefault
guppy-footerselectdefault, guppy-defaultguppy-default
KonfigurationTypDefaultWirkung
guppy-footer-border-top-colortextdefault-borderobere Rahmenfarbe
guppy-footer-show-payment-methodsboolfalseZahlungsarten anzeigen
guppy-footer-show-shipping-methodsboolfalseVersandarten anzeigen

Zusatzfelder für Versand-/Zahlungsarten ​

DmfGuppyTheme legt das Custom-Field-Set guppy_footer_options an:

FeldTypWirkung
guppy_hide_in_footerboolwenn aktiv: Methode nicht im Footer anzeigen
guppy_alternative_labeltextüberschreibt den Tooltip-Namen beim Hover

Seit 2.7.12 keine Theme-Konfiguration mehr, sondern das Custom-Field-Set guppy_social_media_links an der Entität sales_channel. Damit gelten die Links pro Verkaufskanal und pro Sprache. Alle Felder sind vom Typ text und erwarten die vollständige URL.

FeldPlattform
guppy_social_media_instagram_threadsInstagram-Threads
guppy_social_media_instagramInstagram
guppy_social_media_linkedinLinkedIn
guppy_social_media_youtubeYouTube
guppy_social_media_xX (Twitter)
guppy_social_media_facebookFacebook
guppy_social_media_tiktokTikTok
guppy_social_media_xingXing

Die früheren Theme-Konfigurationen guppy-footer-social-media-* stehen weiterhin in der theme.json, sind aber deaktiviert und werden nicht mehr ausgelesen. Details zum Umzug und zur Migration: Footer → Social-Media-Links.

Custom-Section-Bilder (1–4) ​

KonfigurationTyp
guppy-footer-custom-section-image-1media
guppy-footer-custom-section-image-1-linktext
guppy-footer-custom-section-image-2media
guppy-footer-custom-section-image-2-linktext
(bis Bild 4)…

USP-Banner ​

Das USP-Banner steckt seit Guppy 2.8.0 nicht mehr in der Theme-Konfiguration, sondern im Plugin DmfUspBanner. Die guppy-usp-*-Konfigurationen sind entfallen, ihre Werte räumt eine Migration aus der Theme-Konfiguration ab.

Gepflegt wird das Banner im Admin unter Inhalte → USP-Banner, dort pro Verkaufskanal und pro Sprache. Die Hintergrundfarbe der Top-Bar bleibt im Theme und heißt jetzt guppy-topbar-background-color.

Productcards ​

KonfigurationTypOptionenDefault
guppy-productcard-configselectdefault, guppy-defaultguppy-default
guppy-productcard-protective-framebool–true
guppy-productcard-image-object-fitselectcontain, covercontain

Productdetail ​

Buybox ​

KonfigurationTypDefaultWirkung
guppy-detail-buybox-stylingselectdefaultdefault, border, background
guppy-detail-headline-buyboxbooltrueProduktname in Buybox
guppy-detail-buybox-contactboolfalseKontaktinfo anzeigen
guppy-detail-buybox-contact-hotlineboolfalseHotline anzeigen
guppy-detail-buybox-hide-quantity-buttonsboolfalseMengen-Buttons ausblenden
guppy-detail-mobile-title-above-galleryboolfalseProdukttitel über der Galerie auf Mobile

Galerie und Tabs ​

KonfigurationTypDefaultWirkung
guppy-detail-gallery-scrollboolfalseGalerie scrollt mit Inhalt
guppy-detail-display-properties-as-tabboolfalseEigenschaften als separater Tab

Checkout & Login ​

KonfigurationTypOptionenDefault
guppy-checkoutselectdefault, compactcompact
guppy-login-registerselectdefault, compactdefault

Badges ​

Basis ​

KonfigurationTypDefault
guppy-badges-show-outlineboolfalse

Neu-Badge ​

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

Top-Seller-Badge ​

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

Discount-Badge ​

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

Ausverkauft-Badge ​

KonfigurationTypDefault
guppy-badges-show-out-of-stockboolfalse
guppy-badges-out-of-stock-background-colorcolor#EEEEEE
guppy-badges-out-of-stock-colorcolor#303030
guppy-badges-out-of-stock-outline-colorcolor#303030

Ein Produkt gilt als ausverkauft, wenn im Produkt die Option "Abverkauf" aktiviert ist und der Bestand unter der Mindestbestellmenge liegt.

Wird das Ausverkauft-Badge auf einer Produktkarte angezeigt (weil das Produkt ausverkauft ist), verdrängt es die anderen Badges (Neu, Top-Seller, Discount) auf dieser Karte. Bei Produkten, die nicht ausverkauft sind, ändert sich nichts.

Alerts ​

Farben ​

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

Optionen ​

KonfigurationTypDefaultWirkung
guppy-alert-alert-outline-activeboolfalseOutline-Rahmen für Alerts

Farbsystem ​

Brand ​

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

Graustufen ​

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

KonfigurationTypDefault
sw-font-size-basetext1rem
sw-h1-font-sizetext32px
sw-h2-font-sizetext24px
sw-h3-font-sizetext20px
sw-h4-font-sizetext18px
sw-h5-font-sizetext16px
sw-h6-font-sizetext15px

Zeilenhöhen ​

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

Buttons & Inputs ​

KonfigurationTypDefaultWirkung
sw-input-btn-font-sizetext16pxButton-Schriftgröße
sw-input-btn-border-radiustext4pxButton-Eckenrundung
sw-input-btn-font-weightselectnormalButton-Schriftgewicht

Verwendung in Code ​

In Twig ​

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

In SCSS ​

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

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

Verwandt ​

Copyright © 2025–heute digital.manufaktur GmbH