DmfGuppyTheme

DmfGuppyTheme is the foundation of the Guppy framework. It replaces Shopware's default storefront theme with a lean, documented Bootstrap 5 variant that ships extensive theme configuration plus targeted Twig and SCSS overrides.

Quick facts

Composer package	dmf/sw6-guppy-theme
Plugin class	Dmf\GuppyTheme\DmfGuppyTheme
Namespace	Dmf\GuppyTheme
Shopware	~6.7.0
Required dependency	dmf/sw6-plugin-splide-slider

Installation

composer require dmf/sw6-guppy-theme
bin/console plugin:refresh
bin/console plugin:install --activate DmfGuppyTheme
bin/console theme:change       # pick the sales channel
bin/console theme:compile

DmfSplideSlider is pulled in automatically by Composer but must be activated separately if not already installed:

bin/console plugin:install --activate DmfSplideSlider

Splide as single source of truth

DmfSplideSlider bundles the Splide library once and exposes the constructor globally on window.DmfSplide. The theme and dependent plugins (such as DmfCmsCustomElements) consume this shared instance instead of each shipping their own copy. That is why DmfSplideSlider must be active before sliders render in the storefront. Details under DmfSplideSlider.

Configuration

Unlike many plugins, DmfGuppyTheme does not ship a classic config.xml for plugin settings. All configuration lives in theme.json and is exposed through the theme configuration in the administration.

Theme configuration tabs

Tab	Contents
Layout	Container widths, section padding, sidebar behaviour
Header	Header variant, USP banner, logo position
Footer	Column count, newsletter block, payment/shipping logos
USP	USP bar (toggle, colors, texts, social links)
Login	Login/register box behaviour
Checkout	Checkout layout, 3-step progress, trust elements
Guppy Cards	Card components on the detail page
Productcard	Listing and slider product cards
Detailpage	Buybox styling, product images, sliders
Button	Button colors, sizes, outline toggles
Badges	New / top-seller / discount badges (with optional outline)
Alerts	Background and text color per alert type

Field reference

The full field reference with defaults lives under Config Schema.

Console commands

DmfGuppyTheme registers its own console commands:

Command	Purpose
guppy:theme:create	Scaffold a new theme directory with the basic structure.
guppy:install:plugins	Optionally install recommended companion plugins via Composer.
guppy:upgrade:scan	Scan the project for changes that need attention after a theme update.

Detailed command documentation lives under Console workflow.

SCSS architecture (overview)

Key variable files:

src/Resources/app/storefront/src/scss/
├── overrides.scss                   # theme hook, loads before @DmfGuppyTheme
├── base.scss                        # theme hook, loads after @DmfGuppyTheme
├── abstract/variables/
│   ├── bootstrap.scss               # Bootstrap overrides
│   └── custom.scss                  # Guppy-specific tokens
└── skin/shopware/abstract/variables/
    ├── bootstrap.scss               # Shopware integration overrides
    └── theme.scss                   # Theme integration

More details

Full architecture coverage lives under Variables & Tokens and Architecture.

Branching strategy

DmfGuppyTheme uses a staging workflow with three primary branches:

Branch	Purpose
main	Production-ready, single source of truth, tags originate here.
stage	QA and testing branch. Features are validated here before merging into main.
next	Prep for upcoming Shopware major versions, breaking changes.

Feature branches follow the TICKET-123_feature-name convention.

Notes

Activate the theme

After theme:change, always run theme:compile. Otherwise neither SCSS overrides nor theme.json values are baked into the compiled CSS.

Child theme workflow

Custom adjustments belong in a child theme. Instead of modifying DmfGuppyTheme directly, generate a child theme with the Theme Builder or scaffold one manually (see Manual Child Theme Development).