Erste Schritte

Online Playground

Du kannst Guppy hier in unserem Guppy Playground testen.

Projekt Setup

1. Es steht eine nach Dmf-Standard eingerichtete Shopware 6 Installation bereit
2. Guppy Theme ist installiert
3. Relevante Plugins sind installiert

Guppy Theme-Konfiguration

Über das Shopware-Admin-Panel unter Inhalte > Themes > Guppy Theme hat man die Möglichkeit das Guppy-Theme individuell anzupassen. Mehr über das Thema findest du hier: Theme Konfiguration

Erweiterte Theme-Konfiguration

Ein zusätzlicher Child-Theme-Ansatz ermöglicht es, den Shop über die Standard-Theme-Konfiguration hinaus umfassend und individuell anzupassen.

Child Theme erstellen

Öffnen dein Terminal und führe den folgenden Befehl aus, um ein neues Child-Thema auf Basis von Guppy zu erstellen.

bin/console guppy:theme:create

INFO

Das generierte Child-Theme basiert auf dem Guppy Theme und enthält eine vollständig konfigurierte theme.json, die optimal auf den Guppy-Standard abgestimmt ist.

WARNING

Um die Konfiguration effizient zu gestalten, ist es entscheidend, dass alle notwendigen Assets für die Theme-Erstellung – wie Vorschaubild, Plugin-Icon, Logo, Share-Icon und Favicon – bereits im Vorfeld bereitgestellt werden.

Installieren und aktivieren des Themes

# Plugin-Cache aktualisieren
bin/console plugin:refresh

# Theme installieren und aktivieren
bin/console plugin:install [ThemeName] -a

# Storefront build (falls erforderlich)
bin/build-storefront.sh

# Theme aktivieren
bin/console theme:change

Vollständiger Workflow:

# 1. Child-Theme erstellen
bin/console guppy:theme:create

# 2. Plugins installieren
bin/console guppy:install:plugins

# 3. System aktualisieren
bin/console plugin:refresh
bin/console plugin:install DmfCustomerShopTheme -a

# 4. Build und Aktivierung
bin/build-storefront.sh
bin/console theme:change

# 5. Cache leeren
bin/console cache:clear

Config inheritance

Mit der Option configInheritance lassen sich zusätzliche Themes konfigurieren, von denen ein Theme seine Feldkonfiguration und Snippets erben kann. Standardmäßig erbt jedes Theme immer die Felder des Storefront-Standard-Themes. Über diese Option können weitere Themes hinzugefügt werden. So kann beispielsweise das bestehende Guppy Theme als Basis-Theme verwendet werden, während mit einem Child Theme spezifische Anpassungen vorgenommen werden können.

Theme anpassen

Ein Child-Theme ist strukturell identisch mit dem Parent-Theme, wodurch Anpassungen über eine bootstrap.scss oder custom.scss möglich sind, um die Variablen des Guppy-Themes zu modifizieren. Weitere Informationen zu den verfügbaren Variablen und Optimierungsmöglichkeiten findest du unter Optimierungen des Themes. Darüber hinaus können auch zusätzliche Bootstrap-Variablen angepasst werden, die im Guppy-Theme derzeit nicht berücksichtigt sind. Ebenso besteht die Möglichkeit, die Custom-Variablen zu erweitern oder individuell anzupassen.

Beispiele

bootstrap.scss

// Variablen angepasst
$body-bg: #f00 !default;
$body-color: #000 !default;

custom.scss

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

// neue Variable
$custom-variable: 12px !default;

Plugins installieren

Öffnen dein Terminal und führe den folgenden Befehl aus, um Plugins zu installieren.

bin/console guppy:install:plugins