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

Configuration	Type	Default	Description
`guppy-container-width-default`	text	`1400px`	Default width for containers
`guppy-container-width-fluid`	text	`100%`	Fluid container width
`guppy-container-width-sm`	text	`1230px`	Small container width

Container Paddings

Breakpoint	Configuration	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 Spacing

The Guppy Theme extends Shopware Shopping Experiences with additional padding options for sections. These settings are available directly in the section configuration within the Shopping Experiences editor.

Horizontal Padding

Controls the horizontal spacing (left/right) of the section.

Configuration	Type	Default	Description
`guppy-cms-section-padding-x`	text	`48px`	Horizontal padding for sections

Vertical Padding

Controls the vertical spacing (top/bottom) of the section.

Configuration	Type	Default	Description
`guppy-cms-section-padding-y`	text	`48px`	Standard vertical padding
`guppy-cms-section-padding-y-2x`	text	`96px`	Extra large padding (2x)

Section Options in Shopping Experiences Editor

When editing a section in the Shopping Experiences editor, the following options are available:

Option	Description
Horizontal Padding	Enables/disables horizontal padding for the section
Padding Top & Bottom	Standard vertical padding top and bottom
Extra Large (2x)	Double vertical padding for more spacing
Padding Top	Only padding top (with "No spacing" option)
Padding Bottom	Only padding bottom (with "No spacing" option)

Usage

The padding options allow flexible design of spacing between sections:

┌─────────────────────────────────────────┐
│           Padding Top (48px)            │
│  ┌───────────────────────────────────┐  │
│  │                                   │  │
│  │         Section Content           │  │
│  │                                   │  │
│  └───────────────────────────────────┘  │
│          Padding Bottom (48px)          │
└─────────────────────────────────────────┘
     ↑                               ↑
  Padding X                       Padding X
   (48px)                          (48px)

Customization in 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 Variants

Configuration	Type	Options	Default
`guppy-header`	select	`default`, `compact`, `extended`, `simple`	`extended`

Variant Descriptions:

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

Header Options

Configuration	Type	Default	Description
`guppy-header-max-height`	text	`22px`	Maximum logo height
`guppy-header-skip-to-main-content`	boolean	`false`	Skip link to main content
`guppy-header-skip-to-main-nav`	boolean	`false`	Skip link to navigation
`guppy-header-skip-to-search`	boolean	`false`	Skip link to search

Configuration	Type	Options	Default
`guppy-footer`	select	`default`, `guppy-default`	`guppy-default`

Configuration	Type	Default	Description
`guppy-footer-border-top-color`	text	`default-border`	Top border color
`guppy-footer-show-payment-methods`	boolean	`false`	Show payment methods
`guppy-footer-show-shipping-methods`	boolean	`false`	Show shipping methods

It often happens that shipping and payment methods appear in the footer with the same logo. For example, "DHL" and "DHL International" both have a DHL logo. To independently control this, a set of additional fields is created during Guppy installation: guppy_footer_options

The following additional fields can be configured for a shipping or payment method:

Field Name	Type	Description
`guppy_hide_in_footer`	boolean	When active, the shipping/payment method will not be displayed in the footer.
`guppy_alternative_label`	text	If content is provided here, it will be displayed instead of the method name when hovering over the image.

