Guppy Docs

English

Deutsch

English

Deutsch

Appearance

Configuration Reference ​

This reference contains all available theme configuration options of the Guppy Theme, organized by categories.

Contents of this page:

Accessing the Configuration ​

All settings are available via the Shopware Admin Panel: Content > Themes > Guppy Theme

Layout & Container ​

Container Widths ​

ConfigurationTypeDefaultDescription
guppy-container-width-defaulttext1400pxDefault width for containers
guppy-container-width-fluidtext100%Fluid container width
guppy-container-width-smtext1230pxSmall container width

Container Paddings ​

BreakpointConfigurationDefault
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 Variants ​

ConfigurationTypeOptionsDefault
guppy-headerselectdefault, compact, extended, simpleextended

Variant Descriptions:

  • default: Shopware standard header
  • compact: Guppy standard - Compact variant
  • extended: Extended variant with top bar
  • simple: Minimalist variant

Header Options ​

ConfigurationTypeDefaultDescription
guppy-header-max-heighttext22pxMaximum logo height
guppy-header-skip-to-main-contentbooleanfalseSkip link to main content
guppy-header-skip-to-main-navbooleanfalseSkip link to navigation
guppy-header-skip-to-searchbooleanfalseSkip link to search
ConfigurationTypeOptionsDefault
guppy-footerselectdefault, guppy-defaultguppy-default
ConfigurationTypeDefaultDescription
guppy-footer-border-top-colortextdefault-borderTop border color
guppy-footer-show-payment-methodsbooleanfalseShow payment methods
guppy-footer-show-shipping-methodsbooleanfalseShow shipping methods
ConfigurationTypeDefaultDescription
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 ​

ConfigurationTypeDefaultDescription
guppy-footer-custom-section-image-1media""Custom image 1
guppy-footer-custom-section-image-1-linktext""Link for image 1
guppy-footer-custom-section-image-2media""Custom image 2
guppy-footer-custom-section-image-2-linktext""Link for image 2
(up to image 4).........

USP Banner ​

Basic Configuration ​

ConfigurationTypeDefaultDescription
guppy-usp-activebooleanfalseEnable USP banner
guppy-usp-layoutselectbenefitsLayout type

Benefits Layout ​

ConfigurationTypeDefaultDescription
guppy-usp-layout-benefit1text""First selling point
guppy-usp-layout-benefit2text""Second selling point
guppy-usp-layout-benefit3text""Third selling point
guppy-usp-layout-benefit4text""Fourth selling point

Standard Layout ​

ConfigurationTypeDefaultDescription
guppy-usp-layout-texttext""Banner text
guppy-usp-layout-linktext""Banner link
guppy-usp-layout-newTabbooleanfalseOpen in new tab

Product Cards ​

Product Card Variants ​

ConfigurationTypeOptionsDefault
guppy-productcard-configselectdefault, guppy-defaultguppy-default

Product Image Configuration ​

ConfigurationTypeDefaultDescription
guppy-productcard-protective-framebooleantrueProtective frame around product image
guppy-productcard-image-object-fitselectcontainImage fill method (contain, cover)

Product Detail Page ​

Buybox Configuration ​

ConfigurationTypeDefaultDescription
guppy-detail-buybox-stylingselectdefaultBuybox design (default, border, background)
guppy-detail-headline-buyboxbooleantrueProduct name in buybox
guppy-detail-buybox-contactbooleanfalseShow contact information
guppy-detail-buybox-contact-hotlinebooleanfalseShow hotline number
guppy-detail-buybox-hide-quantity-buttonsbooleanfalseHide quantity buttons
ConfigurationTypeDefaultDescription
guppy-detail-gallery-scrollbooleanfalseGallery scrolls with content

Tab Configuration ​

ConfigurationTypeDefaultDescription
guppy-detail-display-properties-as-tabbooleanfalseProperties as separate tab

Checkout ​

Checkout Variants ​

ConfigurationTypeOptionsDefault
guppy-checkoutselectdefault, compactcompact

Login & Register ​

Login Variants ​

ConfigurationTypeOptionsDefault
guppy-login-registerselectdefault, compactdefault

Badges ​

Badge Basic Configuration ​

ConfigurationTypeDefaultDescription
guppy-badges-show-outlinebooleanfalseOutline border for all badges

New Badge ​

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

Top Seller Badge ​

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

Discount Badge ​

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

Alerts ​

Alert Colors ​

ConfigurationTypeDefaultDescription
guppy-alert-color-successcolor#D3F2E7Success background color
guppy-alert-color-success-textselectdarkSuccess text color
guppy-alert-color-infocolor#CEEDFEInfo background color
guppy-alert-color-info-textselectdarkInfo text color
guppy-alert-color-warningcolor#FFEFD4Warning background color
guppy-alert-color-warning-textselectdarkWarning text color
guppy-alert-color-dangercolor#FDE2E7Error background color
guppy-alert-color-danger-textselectdarkError text color

Alert Options ​

ConfigurationTypeDefaultDescription
guppy-alert-alert-outline-activebooleanfalseOutline border for alerts

Color System ​

Base Colors ​

ConfigurationTypeDefaultDescription
sw-color-brand-primarycolor#215AFFPrimary color
sw-color-brand-secondarycolor#0B1845Secondary color

Gray Tones ​

ConfigurationDefault
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

Typography ​

Base Font Sizes ​

ConfigurationTypeDefault
sw-font-size-basetext1rem

Headline Sizes ​

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

Line Heights ​

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

Buttons & Inputs ​

Button Configuration ​

ConfigurationTypeDefaultDescription
sw-input-btn-font-sizetext16pxButton font size
sw-input-btn-border-radiustext4pxButton border radius
sw-input-btn-font-weightselectnormalButton font weight

Using the Configuration ​

In Templates ​

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

In SCSS ​

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

Checking Current Configuration ​

Currently set values can be viewed and changed in Shopware Admin under: Content > Themes > [Sales Channel] > Configuration

Copyright © 2025-present digital.manufaktur GmbH