Getting Started

Online Playground

You can test Guppy here in our Guppy Playground.

Project Setup

1. A Shopware 6 installation configured according to DMF standards is available
2. Guppy Theme is installed
3. Relevant plugins are installed

Guppy Theme Configuration

Through the Shopware Admin Panel under Content > Themes > Guppy Theme, you have the option to individually customize the Guppy Theme. Learn more about this topic here: Theme Configuration

Advanced Theme Configuration

An additional child theme approach enables comprehensive and individual customization of the shop beyond the standard theme configuration.

Create Child Theme

Open your terminal and run the following command to create a new child theme based on Guppy.

bin/console guppy:theme:create

INFO

The generated child theme is based on the Guppy Theme and contains a fully configured theme.json that is optimally aligned with the Guppy standard.

WARNING

To make the configuration efficient, it is crucial that all necessary assets for theme creation – such as preview image, plugin icon, logo, share icon and favicon – are already provided in advance.

Install and activate the theme

# Update plugin cache
bin/console plugin:refresh

# Install and activate theme
bin/console plugin:install [ThemeName] -a

# Storefront build (if required)
bin/build-storefront.sh

# Activate theme
bin/console theme:change

Complete Workflow:

# 1. Create child theme
bin/console guppy:theme:create

# 2. Install plugins
bin/console guppy:install:plugins

# 3. Update system
bin/console plugin:refresh
bin/console plugin:install DmfCustomerShopTheme -a

# 4. Build and activation
bin/build-storefront.sh
bin/console theme:change

# 5. Clear cache
bin/console cache:clear

Config inheritance

With the configInheritance option, additional themes can be configured from which a theme can inherit its field configuration and snippets. By default, every theme always inherits the fields of the Storefront standard theme. Additional themes can be added via this option. For example, the existing Guppy theme can be used as a base theme while specific adjustments are made with a child theme.

Customize theme

A child theme is structurally identical to the parent theme, which means customizations are possible via a bootstrap.scss or custom.scss to modify the variables of the Guppy theme. More information about the available variables and optimization possibilities can be found under Theme Optimizations. In addition, additional Bootstrap variables can be customized that are currently not considered in the Guppy theme. There is also the possibility to extend or individually customize the custom variables.

Examples

bootstrap.scss

// Variables customized
$body-bg: #f00 !default;
$body-color: #000 !default;

custom.scss

// Variables customized
$icon-base-size: 16px !default;
$product-image-height: 320px !default;

// new variable
$custom-variable: 12px !default;

Install plugins

Open your terminal and run the following command to install plugins.

bin/console guppy:install:plugins