Configuration	Type	Default	Description
`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

Configuration	Type	Default	Description
`guppy-footer-custom-section-image-1`	media	`""`	Custom image 1
`guppy-footer-custom-section-image-1-link`	text	`""`	Link for image 1
`guppy-footer-custom-section-image-2`	media	`""`	Custom image 2
`guppy-footer-custom-section-image-2-link`	text	`""`	Link for image 2
(up to image 4)	...	...	...

Basic Configuration

Configuration	Type	Default	Description
`guppy-usp-active`	boolean	`false`	Enable USP banner
`guppy-usp-layout`	select	`benefits`	Layout type

Benefits Layout

Configuration	Type	Default	Description
`guppy-usp-layout-benefit1`	text	`""`	First selling point
`guppy-usp-layout-benefit2`	text	`""`	Second selling point
`guppy-usp-layout-benefit3`	text	`""`	Third selling point
`guppy-usp-layout-benefit4`	text	`""`	Fourth selling point

Standard Layout

Configuration	Type	Default	Description
`guppy-usp-layout-text`	text	`""`	Banner text
`guppy-usp-layout-link`	text	`""`	Banner link
`guppy-usp-layout-newTab`	boolean	`false`	Open in new tab

Product Cards

Product Card Variants

Configuration	Type	Options	Default
`guppy-productcard-config`	select	`default`, `guppy-default`	`guppy-default`

Product Image Configuration

Configuration	Type	Default	Description
`guppy-productcard-protective-frame`	boolean	`true`	Protective frame around product image
`guppy-productcard-image-object-fit`	select	`contain`	Image fill method (`contain`, `cover`)

Product Detail Page

Buybox Configuration

Configuration	Type	Default	Description
`guppy-detail-buybox-styling`	select	`default`	Buybox design (`default`, `border`, `background`)
`guppy-detail-headline-buybox`	boolean	`true`	Product name in buybox
`guppy-detail-buybox-contact`	boolean	`false`	Show contact information
`guppy-detail-buybox-contact-hotline`	boolean	`false`	Show hotline number
`guppy-detail-buybox-hide-quantity-buttons`	boolean	`false`	Hide quantity buttons

Gallery Configuration

Configuration	Type	Default	Description
`guppy-detail-gallery-scroll`	boolean	`false`	Gallery scrolls with content

Tab Configuration

Configuration	Type	Default	Description
`guppy-detail-display-properties-as-tab`	boolean	`false`	Properties as separate tab

Checkout

Checkout Variants

Configuration	Type	Options	Default
`guppy-checkout`	select	`default`, `compact`	`compact`

Configuration	Type	Options	Default
`guppy-login-register`	select	`default`, `compact`	`default`

Badges

Badge Basic Configuration

Configuration	Type	Default	Description
`guppy-badges-show-outline`	boolean	`false`	Outline border for all badges

New Badge

Configuration	Type	Default
`guppy-badges-new-background-color`	color	`#22C087`
`guppy-badges-new-color`	color	`#FFFFFF`
`guppy-badges-new-outline-color`	color	`#FFFFFF`

Top Seller Badge

Configuration	Type	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

Configuration	Type	Default
`guppy-badges-discount-background-color`	color	`#E10036`
`guppy-badges-discount-color`	color	`#FFFFFF`
`guppy-badges-discount-outline-color`	color	`#FFFFFF`

Alerts

Alert Colors

Configuration	Type	Default	Description
`guppy-alert-color-success`	color	`#D3F2E7`	Success background color
`guppy-alert-color-success-text`	select	`dark`	Success text color
`guppy-alert-color-info`	color	`#CEEDFE`	Info background color
`guppy-alert-color-info-text`	select	`dark`	Info text color
`guppy-alert-color-warning`	color	`#FFEFD4`	Warning background color
`guppy-alert-color-warning-text`	select	`dark`	Warning text color
`guppy-alert-color-danger`	color	`#FDE2E7`	Error background color
`guppy-alert-color-danger-text`	select	`dark`	Error text color

Alert Options

Configuration	Type	Default	Description
`guppy-alert-alert-outline-active`	boolean	`false`	Outline border for alerts

Color System

Base Colors

Configuration	Type	Default	Description
`sw-color-brand-primary`	color	`#215AFF`	Primary color
`sw-color-brand-secondary`	color	`#0B1845`	Secondary color

Gray Tones

Configuration	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`

Typography

Base Font Sizes

Configuration	Type	Default
`sw-font-size-base`	text	`1rem`

Headline Sizes

Configuration	Default
`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`

Line Heights

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

Buttons & Inputs

Button Configuration

Configuration	Type	Default	Description
`sw-input-btn-font-size`	text	`16px`	Button font size
`sw-input-btn-border-radius`	text	`4px`	Button border radius
`sw-input-btn-font-weight`	select	`normal`	Button 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

Configuration Reference ​

Accessing the Configuration ​

Layout & Container ​

Container Widths ​

Container Paddings ​

CMS Section Spacing ​

Horizontal Padding ​

Vertical Padding ​

Section Options in Shopping Experiences Editor ​

Usage ​

Customization in Child Theme ​

Header ​

Header Variants ​

Header Options ​

Footer ​

Footer Variants ​

Footer Configuration ​

Footer Custom Fields ​

Social Media Links ​

Custom Section Images ​

USP Banner ​

Basic Configuration ​

Benefits Layout ​

Standard Layout ​

Product Cards ​

Product Card Variants ​

Product Image Configuration ​

Product Detail Page ​

Buybox Configuration ​

Gallery Configuration ​

Tab Configuration ​

Checkout ​

Checkout Variants ​

Login & Register ​

Login Variants ​

Badges ​

Badge Basic Configuration ​

New Badge ​

Top Seller Badge ​

Discount Badge ​

Alerts ​

Alert Colors ​

Alert Options ​

Color System ​

Base Colors ​

Gray Tones ​

Typography ​

Base Font Sizes ​

Headline Sizes ​

Line Heights ​

Buttons & Inputs ​

Button Configuration ​

Using the Configuration ​

In Templates ​

In SCSS ​

Checking Current Configuration ​