# Erste Schritte

Dokumentation der Themes ATMOS | STRATUS | GRAVITY | SPHERE | HORIZON

**Herzlichen Glückwunsch!** Du hast dich für eines unserer Themes entschieden und damit für eines der vielseitigsten und leistungsstärksten Themes für Shopware 6! Wir freuen uns riesig, Dich als Teil der Shopware Community begrüßen zu dürfen!

Unser Theme besticht durch echte Premium-Funktionen, die weit über einfache Anpassungen hinausgehen. Mit einer umfangreichen, aber dennoch benutzerfreundlichen Theme-Konfiguration, gestaltest Du mit nur wenigen Klicks Dein individuelles Shop-Layout.

Zusätzlich lässt sich unser Theme durch Drittanbieter-Plugins erweitern und profitiert von einer kontinuierlichen Weiterentwicklung. So bleibst Du immer auf dem neuesten Stand und kannst Deinen Shop stetig verbessern.

Aber das weißt Du sicherlich schon, sonst wärst Du nicht bis hierher zur Dokumentation gekommen. Also, lass uns direkt durchstarten!

Damit Du gleich loslegen kannst, haben wir eine Schritt-für-Schritt-Anleitung für die grundlegenden ersten Schritte vorbereitet. Deine Erfolgsgeschichte mit Shopware 6 beginnt jetzt!

{% hint style="info" %}
**Admin Demo**

Besuche unsere Admin-Demo, um Dir die Einstellungen aus unseren Demos anzuschauen. Dort siehst Du auch unsere Konfiguration der Demo-Erlebniswelten.\
\
**Url:** [themes-admin.zenit-demos.com/admin](https://themes-admin.zenit-demos.com/admin)\
**Name:** `demo` **Passwort:** `shopware`
{% endhint %}

## Los geht's

Unsere Themes basieren auf dem selben Core. Die vielseitigen Darstellungen entstehen alleinig durch die **unzähligen** Konfigurationsmöglichkeiten des Themes. Bei der Auswahl des Themes kannst Du daher einfach das Theme wählen, welches Deinen Vorstellungen bereits am besten entspricht.

Dabei kannst Du dich nicht nur für eine der Ausprägungen (Atmos, Stratus, Gravity, Sphere, Horizon) entscheiden - wir bieten zu unseren Themes eine Auswahl verschiedene [vorkonfigurierter Designs](/vorlagen) aus denen Du wählen und zusätzlich installieren kannst. Mehr dazu weiter unten.

{% hint style="info" %}
Folge den [Start Guides](/start-guides) um einen erleichterten Einstieg in die gewählte Vorlage zu erhalten.
{% endhint %}

### Schritt 1 - Installation

Nachdem Du das Theme aus dem Store erworben hast, erscheint das Theme im Bereich *Einstellungen > Meine Erweiterungen im Tab: Themes*. Über den Link **App installieren (1)** des Eintrages kannst Du das Theme installieren und über den **Toggle Schalter (2)** aktivieren.

![](/files/BK9iHxgDDtO04alO2b4f)

### **Schritt 2 - Vorlage auswählen (optional)**

Bevor Du mit der Zuweisung und Konfiguration des Themes beginnst, solltest Du dir über zwei Dinge klar werden:

1. Möchte ich in Zukunft individuelle Programmierungen vornehmen (lassen)?
2. Gibt es eine Demo, die ich als Vorlage nutzen möchte?

Sobald Du eine dieser Fragen mit "Ja" beantworten kannst, empfehlen wir Dir eine unserer vorkonfigurierten Vorlagen zu nutzen.

Wir bieten zu all unseren Demos installierbare [Konfigurations-Vorlagen](/vorlagen) an. Darin findest Du nicht nur die vorgefertigte Konfiguration nach Vorlage der Demo - die Vorlage ermöglicht es Dir oder einer Agentur künftig auch Sonderprogrammierungen als updatesichere Veränderungen durchzuführen.

{% hint style="info" %}
Technisch gesehen handelt es sich bei den Konfigurations-Vorlagen um sogenannte [Child-Themes](/faq/ableitungen/child-theme) - was das ist und warum Child-Themes sinnvoll sind, haben wir Dir in einem Beitrag über [Child-Themes](/faq/ableitungen/child-theme) erläutert.
{% endhint %}

#### Vorlage via Plugin importieren

> ab Theme-Version 4.4.0 | nur Pro Version

Ab Theme Version 4.4.0 hast Du die Möglichkeit, Dir über unser kostenfreies Child-Theme-Generator Plugin ein personalisiertes Child-Theme zu generieren und anschließend die gewünschte Demo-Vorlage zu importieren.

{% embed url="<https://store.shopware.com/de/zenit66399665516f/child-theme-generator-fuer-zenit-design-themes.html>" %}

<figure><img src="/files/lHvH4shW0ZYYgAumlRcu" alt=""><figcaption></figcaption></figure>

Navigiere nach der Installation der Erweiterung zu Inhalte > Themes. Im Kontextmenü des gewählten Themes kannst Du Dein personalisiertes Child-Theme generieren.

#### Vorlage installieren

Nach dem Erstellen des Child-Themes wirst Du automatisch in die Übersicht deiner Erweiterungen geleitet. Dort findest Du nun dein Child-Theme und kannst es installieren und aktivieren.

<figure><img src="/files/BtFDM8yGLfHyy45YPWn2" alt=""><figcaption></figcaption></figure>

Anschließend kannst Du unter Inhalte > Themes und einem Klick auf Dein generiertes Theme die gewünschte Vorlage über den Button „Vorlage auswählen“ importieren. Klicke dazu in der Theme-Konfiguration auf den Button "Vorlage auswählen"**,** wähle im PopUp die gewünschte Vorlage und klicke auf Importieren.

<figure><img src="/files/2cVu7YZ9kPkB6aHIHtRP" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/RqENqbExoP7tLUfHa0Ye" alt=""><figcaption></figcaption></figure>

### Schritt 3 - Theme-Zuweisung

In den Einstellungen des Verkaufskanals im Tab **Theme (1)** kannst Du das Theme Deines Verkaufskanals ändern.

![](/files/4D7zecFp3iInjSSEo2Vr)

Klicke hierzu auf den Button **Theme ändern (2)** und wähle im sich öffnenden Fenster das installierte Theme aus. Bei der Verwendung einer vorkonfigurierten Vorlage wähle bitte die Vorlage aus, welche Du nutzen möchtest.

### **Schritt 4 - Styling (Theme Konfiguration)**

{% hint style="info" %}
Folge den [Start Guides](/start-guides) um einen erleichterten Einstieg in die gewählte Vorlage zu erhalten.
{% endhint %}

Der **Styling-Bereich** umfasst alle gestaltungsrelevanten Einstellungen. Du erreichst diesen entweder über das theme-eigene Dashboard (Inhalte > Theme \[Variante] > Tab: Styling > zugewiesenen Verkaufskanal auswählen) oder über den Bereich der Verkaufskanäle (Verkaufskanal > Tab: Theme > Button: Theme bearbeiten).

![Web über Dashboard](/files/LkBK1ON8YecAnwQuTb3q)

![Web über Verkaufskanal](/files/P3RieVu8e2GGjaaN3fvd)

Grundsätzlich solltest Du nicht direkt alles auf einmal verändern. **Arbeite in kleinen Schritten** und schaue Dir das Ergebnis in der Storefront an. Beginne einfach mit dem hervorgehobenen Styling Bereich im ersten Tab der Einstellungen - [den Grundeinstellungen](/styling/allgemein). Hier findest Du die "globalsten" Einstellungen.

Manchmal kommt es vor, dass auf Grund einer gewählten Einstellung sich andere Bereiche ebenfalls verändern. Das tun wir, um das Gesamtbild des Shops für Dich zu optimieren.&#x20;

Wir wollen nicht jedes Element einstellbar gestalten, da die Konfiguration sonst nicht mehr praktikabel wäre und es dann prinzipiell einfacher wäre, die Elemente direkt selbst zu Programmieren. Die Konfigurationen sind so abgestimmt, dass die Bedienung leicht fällt und Dich schnell zum Ziel führt.

### **Schritt 5 - Einstellungen (Plugin/App Konfiguration)**

Neben dem eigentlichen Theme-Styling gibt es weitere grundlegende Einstellungen im Bereich der **Plugin / App Konfiguration**.

#### Einstellungen über Dashboard erreichen (nur Pro Version)

Du erreichst diesen entweder über das theme-eigene Dashboard (Pro):\
\&#xNAN;*Inhalte > Theme \[Variante] > Tab: Einstellungen > Button: Konfiguration auswählen*

![Weg über Dashboard](/files/BP997WmjmLS0BB4ffL7l)

#### Einstellungen über Erweiterungen erreichen (Cloud | Pro)

Für Nutzer der Cloud-Version und Pro-Version steht darüber hinaus auch der Weg über die Erweiterungen bereit:\
\&#xNAN;*Erweiterungen > Meine Erweiterungen > Tab: Themes > Theme \[Variante] > Kontextmenü: Konfiguration*

![Weg über Erweiterungen](/files/mahv1J6Z5gtx0D5ceYI6)

### **Schritt 6 - Demodaten**

> ab Shopware-Version 6.5 | nur Pro Version

Um Dir den Einstieg in das Theme so einfach wie möglich zu gestalten, haben wir eine kostenlose Erweiterung für Demodaten im Store. Mit dieser Erweiterung kannst Du dir die Erlebniswelten und Demodaten unserer Demos direkt in Deinen Shop importieren und anpassen.

{% embed url="<https://demodata.zenit.design/>" %}
Kostenlose Demodaten
{% endembed %}

<figure><img src="/files/P0NipHtJTPANVuEPzqzn" alt=""><figcaption></figcaption></figure>

Passend zur Erlebniswelt kannst Du außerdem auch die, zu deinem Theme passende, [Theme-Konfiguration aus unseren Demoshops](/tutorials/demo-themekonfiguration-importieren) importieren.

## **Erweiterte Funktionen nutzen**

Nicht jede Einstellung im Theme ist so einfach wie die Einstellung einer Farbe. Zur Aufbereitung der Inhalte und Anwendung der Spezial-Funktionen des Themes, bieten wir Dir im Bereich **INHALTE** hilfreiche Einstellungen zu den Themen [Einkaufswelt überlagernden Header](/content/kategorie/ueberlagernden-header), [Kategoriebild im Header](/content/kategorie/kategoriebild), [Bildformate](/content/produktbilder/bildformat) und verschiedene Einstellungen der Erlebniswelten.

## Welche Bereiche verändert das Theme?

Das Theme bietet Dir nicht nur eine eigenständige Theme-Konfiguration mit über **657+ Konfigurationsfeldern**. Auch andere Bereiche der Storefront und des Adminbereichs werden durch das Theme erweitert.

### **Dashboard**

Die Administration wird über ein weiteres Dashboard erweitert, welches Dir einfachen Zugang zu den Theme-Funktionen bietet.

### **Styling**

Das Herzstück des Themes bildet die **Theme Konfiguration**. Dort findest Du alle Einstellungen, welche das Aussehen Deines Shops verändern.

### **Einstellungen**

Hiermit sind die Einstellungen im Theme Plugin gemeint. Hier liegen Einstellungen, welche das System verändern, jedoch keinen Einfluss auf die Gestaltung nehmen. Hier kannst Du beispielsweise auch zusätzlichen Code hinterlegen.

### **Zusatzfelder**

Sind Erweiterungen der Datenbank um Bereiche wie die Kategorien mit weiteren Konfigurationen anzureichern. Du findest insbesondere in den Kategorien und Produkten weitere Konfigurationen.

### **Erlebniswelten**

Ein neuer Bereich in den Erlebniswelten soll Dir durch weitere Elemente mehr Möglichkeiten bieten. CMS Elemente wie das neue Breadcrumb Element lassen Dich die Breadcrumbs auf das Header Hintergrundbild legen.

## Worauf Du achten solltest!

In unserer Theme-Konfiguration erhalten manche Einstellungen ein Zeichen. Siehst Du ein solches Zeichen, gibt es besondere Hinweise oder Abhängigkeiten zu anderen Konfiguationen. **Ein Blick in den Hilfe-Tooltips lohnt sich.**

### \[ ! ] - Besondere Konfiguration

<div align="left"><figure><img src="/files/G940IrGTvPnjDX6H3ExZ" alt=""><figcaption></figcaption></figure></div>

Wenn Du dieses Zeichen in der Theme-Konfiguration siehst, handelt es sich um ein Konfigurationsfeld mit einer **Abhängigkeit** zu einem anderen Feld oder einer anderen **Besonderheit**. Lese hierzu in dem Hilfe-Tooltip am Konfigurationsfeld, um mehr über dieses Feld zu erfahren.

### \[ ≡ ] - Fallback Feld

<div align="left"><figure><img src="/files/14MERY8YoGWOCTnNhIrP" alt=""><figcaption></figcaption></figure></div>

Dieses Zeichen kennzeichnet ein Konfigurationsfeld der Theme-Konfiguration, welches zusätzlich in jeder **Kategorie** oder **Produkt** **überschrieben** oder **geerbt** werden kann. Der in der Theme-Konfiguration hinterlegte Wert dient dann als Fallback-Wert, wenn in der Kategorie eine abweichende Einstellung getätigt wurde.


# Start Guides


# Atmos - Demo 1

Diese Demo zeichnet sich durch seine globalen Layoutabstände aus, welche den Blick auf ein schräg verlaufendes Hintergrundbild gibt. Das Layout ist minimal und einzeilig.

## Einstellungen der Zusatzfelder

Über Zusatzfelder erweitert das Theme die Funktionen des Shops in den Bereichen *Kataloge > Kategorien* und *Kataloge > Produkte*. Zusatzfelder können so die Darstellung für jede Kategorie oder jedes Produkt einzeln verändern.

### Startseite

{% hint style="info" %}
Diese Demo nutzt keine abweichenden Einstellungen in den Zusatzfeldern.
{% endhint %}

### Kategorien

Manche Kategorien nutzen die Theme-eigene Kategoriebild Funktion. Erfahre im Bereich INHALTE > Kategorie > [Kategoriebild](/content/kategorie/kategoriebild) mehr zu den Möglichkeiten.

![](/files/Z3RAa4SROw6gJ0Xe0Azp)

## Abweichende Einstellungen

Konfigurationen, welche wir über ein Update implementiert haben, können oft nicht mit dem Standard-Wert ausgeliefert werden, der in der Demo dargestellt wird. Damit stellen wir sicher, dass bestehende Onlineshops nicht ohne das Wissen des Kunden verändert werden.

Die abweichenden Einstellungen haben wir hier aufgelistet:

<table><thead><tr><th width="630.2550199284714">Styling</th><th>Wert</th><th data-hidden></th></tr></thead><tbody><tr><td>Allgemein > Grundlayout > Header (mobil)</td><td>Einzeiliger Header</td><td></td></tr><tr><td>Allgemein > Produktbilder > Breite Artikelbild</td><td>1890*</td><td></td></tr><tr><td>Allgemein > Produktbilder > Höhe Artikelbild</td><td>2400*</td><td></td></tr><tr><td>Header > Main Navigation > Unternavigation Aussehen</td><td>Dropdown Navigation</td><td></td></tr><tr><td>Header > Flyout Navigation > Grundeinstellungen > Icon bei externen Links</td><td>true</td><td></td></tr><tr><td>Kategorie > Produkt-Boxen > Grundeinstellungen > Varianten günstigster Preis</td><td>false</td><td></td></tr><tr><td>Kategorie > Produkt-Boxen > Grundeinstellungen > Grundpreis</td><td>false</td><td></td></tr><tr><td>Footer > Footer Bottom > Grundeinstellungen > Service-Navigation anzeigen</td><td>false</td><td>aus</td></tr><tr><td>Produkt > Details > Produkt Details > alle Switch Felder</td><td>true</td><td></td></tr><tr><td>Typografie &#x26; Farben > Grundeinstellungen > Kontrast Schwellenwert</td><td>200**</td><td></td></tr><tr><td>Allgemein > Scroll Animation > Grundeinstellungen > Produkt Listing animieren</td><td>true</td><td></td></tr></tbody></table>

<table><thead><tr><th width="631">Einstellungen</th><th>Wert</th></tr></thead><tbody><tr><td>Youtube Video Consent</td><td>Ja</td></tr></tbody></table>

\*Diese Werte sind angepasst an unsere Produktbilder. Eine Übernahme dieser Werte ist daher nicht empfehlenswert.

\*\* Der von uns gewählte Wert wurde auf Grund des Kontrasts der eingestellten Primärfarbe gewählt. Führt dazu, dass die errechnete Vordergrundfarbe auf Buttons usw. bei der Primärfarbe weiß und nicht schwarz wird.


# Atmos - Demo 2

Diese Demo zeichnet sich durch seine globalen Layoutabstände aus, welche den Blick auf ein gerade verlaufendes Hintergrundbild gibt. Das Layout ist minimal und mehrzeilig.

## Einstellungen der Zusatzfelder

Über Zusatzfelder erweitert das Theme die Funktionen des Shops in den Bereichen *Kataloge > Kategorien* und *Kataloge > Produkte*. Zusatzfelder können so die Darstellung für jede Kategorie oder jedes Produkt einzeln verändern.

### Startseite

{% hint style="info" %}
Diese Demo nutzt keine abweichenden Einstellungen in den Zusatzfeldern.
{% endhint %}

### Kategorien

Manche Kategorien nutzen die Theme-eigene Kategoriebild Funktion. Erfahre im Bereich INHALTE > Kategorie > [Kategoriebild](/content/kategorie/kategoriebild) mehr zu den Möglichkeiten.

![](/files/QAm34sxDE7dAuqEGbwrA)

## Abweichende Einstellungen

Konfigurationen, welche wir über ein Update implementiert haben, können oft nicht mit dem Standard-Wert ausgeliefert werden, der in der Demo dargestellt wird. Damit stellen wir sicher, dass bestehende Onlineshops nicht ohne das Wissen des Kunden verändert werden.

Die abweichenden Einstellungen haben wir hier aufgelistet:

<table><thead><tr><th width="630.2550199284714">Styling</th><th>Wert</th><th data-hidden></th></tr></thead><tbody><tr><td>Allgemein > Produktbilder > Breite Artikelbild</td><td>1890*</td><td></td></tr><tr><td>Allgemein > Produktbilder > Höhe Artikelbild</td><td>2400*</td><td></td></tr><tr><td>Header > Flyout Navigation > Grundeinstellungen > Icon bei externen Links</td><td>true</td><td></td></tr><tr><td>Kategorie > Produkt-Boxen > Grundeinstellungen > Varianten günstigster Preis</td><td>false</td><td></td></tr><tr><td>Footer > Footer Bottom > Grundeinstellungen > Service-Navigation anzeigen</td><td>false</td><td>aus</td></tr><tr><td>Produkt > Details > Produkt Details > alle Switch Felder</td><td>true</td><td></td></tr><tr><td>Produkt > Details > Galerie Slider > Breite &#x26; Höhe > Verwende Seitenverhältnis der Artikelbilder für Galerie-Höhe</td><td>true</td><td></td></tr><tr><td>Allgemein > Scroll Animation > Grundeinstellungen > Produkt Listing animieren</td><td>true</td><td></td></tr></tbody></table>

<table><thead><tr><th width="631">Einstellungen</th><th>Wert</th></tr></thead><tbody><tr><td>Youtube Video Consent</td><td>Ja</td></tr></tbody></table>

\*Diese Werte sind angepasst an unsere Produktbilder. Eine Übernahme dieser Werte ist daher nicht empfehlenswert.


# Atmos - Demo 3

Diese Demo zeichnet sich durch seinen teiltransparenten Header und sein Dark-layout aus.

## Einstellungen der Zusatzfelder

Über Zusatzfelder erweitert das Theme die Funktionen des Shops in den Bereichen *Kataloge > Kategorien* und *Kataloge > Produkte*. Zusatzfelder können so die Darstellung für jede Kategorie oder jedes Produkt einzeln verändern.

### Startseite

![](/files/glJv6pStaDYAPH6Lt6rG)

Der **Header ist überlagernd (1)** und die **Hintergrund-Deckkraft (2)** auf `90%` reduziert. Dadurch überlagert der Header auf dem Slider-Element. Die **Hauptnavigation** erhält ihre **Deckkraft (3)** weiterhin aus der globalen Theme-Konfiguration.

{% hint style="info" %}
Der Header hat in den Theme-Einstellungen unter *Header > Header > Farben > Background* eine teiltransparente Farbe im rgba-Format:\
`rgba($sw-color-brand-secondary, 60%)`

Daher wird die Kategorie-Navigation teiltransparent dargestellt.
{% endhint %}

{% hint style="info" %}
Die Main Navigation hat in den Theme-Einstellungen unter *Header > Main Navigation > Farben > Background* eine teiltransparente Farbe im rgba-Format:\
rgba($sw-color-brand-secondary, 95%)

Daher wird die Kategorie-Navigation teiltransparent dargestellt.
{% endhint %}

Weitere Informationen zum überlagernden Header findest Du unter INHALTE > Kategorie > [Überlagernder Header](/content/kategorie/ueberlagernden-header).

### Kategorien

Manche Kategorien nutzen die Theme-eigene Kategoriebild Funktion. Erfahre im Bereich INHALTE > Kategorie > [Kategoriebild](/content/kategorie/kategoriebild) mehr zu den Möglichkeiten.

![](/files/dvkmNHAEwEn58uk6lROD)

## Abweichende Einstellungen

Konfigurationen, welche wir über ein Update implementiert haben, können oft nicht mit dem Standard-Wert ausgeliefert werden, der in der Demo dargestellt wird. Damit stellen wir sicher, dass bestehende Onlineshops nicht ohne das Wissen des Kunden verändert werden.

Die abweichenden Einstellungen haben wir hier aufgelistet:

<table><thead><tr><th width="630.2550199284714">Konfiguration</th><th>Wert</th><th data-hidden></th></tr></thead><tbody><tr><td>Allgemein > Grundlayout > Header (mobil)</td><td>Einzeiliger Header</td><td></td></tr><tr><td>Allgemein > Produktbilder > Breite Artikelbild</td><td>1890*</td><td></td></tr><tr><td>Allgemein > Produktbilder > Höhe Artikelbild</td><td>2400*</td><td></td></tr><tr><td>Header > Flyout Navigation > Grundeinstellungen > Icon bei externen Links</td><td>true</td><td></td></tr><tr><td>Kategorie > Produkt-Boxen > Grundeinstellungen > Varianten günstigster Preis</td><td>false</td><td></td></tr><tr><td>Footer > Footer Bottom > Grundeinstellungen > Service-Navigation anzeigen</td><td>false</td><td>aus</td></tr><tr><td>Produkt > Details > Produkt Details > alle Switch Felder</td><td>true</td><td></td></tr><tr><td>Produkt > Details > Galerie Slider > Breite &#x26; Höhe > Verwende Seitenverhältnis der Artikelbilder für Galerie-Höhe</td><td>true</td><td></td></tr><tr><td>Allgemein > Scroll Animation > Grundeinstellungen > Produkt Listing animieren</td><td>true</td><td></td></tr></tbody></table>

<table><thead><tr><th width="631">Einstellungen</th><th>Wert</th></tr></thead><tbody><tr><td>Youtube Video Consent</td><td>Ja</td></tr></tbody></table>

\*Diese Werte sind angepasst an unsere Produktbilder. Eine Übernahme dieser Werte ist daher nicht empfehlenswert.


# Atmos - Demo 4

Die Demo zeigt ein boxed-Layout. Der Shop ist optisch durch eine maximale Breite begrenzt.

## Einstellungen der Zusatzfelder

Über Zusatzfelder erweitert das Theme die Funktionen des Shops in den Bereichen *Kataloge > Kategorien* und *Kataloge > Produkte*. Zusatzfelder können so die Darstellung für jede Kategorie oder jedes Produkt einzeln verändern.

### Startseite

{% hint style="info" %}
Diese Demo nutzt keine abweichenden Einstellungen in den Zusatzfeldern.
{% endhint %}

### Kategorien

Manche Kategorien nutzen die Theme-eigene Kategoriebild Funktion. Erfahre im Bereich INHALTE > Kategorie > [Kategoriebild](/content/kategorie/kategoriebild) mehr zu den Möglichkeiten.

![](/files/g5A6Nard7fbzoWEbiPso)

## Abweichende Einstellungen

Konfigurationen, welche wir über ein Update implementiert haben, können oft nicht mit dem Standard-Wert ausgeliefert werden, der in der Demo dargestellt wird. Damit stellen wir sicher, dass bestehende Onlineshops nicht ohne das Wissen des Kunden verändert werden.

Die abweichenden Einstellungen haben wir hier aufgelistet:

<table><thead><tr><th width="630.2550199284714">Styling</th><th>Wert</th><th data-hidden></th></tr></thead><tbody><tr><td>Allgemein > Grundlayout > Header (mobil)</td><td>Einzeiliger Header</td><td></td></tr><tr><td>Allgemein > Produktbilder > Breite Artikelbild</td><td>1890*</td><td></td></tr><tr><td>Allgemein > Produktbilder > Höhe Artikelbild</td><td>2400*</td><td></td></tr><tr><td>Header > Flyout Navigation > Grundeinstellungen > Icon bei externen Links</td><td>true</td><td></td></tr><tr><td>Kategorie > Produkt-Boxen > Grundeinstellungen > Varianten günstigster Preis</td><td>false</td><td></td></tr><tr><td>Footer > Footer Bottom > Grundeinstellungen > Service-Navigation anzeigen</td><td>false</td><td>aus</td></tr><tr><td>Produkt > Details > Produkt Details > alle Switch Felder</td><td>true</td><td></td></tr><tr><td>Produkt > Details > Galerie Slider > Breite &#x26; Höhe > Verwende Seitenverhältnis der Artikelbilder für Galerie-Höhe</td><td>true</td><td></td></tr><tr><td>Allgemein > Scroll Animation > Grundeinstellungen > Produkt Listing animieren</td><td>true</td><td></td></tr></tbody></table>

<table><thead><tr><th width="631">Einstellungen</th><th>Wert</th></tr></thead><tbody><tr><td>Youtube Video Consent</td><td>Ja</td></tr></tbody></table>

\*Diese Werte sind angepasst an unsere Produktbilder. Eine Übernahme dieser Werte ist daher nicht empfehlenswert.


# Gravity - Demo 1

Das Layout ist für große Onlinehops mit einem breiten Sortiment ausgelegt. Die Suche steht im Vordergrund und die Kategorien haben eine eigene Zeile.

## Einstellungen der Zusatzfelder

Über Zusatzfelder erweitert das Theme die Funktionen des Shops in den Bereichen *Kataloge > Kategorien* und *Kataloge > Produkte*. Zusatzfelder können so die Darstellung für jede Kategorie oder jedes Produkt einzeln verändern.

### Startseite

{% hint style="info" %}
Diese Demo nutzt keine abweichenden Einstellungen in den Zusatzfeldern.
{% endhint %}

### Kategorien

Manche Kategorien nutzen die Theme-eigene Kategoriebild Funktion. Erfahre im Bereich INHALTE > Kategorie > [Kategoriebild](/content/kategorie/kategoriebild) mehr zu den Möglichkeiten.

![](/files/wcMNNfl0548fAdzxYK21)

## Abweichende Einstellungen

Konfigurationen, welche wir über ein Update implementiert haben, können oft nicht mit dem Standard-Wert ausgeliefert werden, der in der Demo dargestellt wird. Damit stellen wir sicher, dass bestehende Onlineshops nicht ohne das Wissen des Kunden verändert werden.

Die abweichenden Einstellungen haben wir hier aufgelistet:

<table><thead><tr><th width="630.2550199284714">Styling</th><th>Wert</th><th data-hidden></th></tr></thead><tbody><tr><td>Allgemein > Grundlayout > Header (mobil)</td><td>Einzeiliger Header</td><td></td></tr><tr><td>Allgemein > Produktbilder > Breite Artikelbild</td><td>1890*</td><td></td></tr><tr><td>Allgemein > Produktbilder > Höhe Artikelbild</td><td>2400*</td><td></td></tr><tr><td>Typografie &#x26; Farben > Farben > Grundeinstellungen > Kontrast Schwellenwert</td><td>180</td><td></td></tr><tr><td>Header > Flyout Navigation > Grundeinstellungen > Icon bei externen Links</td><td>true</td><td></td></tr><tr><td>Footer > Footer Bottom > Grundeinstellungen > Service-Navigation anzeigen</td><td>false</td><td>aus</td></tr><tr><td>Produkt > Details > Produkt Details > alle Switch Felder</td><td>true</td><td></td></tr><tr><td>Produkt > Details > Galerie Slider > Breite &#x26; Höhe > Verwende Seitenverhältnis der Artikelbilder für Galerie-Höhe</td><td>true</td><td></td></tr><tr><td>Allgemein > Scroll Animation > Grundeinstellungen > Produkt Listing animieren</td><td>true</td><td></td></tr></tbody></table>

<table><thead><tr><th width="631">Einstellungen</th><th>Wert</th></tr></thead><tbody><tr><td>Youtube Video Consent</td><td>Ja</td></tr></tbody></table>

\*Diese Werte sind angepasst an unsere Produktbilder. Eine Übernahme dieser Werte ist daher nicht empfehlenswert.


# Gravity - Demo 2

Das Layout ist für große Onlinehops mit einem breiten Sortiment ausgelegt. Die Suche steht im Vordergrund und die Kategorien haben eine eigene Zeile.

## Einstellungen der Zusatzfelder

Über Zusatzfelder erweitert das Theme die Funktionen des Shops in den Bereichen *Kataloge > Kategorien* und *Kataloge > Produkte*. Zusatzfelder können so die Darstellung für jede Kategorie oder jedes Produkt einzeln verändern.

### Startseite

{% hint style="info" %}
Diese Demo nutzt keine abweichenden Einstellungen in den Zusatzfeldern.
{% endhint %}

### Kategorien

Manche Kategorien nutzen die Theme-eigene Kategoriebild Funktion. Erfahre im Bereich INHALTE > Kategorie > [Kategoriebild](/content/kategorie/kategoriebild) mehr zu den Möglichkeiten.

![](/files/TU6wg2H57z2yaRigT3Mq)

## Abweichende Einstellungen

Konfigurationen, welche wir über ein Update implementiert haben, können oft nicht mit dem Standard-Wert ausgeliefert werden, der in der Demo dargestellt wird. Damit stellen wir sicher, dass bestehende Onlineshops nicht ohne das Wissen des Kunden verändert werden.

Die abweichenden Einstellungen haben wir hier aufgelistet:

<table><thead><tr><th width="630.2550199284714">Styling</th><th>Wert</th><th data-hidden></th></tr></thead><tbody><tr><td>Header > Flyout Navigation > Grundeinstellungen > Icon bei externen Links</td><td>true</td><td></td></tr><tr><td>Produkt > Details > Produkt Details > alle Switch Felder</td><td>true</td><td></td></tr><tr><td>Allgemein > Scroll Animation > Grundeinstellungen > Produkt Listing animieren</td><td>true</td><td></td></tr></tbody></table>

<table><thead><tr><th width="631">Einstellungen</th><th>Wert</th></tr></thead><tbody><tr><td>Youtube Video Consent</td><td>Ja</td></tr></tbody></table>

\*Diese Werte sind angepasst an unsere Produktbilder. Eine Übernahme dieser Werte ist daher nicht empfehlenswert.


# Horizon - Demo 1

Das Layout zeichnet sich durch eine schwarze/weiße Farbgebung und seiner markanten Schriftart aus. Hier geben vor allem die Bilder die Farbstimmung vor.

## Einstellungen der Zusatzfelder

Über Zusatzfelder erweitert das Theme die Funktionen des Shops in den Bereichen *Kataloge > Kategorien* und *Kataloge > Produkte*. Zusatzfelder können so die Darstellung für jede Kategorie oder jedes Produkt einzeln verändern.

### Startseite

![](/files/XC6F1vjlf6KsISgMpJVw)

In dieser Demo liegt der Kopfbereich der Startseite über dem darunter liegenden Slider-Element. Der Header hat einen transparenten Hintergrund.

![](/files/OpxbKKhlHRjxuKNmIdo5)

Die Einstellung **Header überlagernd (1)** setzt den gesamten Kopfbereich über das darunter liegende Erlebniswelten-Element. Das kann ein Slider, ein Bild oder sogar ein Video sein. Damit das Erlebniswelten-Element voll zu sehen ist, erhalten die **Header Hintergrund Deckkraft (2)** sowie die **Hauptnavigation Hintergrund Deckkraft (3)** eine Sichtbarkeit von `0%`.

Weitere Informationen zum überlagernden Header findest Du unter INHALTE > Kategorie > [Überlagernder Header](/content/kategorie/ueberlagernden-header).

### Kategorien

Manche Kategorien nutzen die Theme-eigene Kategoriebild Funktion. Erfahre im Bereich INHALTE > Kategorie > [Kategoriebild](/content/kategorie/kategoriebild) mehr zu den Möglichkeiten.

![](/files/seLpPtXyyTZg70yNvApV)

## Abweichende Einstellungen

Konfigurationen, welche wir über ein Update implementiert haben, können oft nicht mit dem Standard-Wert ausgeliefert werden, der in der Demo dargestellt wird. Damit stellen wir sicher, dass bestehende Onlineshops nicht ohne das Wissen des Kunden verändert werden.

Die abweichenden Einstellungen haben wir hier aufgelistet:

<table><thead><tr><th width="630.2550199284714">Styling</th><th>Wert</th><th data-hidden></th></tr></thead><tbody><tr><td>Allgemein > Grundlayout > Header (mobil)</td><td>Einzeiliger Header</td><td></td></tr><tr><td>Allgemein > Produktbilder > Breite Artikelbild</td><td>1890*</td><td></td></tr><tr><td>Allgemein > Produktbilder > Höhe Artikelbild</td><td>2400*</td><td></td></tr><tr><td>Header > Flyout Navigation > Grundeinstellungen > Icon bei externen Links</td><td>true</td><td></td></tr><tr><td>Kategorie > Produkt-Boxen > Grundeinstellungen > Varianten günstigster Preis</td><td>false</td><td></td></tr><tr><td>Footer > Footer Bottom > Grundeinstellungen > Service-Navigation anzeigen</td><td>false</td><td>aus</td></tr><tr><td>Produkt > Details > Produkt Details > alle Switch Felder</td><td>true</td><td></td></tr><tr><td>Produkt > Details > Galerie Slider > Breite &#x26; Höhe > Verwende Seitenverhältnis der Artikelbilder für Galerie-Höhe</td><td>true</td><td></td></tr><tr><td>Allgemein > Scroll Animation > Grundeinstellungen > Produkt Listing animieren</td><td>true</td><td></td></tr></tbody></table>

<table><thead><tr><th width="631">Einstellungen</th><th>Wert</th></tr></thead><tbody><tr><td>Youtube Video Consent</td><td>Ja</td></tr></tbody></table>

\*Diese Werte sind angepasst an unsere Produktbilder. Eine Übernahme dieser Werte ist daher nicht empfehlenswert.


# Horizon - Demo 2

Das Layout zeichnet sich durch seine klaren Schrift und seiner markanten Farbgebung aus. Das Hauptmenü wird als Dropdown ausgegeben.

## Einstellungen der Zusatzfelder

Über Zusatzfelder erweitert das Theme die Funktionen des Shops in den Bereichen *Kataloge > Kategorien* und *Kataloge > Produkte*. Zusatzfelder können so die Darstellung für jede Kategorie oder jedes Produkt einzeln verändern.

### Startseite

{% hint style="info" %}
Diese Demo nutzt keine abweichenden Einstellungen in den Zusatzfeldern.
{% endhint %}

### Kategorien

Manche Kategorien nutzen die Theme-eigene Kategoriebild Funktion. Erfahre im Bereich INHALTE > Kategorie > [Kategoriebild](/content/kategorie/kategoriebild) mehr zu den Möglichkeiten.

![](/files/vijvsbJtr6Is9w4ztMV6)

### Detailseite

In unserer Demo verwenden wir für einige Produkte auf der Produkt-Detailseite statt des normalen Galerie-Sliders die Darstellung des Galerie-Rasters. Diese Einstellung kann in den [Theme-Einstellung](/content/detailseite/galerie-modus) global gesetzt werden oder über die Zusatzfelder in jedem Produkt einzeln hinterlegt werden.

Im Bereich der **Zusatzfelder (1)** des Produktes im Tab **Galerie (2)** kann der **Galerie Modus (3)** auf `Galerie Raster` gesetzt werden.

![](/files/kYLPknxmFZoToZpIMbMf)

Beispiel:

![Galerie Raster](/files/MC7xZxGxBCNsijL5Dkwd)

## Abweichende Einstellungen

Konfigurationen, welche wir über ein Update implementiert haben, können oft nicht mit dem Standard-Wert ausgeliefert werden, der in der Demo dargestellt wird. Damit stellen wir sicher, dass bestehende Onlineshops nicht ohne das Wissen des Kunden verändert werden.

Die abweichenden Einstellungen haben wir hier aufgelistet:

<table><thead><tr><th width="630.2550199284714">Styling</th><th>Wert</th><th data-hidden></th></tr></thead><tbody><tr><td>Allgemein > Grundlayout > Header (mobil)</td><td>Einzeiliger Header</td><td></td></tr><tr><td>Allgemein > Produktbilder > Breite Artikelbild</td><td>1890*</td><td></td></tr><tr><td>Allgemein > Produktbilder > Höhe Artikelbild</td><td>2400*</td><td></td></tr><tr><td>Header > Flyout Navigation > Grundeinstellungen > Icon bei externen Links</td><td>true</td><td></td></tr><tr><td>Kategorie > Produkt-Boxen > Grundeinstellungen > Varianten günstigster Preis</td><td>false</td><td></td></tr><tr><td>Produkt > Details > Produkt Details > alle Switch Felder</td><td>true</td><td></td></tr><tr><td>Allgemein > Scroll Animation > Grundeinstellungen > Produkt Listing animieren</td><td>true</td><td></td></tr></tbody></table>

<table><thead><tr><th width="631">Einstellungen</th><th>Wert</th></tr></thead><tbody><tr><td>Youtube Video Consent</td><td>Ja</td></tr></tbody></table>

\*Diese Werte sind angepasst an unsere Produktbilder. Eine Übernahme dieser Werte ist daher nicht empfehlenswert.

## Erlebniswelt

Eine grundlegende Einleitung zu den Erlebniswelten findest Du in der Shopware Doku im Bereich [Erlebniswelten](https://docs.shopware.com/de/shopware-6-de/Inhalte/Erlebniswelten). Dort werden die grundlegenden Begriffe und Einstellungen der Layouts, Sektionen und Blöcke erklärt.

### Sektion 1

Die Sektion besteht aus einem Slider, einem Textbereich und einem dreispaltigen Teaser Element.

![](/files/ZksNYsogLR6DX4kdZ5AF)

*Sektion-Einstellungen:*

* CSS-Klassen: `-`
* Größenmodus: `Volle Breite`
* Hintergrundfarbe: `-`
* Hintergrundbild: `-`
* Bildmodus: `-`

#### Bild Text Slider

*Elemente (Horizon) > Bild Text Slider*

{% tabs %}
{% tab title="Block Einstellungen" %}

* Hintergrundfarbe: `-`
* Hintergrundbild: `-`
* Bildmodus: `-`
* CSS-Klassen: `-`
* Oberer Abstand: `0px`
* Unterer Abstand: `0px`
* Linker Abstand: `0px`
* Rechter Abstand: `0px`
  {% endtab %}

{% tab title="Element Inhalt" %}
Der Bild Text Slider besteht aus vier Bildern, welche optisch ineinander übergehen. Maße pro Bild ca. `1920x2000px`
{% endtab %}

{% tab title="Element Einstellungen" %}
Der Bild Text Slider besteht aus vier Bildern. Die Besonderheit in den **Einstellungen (1)** des Sliders ist der eingestellte **Modus (2)**. Im **Karussell-Modus (2)** werden zwei Slider-**Elemente (3)** gleichzeitig angezeigt. Der **Abstand (4)** zwischen den einzelnen Bilder beträgt `0px`, sodass die Bilder optisch miteinander verschmelzen.

![](/files/XZmLdi8Pcl9Mo0YnAC4O)
{% endtab %}

{% tab title="#1" %}
Die Einstellungen von Slide #1 und #3 sind bis auf den Text identischt. In den Slides #2 und #4 wurden keine Einstellungen getätigt.

Im Text-Editor des Slides wurde der Text und der Button mit ein paar Styles und Klassen aus dem zugrunde liegenden Framework aufgepeppt:

```html
<h3 class="display-3 font-weight-bold">Create your natural beautiful online shop</h3>
<p class="lead" style="max-width: 460px;">With Theme Horizon Demo 2 you can create your individual beautiful online shop with just a few clicks.</p>
<a rel="noopener" target="_blank" href="#" class="btn btn-buy">Jetzt kostenlos testen</a>
```

* Farbe: `#244143`
* Hintergrund: `transparent`
* Vertikale Ausrichtung: `Mitte`
* Horizontale Ausrichtung: `Links`
* Minimale Breite: `-`
* Maximale Breite: `90%`
  {% endtab %}
  {% endtabs %}

Beispiel:

![](/files/SrtVR3y5MQXH41kHg080)

#### Drei Spalten 3/6/3

*Spalten (Horizon) > Drei Spalten 3/6/3*

Der Block "Drei Spalten 3/6/3" enthält zunächst keine Elemente, welche im nächsten Schritt hinzugefügt werden.

{% tabs %}
{% tab title="Block Einstellungen" %}

* Hintergrundfarbe: `#f1d2b6`
* Hintergrundbild: `-`
* Bildmodus: `-`
* CSS-Klassen: `-`
* Oberer Abstand: `150px`
* Unterer Abstand: `150px`
* Linker Abstand: `auto`
* Rechter Abstand: `auto`
  {% endtab %}

{% tab title="Spalte 1: Text Element" %}
Spalte 1 wird mit einem einfachen Text-Element gefüllt und dessen Inhalt geleert. Wir benötigen das Element nur als Platzhalter, damit der mittlere Text nicht zu breit wird.
{% endtab %}

{% tab title="Spalte 2: Text Element" %}
Das Text-Element hat folgenden Inhalt:

```html
<div style="text-align: center;">
    <font color="#981f0f">Lorel ipsum dolor</font>
</div>
<h3 class="display-4 font-weight-bold" style="text-align: center;">
    <font color="#981f0f">Organic &amp; Natural Body Oil that makes you a true beauty!</font>
</h3>
<div style="text-align: center;">
    <a href="#" class="btn btn-secondary">Shop Now</a>
</div>
```

{% endtab %}

{% tab title="Spalte 3: Text Element" %}
Spalte 3 wird mit einem einfachen Text-Element gefüllt und dessen Inhalt geleert. Wir benötigen das Element nur als Platzhalter, damit der mittlere Text nicht zu breit wird.
{% endtab %}
{% endtabs %}

#### Teaser - Drei Spalten

*Elemente (Horizon) > Teaser - Drei Spalten*

{% tabs %}
{% tab title="Block Einstellungen" %}

* Hintergrundfarbe: `-`
* Hintergrundbild: `-`
* Bildmodus: `-`
* CSS-Klassen: `zen-animate slide-in-blurred-bottom`
* Oberer Abstand: `40px`
* Unterer Abstand: `100px`
* Linker Abstand: `auto`
* Rechter Abstand: `auto`
  {% endtab %}

{% tab title="Element Inhalt" %}

* Mouse-Over Effekt: `slide-in-blurred-bottom`
* Mouse-Out Effekt: `slide-out-blurred-bottom`
  {% endtab %}

{% tab title="Element Text" %}

* Schriftart: `Schriftart Überschriften`
* Text Ausrichtung: `Mitte`
* Schriftgröße: `36px`
* Schriftgewicht: `Semi-bold - 600`
* Farbe: `#344854`
* Hintergrund: `-`
* Vertikale Ausrichtung: `Unten`
* Horizontale Ausrichtung: `Mitte`
* Minimale Breite: `-`
* Maximale Breite: `300px`
  {% endtab %}

{% tab title="Element Bild" %}

* Anzeigemodus: `Strecken`
* Vertikale Ausrichtung: `-`
* Bild Mouse-Over: `Bild Zoom`
  {% endtab %}
  {% endtabs %}

Alle drei Teaser sind identisch in ihren Einstellungen. Sie unterscheiden sich lediglich im ausgewählten Bild, Text und der Verlinkung.

### Sektion 2

![](/files/LC35l355evwuKW2UQn1J)

*Sektion-Einstellungen:*

* CSS-Klassen: `-`
* Größenmodus: `Zentrierter Inhalt`
* Hintergrundfarbe: `-`
* Hintergrundbild: `-`
* Bildmodus: `-`

#### Teaser-Text

*Text > Teaser-Text*

{% tabs %}
{% tab title="Block Einstellungen" %}

* Hintergrundfarbe: `-`
* Hintergrundbild: `-`
* Bildmodus: `-`
* CSS-Klassen: `zen-animate slide-in-blurred-bottom`
* Oberer Abstand: `100px`
* Unterer Abstand: `20px`
* Linker Abstand: `auto`
* Rechter Abstand: `auto`
  {% endtab %}

{% tab title="Element Inhalt" %}
Der Inhalt des Text Elementes lautet:

```html
<h2 style="text-align: center; font-size: 36px;">Top sellers</h2>
<p style="text-align: center;">
    Lorem ipsum dolor sit amet.
</p>
```

{% endtab %}

{% tab title="Element Einstellungen" %}
Keine
{% endtab %}
{% endtabs %}

#### Produkt-Slider

*Commerce > Produkt-Slider*

{% tabs %}
{% tab title="Block Einstellungen" %}

* Hintergrundfarbe: `-`
* Hintergrundbild: `-`
* Bildmodus: `-`
* CSS-Klassen: `zen-animate fade-in-top`
* Oberer Abstand: `20px`
* Unterer Abstand: `20px`
* Linker Abstand: `auto`
* Rechter Abstand: `auto`
  {% endtab %}

{% tab title="Element Inhalt" %}

* Slider-Titel: `-`
  {% endtab %}

{% tab title="Element Einstellungen" %}

* Anzeigemodus: `Beinhalten`
* Vertikale Ausrichtung: `Oben`
* Layout-Typ: `Minimaler Inhalt`
* Navigation: `Ja`
* Automatischer Wechsel: `Nein`
* Rahmen: `Nein`
* Minimale Weite: `300px`
  {% endtab %}
  {% endtabs %}

#### Teaser-Text

Text > Teaser-Text

{% tabs %}
{% tab title="Block Einstellungen" %}

* Hintergrundfarbe: `-`
* Hintergrundbild: `-`
* Bildmodus: `-`
* CSS-Klassen: `-`
* Oberer Abstand: `0px`
* Unterer Abstand: `100px`
* Linker Abstand: `auto`
* Rechter Abstand: `auto`
  {% endtab %}

{% tab title="Element Inhalt" %}
Zur Darstellung des Buttons kann folgender Code verwendet werden:

```html
<div style="text-align: center;">
    <a class="btn btn-buy" href="#">Alle ansehen</a>
</div>
```

Die Raute ist durch den Link zu ersetzen.
{% endtab %}

{% tab title="Element Einstellungen" %}
Keine
{% endtab %}
{% endtabs %}

### Sektion 3

![](/files/IFxX1sP8b9fswCw7Gu4D)

*Sektion-Einstellungen:*

* CSS-Klassen: `-`
* Größenmodus: `Zentrierter Inhalt`
* Hintergrundfarbe: `-`
* Hintergrundbild: `-`
* Bildmodus: `-`

#### Teaser

*Elemente (Horizon) > Teaser*

{% tabs %}
{% tab title="Block Einstellungen" %}

* Hintergrundfarbe: `-`
* Hintergrundbild: `-`
* Bildmodus: `-`
* CSS-Klassen: `zen-animate slide-in-blurred-bottom`
* Oberer Abstand: `20px`
* Unterer Abstand: `20px`
* Linker Abstand: `auto`
* Rechter Abstand: `auto`
  {% endtab %}

{% tab title="Element Inhalt" %}

* Mouse-Over Effekt: `keine`
* Mouse-Out Effekt: `keine`
* CSS-Klassen: `-`
  {% endtab %}

{% tab title="Element Text" %}

* Schriftart: `Schriftart Text`
* Text Ausrichtung: `Mitte`
* Schriftgröße: `46px`
* Schriftgewicht: `Semi-bold - 600`
* Farbe: `#981f0f`
* Hintergrund: `transparent`
* Vertikale Ausrichtung: `Mitte`
* Horizontale Ausrichtung: `Mitte`
* Minimale Breite: `-`
* Maximale Breite: `750px`
* Individuelle Abstände: `0px` `16px` `100px` `16px`
* Text Mouse-Over: `Keine`
  {% endtab %}

{% tab title="Element Bild" %}

* Anzeigemodus: `Füllen`
* Minimale Höhe: `770px`
* Vertikale Ausrichtung: `-`
* Bild Mouse-Over: `Bild Zoom`
* Abgerundete Ecken: `20px` `20px` `20px` `20px`
  {% endtab %}
  {% endtabs %}

#### Drei Spalten 3/6/3

*Spalten (Horizon) > Drei Spalten 3/6/3*

Der Block "Drei Spalten 3/6/3" enthält zunächst keine Elemente, welche im nächsten Schritt hinzugefügt werden.

{% tabs %}
{% tab title="Block Einstellungen" %}

* Hintergrundfarbe: `-`
* Hintergrundbild: `-`
* Bildmodus: `-`
* CSS-Klassen: `zen-animate slide-in-blurred-bottom`
* Oberer Abstand: `20px`
* Unterer Abstand: `20px`
* Linker Abstand: `auto`
* Rechter Abstand: `auto`
  {% endtab %}

{% tab title="Spalte 1: Text Element" %}
Spalte 1 wird mit einem einfachen Text-Element gefüllt und dessen Inhalt geleert. Wir benötigen das Element nur als Platzhalter, damit der mittlere Text nicht zu breit wird.
{% endtab %}

{% tab title="Spalte 2: Text Element" %}
Das Text-Element hat folgenden Inhalt:

```html
<p class="lead text-center" style="font-size: 24px">"Millions of combinations, meaning you create a totally unique online shop exactly the way you want it."</p>
```

{% endtab %}

{% tab title="Spalte 3: Text Element" %}
Spalte 3 wird mit einem einfachen Text-Element gefüllt und dessen Inhalt geleert. Wir benötigen das Element nur als Platzhalter, damit der mittlere Text nicht zu breit wird.
{% endtab %}
{% endtabs %}

#### Sechs Spalten

*Spalten (Horizon) > Sechs Spalten*

Der Block "Sechs Spalten" wird nach dem Platzieren mit Bild Elementen befüllt.

{% tabs %}
{% tab title="Block Einstellungen" %}

* Hintergrundfarbe: `-`
* Hintergrundbild: `-`
* Bildmodus: `-`
* CSS-Klassen: `zen-animate slide-in-blurred-bottom`
* Oberer Abstand: `20px`
* Unterer Abstand: `20px`
* Linker Abstand: `100px`
* Rechter Abstand: `100px`
  {% endtab %}

{% tab title="Element Bild" %}

* Bild: maße ca. `540x324px`
* Anzeigemodus: `Strecken`
* Vertikale Ausrichtung: `Mitte`
  {% endtab %}
  {% endtabs %}

Alle sechs Bild-Elemente haben identische Einstellungen

### Sektion 4

![](/files/au3MfKmK3G6qibQPhyM0)

*Sektion-Einstellungen:*

* CSS-Klassen: `-`
* Größenmodus: `Zentrierter Inhalt`
* Hintergrundfarbe: `-`
* Hintergrundbild: `-`
* Bildmodus: `-`

#### Teaser-Text

*Text > Teaser-Text*

{% tabs %}
{% tab title="Block Einstellungen" %}

* Hintergrundfarbe: `-`
* Hintergrundbild: `-`
* Bildmodus: `-`
* CSS-Klassen: `zen-animate slide-in-blurred-bottom`
* Oberer Abstand: `100px`
* Unterer Abstand: `20px`
* Linker Abstand: `auto`
* Rechter Abstand: `auto`
  {% endtab %}

{% tab title="Element Inhalt" %}
Der Inhalt des Text Elementes lautet:

```html
<h2 style="text-align: center; font-size: 36px;">Recent Arrivals</h2>
<p style="text-align: center;">
    Lorem ipsum dolor sit amet.
</p>
```

{% endtab %}

{% tab title="Element Einstellungen" %}
Keine
{% endtab %}
{% endtabs %}

#### Produkt-Slider

*Commerce > Produkt-Slider*

{% tabs %}
{% tab title="Block Einstellungen" %}

* Hintergrundfarbe: `-`
* Hintergrundbild: `-`
* Bildmodus: `-`
* CSS-Klassen: `zen-animate fade-in-top`
* Oberer Abstand: `20px`
* Unterer Abstand: `20px`
* Linker Abstand: `auto`
* Rechter Abstand: `auto`
  {% endtab %}

{% tab title="Element Inhalt" %}

* Slider-Titel: `-`
  {% endtab %}

{% tab title="Element Einstellungen" %}

* Anzeigemodus: `Beinhalten`
* Vertikale Ausrichtung: `Oben`
* Layout-Typ: `Minimaler Inhalt`
* Navigation: `Ja`
* Automatischer Wechsel: `Nein`
* Rahmen: `Nein`
* Minimale Weite: `300px`
  {% endtab %}
  {% endtabs %}

#### Teaser-Text

*Text > Teaser-Text*

{% tabs %}
{% tab title="Block Einstellungen" %}

* Hintergrundfarbe: `-`
* Hintergrundbild: `-`
* Bildmodus: `-`
* CSS-Klassen: `-`
* Oberer Abstand: `0px`
* Unterer Abstand: `100px`
* Linker Abstand: `auto`
* Rechter Abstand: `auto`
  {% endtab %}

{% tab title="Element Inhalt" %}
Zur Darstellung des Buttons kann folgender Code verwendet werden:

```html
<div style="text-align: center;">
    <a class="btn btn-buy" href="#">Alle ansehen</a>
</div>
```

Die Raute ist durch den Link zu ersetzen.
{% endtab %}

{% tab title="Element Einstellungen" %}
Keine
{% endtab %}
{% endtabs %}

### Sektion 5

![](/files/cEcdNXxUEzWH6sXMdVb5)

*Sektion-Einstellungen:*

* CSS-Klassen: `-`
* Größenmodus: `Zentrierter Inhalt`
* Hintergrundfarbe: `-`
* Hintergrundbild: `-`
* Bildmodus: `-`

#### Zwei Spalten 8/4

*Spalten (Horizon) > Zwei Spalten 8/4*

{% tabs %}
{% tab title="Block Einstellungen" %}

* Hintergrundfarbe: `-`
* Hintergrundbild: `-`
* Bildmodus: `-`
* CSS-Klassen: `zen-animate slide-in-blurred-bottom zen-cms-g-5`
* Oberer Abstand: `100px`
* Unterer Abstand: `100px`
* Linker Abstand: `100px`
* Rechter Abstand: `100px`

Die Klasse `zen-cms-g-5` sorgt für einen größeren Abstand zwischen den Spalten des *Zwei Spalten 8/4* Blocks. Mehr über die Einstellungen von Abständen der Spalten, findest Du unter [Block Abstände](/content/erlebniswelten/block-innen-abstaende).
{% endtab %}

{% tab title="Spalte 1: Bild Element" %}

* Bild: Das Bild besteht optisch aus zwei versetzten Bildern. Maße ca. `1600x2000px`
* Anzeigemodus: `Standard`
* Vertikale Ausrichtung: `Mitte`
  {% endtab %}

{% tab title="Spalte 2: Text Element" %}
*Inhalt:*

```html
<p class="lead text-center" style="font-size: 24px">"Millions of combinations, meaning you create a totally unique online shop exactly the way you want it."</p>
```

*Einstellungen:*

* Vertikale Ausrichtung: `Mitte`
  {% endtab %}
  {% endtabs %}

#### Features

*Elemente (Horizon) > Features*

{% tabs %}
{% tab title="Block Einstellungen" %}

* Hintergrundfarbe: `-`
* Hintergrundbild: `-`
* Bildmodus: `-`
* CSS-Klassen: `-`
* Oberer Abstand: `20px`
* Unterer Abstand: `20px`
* Linker Abstand: `auto`
* Rechter Abstand: `auto`
  {% endtab %}

{% tab title="Element Einstellungen" %}

* Feature 1 - Icon: `package-closed`
* Feature 1 - Text: `Free Shipping <small>From 1€ minimum order value</small>`
* Feature 2 - Icon: `history`
* Feature 2 - Text: `Free returnals <small>Don’t love it? Send it back, on us.</small>`
* Feature 3 - Icon: `shield`
* Feature 3 - Text: `Safe shopping <small>Trusted Shopping with SSL/TLS.</small>`
  {% endtab %}
  {% endtabs %}


# Sphere - Demo 1

In dieser Demo liegt der Header auf der Startseite inkl. Hintergrundfarbe auf dem Slider-Element. Der Kontrast zwischen Bild und Header ist durch die Hintergrundfarbe des Headers immer gewahrt.

## Einstellungen der Zusatzfelder

Über Zusatzfelder erweitert das Theme die Funktionen des Shops in den Bereichen *Kataloge > Kategorien* und *Kataloge > Produkte*. Zusatzfelder können so die Darstellung für jede Kategorie oder jedes Produkt einzeln verändern.

### Startseite

![](/files/Q164RtRx3VDiHrHsTsXR)

In dieser Demo liegt der Kopfbereich der Startseite über dem darunter liegenden Slider-Element. Der Header hat einen transparenten Hintergrund.

![](/files/vM8TU3bf3ykxaKzcTMIg)

Die Einstellung **Header überlagernd (1)** setzt den gesamten Kopfbereich über das darunter liegende Erlebniswelten-Element. Das kann ein Slider, ein Bild oder sogar ein Video sein. Damit der Kontrast auch dynamischen Bildern gewahrt bleibt, bleibt die **Header Hintergrund Deckkraft (2)** sowie die **Hauptnavigation Hintergrund Deckkraft (3)** `vererbt` und erhält dadurch die weiße Hintergrundfarbe aus der Theme-Konfiguration.

Weitere Informationen zum überlagernden Header findest Du unter INHALTE > Kategorie > [Überlagernder Header](/content/kategorie/ueberlagernden-header).

### Kategorien

Manche Kategorien nutzen die Theme-eigene Kategoriebild Funktion. Erfahre im Bereich INHALTE > Kategorie > [Kategoriebild](/content/kategorie/kategoriebild) mehr zu den Möglichkeiten.

![](/files/cLRXR1ZyjD8t1bqdfDK0)

## Abweichende Einstellungen

Konfigurationen, welche wir über ein Update implementiert haben, können oft nicht mit dem Standard-Wert ausgeliefert werden, der in der Demo dargestellt wird. Damit stellen wir sicher, dass bestehende Onlineshops nicht ohne das Wissen des Kunden verändert werden.

Die abweichenden Einstellungen haben wir hier aufgelistet:

<table><thead><tr><th width="630.2550199284714">Styling</th><th>Wert</th><th data-hidden></th></tr></thead><tbody><tr><td>Allgemein > Grundlayout > Header (mobil)</td><td>Einzeiliger Header</td><td></td></tr><tr><td>Allgemein > Produktbilder > Breite Artikelbild</td><td>1890*</td><td></td></tr><tr><td>Allgemein > Produktbilder > Höhe Artikelbild</td><td>2400*</td><td></td></tr><tr><td>Header > Flyout Navigation > Grundeinstellungen > Icon bei externen Links</td><td>true</td><td></td></tr><tr><td>Kategorie > Produkt-Boxen > Grundeinstellungen > Varianten günstigster Preis</td><td>false</td><td></td></tr><tr><td>Footer > Footer Bottom > Grundeinstellungen > Service-Navigation anzeigen</td><td>false</td><td>aus</td></tr><tr><td>Produkt > Details > Produkt Details > alle Switch Felder</td><td>true</td><td></td></tr><tr><td>Produkt > Details > Galerie Slider > Breite &#x26; Höhe > Verwende Seitenverhältnis der Artikelbilder für Galerie-Höhe</td><td>true</td><td></td></tr><tr><td>Allgemein > Scroll Animation > Grundeinstellungen > Produkt Listing animieren</td><td>true</td><td></td></tr></tbody></table>

<table><thead><tr><th width="631">Einstellungen</th><th>Wert</th></tr></thead><tbody><tr><td>Youtube Video Consent</td><td>Ja</td></tr></tbody></table>

\*Diese Werte sind angepasst an unsere Produktbilder. Eine Übernahme dieser Werte ist daher nicht empfehlenswert.


# Sphere - Demo 2

## Einstellungen der Zusatzfelder

Über Zusatzfelder erweitert das Theme die Funktionen des Shops in den Bereichen *Kataloge > Kategorien* und *Kataloge > Produkte*. Zusatzfelder können so die Darstellung für jede Kategorie oder jedes Produkt einzeln verändern.

### Startseite

{% hint style="info" %}
Diese Demo nutzt keine abweichenden Einstellungen in den Zusatzfeldern.
{% endhint %}

### Kategorien

Manche Kategorien nutzen die Theme-eigene Kategoriebild Funktion. Erfahre im Bereich INHALTE > Kategorie > [Kategoriebild](/content/kategorie/kategoriebild) mehr zu den Möglichkeiten.

![](/files/LdoqSvVxZjuHzqOz59pq)

## Abweichende Einstellungen

Konfigurationen, welche wir über ein Update implementiert haben, können oft nicht mit dem Standard-Wert ausgeliefert werden, der in der Demo dargestellt wird. Damit stellen wir sicher, dass bestehende Onlineshops nicht ohne das Wissen des Kunden verändert werden.

Die abweichenden Einstellungen haben wir hier aufgelistet:

<table><thead><tr><th width="630.2550199284714">Styling</th><th>Wert</th><th data-hidden></th></tr></thead><tbody><tr><td>Allgemein > Produktbilder > Breite Artikelbild</td><td>1890*</td><td></td></tr><tr><td>Allgemein > Produktbilder > Höhe Artikelbild</td><td>2400*</td><td></td></tr><tr><td>Header > Flyout Navigation > Grundeinstellungen > Icon bei externen Links</td><td>true</td><td></td></tr><tr><td>Kategorie > Produkt-Boxen > Grundeinstellungen > Varianten günstigster Preis</td><td>false</td><td></td></tr><tr><td>Produkt > Details > Produkt Details > alle Switch Felder</td><td>true</td><td></td></tr></tbody></table>

<table><thead><tr><th width="631">Einstellungen</th><th>Wert</th></tr></thead><tbody><tr><td>Youtube Video Consent</td><td>Ja</td></tr></tbody></table>

\*Diese Werte sind angepasst an unsere Produktbilder. Eine Übernahme dieser Werte ist daher nicht empfehlenswert.


# Stratus - Demo 1

Das Minimal Design zeichnet sich durch seine globalen Layoutabstände aus, welche den Onlineshop wie einen Rahmen umgeben.

## Einstellungen der Zusatzfelder

Über Zusatzfelder erweitert das Theme die Funktionen des Shops in den Bereichen *Kataloge > Kategorien* und *Kataloge > Produkte*. Zusatzfelder können so die Darstellung für jede Kategorie oder jedes Produkt einzeln verändern.

### Startseite

{% hint style="info" %}
Diese Demo nutzt keine abweichenden Einstellungen in den Zusatzfeldern.
{% endhint %}

### Kategorien

Manche Kategorien nutzen die Theme-eigene Kategoriebild Funktion. Erfahre im Bereich INHALTE > Kategorie > [Kategoriebild](/content/kategorie/kategoriebild) mehr zu den Möglichkeiten.

![](/files/5EMd3TL0a6e4gdv37061)

## Abweichende Einstellungen

Konfigurationen, welche wir über ein Update implementiert haben, können oft nicht mit dem Standard-Wert ausgeliefert werden, der in der Demo dargestellt wird. Damit stellen wir sicher, dass bestehende Onlineshops nicht ohne das Wissen des Kunden verändert werden.

Die abweichenden Einstellungen haben wir hier aufgelistet:

<table><thead><tr><th width="630.2550199284714">Styling</th><th>Wert</th><th data-hidden></th></tr></thead><tbody><tr><td>Allgemein > Grundlayout > Header (mobil)</td><td>Einzeiliger Header</td><td></td></tr><tr><td>Allgemein > Produktbilder > Breite Artikelbild</td><td>1890*</td><td></td></tr><tr><td>Allgemein > Produktbilder > Höhe Artikelbild</td><td>2400*</td><td></td></tr><tr><td>Header > Main Navigation > Unternavigation Aussehen</td><td>Dropdown Navigation</td><td></td></tr><tr><td>Header > Flyout Navigation > Grundeinstellungen > Icon bei externen Links</td><td>true</td><td></td></tr><tr><td>Kategorie > Produkt-Boxen > Grundeinstellungen > Varianten günstigster Preis</td><td>false</td><td></td></tr><tr><td>Footer > Footer Bottom > Grundeinstellungen > Service-Navigation anzeigen</td><td>false</td><td>aus</td></tr><tr><td>Produkt > Details > Produkt Details > alle Switch Felder</td><td>true</td><td></td></tr><tr><td>Allgemein > Scroll Animation > Grundeinstellungen > Produkt Listing animieren</td><td>true</td><td></td></tr></tbody></table>

<table><thead><tr><th width="631">Einstellungen</th><th>Wert</th></tr></thead><tbody><tr><td>Youtube Video Consent</td><td>Ja</td></tr></tbody></table>

\*Diese Werte sind angepasst an unsere Produktbilder. Eine Übernahme dieser Werte ist daher nicht empfehlenswert.

## Erlebniswelt

Eine grundlegende Einleitung zu den Erlebniswelten findest Du in der Shopware Doku im Bereich [Erlebniswelten](https://docs.shopware.com/de/shopware-6-de/Inhalte/Erlebniswelten). Dort werden die grundlegenden Begriffe und Einstellungen der Layouts, Sektionen und Blöcke erklärt.

### Sektion 1

![](/files/kYrsejABH7AaVbAH35u1)

*Sektion-Einstellungen:*

* CSS-Klassen: `-`
* Größenmodus: `Volle Breite`
* Hintergrundfarbe: `-`
* Hintergrundbild: `-`
* Bildmodus: `-`

#### Bild Text Slider

*Elemente (Horizon) > Bild Text Slider*

{% tabs %}
{% tab title="Block Einstellungen" %}

* Hintergrundfarbe: `-`
* Hintergrundbild: `-`
* Bildmodus: `-`
* CSS-Klassen: `-`
* Oberer Abstand: `0px`
* Unterer Abstand: `80px`
* Linker Abstand: `0px`
* Rechter Abstand: `0px`
  {% endtab %}

{% tab title="Element Inhalt" %}
Der Bild Text Slider besteht aus vier Bildern. Maße pro Bild ca. `1920x800px`
{% endtab %}

{% tab title="Element Einstellungen" %}

* Anzeigemodus: `Beinhalten`
* Minimale Höhe: `-`
* Vertikale Ausrichtung: `-`
* Pfeile Navigation: `Innen`
* Punkte Navigation: `Innen`
* Automatisch rotieren: `Ja`
* Pause bei Mouse-Over: `Ja`
* Unterbrechung: `5000`
* Geschwindigkeit: `500`
* Modus: `Karussell`
* Achse: `Horizontal`
* Elemente: `1`
  {% endtab %}

{% tab title="#1" %}
Die Einstellungen von Slide #1 bis #4 sind identisch.

Inhalt:

```html
<h2 class="h1">Theme Stratus<br><small>Vorlage 1</small></h2>
```

* Farbe: `#3d3d3d`
* Hintergrund: `transparent`
* Vertikale Ausrichtung: `Mitte`
* Horizontale Ausrichtung: `Links`
* Minimale Breite: `-`
* Maximale Breite: `600px`
* Eingangsanimation: flip-in-hor-bottom
* Animation: Ken-Burns unten links
  {% endtab %}
  {% endtabs %}

### Sektion 2

![](/files/He8wqTgAwAHdbbogSeI2)

*Sektion-Einstellungen:*

* CSS-Klassen: `-`
* Größenmodus: `Zentrierter Inhalt`
* Hintergrundfarbe: `-`
* Hintergrundbild: `-`
* Bildmodus: `-`

#### Teaser - Drei Spalten

*Elemente (Stratus) > Teaser - Drei Spalten*

{% tabs %}
{% tab title="Block Einstellungen" %}

* Hintergrundfarbe: `-`
* Hintergrundbild: `-`
* Bildmodus: `-`
* CSS-Klassen: `zen-animate slide-in-blurred-bottom zen-cms-g-0`
* Oberer Abstand: `auto`
* Unterer Abstand: `auto`
* Linker Abstand: `auto`
* Rechter Abstand: `auto`
  {% endtab %}
  {% endtabs %}

{% tabs %}
{% tab title="Element 1 Inhalt" %}

* Bild Maße ca. `1000x1000px`
* Mouse-Over Effekt: `slide-in-blurred-bottom`
* Mouse-Out Effekt: `slide-out-blurred-bottom`
  {% endtab %}

{% tab title="Element 1 Text" %}

* Schriftart: `Schriftart Überschriften`
* Text Ausrichtung: `Mitte`
* Schriftgröße: `16px`
* Schriftgewicht: `Semi-bold - 400`
* Farbe: `#ffffff`
* Hintergrund: `#00000033`
* Vertikale Ausrichtung: `Unten`
* Horizontale Ausrichtung: `Mitte`
* Minimale Breite: `100%`
* Maximale Breite: `-`
* Individuelle Innenabstände: `16px` `16px` `16px` `16px`
* Individuelle Außenabstände: `0` `0` `0` `0`
  {% endtab %}

{% tab title="Element 1 Bild" %}

* Anzeigemodus: `Füllen`
* Vertikale Ausrichtung: `480px`
* Bild Mouse-Over: `Keine`
  {% endtab %}
  {% endtabs %}

{% tabs %}
{% tab title="Element 2 Inhalt" %}

* Bild Maße ca. `1000x1000px`
* Mouse-Over Effekt: `fade-in-top`
* Mouse-Out Effekt: `flip-out-hor-bottom`
  {% endtab %}

{% tab title="Element 2 Text" %}

* Schriftart: `Schriftart Überschriften`
* Text Ausrichtung: `Mitte`
* Schriftgröße: `16px`
* Schriftgewicht: `Semi-bold - 400`
* Farbe: `#ffffff`
* Hintergrund: `transparent`
* Vertikale Ausrichtung: `Unten`
* Horizontale Ausrichtung: `Mitte`
* Minimale Breite: `100%`
* Maximale Breite: `-`
* Individuelle Innenabstände: `-`
* Individuelle Außenabstände: `-`
  {% endtab %}

{% tab title="Element 2 Bild" %}

* Anzeigemodus: `Füllen`
* Vertikale Ausrichtung: `480px`
* Hintergrundbild mit Farbe überlagern: `Ja`
* Farbe: `#000000`
* Sichtbarkeit: `20%`
* Bild Mouse-Over: `Keine`
  {% endtab %}
  {% endtabs %}

{% tabs %}
{% tab title="Element 3 Inhalt" %}

* Bild Maße ca. `1000x1000px`
* Mouse-Over Effekt: `slide-in-right`
* Mouse-Out Effekt: `slide-out-right`
  {% endtab %}

{% tab title="Element 3 Text" %}

* Schriftart: `Schriftart Überschriften`
* Text Ausrichtung: `Mitte`
* Schriftgröße: `16px`
* Schriftgewicht: `Semi-bold - 400`
* Farbe: `#ffffff`
* Hintergrund: `transparent`
* Vertikale Ausrichtung: `Unten`
* Horizontale Ausrichtung: `Mitte`
* Minimale Breite: `100%`
* Maximale Breite: `-`
* Individuelle Innenabstände: `-`
* Individuelle Außenabstände: `-`
  {% endtab %}

{% tab title="Element 3 Bild" %}

* Anzeigemodus: `Füllen`
* Vertikale Ausrichtung: `480px`
* Hintergrundbild mit Farbe überlagern: `Ja`
* Farbe: `#000000`
* Sichtbarkeit: `20%`
* Bild Mouse-Over: `Keine`
  {% endtab %}
  {% endtabs %}

#### Teaser - Drei Spalten

*Elemente (Stratus) > Teaser - Drei Spalten*

{% tabs %}
{% tab title="Block Einstellungen" %}

* Hintergrundfarbe: `-`
* Hintergrundbild: `-`
* Bildmodus: `-`
* CSS-Klassen: `zen-animate slide-in-blurred-bottom zen-cms-g-0`
* Oberer Abstand: `auto`
* Unterer Abstand: `auto`
* Linker Abstand: `auto`
* Rechter Abstand: `auto`
  {% endtab %}
  {% endtabs %}

{% tabs %}
{% tab title="Element 1 Inhalt" %}

* Bild Maße ca. `1000x1000px`
* Mouse-Over Effekt: `slide-in-left`
* Mouse-Out Effekt: `slide-out-left`
  {% endtab %}

{% tab title="Element 1 Text" %}

* Schriftart: `Schriftart Überschriften`
* Text Ausrichtung: `Mitte`
* Schriftgröße: `16px`
* Schriftgewicht: `Semi-bold - 400`
* Farbe: `#3d3d3d`
* Hintergrund: `transparent`
* Vertikale Ausrichtung: `Unten`
* Horizontale Ausrichtung: `Mitte`
* Minimale Breite: `100%`
* Maximale Breite: `-`
* Individuelle Innenabstände: `-`
* Individuelle Außenabstände: `-`
  {% endtab %}

{% tab title="Element 1 Bild" %}

* Anzeigemodus: `Füllen`
* Vertikale Ausrichtung: `480px`
* Hintergrundbild mit Farbe überlagern: `Ja`
* Farbe: `#9ca6ba`
* Sichtbarkeit: `10%`
* Bild Mouse-Over: `Keine`
  {% endtab %}
  {% endtabs %}

{% tabs %}
{% tab title="Element 2 Inhalt" %}

* Bild Maße ca. `1000x1000px`
* Mouse-Over Effekt: `slide-in-bottom`
* Mouse-Out Effekt: `slide-out-bottom`
  {% endtab %}

{% tab title="Element 2 Text" %}

* Schriftart: `Schriftart Überschriften`
* Text Ausrichtung: `Mitte`
* Schriftgröße: `16px`
* Schriftgewicht: `Semi-bold - 400`
* Farbe: `#3d3d3d`
* Hintergrund: `transparent`
* Vertikale Ausrichtung: `Unten`
* Horizontale Ausrichtung: `Mitte`
* Minimale Breite: `0`
* Maximale Breite: `300px`
* Individuelle Innenabstände: `-`
* Individuelle Außenabstände: `-`
  {% endtab %}

{% tab title="Element 2 Bild" %}

* Anzeigemodus: `Füllen`
* Vertikale Ausrichtung: `480px`
* Hintergrundbild mit Farbe überlagern: `Ja`
* Farbe: `#9ca6ba`
* Sichtbarkeit: `10%`
* Bild Mouse-Over: `Keine`
  {% endtab %}
  {% endtabs %}

{% tabs %}
{% tab title="Element 3 Inhalt" %}

* Bild Maße ca. `1000x1000px`
* Mouse-Over Effekt: `slide-in-blurred-bottom`
* Mouse-Out Effekt: `slide-out-blurred-bottom`
  {% endtab %}

{% tab title="Element 3 Text" %}

* Schriftart: `Schriftart Überschriften`
* Text Ausrichtung: `Mitte`
* Schriftgröße: `16px`
* Schriftgewicht: `Semi-bold - 400`
* Farbe: `#3d3d3d`
* Hintergrund: `#9ca6ba1a`
* Vertikale Ausrichtung: `Unten`
* Horizontale Ausrichtung: `Mitte`
* Minimale Breite: `100%`
* Maximale Breite: `-`
* Individuelle Innenabstände: `16px` `16px` `16px` `16px`
* Individuelle Außenabstände: `0` `0` `0` `0`
  {% endtab %}

{% tab title="Element 3 Bild" %}

* Anzeigemodus: `Füllen`
* Vertikale Ausrichtung: `480px`
* Bild Mouse-Over: `Keine`
  {% endtab %}
  {% endtabs %}

#### Produkt-Slider

*Commerce > Produkt-Slider*

{% tabs %}
{% tab title="Block Einstellungen" %}

* Hintergrundfarbe: `-`
* Hintergrundbild: `-`
* Bildmodus: `-`
* CSS-Klassen: `-`
* Oberer Abstand: `40px`
* Unterer Abstand: `40px`
* Linker Abstand: `auto`
* Rechter Abstand: `auto`
  {% endtab %}

{% tab title="Element Inhalt" %}

* Slider-Titel: `Topseller`
  {% endtab %}

{% tab title="Element Einstellungen" %}

* Anzeigemodus: `Beinhalten`
* Vertikale Ausrichtung: `-`
* Layout-Typ: `Minimaler Inhalt`
* Navigation: `Ja`
* Automatischer Wechsel: `Ja`
* Rahmen: `Nein`
* Minimale Weite: `300px`
  {% endtab %}
  {% endtabs %}

### Sektion 3

![](/files/cUaxIm4Eh0uD0lb35tIE)

*Sektion-Einstellungen:*

* CSS-Klassen: `-`
* Größenmodus: `Zentrierter Inhalt`
* Hintergrundfarbe: `-`
* Hintergrundbild: `-`
* Bildmodus: `-`

#### Zwei Spalten

*Spalten (Stratus) > Zwei Spalten*

Die zweite Sektion besteht aus drei Blöcken die jeweils im Wechsel mit einem Teaser-Element und einem Produkt-Slider gefüllt sind. Die Einstellungen sind für alle drei "Zwei Spalten" Blöcke identisch.

{% tabs %}
{% tab title="Block Einstellungen" %}

* Hintergrundfarbe: `-`
* Hintergrundbild: `-`
* Bildmodus: `-`
* CSS-Klassen: `zen-animate fade-in-top`
* Oberer Abstand: `40px`
* Unterer Abstand: `40px`
* Linker Abstand: `auto`
* Rechter Abstand: `auto`
  {% endtab %}

{% tab title="Spalte 1: Teaser Inhalt" %}

* Mouse-Over Effekt: `keine`
* Mouse-Out Effekt: `keine`
* CSS-Klassen: `-`
  {% endtab %}

{% tab title="Spalte 1: Text" %}

* Schriftart: `Schriftart Text`
* Text Ausrichtung: `Mitte`
* Schriftgröße: `16px`
* Schriftgewicht: `Semi-bold - 400`
* Farbe: `#333333`
* Hintergrund: `ffffff`
* Vertikale Ausrichtung: `Unten`
* Horizontale Ausrichtung: `Rechts`
* Minimale Breite: `-`
* Maximale Breite: `300px`
* Text Mouse-Over: `Zeige Pfeil`
  {% endtab %}

{% tab title="Spalte 1: Bild" %}

* Anzeigemodus: `Füllen`
* Minimale Höhe: `480px`
* Vertikale Ausrichtung: `-`
* Hintergrundbild mit Farbe überlagern: `Ja`
* Farbe: `#000000`
* Sichtbarkeit: `20%`
* Bild Mouse-Over: `Bild Zoom`
  {% endtab %}

{% tab title="Spalte 2: Produkt Slider" %}

* Anzeigemodus: `Beinhalten`
* Vertikale Ausrichtung: `Mitte`
* Layout-Typ: `Großes Bild`
* Navigation: `Ja`
* Automatischer `Wechsel: Nein`
* Rahmen: `Nein`
* Minimale Weite: `250px`
  {% endtab %}
  {% endtabs %}

### Sektion 4

![](/files/q5sMqeiGAZBnas82faUX)

*Sektion-Einstellungen:*

* CSS-Klassen: `-`
* Größenmodus: `Zentrierter Inhalt`
* Hintergrundfarbe: `-`
* Hintergrundbild: `-`
* Bildmodus: `-`

#### Drei Spalten, Bild/Text-Karten

*Text & Bild > Drei Spalten, Bild/Text-Karten*

{% tabs %}
{% tab title="Block Einstellungen" %}

* Hintergrundfarbe: `-`
* Hintergrundbild: `-`
* Bildmodus: `-`
* CSS-Klassen: `zen-animate fade-in-top`
* Oberer Abstand: `20px`
* Unterer Abstand: `20px`
* Linker Abstand: `auto`
* Rechter Abstand: `auto`
  {% endtab %}

{% tab title="Element oben: Bild" %}

* Bild: Maße ca. `1000x500px`
* Anzeigemodus: `Füllen`
* Minimale Höhe: `340px`
* Vertikale Ausrichtung: `-`
  {% endtab %}

{% tab title="Element unten: Inhalt" %}

```html
<h2 style="text-align: center;">Lorem Ipsum dolor</h2>
                        <p style="text-align: center;">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
                        sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, 
                        sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
```

{% endtab %}

{% tab title="Element unten: Einstellungen" %}

* Vertikale Ausrichtung: `-`
  {% endtab %}
  {% endtabs %}

Die Einstellungen aller drei Spalten unterscheiden sich nur im Bildmotiv.


# Stratus - Demo 2

Sportliches Design für breite Produktsortimente.

## Einstellungen der Zusatzfelder

Über Zusatzfelder erweitert das Theme die Funktionen des Shops in den Bereichen *Kataloge > Kategorien* und *Kataloge > Produkte*. Zusatzfelder können so die Darstellung für jede Kategorie oder jedes Produkt einzeln verändern.

### Startseite

{% hint style="info" %}
Diese Demo nutzt keine abweichenden Einstellungen in den Zusatzfeldern.
{% endhint %}

### Kategorien

Manche Kategorien nutzen die Theme-eigene Kategoriebild Funktion. Erfahre im Bereich INHALTE > Kategorie > [Kategoriebild](/content/kategorie/kategoriebild) mehr zu den Möglichkeiten.

![](/files/UI5Dah8Z7793MvqU5n0a)

## Abweichende Einstellungen

Konfigurationen, welche wir über ein Update implementiert haben, können oft nicht mit dem Standard-Wert ausgeliefert werden, der in der Demo dargestellt wird. Damit stellen wir sicher, dass bestehende Onlineshops nicht ohne das Wissen des Kunden verändert werden.

Die abweichenden Einstellungen haben wir hier aufgelistet:

<table><thead><tr><th width="630.2550199284714">Styling</th><th>Wert</th><th data-hidden></th></tr></thead><tbody><tr><td>Allgemein > Grundlayout > Header (mobil)</td><td>Einzeiliger Header</td><td></td></tr><tr><td>Allgemein > Produktbilder > Breite Artikelbild</td><td>1890*</td><td></td></tr><tr><td>Allgemein > Produktbilder > Höhe Artikelbild</td><td>2400*</td><td></td></tr><tr><td>Header > Main Navigation > Unternavigation Aussehen</td><td>Dropdown Navigation</td><td></td></tr><tr><td>Header > Flyout Navigation > Grundeinstellungen > Icon bei externen Links</td><td>true</td><td></td></tr><tr><td>Kategorie > Produkt-Boxen > Grundeinstellungen > Varianten günstigster Preis</td><td>false</td><td></td></tr><tr><td>Footer > Footer Bottom > Grundeinstellungen > Service-Navigation anzeigen</td><td>false</td><td>aus</td></tr><tr><td>Produkt > Details > Produkt Details > alle Switch Felder</td><td>true</td><td></td></tr><tr><td>Allgemein > Scroll Animation > Grundeinstellungen > Produkt Listing animieren</td><td>true</td><td></td></tr></tbody></table>

<table><thead><tr><th width="631">Einstellungen</th><th>Wert</th></tr></thead><tbody><tr><td>Youtube Video Consent</td><td>Ja</td></tr></tbody></table>

\*Diese Werte sind angepasst an unsere Produktbilder. Eine Übernahme dieser Werte ist daher nicht empfehlenswert.


# Stratus - Demo 3

Einzeiliger Header mit teiltransparentem Hintergrund.

## Einstellungen der Zusatzfelder

Über Zusatzfelder erweitert das Theme die Funktionen des Shops in den Bereichen *Kataloge > Kategorien* und *Kataloge > Produkte*. Zusatzfelder können so die Darstellung für jede Kategorie oder jedes Produkt einzeln verändern.

### Startseite

![](/files/9dPIvYmFDKNME6eVfYhI)

In dieser Demo liegt der Kopfbereich der Startseite über dem darunter liegenden Slider-Element. Der Header hat einen teil-transparenten Hintergrund.

![](/files/UXUunlBQefiv7PDZkrP1)

Der **Header ist überlagernd (1)** und die **Hintergrund-Deckkraft (2)** auf `90%` reduziert. Dadurch überlagert der Header auf dem Slider-Element. Die **Hauptnavigation Hintergrund Deckkraft (3)** wird auf `0%` gesetzt, da der Header einzeilig ist und die Hauptnavigation **in** der Header-Zeile liegt.

Weitere Informationen zum überlagernden Header findest Du unter INHALTE > Kategorie > [Überlagernder Header](/content/kategorie/ueberlagernden-header).

### Kategorien

Manche Kategorien nutzen die Theme-eigene Kategoriebild Funktion. Erfahre im Bereich INHALTE > Kategorie > [Kategoriebild](/content/kategorie/kategoriebild) mehr zu den Möglichkeiten.

![](/files/WOS5Ji1SGJOFfoDlV37g)

## Abweichende Einstellungen

Konfigurationen, welche wir über ein Update implementiert haben, können oft nicht mit dem Standard-Wert ausgeliefert werden, der in der Demo dargestellt wird. Damit stellen wir sicher, dass bestehende Onlineshops nicht ohne das Wissen des Kunden verändert werden.

Die abweichenden Einstellungen haben wir hier aufgelistet:

<table><thead><tr><th width="630.2550199284714">Styling</th><th>Wert</th><th data-hidden></th></tr></thead><tbody><tr><td>Allgemein > Produktbilder > Breite Artikelbild</td><td>1890*</td><td></td></tr><tr><td>Allgemein > Produktbilder > Höhe Artikelbild</td><td>2400*</td><td></td></tr><tr><td>Typografie &#x26; Farben > Farben > Grundeinstellungen > Kontrast Schwellenwert</td><td>151</td><td></td></tr><tr><td>Header > Flyout Navigation > Grundeinstellungen > Icon bei externen Links</td><td>true</td><td></td></tr><tr><td>Kategorie > Produkt-Boxen > Grundeinstellungen > Varianten günstigster Preis</td><td>false</td><td></td></tr><tr><td>Footer > Footer Bottom > Grundeinstellungen > Service-Navigation anzeigen</td><td>false</td><td>aus</td></tr><tr><td>Produkt > Details > Produkt Details > alle Switch Felder</td><td>true</td><td></td></tr><tr><td>Produkt > Details > Galerie Slider > Breite &#x26; Höhe > Verwende Seitenverhältnis der Artikelbilder für Galerie-Höhe</td><td>true</td><td></td></tr><tr><td>Allgemein > Scroll Animation > Grundeinstellungen > Produkt Listing animieren</td><td>true</td><td></td></tr></tbody></table>

<table><thead><tr><th width="631">Einstellungen</th><th>Wert</th></tr></thead><tbody><tr><td>Youtube Video Consent</td><td>Ja</td></tr></tbody></table>

\*Diese Werte sind angepasst an unsere Produktbilder. Eine Übernahme dieser Werte ist daher nicht empfehlenswert.


# Stratus - Demo 4

Minimal Design für Onlineshops mit breitem Soritment. Das Design zeichnet sich durch seine globalen Layoutabstände aus, welche den Onlineshop wie einen Rahmen umgeben.

## Einstellungen der Zusatzfelder

Über Zusatzfelder erweitert das Theme die Funktionen des Shops in den Bereichen *Kataloge > Kategorien* und *Kataloge > Produkte*. Zusatzfelder können so die Darstellung für jede Kategorie oder jedes Produkt einzeln verändern.

### Startseite

{% hint style="info" %}
Diese Demo nutzt keine abweichenden Einstellungen in den Zusatzfeldern.
{% endhint %}

### Kategorien

Manche Kategorien nutzen die Theme-eigene Kategoriebild Funktion. Erfahre im Bereich INHALTE > Kategorie > [Kategoriebild](/content/kategorie/kategoriebild) mehr zu den Möglichkeiten.

![](/files/E3un2jeuEs8v58KZAzhh)

## Abweichende Einstellungen

Konfigurationen, welche wir über ein Update implementiert haben, können oft nicht mit dem Standard-Wert ausgeliefert werden, der in der Demo dargestellt wird. Damit stellen wir sicher, dass bestehende Onlineshops nicht ohne das Wissen des Kunden verändert werden.

Die abweichenden Einstellungen haben wir hier aufgelistet:

<table><thead><tr><th width="630.2550199284714">Styling</th><th>Wert</th><th data-hidden></th></tr></thead><tbody><tr><td>Allgemein > Grundlayout > Header (mobil)</td><td>Einzeiliger Header</td><td></td></tr><tr><td>Allgemein > Produktbilder > Breite Artikelbild</td><td>1890*</td><td></td></tr><tr><td>Allgemein > Produktbilder > Höhe Artikelbild</td><td>2400*</td><td></td></tr><tr><td>Header > Main Navigation > Unternavigation Aussehen</td><td>Dropdown Navigation</td><td></td></tr><tr><td>Header > Flyout Navigation > Grundeinstellungen > Icon bei externen Links</td><td>true</td><td></td></tr><tr><td>Kategorie > Produkt-Boxen > Grundeinstellungen > Varianten günstigster Preis</td><td>false</td><td></td></tr><tr><td>Footer > Footer Bottom > Grundeinstellungen > Service-Navigation anzeigen</td><td>false</td><td>aus</td></tr><tr><td>Produkt > Details > Produkt Details > alle Switch Felder</td><td>true</td><td></td></tr><tr><td>Allgemein > Scroll Animation > Grundeinstellungen > Produkt Listing animieren</td><td>true</td><td></td></tr></tbody></table>

<table><thead><tr><th width="631">Einstellungen</th><th>Wert</th></tr></thead><tbody><tr><td>Youtube Video Consent</td><td>Ja</td></tr></tbody></table>

\*Diese Werte sind angepasst an unsere Produktbilder. Eine Übernahme dieser Werte ist daher nicht empfehlenswert.


# Tipps

Hier sammeln wir Tipps im Umgang mit dem Theme.

##


# Dashboard

Das Dashboard - eine zusätzliche Administrationsoberfläche für Dich!

Über das Dashboard erreichst Du die Bereiche Styling, Settings und Doku & Support blitzschnell. Hier haben wir Dir alle relevanten Links und Hilfen gesammelt.

Hier siehst Du auf einen Blick, auf welchen Verkaufskanälen deine Zenit Design Themes oder Child-Themes aktiv sind. Per Klick auf das Theme gelangst Du direkt in die Theme-Konfiguration des Verkaufskanals.

![](/files/QUeX4fS4uFBdvemHs61q)


# Theme Konfiguration

Hier bekommst Du ein paar Tipps im Umgang mit der Theme-Konfiguration

## Variablen

In der Theme-Konfiguration können gelegentlich auch Variablen in den Farbfeldern auftauchen und so ein einheitliches Aussehen des Farbschemas vereinfacht werden. Häufige Variablen sind:

| Variable                    | Funktion                             |
| --------------------------- | ------------------------------------ |
| `$sw-color-brand-primary`   | Primärfarbe des Shops                |
| `$sw-color-brand-secondary` | Sekundärfarbe des Shops              |
| `$sw-text-color`            | Textfarbe des Shops                  |
| `$sw-border-color`          | Rahmenfarbe, meist ein Grauton       |
| `$sw-background-color`      | Hintergrundfarbe der Seite           |
| `$sw-container-color`       | Hintergrundfarbe des Shop-Containers |

Den Namen einer jeden Variable findest Du in jedem Hilfe-Tooltip der Theme-Einstellungen.

![Variablennamen in der Theme-Konfiguration](/files/c0BVov4eeFfvIMQOCflq)

## Funktionen

In den Farbfeldern der Theme-Konfigurationen dürfen sogar einfache SCSS-Funktionen genutzt werden. So können beispielsweise Farben aufgehellt oder abgedunkelt werden.

```
darken($sw-color-brand-secondary, 10%)
```

verdunkelt die Farbe der Variable um 10%

```
lighten(desaturate($sw-color-brand-primary, 10%), 15%)
```

Es können auch mehrere Funktionen auf eine Variable oder Farbe angewendet werden. In diesem Beispiel wird die Primärfarbe des Shops um 10% aufgehellt und um 15% in der Sättigung reduziert.

[Mehr Informationen](https://sass-lang.com/documentation/modules/color)

## Farbenmanagement

Um zu vermeiden, dass bei einem Mouseover der Hintergrund einfärbt, setze einfach die `Background:hover` auf die selbe Farbe wie `Background`. Das ist insbesondere bei den Navigationen der Fall.


# Lexikon

Manchmal kommt es vor, dass ein Begriff aus der Software-Entwicklung erklärungsbedürftig sind.

| Begriff               | Erklärung                                                                                                                                                                                                                                                                                                              |
| --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Administration**    | Die Seite Deines Shops, die für Dich als Administrator des Systems zugänglich ist. Häufig auch **Backend** genannt.                                                                                                                                                                                                    |
| **Backend**           | Die Seite Deines Shops, die für Dich als Administrator des Systems zugänglich ist. Häufig auch **Administration** genannt.                                                                                                                                                                                             |
| **Body**              | Element repräsentiert den Inhalt eines **HTML** Dokuments.                                                                                                                                                                                                                                                             |
| **Child-Theme**       | Theme, das die Funktionen eines anderen übergeordneten Themes erbt. [Mehr dazu](/faq/ableitungen/child-theme)                                                                                                                                                                                                          |
| **CSS / SCSS**        | Auszeichnungssprache mit welcher die Gestaltung des Shops realisiert wird. Farben, Schriftgrößen uvm. werden hier für Elemente definiert.                                                                                                                                                                              |
| **Frontend**          | Die Seite Deines Shops, die für den Kunden zugänglich ist. Häufig auch **Storefront** genannt.                                                                                                                                                                                                                         |
| **Inherit / Vererbt** | Geerbt - Erbt eine Einstellung. z.B. aus der Theme-Konfiguration. Oft der Standard-Wert eines Auswahlfeldes.                                                                                                                                                                                                           |
| **Javascript**        | JavaScript ist eine Skriptsprache, die üblicherweise in Webseiten Verwendung findet und dann durch den Browser des Besuchers ausgeführt wird. In Javascript werden viele Verhaltensweisen des Systems gesteuert, wie beispielsweise das Aufklappen von Menüs, des Warenkorbes, das Nachladen von Artikelvarianten uvm. |
| **Listing**           | Seite oder Kategorie in welcher die Produkte aufgelistet sind                                                                                                                                                                                                                                                          |
| **Offcanvas**         | Wie in Offcanvas Menü, Offcanvas Warenkorb, Offcanvas Top Bar. Bezeichnet Elemente, die aus dem nicht sichtbaren Bereich des Browserfensters (also außerhalb des Canvas) durch bestimmte Aktionen in den sichtbaren Bereich erscheinen.                                                                                |
| **Storefront**        | Die Seite Deines Shops, die für den Kunden zugänglich ist. Häufig auch **Frontend** genannt.                                                                                                                                                                                                                           |
| **Variable**          | Eine Variable dient als Platzhalter für einen Wert. In dieser können z.B. Farbwerte gespeichert werden und in der Theme-Konfiguration genutzt werden.                                                                                                                                                                  |
| **Viewport**          | Unter dem Begriff Viewport versteht man die Größe eines Sichtfensters oder einer Sichtöffnung auf einem Bildschirm. Wird häufig in den Größen xs, sm, md, lg, xl unterteilt.                                                                                                                                           |
| :hover                | Mouse-Over Effekt eines Elementes. Häufig bei Buttons.                                                                                                                                                                                                                                                                 |
| :focus                | Aktives, angewähltes Element. Häufig bei Input-Feldern.                                                                                                                                                                                                                                                                |


# Mehrere Verkaufskanäle

Du kannst unser Theme auch mehreren Verkaufskanälen zuweisen und unterschiedliche Einstellungen vornehmen. Erfahre hier, wie das geht.

Möchtest Du ein Theme mehreren Verkaufskanälen zuweisen, wird Dir spätestens beim Einstellen abweichender Einstellungen in der Theme-Konfiguration auffallen, dass die Einstellungen für beide Verkaufskanäle synchron sind. Grundsätzlich speichert Shopware die Theme-Konfiguration pro Theme - nicht pro Verkaufskanal.

Wie aber kann man ein Theme für mehrere Verkaufskanäle nutzen und dabei abweichende Einstellungen (wie z.B. ein anderes Logo) verwenden? Theme-Duplikate und Child-Themes helfen Dir unterschiedliche Verkaufskanäle mit dem gleichen Theme zu gestalten.

## Möglichkeit 1 - Duplikate

In Shopware 6 gibt es die Möglichkeit Duplikate zu erstellen. Ein Theme-Duplikat ist eine **virtuelle** Kopie eines Themes.

{% hint style="info" %}
Duplikate können seit Shopware 6.4.17 nur noch aus einem Haupt-Theme erstellt werden. Ob es sich dabei um einen Fehler oder das gewünschte Systemverhalten handelt ist bislang noch unklar. Es gibt ein Issue zu diesem Fall: <https://issues.shopware.com/issues/NEXT-24375>
{% endhint %}

![](/files/QfZTpaWiuCL78mA0nS9t)

Navigiere in der Shopware Administration in den Bereich *Inhalte > Themes*. Wähle das Theme aus, von welchem ein Duplikat erstellt werden soll und klicke auf das **Kontextmenü (1)**. Wähle nun die Option **Duplikat erstellen (2).**

Es wird nun eine virtuelle Kopie des bestehenden Themes erstellt - also auch mit allen bereits getätigten Einstellungen. Dieses Theme-Duplikat kann nun einem Verkaufskanal zugewiesen werden.

{% hint style="warning" %}
Da Duplikate nur virtuelle Kopien eines Themes sind, können diese nicht als Basis für zusätzliche Programmierungen genutzt werden.
{% endhint %}

## Möglichkeit 2 - Child-Theme

Ein Child-Theme ist im Gegensatz zu einem Theme-Duplikat ein weiteres Theme-Plugin, welches über die Erweiterungen installiert wird. Um Dir den Einstieg zu erleichtern, bieten wir vorkonfigurierte Child-Themes an. Natürlich kannst Du mit dem entsprechenden Fachwissen auch eigene Child-Themes erstellen.

Unsere Child-Themes beinhalten neben der praktischen Konfigurationsvorlage für einen schnellen Einstieg auch die Möglichkeit für updatesichere Programmierungen am Shop. Es ist also als Child-Theme ein genereller Einstiegspunkt für individuelle Anpassungen abseits der Konfiguration.

Eine Anleitung zur Nutzung unserer Child-Themes findest Du unter [Vorlagen](/vorlagen).


# Vorlagen

Du kannst all unsere Demo-Konfigurationen mit wenigen Klicks importieren.

Unserer Demos findest Du auf unserer [Theme-Übersicht](https://www.zenit.design/#demos). Unsere Child-Themes beinhalten neben der praktischen Konfigurationsvorlage für einen schnellen Einstieg auch die Möglichkeit für updatesichere Programmierungen am Shop. Es ist also als Child-Theme ein genereller Einstiegspunkt für individuelle Anpassungen abseits der Konfiguration.

Hier geht es zu unseren kostenlosen Konfigurationsvorlagen:

{% embed url="<https://www.zenit.design/#demos>" %}

## Installation & Zuweisung

### Vorlage via Plugin importieren

Über unsere kostenfreies Child-Theme-Generator Plugin kannst Du ein personalisiertes Child-Theme generieren und anschließend die gewünschte Demo-Vorlage importieren.

{% embed url="<https://store.shopware.com/de/zenit66399665516f/child-theme-generator-fuer-zenit-design-themes.html>" %}

<figure><img src="/files/lHvH4shW0ZYYgAumlRcu" alt=""><figcaption></figcaption></figure>

Navigiere nach der Installation der Erweiterung zu Inhalte > Themes. Im Kontextmenü des gewählten Themes kannst Du Dein personalisiertes Child-Theme generieren.

### Vorlage installieren

Nach dem Erstellen des Child-Themes wirst Du automatisch in die Übersicht deiner Erweiterungen geleitet. Dort findest Du nun dein Child-Theme und kannst es installieren und aktivieren.

<figure><img src="/files/BtFDM8yGLfHyy45YPWn2" alt=""><figcaption></figcaption></figure>

Anschließend kannst Du unter Inhalte > Themes und einem Klick auf Dein generiertes Theme die gewünschte Vorlage über den Button „Vorlage auswählen“ importieren. Klicke dazu in der Theme-Konfiguration auf den Button "Vorlage auswählen"**,** wähle im PopUp die gewünschte Vorlage und klicke auf Importieren.

<figure><img src="/files/2cVu7YZ9kPkB6aHIHtRP" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/RqENqbExoP7tLUfHa0Ye" alt=""><figcaption></figcaption></figure>

### Vorlage-Zuweisung

In den Einstellungen des Verkaufskanals im Tab **Theme (1)** kannst Du das Theme Deines Verkaufskanals ändern.

![](/files/4D7zecFp3iInjSSEo2Vr)

Klicke hierzu auf den Button **Theme ändern (2)** und wähle im sich öffnenden Fenster das installierte Theme aus. Bei der Verwendung einer vorkonfigurierten Vorlage wähle bitte die Vorlage aus, welche Du nutzen möchtest.

## Vererbungsreihenfolge

Unserer Child-Themes werden in der Vererbungsreihenfolge **nach allen** Plugins / Apps geladen. Damit hast Du die Möglichkeit die Kompatibilität zwischen Plugins / Apps und Themes herzustellen und alles zu überschreiben.

Die Reihenfolge im Views-Abschnitt ist ausschlaggebend für die Ladereihenfolge. Die scr/Resources/theme.json sieht nun im Abschnitt "views" wie folgt aus:

```
"views": [
    "@Storefront",
    "@zenitPlatform[THEMENAME]",
    "@Plugins",
    "@[CHILDTHEMENAME]"
],
```

*Die Werte in den eckigen Klammern sind Platzhalter.*


# Support

Wir helfen Dir. Kurzfristig und kostenlos!

## Vorbereitung

Wenn Du vor dem Erstellen eines Tickets ein paar Dinge prüfst, können wir bereits bei der ersten Antwort gezielter auf Dein Anliegen eingehen. Dadurch bekommst Du schneller eine qualifizierte Antwort auf Dein Anliegen.

### Fehlermeldung auslesen

Im Produktivmodus werden aus Sicherheitsgründen nur allgemeine Fehlermeldungen ausgegeben aus denen der Support ebenfalls keine Informationen herausfiltern kann.

{% content-ref url="/pages/Vf06f3zeVAN3g4SvJCtM" %}
[Error auslesen](/support/error-auslesen)
{% endcontent-ref %}

### Theme als Ursache identifizieren

**Du sparst effektiv Deine Zeit**, wenn Du dich vor dem Erstellen eines Tickets versicherst, ob das Problem durch das Theme oder eine andere Erweiterung hervorgerufen wird.

{% content-ref url="/pages/51D3vVeqZ4xXVY44sR7z" %}
[Ursache finden](/support/ursache-finden)
{% endcontent-ref %}

### Dokumentation prüfen

Bevor Du ein Ticket an unseren Support sendest, solltest Du prüfen, ob Dein Anliegen nicht bereits in unserer Dokumentation erläutert wird. Im Bereich [FAQ](/faq/uebersicht) findest Du Hilfe zu häufig gestellten Fragen.

## Support anfragen

Um ein Support-Ticket zu eröffnen, besuche bitte Deinen [Shopware Account](https://account.shopware.com). Ein Support-Ticket kannst Du über den **Shopbetreiberbereich > Support** einstellen. Hier findest Du oben rechts die Buttons "Support anfragen".

Häufig benötigen wir zur Bearbeitung Deiner Anfrage zusätzliche Informationen, wie die eingesetzte Shop- oder App-Version, welche wir über das Ticket-System einsehen können.

Wie Du ein Support-Ticket erstellen kannst, erfährst Du hier: <https://docs.shopware.com/de/account-de/merchant/support?category=account-de/merchant>


# Error auslesen

Im Produktivmodus werden aus Sicherheitsgründen nur allgemeine Fehlermeldungen ausgegeben. Für das Debuggen müssen die Fehlermeldungen erst lesbar gemacht werden.

Wenn Shopware im Produktivmodus betrieben wird, werden in den meisten Fällen nur allgemeine Meldungen ausgegeben, anhand derer es nicht unbedingt möglich ist, die Ursache eines Fehlers identifizieren zu können. Diese Meldungen sehen häufig so aus:

<div align="left"><figure><img src="/files/nSJZlrfUfKmNcp76iZ8u" alt=""><figcaption><p>Beispiel einer Fehlermeldung ohne Aussagekraft</p></figcaption></figure></div>

{% hint style="info" %}
Eine vollständige Anleitung zum Debuggen findest Du hier:

<https://docs.shopware.com/de/shopware-6-de/tutorials-und-faq/fehlermeldungen-debuggen>
{% endhint %}

## Fehlermeldung auslesen

Um die tatsächliche Fehlermeldung auslesen und debuggen zu können muss im Onlineshop vorübergehend der **Entwicklermodus** aktiviert werden. Das ist ganz einfach und sollte vor dem Erstellen eines Support-Tickets schnell gemacht werden - das spart letztendlich Deine Zeit.

In der allgemeinen Konfigurationsdatei von Shopware kannst Du den Entwicklermodus aktivieren. Die Datei "`.env`" (ab SW 6.6 "`.env.local`") findest Du im Hauptverzeichnis Deiner Shopware-Installation auf dem Server.

{% hint style="info" %}
Bitte beachte, das Dateien, deren Dateiname mit einem "." beginnen, standardmäßig ausgeblendet werden und es je nach Aufruf des Verzeichnisses daher erforderlich sein kann, diese über eine Programmeinstellung einzublenden.
{% endhint %}

In der `.env` / `.env.local` Datei steht eine Variable `APP_ENV` . Ändere den Wert dieser Zeile von

```
APP_ENV=prod
```

in

```
APP_ENV=dev
```

Speichere diese Datei wieder und leere den Cache des Shop in der Administration.

Die Meldungen im Entwicklermodus fallen sehr viel ausführlicher aus. Du siehst nun statt der "Oops! An Error Occured" Fehlermeldung eine aussagekräftige Meldung über den Fehler. Danach kannst Du den Entwicklermodus wieder deaktivieren.

## Fehlermeldung an Support melden

Solltest Du mit der Fehlermeldung nichts anfangen können, kannst Du diese direkt beim Eröffnen eines Support-Tickets mitsenden. Oftmals erkennt man anhand der Information aus der Fehlermeldung, welche Erweiterung die Ursache des Problems ist. So sparst Du Zeit und kannst dich direkt **an den richtigen Hersteller** wenden.


# Ursache finden

Die Ursachenforschung ist das wichtigste bei der Behebung eines Fehlers.

{% hint style="info" %}
**Du sparst effektiv Deine Zeit**, wenn Du dich vor dem Erstellen eines Tickets versicherst, ob das Problem durch das Theme oder eine andere Erweiterung hervorgerufen wird.
{% endhint %}

## Theme als Ursache eines Fehler identifizieren

Die Ursachenforschung ist der erste Schritt zu Behebung des Fehlers. Oftmals ist nicht klar, ob ein Theme, eine Erweiterung oder Shopware selbst Auslöser eines Fehlers ist. Die folgende Anleitung wird daher häufig im ersten Schritt der Support-Antwort abgefragt. **Wenn Du dies vor dem Erstellen eines Tickets bereits geprüft hast, können wir bereits bei der ersten Antwort gezielter auf Dein Anliegen eingehen.** Das spart im Endeffekt auch Deine Zeit.

Du kannst das Theme daher ganz einfach als Ursache einer Fehldarstellung identifizieren oder auch ausschließen. Gehe dazu wie folgt vor:

* Wähle den Verkaufskanal aus, in welchem das Theme zugewiesen ist
* Wähle im Reiter "Theme" über den Button "Theme ändern" das Standard-Theme aus
* Klicke auf "Theme übernehmen"
* Prüfe die betroffene Funktion in der Storefront mit dem Standard Theme
  * Wird eine Fehldarstellung oder eine Fehlfunktion durch ein Theme hervorgerufen, sollte das Problem verschwinden, wenn das Standard-Theme des Systems aktiviert wird.
  * Ist die Fehldarstellung oder Fehlfunktion noch immer vorhanden, liegt die Ursache möglicherweise woanders.
* Aktiviere nach der Prüfung wieder das ursprüngliche Theme für den Verkaufskanal

Konnte das Theme erfolgreich als Ursache identifiziert werden, erstelle ein Ticket über Deinen Shopware Account.

##


# Allgemein


# Grundlayout

In den Grundeinstellungen kannst Du das wesentliche Aussehen Deines Shop gestalten. Diese Einstellung verändern das Layout grundlegend.

### Grundeinstellungen

![](/files/dRIhwWrDCMgSExoZeRDC)

#### Grundlayout (1):&#x20;

`Boxed` | `Full Width Boxed` | `Full Width Header` | `Full Width Header & Footer` | `Full Width`&#x20;

Die Breite des Layouts wird durch das Grundlayout bestimmt. **Full Width** streckt die Webseite mit allen Inhalten an den Browserrand, während **Boxed** das Layout inklusive Hintergründe an die maximale Layout Breite festlegt. **Full Width Boxed** hingegen lässt alle Hintergründe an den Browserrand laufen, die Inhalte orientieren sich jedoch an der maximalen Layout Breite. **Full Width Header** / **Full Width Header & Footer** setzt ausschließlich den Header/Footer und dessen Inhalte bis an den Browserrand. Die restlichen Bereiche des Shops verhalten sich wie in Full Width Boxed.

#### Layout Breite (2)

Breite des Shop-Containers in Pixeln. In allen Grundlayouts außer `Full Width` wird dieser Wert als maximale Breite der Inhalte und Elemente verwendet.

#### Header (mobil) (3):&#x20;

`Einzeiliger Header` | `Mehrzeiliger Header`&#x20;

Der Header kann auf mobilen Geräten einzeilig dargestellt werden. Je nach Größe und Ausrichtung des Logos eignet sich jedoch eine mehrzeilige Darstellung besser.

Beispiel:

<figure><img src="/files/pGHf1hyltDaM7cz4NQPD" alt=""><figcaption></figcaption></figure>

#### Header (3):&#x20;

`Einzeiliger Header` | `Zweizeiliger Header` | `Mehrzeiliger Header`

Entscheide zwischen drei grundlegende Header-Erscheinungen. Nicht jede Header-Einstellung passt zu Dir und zu Deinen Produkt-Kategorien. Daher gibt es hier ein paar grundlegende Tipps:

* Der **einzeilige Header** eignet sich besonders gut für minimalistische Onlineshops, welche nur wenige Oberkategorien besitzen. Der Header wirkt aufgeräumt und klar.
* Hast Du eine Vielzahl an Oberkategorien (ca. 6-8 Stück), ist wohl eher der **zweizeiliger Header** die Einstellung Deiner Wahl. Die Kategorien haben hier ausreichen Platz und bieten Deinem Kunden die nötige Übersicht. Im zweizeiligen Header wird die Top Bar als eigene Zeile entfernt und in die Logo-Zeile integriert.
* Der **mehrzeilige Header** eignet sich ebenfalls immer dann, wenn eine Vielzahl an Oberkategorien dargestellt werden soll. Im Unterschied zum zweizeiligen Header behält die Top Bar ihre normale Darstellung.

{% hint style="info" %}
Die Einstellungen zur Darstellung der Top Bar sind bei Auswahl eines zweizeiligen Headers eingeschränkt, da die **Top Bar** in die Logo Zeile integriert wird und nicht als eigenständige Top Bar fungiert.
{% endhint %}

#### Suche (4)

Wähle zwischen der Ansicht als **Overlay-Suche**, **Ausklappbarer Suche** oder **Standard Suche**.

Beispiele:

![Overlay Suche](/files/5eCtfcTcAbKelwzc0wLq)

![Ausklappbare Suche](/files/ORLrxjVG63RKz48IGK4C)

![Standard Suche](/files/ULqQTunMEdKXgYsGzGrS)

#### Top Bar (5)&#x20;

`Standard` | `Ausklappbar` | `Einklappbar` | `Offcanvas` | `ausgeblendet`

{% hint style="info" %}
Die Einstellungen zur Darstellung der Top Bar sind bei Auswahl eines zweizeiligen Headers eingeschränkt, da die **Top Bar** in die Logo Zeile integriert wird und nicht als eigenständige Top Bar fungiert.
{% endhint %}

{% tabs %}
{% tab title="Standard" %}
Die Standardansicht der Top Bar. Permanent sichtbar.

![](/files/7lp8SOw08U9vjOGfUtpp)
{% endtab %}

{% tab title="Ausklappbar" %}
Top Bar beim initialen Laden der Seite eingeklappt. Über Menü-Button ausklappbar.

![](/files/fS0gZuPtrUgxeulLGK8R)
{% endtab %}

{% tab title="Einklappbar" %}
Top Bar beim initialen Laden der Seite ausgeklappt. Über Menü-Button einklappbar.

![](/files/UNbxCIHaesMlJNwYnuXm)
{% endtab %}

{% tab title="Offcanvas" %}
Die Top Bar des Shops kann für einen minimalistischen Look auch als sogenanntes Offcanvas Element dargestellt werden. Die Inhalte der Top Bar sind dann über das allseits bekannte Menü-Icon erreichbar.

![](/files/cLN9YNnrfoc3Vbxi5Wpv)
{% endtab %}

{% tab title="ausgeblendet" %}
{% hint style="info" %}
Diese Option steht ab Theme Version 2.1.0 zur Verfügung.
{% endhint %}

Diese Option blendet die Top Bar aus.

{% hint style="warning" %}
Nur möglich wenn keine zusätzlichen Sprachen, Währungen und Marketing Slider vorhanden sind - Offcanvas Top-Bar wird als Fallback eingeblendet.
{% endhint %}
{% endtab %}
{% endtabs %}

#### Icon Set (6)

Das Theme stellt verschiedene zusätzliche Icon-Sets zum [Standard-Icon Set](https://component-library.shopware.com/icons/) für die Storefront zur Verfügung. Es werden dabei unter Anderem die Icons für Konto, Suche, Warenkorb, Merkzettel uvm. ausgetauscht.

Entypo Icons (solid):

<figure><img src="/files/vjceIJKVMkIJPYS72UIV" alt=""><figcaption></figcaption></figure>

Feather Old Icons:

<figure><img src="/files/5TjWa0waUMA3JgrP5S4W" alt=""><figcaption></figcaption></figure>

Feather Icons:

<figure><img src="/files/YsJ3HOV4CfABVDoR2dMr" alt=""><figcaption></figcaption></figure>

Fluent (outlined):

<figure><img src="/files/WyAEK0iiRa6mtxrM56Hr" alt=""><figcaption></figcaption></figure>

Fluent (solid):

<figure><img src="/files/reQx13Yg5iDO0gfce03v" alt=""><figcaption></figcaption></figure>

Heroicons (outlined):

<figure><img src="/files/XxUdfvKri0gaoEdp2hKU" alt=""><figcaption></figcaption></figure>

Heroicons (solid):

<figure><img src="/files/Cn2jvMGxW2yBltuV3pCT" alt=""><figcaption></figcaption></figure>

Iconic (outlined):

<figure><img src="/files/2bH1f0ZOzcA0WcoGcOGu" alt=""><figcaption></figcaption></figure>

Iconly Broken:

<figure><img src="/files/yyUEkmEDAOHrxj02l5U7" alt=""><figcaption></figcaption></figure>

Iconly Bulk:

<figure><img src="/files/AFamwVOY5Q78ZrbaMqOO" alt=""><figcaption></figcaption></figure>

Iconly Light:

<figure><img src="/files/M7UYgsuy6dAb1T1kQmHi" alt=""><figcaption></figcaption></figure>

Ionicons (outline)

<figure><img src="/files/GD0O86vq8V6tYt6J3m0C" alt=""><figcaption></figcaption></figure>

Ionicons (solid):

<figure><img src="/files/W30Ymkyx0es1618sls3Q" alt=""><figcaption></figcaption></figure>

Material Icons:

<figure><img src="/files/quA2QERlhirmhgVwubQw" alt=""><figcaption></figcaption></figure>

Simple Line Icons:

<figure><img src="/files/HJvNRx1t5aAdhRxEtaeR" alt=""><figcaption></figcaption></figure>

Tonicons Icons:

<figure><img src="/files/F3w0BLkrWxE0FmPs59u1" alt=""><figcaption></figcaption></figure>

#### Main Navigation als Offcanvas

Die Hauptnavigation mit den Kategorien des Shops geht ab einem bestimmten Viewport in die mobile Darstellung über. Über die Einstellung Main **Navigation als Offcanvas (1)** kannst Du bestimmten, in welchem Viewportbereich das mobile Menü angezeigt wird. Mit Hilfe dieser Option ist es sogar möglich auch für die Desktop-Ansicht das mobile Menü darzustellen.

<figure><img src="/files/iElD3RsVCCU8wT1b8iIQ" alt=""><figcaption></figcaption></figure>

Beispiele:

![Offcanvas-Menü auf Desktop-Ansicht](/files/uFRfZx11q6jHJp5vGS1m)

![Standard Menü auf Desktop-Ansicht](/files/LtSlCdPEqE3zXij8rHz0)

#### Bestellmengenfeld

`Mengenauswahl` | `Mengeneingabe -/+`

Das Feld für die Bestellmenge kann global auf ein Eingabefeld mit Plus- und Minus-Buttons umgestellt werden. Die Einstellung ist global und betrifft alle weiteren Eingabefelder, z.B. in Warenkorb oder Kasse.

* *Standard:* Dieser Wert setzt alle Bestellmengenfelder in den Standard. Ab Showpare 6.5 ist das Standard-Bestellmengenfeld eine Mengeneingabe -/+
* *Mengenauswahl*: Es wird die Standard-Mengenauswahl verwendet. Ab einer maximalen Auswahlmenge > 100 wird die Mengeneingabe -/+ des Themes dargestellt.
* *Mengeneingabe -/+:* Anstelle der Mengenauswahl wird eine Mengeneingabe mit Plus- und Minus-Buttons angezeigt.

{% hint style="success" %}
**Warum wird die Mengenauswahl zu einer Mengeneingabe?**

Das hängt mit der [maximale Auswahlmenge](https://docs.shopware.com/de/shopware-6-de/einstellungen/warenkorb#maximale-auswahlmenge) zusammen, die Du in der Administration des Shops unter **Einstellungen > Warenkorb** einstellen kannst. Über die maximale Auswahlmenge kannst Du festlegen, wie viele Produkte über das Dropdown ausgewählt werden können.

Der Browser muss für **jeden** Artikel im Listing (im Warenkorb, Kasse usw.) eine solche Mengenauswahl rendern. Wird die maximale Auswahlmenge auf einen sehr hohen Wert gesetzt, führt dies zu langen Ladezeiten.

Werte jenseits der 10.000 oder sogar 100.000 führen nicht nur zu langen Ladezeiten, sondern können zum Absturz des Browsers führen. In einem solchen Extremfall (maximale Auswahlmenge = 100.000) muss der Browser 1 - 100.000 Option-Zeilen der Mengenauswahl rendern. Bei z.B. 24 Produkten pro Listing sind das 2.400.000 Zeilen.
{% endhint %}

Beispiele:

<figure><img src="/files/35wBgR7aN5k20GPb2dCe" alt=""><figcaption><p>Standard Mengeneingabe</p></figcaption></figure>

![Mengenauswahl](/files/Z06h6itJczL0sgzGGF4D)

![Mengeneingabe](/files/7DynLcVZe4vwL3X7l5bx)

### Globale Body Abstände

Im Theme können globale Abstände gesetzt werden um bei vollflächigen Layouts eine Rahmung zu erzielen. Auf mobilen Geräten sollten diese Abstände verringert werden. Allgemein eignen sich hier Werte zwischen 0 - 100 Pixeln.

![](/files/HGPvyUvZAqrYMmBRzRFa)

![Beispiel mit Abständen links und rechts bei einem Full Width Layout](/files/6qkzBjBoL4xGFTsx69Sn)

### Container Abstände

Die Abstände des Containers für die Hauptinhalte kann über das Theme angepasst werden. Auf mobilen Geräten werden die Werte halbiert.

![](/files/N150ygcZapphr2ywteY5)

Beispiel:

![Abstände oben (1) und unten (3)](/files/y0p6VtO5mCVJYsysYpxB)

![Abstände rechts(2) und links(4)](/files/4UFkAaFQ9MvkgItxpnMJ)

### Abgerundete Ecken

Der Ecken-Radius definiert das Aussehen von Buttons, Eingabe-Feldern und verschiedenen anderen Elementen, wie Produktboxen, Produkt Slider Thumbnails, Tabs, Modals (Popups) uvm.

![](/files/9vJEdXKCIyCHvSHiKdm8)

Beispiel:

![Das Beispiel zeigt Buttons "Rund" in Kombination mit Inputs mit einem mittleren Ecken-Radius.](/files/Ri6oFsOFqoyPTjFYKeIL)


# Produktbilder

Das Theme unterstützt die Ermittlung des Seitenverhältnis Deiner Produktbilder. Die Ermittlung des Seitenverhältnisses erfolgt anhand **vorgegebener Seitenverhältnisse (1)** oder durch die Angabe **exakter Bild-Breite (2) und Bild-Höhe (3)**, welche für Produktlistings und die Produkt Image Galerie genutzt werden.

![](/files/vesClo6VwlNHVTbfYyUS)

Sobald exakte Bildmaße in den Feldern **Breite Artikelbild (2**) und **Höhe Artikelbild (3)** eingetragen sind, werden diese anstelle des **Seitenverhältnis Artikelbilder (1)** verwendet.

{% hint style="success" %}
Warum und vor allem wie Du das optimale Bildformat Deiner Produktbilder ermittelst, haben wir Dir im Artikel unter INHALTE > Produktbilder > [Bildformat](/content/produktbilder/bildformat) ausführlich zusammengefasst.
{% endhint %}

{% content-ref url="/pages/EEi9G7mDmNCPnoIwleNx" %}
[Bildformat](/content/produktbilder/bildformat)
{% endcontent-ref %}

Das Theme bietet mit der Option **Hintergrundfarbe überlagernd (5)** eine Funktion zum Einfärben von Produktbildern durch eine Hintergrundfarbe. So können auch nicht ausgeschnittene Produktbilder im JPG-Format auf einer Hintergrundfarbe abgebildet werden. Die Funktion zur Einfärbung der Produktbild-Hintergründe haben wir Dir im Tutorial [Produktbilder Hintergrund](/content/produktbilder/produktbilder-hintergrund) zusammengefasst.

{% content-ref url="/pages/djkgCLM2g9rFiUQtKSRn" %}
[Produktbilder Hintergrund](/content/produktbilder/produktbilder-hintergrund)
{% endcontent-ref %}


# Produkt Layout-Typ

In den Kategorien wird der [Layout-Typ](/faq/produkt-layout) für die Produkt-Boxen in der Erlebniswelt unter *Erlebniswelten > Kategorieseiten* im Kategorie-Listing Element global eingestellt. Die Suchergebnisseite und der Merkzettel sind allerdings Bereiche, die nicht über die Erlebniswelten konfiguriert werden können. Daher kannst Du für die einzelnen Bereiche einen Layout-Typ definieren.

<figure><img src="/files/O9RlxbIDW2TsAUoUuL1e" alt=""><figcaption></figcaption></figure>

Neben den Layout-Typen `Standard`, `Großes Bild` und `Minimaler Inhalt` hat der **Merkzettel (2)** ein zusätzliches Layout `Wunschliste`, welches den Hersteller und die Lieferzeit zusätzlich darstellt.


# Globales Hintergrundbild

In den Grundeinstellungen kann ein globales **Hintergrundbild (1)** für den gesamten Onlineshop hochgeladen und konfiguriert werden.

Bestimme über die **Wiederholung (2)**, ob sich das Bild wie ein Muster wiederholen soll. Dabei kannst Du bestimmen, ob es sich vertikal, horizontal oder in beiden Achsen wiederholen soll.

Die **Fixierung (3)** lässt Dich das Bild beim Scrollen entweder `fixieren` oder mitlaufen. Wird das Bild fixiert, bleibt es auch beim Scrollen sichtbar im Fenster fixiert. Ist das Bild `scrollend`, verschwindet es beim Scrollen, bewegt es sich mit dem Dokumentenfluss nach oben.

Über **Position (4)** und **Größe (5)** bestimmst Du, wie sich das Bild im Hintergrund des Shops einpassen und positionieren soll.

<div align="left"><figure><img src="/files/PaZghnJww8fYzjtpx9TC" alt=""><figcaption><p>Größe (5): Füllend ⇒ Cover, Beinhalten ⇒ Contain</p></figcaption></figure></div>

<figure><img src="/files/8ssXiGE2PVOAN6ajdEeB" alt=""><figcaption></figcaption></figure>

Beispiel:

![](/files/AURwS9m19CzUnkvM7deZ)


# Preloader

Der Preloader ist eine Animation beim Laden der Seite. Dadurch wird dem Sucher der häufig unschöne Aufbau der Seite durch eine kleine Animation überblendet. Hier kann auch das Shoplogo animiert eingebunden werden.

Die **Anzeige (1)** kann so eingestellt werden, dass die Animation bei jedem Seitenübergang order nur beim Laden der Startseite angezeigt wird. Neben Hintergrund und Farbe besteht die Möglichkeit das Verschwinden des Preloaders mit Hilfe der **Ausblende Animation (3)** zu animieren.

**Timeout (4)** gibt die Zeit in Millisekunden an, wie lange der Preloader mindestens sichtbar ist. Bei sehr kurzen Ladezeiten kann es sonst vorkommen, dass der Preloader nur kurz aufflackert.

![](/files/XEWd2ZepElhYtGWeOek2)

Beispiel:

![](/files/L2hhLiUIG2sHHCtq6luw)


# Akzentlinie

Akzentlinie im oberen Bereich der Seite. Über **Akzentlinie oben** definierst Du die Größe dieser Linie.

![Die Akzentlinie wird mit einem Wert von 0 nicht angezeigt.](/files/fgROPGr5srk0dho5ehI3)

Beispiel:

![](/files/jRtfyj93xyaOODYOn0Dj)


# Animationen

## Scroll-Animation

Die Scroll-Animationen animieren Elemente und Blöcke der Erlebniswelten werden beim Scrollen der Seite ausgelöst. Dabei werden die Inhalte durch eine Animation eingeblendet, sobald diese durch Scrollen in den sichtbaren Bereich eintreten.

{% hint style="info" %}
Zum Anwenden der Scroll Animationen folge unserer Doku zur [Erlebniswelten Animation](/content/erlebniswelten/erlebniswelt-animation).
{% endhint %}

Die **Dauer (1)** gibt an, wie lange die Animation in Sekunden dauert. Die **Verzögerung (2)** beschreibt die Dauer, bis die Animation beginnt. Erreicht ein Element also durch Scrollen den sichtbaren Bereich, wartet die Animation noch weitere 0,25 Sekunden bis die Animation beginnt.

<figure><img src="/files/AHgkKXolzwjPQReK447O" alt=""><figcaption></figcaption></figure>

Du kannst zusätzlich das **Produkt Listing animieren (3)**, dabei werden die einzelnen Produkt-Boxen im Listing nacheinander animiert eingeblendet.

## Erscheinungs-Animation

Die Erscheinungs-Animationen animiert die Inhalte von Menüs und Offcanvas Elementen, sobald diese durch den Nutzer geöffnet werden.

Mit der Einstellung **Elemente animieren (1)** kannst Du die Funktion aktivieren oder auf Wunsch auch ausschalten.

Die **Dauer (2)** gibt an, wie lange die Animation in Sekunden dauert. Die **Verzögerung (3)** beschreibt die Dauer, bis die Animation beginnt. Erreicht ein Element also durch Scrollen den sichtbaren Bereich, wartet die Animation noch weitere 0,15 Sekunden bis die Animation beginnt.

<figure><img src="/files/0Yb8UI0ZKv010OUPxGv3" alt=""><figcaption></figcaption></figure>

Beispiel:

<figure><img src="/files/6YJBU5byTjL3A4xQJmTY" alt=""><figcaption></figcaption></figure>


# Typografie & Farben


# Theme-Farben

### Farben

Im Reiter Farben findest Du die globalen Farbeinstellungen des Themes. Die **Primärfarbe (1)** und **Sekundärfarbe (2)** sind die Hauptfarben des Shops.

{% hint style="info" %}
Die **Primär- und Sekundärfarben** sollten niemals `transparent` und in der Regel nicht `#ffffff` (Weiß) sein, da diese Farben auch als Vordergrundfarbe genutzt werden.&#x20;

Stelle daher immer sicher, dass diese Farben einen ausreichenden Kontrast zur Farbe des **Body Hintergrund (4)** und **Shop Hintergrund (5)**  haben.\
\
**Ausnahme:** Du möchtest ein dunkles Layout mit dunkler Body Hintergrund und Shop Hintergrundfarbe erstellen. Dann kann es notwendig sein, helle Primär- und Sekundärfarben zu verwenden.
{% endhint %}

![](/files/DssHnzmtlhqSUZIB47T9)

Der Wert für **Meta Theme-Farbe (6)** gibt eine Farbe an, die Browser verwenden sollten, um die Anzeige der Seite oder der umgebenden Benutzeroberfläche anzupassen. Insbesondere bei mobilen Endgeräten zu sehen.

{% embed url="<https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color>" %}

#### Body Hintergrund vs Shop Hintergrund

Die globalen Hintergrundfarben des Shops sind in Body Hintergrund und Shop Hintergrund unterteilt. Der **Body Hintergrund (4)** ist dabei der Hintergrund des gesamten HTML-Dokumentes (Body). Der **Shop Hintergrund (5)** ist der Hintergrund des Shops, der wiederum auf dem HTML-Dokument liegt.

{% hint style="info" %}
Achtung: Der Pfeil von der Primärfarbe zum Feld des Body Hintergrundes zeigt, dass Farben anhand ihrer Variablen in anderen Feldern weiter genutzt werden können.
{% endhint %}

![](/files/M45MqHmPoSGzZnzQ50iM)

### Grundeinstellungen

Es gibt im Theme bestimmte Bereiche, deren Vordergrundfarbe anhand der Hintergrundfarbe ermittelt wird. Das ist beispielsweise bei den Primärbuttons der Fall. Das Kontrastverhältnis bestimmt, wann die Helligkeit der Farbe von "dunkel" zu "hell" wechselt.

Beispiel:

<div><figure><img src="/files/SsG6maW1BDRmw9MR4Ixl" alt=""><figcaption><p>Schwellenwert 4.5</p></figcaption></figure> <figure><img src="/files/kZ8q3dMwXoQittbAyYzw" alt=""><figcaption><p>Schwellenwert 2</p></figcaption></figure></div>

In Shopware 6.5 wurde die Berechnungsgrundlage auf die Web Content Accessibility Guidelines (WCAG) angepasst.

Der **Kontrast Schwellenwert (1)** dient also zur Berechnung von Kontrastfarben. Ist die Hintergrundfarbe eines Buttons z.B. altrosa `#d9ab98` wird bei einem Schwellenwert von `4.5` die Vordergrundfarbe als Kontrastfarbe **dunkel** errechnet. Bei einem Schwellenwert von `2` wird die Vordergrundfarbe des Buttons **hell** errechnet.

<figure><img src="/files/80I71WA6pAC7czUJEUxd" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Die Einstellung des Kontrast Schwellenwertes hat möglicherweise Auswirkungen auf die Lesbarkeit bestimmter Elemente. Im Standard sorgt ein Kontrast Schwellenwert von 4.5 für eine optimale Lesbarkeit.
{% endhint %}


# Status-Ausgaben

Je nach Aktion im Shop, werden vom System Status-Meldungen angezeigt. Die typischen Farben verschiedenen Statusmeldungen findest Du hier.

![](/files/0PGnAU0r1k07t0EGTtOg)

Beispiele:

<div align="left"><img src="/files/e40ngKwUkwlm8gHnUqWP" alt=""></div>

<div align="left"><img src="/files/nQbGQRUL2QLGz3ORe6rP" alt=""></div>

<div align="left"><img src="/files/PPgLSw8KyxLkay7DMT3s" alt=""></div>

<div align="left"><img src="/files/jPFu9d9HXRCBqrRdE1xB" alt=""></div>


# Schriftarten

Schriften können **lokal** über die Theme Schriften genutzt werden oder **extern** über die Custom Schriften durch Google Fonts eingebunden werden. Zusätzlich haben wir eine Anleitung, wie Du [Schriften selbst hosten](https://themedocs.zenit.design/tutorials/schriften-lokal-einbinden) kannst.

### Eigene Schriftarten

Über das Theme stehen Dir alle 1600+ [Google Fonts Schriftarten](https://fonts.google.com/) zur Verfügung. Du kannst für Fließtexte und Überschriften separate Schriften oder auch die selbe Schrift definieren.

{% hint style="info" %}
Möchtest Du für Überschriften und Fließtexte die selbe Schrift verwenden, trage in beide Felder den selben Schriftnamen ein. Die Schriftstärken werden miteinander ergänzt, sollten sich diese in den Feldern unterscheiden.
{% endhint %}

![](/files/u5kxdCbD9y2V0EOCzG76)

#### 1. Schrift aussuchen

Um eine Schriftart von Google Fonts zu nutzen, suche Dir einfach je eine Schriftfamilie für Fließtexte (**Schriftart Text**) und eine Schriftfamilie für Überschriften (**Schriftart Überschrift**) aus - in diesem Beispiel möchten wir `Roboto Condensed` als Schriftart für Texte verwenden und geben diese in die Suche ein.

![](/files/hb7tdy5hAUEoNMQthael)

#### 2. Schriftschnitte einsehen

Nach der Auswahl der Schrift können die Schriftschnitte eingesehen werden, welche die Schriftart bereitstellt. In diesem Beispiel bietet 'Roboto Condensed' alle möglichen Schriftschnitte `Light 300` bis `Bold 900` , da es sich um eine variable[^1] Schriftart handelt.

![](/files/epfUmfyvE2nGYJkgayF9)

<figure><img src="/files/Lo9egFftzmGzCBinztb9" alt=""><figcaption></figcaption></figure>

#### 3. Schrift wählen

Nach den Klick auf **Get embed code** gelangst Du zu der Seite mit den Einbettungscodes. Hier interessiert uns lediglich der technische Name der Schrift. **Notiere Dir daher den Namen der Schriftfamilie.** `'Roboto Condensed', sans-serif`

{% hint style="warning" %}
`font-family:` sowie das `Semikolon` entfallen.
{% endhint %}

{% hint style="info" %}
Du musst hier auch keine Auswahl der Schriftschnitte vornehmen - **das passiert erst im Theme!**
{% endhint %}

![](/files/H7CLIpJriyy48phameHu)

#### 4. Schriftfamilie im Theme hinterlegen.

Trage nun den Namen der Schriftart in das Feld **Schriftart Text (1)** oder für Überschriften in das Feld **Schriftart Überschrift** ein. Behalte dabei die *generische Schriftfamilie* bei, falls die Schriftart wider erwarten einmal nicht geladen werden kann.

{% tabs %}
{% tab title="Was sind generische Schriftfamilien" %}

> Generische Schriftfamilien dienen als Fallback-Mechanismus, ein Mittel, um etwas von der Absicht des Stylesheet Autors zu erhalten für den Fall, wenn keine der angegebenen Schriftarten verfügbar sind.
> {% endtab %}

{% tab title="Generische Schriftfamilien Beispiel" %}

| Generische Schrift | Bedeutung                                                                                                                                                                                                                                                                                              |
| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `serif`            | Schriftzeichen haben abschließende Striche, ausgeweitete oder zugespitzte Enden oder serifenbetonte Enden.                                                                                                                                                                                             |
| `sans-serif`       | Schriftzeichen haben gerade Strichenden.                                                                                                                                                                                                                                                               |
| `monospace`        | Alle Schriftzeichen haben die gleiche Breite.                                                                                                                                                                                                                                                          |
| `cursive`          | Schriftzeichen in kursiven Schriftarten haben üblicherweise verbindende Striche oder andere kursive Charakteristiken, die über die von kursiven Schriftzügen hinausgehen. Die Schriftzeichen sind teilweise oder ganz verbunden und das Ergebnis ähnelt eher einer Handschrift als gedruckten Lettern. |
| `fantasy`          | Fantasie Schriftarten sind überwiegend dekorative Schriftarten, die verspielte Darstellungen von Schriftzeichen beinhalten.                                                                                                                                                                            |
| {% endtab %}       |                                                                                                                                                                                                                                                                                                        |
| {% endtabs %}      |                                                                                                                                                                                                                                                                                                        |

![](/files/UV64BWcEqT3xZo12WATS)

Der Inhalt des Feldes **Schriftart Text (1)** oder **Schriftart Überschrift** sollte nun so aussehen:

```
'Roboto Condensed', sans-serif
```

Die Schriftstärken (Schriftschnitte) wähle im Feld **Schriftstärken Text (2)** oder bei Überschriften im Feld Schriftstärken Überschrift aus. Du kannst nur die Schriftschnitte verwenden, welche die Schrift ausliefert.

{% hint style="warning" %}
Stelle sicher, dass **Schriften laden (3)** aktiv ist und bei den Theme Schriftarten im Feld **Schriftart Text (4)** eingestellt ist, dass die Eigene Schriftarten verwendet werden sollen.
{% endhint %}

Um keine unnötigen Ladezeiten zu erzeugen, wähle nur die Schriftstärken aus, welche Du auch wirklich nutzen möchtest. Häufig können für einzelne Elemente spezielle Schriftschnitte in der Konfiguration gewählt werden. Werden Schriftschnitte abgerufen, welche die Schrift nicht ausliefert, wenden Browser dan [Näherungsverfahren](https://developer.mozilla.org/de/docs/Web/CSS/font-weight#n%C3%A4herungsverfahren) an.

### Theme Schriften

Neben der Einbindung von externen oder [selbstgehosteten](/tutorials/schriften-lokal-einbinden) Schriften, bietet das Theme eine Auswahl an integrierten Schriften. Diese Schriften werden mit dem Theme ausgeliefert und befinden sich nach der Installation auf **Deinem Server**. Du musst Dir daher bei den Theme Schriften keine Gedanken um den Datenschutz machen.

Theme Schriften können ebenso wie die Custom Schriften für **Fließtexte (1)** und **Überschriften (2)** separat eingestellt werden. Die mitgelieferten **Schriftschnitte (3)** stehen in eckigen Klammern hinter dem Schriftnamen.

Es ist ebenso möglich eine Theme Schrift für z.B. Fließtexte zu verwenden und eine Custom Schrift für die Überschriften. Beachte aber, dass durch die extern-eingebundene Custom-Schrift noch immer eine Verbindung zu den Google Servern besteht, es sei denn, Du hast die Custom-Schrift selbst gehostet und die Option **Schriften laden** im Abschnitt Custom Schriften deaktiviert.

![](/files/DyI5oJsIyoUhKRKrjS0i)

{% hint style="success" %}
Sobald für beide Schriften eine andere Auswahl als `- Custom Schriftart -` gewählt wurde, werden **keine Schriften mehr von Google Servern geladen**. Die Einstellung **Theme Schriften** überschreibt die Einstellung der **Custom Schriften**.
{% endhint %}

[^1]: Variable fonts allow one font file to contain multiple variations. You can change the weight, width, style, optical size, and more. The variables within variable fonts are controlled by axes.


# Typografie

Im Abschnitt Typografie können neben den grundlegenden Farben der Schriften auch Schriftgrößen definiert werden.

{% hint style="info" %}
Die Einstellungen für die Schriftgrößen stehen ab Theme Version **2.1.0** zur Verfügung.
{% endhint %}

{% hint style="warning" %}
Bitte wähle für **Textfarbe** immer eine dunkle und für **Helle Textfarbe** immer einen hellen Farbwert. Durch interne Kontrast-Funktionen werden bei dunklen Shop-Hintergründen automatisch die Helle Textfarbe und bei hellen Shop-Hintergründen automatisch die normale (dunkle) Textfarbe verwendet.
{% endhint %}

![](/files/piesvUWlDfPfKa2vJLBo)

Zusätzlich können neben den Schriftgrößen auch das Schriftgewicht konfiguriert werden. Achte dabei darauf, Werte auszuwählen, welche von den hinterlegten Schriftarten ausgeliefert werden.

![](/files/hLGWGVbAKxWlcXFX1uwz)


# E-Commerce

Hier können globale Farben für die Preisdarstellung und den Warenkorb-Button getroffen gewählt werden.


# Buttons

Neben den Primär- und Sekundärbuttons werden in der Storefront an verschiedenen Stellen Buttons verwendet. In der Administration werden beispielsweise Light-Buttons verwendet. Die Farben der Buttons können hier angepasst werden:

<figure><img src="/files/IGiOX0HjK8b4nbkJmtQd" alt=""><figcaption></figcaption></figure>

Im Standard werden die Farben der Buttons anhand der border-color Farbe ermittelt. Dabei werden Farbton, Sättigung anhand der border-color mit einer fest definierten Helligkeit gesetzt. Das hat den Vorteil, dass die Buttons automatisch zu Deinem Farbstil passen.

```
// HSL Color $from sw-border-color
hsl(hue($sw-border-color), saturation($sw-border-color), 98%)
```


# Logos

In diesem Bereich legst Du die Logos und Icons fest. Ist der Viewport größer als **991px** wird das **Desktop** Logo angezeigt. Zwischen **991px** und **767px** wird das **Tablet** Logo angezeigt. Ist der Viewport kleiner als **767px** wird das **Mobil** Logo angezeigt.

Das Theme ermöglicht es Dir auch für den Footer und die Offcanvas Topbar ein separates Logo zu setzen.

## Header

Das Logo im Kopfbereich der Seite.

![](/files/C7mybWagOqSWbbMCYHpV)

## Sonstige

Das Favicon wird im Browser vor der URL angezeigt und das App- & Share-Icon wird beispielsweise als Vorschau angezeigt, wenn die Seite in sozialen Netzwerken geteilt wird.

## Kontrast Header

Setze Logos für die verschiedenen wählbaren Kontrast Header. In Verbindung mit der Funktion des überlagernden Headers kannst Du verschiedene Kontrast Header wählen. Mehr zu dieser Funktion findest Du im Bereich [Header > Header Kontrast](#kontrast-header).

* **Heller Header - dunkles Logo:** Wähle ein Logo mit Kontrast zu hellen Flächen.
* **Dunkler Header - helles Logo:** Wähle ein Logo mit Kontrast zu dunklen Flächen.
* **Invertierter Header - invertiertes Logo:** Wählen ein Logo mit einem Kontrast, der dem des Standardlogos entgegengesetzt ist.

## Footer

Das Theme unterstützt die Darstellung eines Logos im Footer der Seite. Im Bereich Footer kannst Du das Logo wahlweise in den Newsletter, in die Hotline-Spalte, in die Social Media Spalte oder in eine eigene Spalte positionieren.

Beispiel:

![Logo im Newsletter-Bereich](/files/OKdW6wGUwMrnzPa72Rdc)

## Offcanvas Top Bar

Um Deine Marke zu stärken, kannst Du ebenfalls ein Logo für die Offcanvas Top Bar ausspielen.

![](/files/CcXVaj6dJjrxeXROfnCy)


# Header


# Header

### Farben

Beispiele:

![Beispiel eines einzeiligen Headers](/files/EGcJpgIHxNTMpyBQleOT)

### Logo

Über **Logo Position (1)** positionierst Du das Logo im Header entweder `links`, `rechts` oder in der `Mitte`. Alle weiteren Elemente des Header wie Suche, Shop-Navigation usw. ordnen sich automatisch an.

Die **Logo Größe mobile (2)** sowie **Logo Größe (3)** beschreibt die Größe des Logos in **Prozent** im Verhältnis zur **Höhe mobile (4)** bzw. **Höhe (5)** des Headers. Damit ist sichergestellt, dass das Logo nicht aus dem Header ausbrechen kann - außer Du verwendest Werte über `100%` um diesen Effekt absichtlich zu erzielen.

![](/files/aFOafnvOSzeRmRSJvij8)

Beispiel:\
Ist der Header in der Desktop Ansicht `100px` hoch und das Logo `40%` groß, ergibt sich eine Größe des Logos von 40 Pixel in der Höhe - die Breite ergibt sich proportional.

### Höhen & Abstände

Die **Höhe (1, 2)** des Headers kann für die mobile Darstellung und die Variante für größere Geräte separat eingestellt werden.\
Zusätzlich können **Abstand oben (3, 4)** sowie **Abstand unten (4,5)** gesetzt werden. Dadurch können Darstellungen wie im Beispiel erzeugt werden.

<figure><img src="/files/DBEX78jK4MXVn4nEFQYa" alt=""><figcaption></figcaption></figure>

Beispiel:

<figure><img src="/files/FNfTpg6SJu7C5cV05LZZ" alt=""><figcaption></figcaption></figure>

### Abgerundete Ecken

<figure><img src="/files/7FHI9BAnYMD3hrfo59Mv" alt=""><figcaption></figcaption></figure>

Beispiel:&#x20;

<figure><img src="/files/K6iCfyqVQpGDcjFtqxMv" alt=""><figcaption></figcaption></figure>

### Rahmen unten

Der gesamte Header kann einen **Rahmen unten (1)** erhalten und so stärker vom Content abgetrennt werden. Für den Sticky-Zustand – also wenn der Header beim Herunterscrollen feststehend angezeigt wird – kann eine abweichende Einstellung über die **Felder Rahmen unten:sticky (2)** vorgenommen werden.

<figure><img src="/files/H1A5IlPqugXXRla4zeSb" alt=""><figcaption></figcaption></figure>

Beispiel:

<figure><img src="/files/Rpj2yOWaetA2yFNr2j5H" alt=""><figcaption><p>Rahmen unten für den gesamten Header</p></figcaption></figure>

### Schlagschatten

Der gesamte Header kann einen unteren Schlagschatten erhalten und so stärker vom Content abgetrennt werden.

<figure><img src="/files/t524TfUDWap2pprQTbI1" alt=""><figcaption></figcaption></figure>

Der Schlagschatten kann unterschiedlich für drei verschiedene Header-Status eingestellt werden. **Schlagschatten (1)** aktiviert den Schlagschatten für den Header im normalen Zustand. **Schlagschatten:hover (2)** aktiviert den Schlagschatten nur, wenn die Maus über den Header bewegt wird. Und **Schlagschatten:sticky (3)** aktiviert den Schatten immer dann, wenn der Nutzer nach unten scrollt und der Header fixiert dargestellt wird. Diese Funktion greift nur, wenn der Header auch als Sticky-Header, wie im folgenden erläutert, dargestellt wird.

Für die **Farbe** des Schlagschattens eignet sich in der Regel am besten ein teiltransparenter Farbton. In diesem Beispiel ist der Wert  in rgba angegeben, welchen Du im Color-Picker über die Alpha-Transparenz auswählen kannst. Der Wert `rgba(0,0,0,0.1)` ist also ein reines Schwarz mit 10% Sichtbarkeit.

Die **Weite** ist in Pixel anzugeben und gibt an, wie groß der Schatten in Pixeln ist.

### Sticky Header

Das Theme beinhaltet die Funktion Sticky Header, welche den Header beim Herunterscrollen der Seite am oberen Bildschirmrand fixiert. Mit Hilfe der **Anzeigebereiche (1)** kannst Du festlegen, auf welchen Geräten der fixierte Header genutzt werden soll.

![](/files/8oscZs32yGrn9OrP038U)

{% hint style="info" %}
Die Bildschirmfläche (Viewport) ist eine Ressource, die sinnvoll genutzt werden sollte.\
Man sollte daher nicht aus einem falsch verstandenen Usability-Ansatz davon ausgehen, dass eine Sticky-Navigation automatisch zu einer besseren Usability (Nutzbarkeit) führen. Fixierte Header verbrauchen auf dem mobilen Gerät wertvolle vertikale Bildschirmflächen und bieten dem Benutzer keinen enormen Mehrwert.
{% endhint %}

Der **manuelle Offset (2)** Wert definiert den Abstand von Oben, ab wann der Header fixiert werden soll. Lass das Feld leer, wenn der Abstand des Headers zur Oberkante des Browsers automatisch ermittelt werden soll. Der Header wird sticky, sobald der Header durch Scrollen außerhalb des sichtbaren Bereiches gerät - daraufhin wird der Header mit einer Animation erscheinen und fixiert.

* Möglichkeit 1: Wert leer lassen zur automatischen Berechnung
* Möglichkeit 2: Legt man einen Offset-Wert von `0` fest, wird der Header sofort fixiert - ohne Animation.
* Möglichkeit &#x33;*:* Der Offset-Wert ist immer dann nützlich, wenn das Flyout-Menü oder Dropdown-Menü so viele Einträge beinhalten, dass die Einträge unterhalb des Browserrandes verschwinden. Wird nun für den Offset-Wert ein zusätzlicher Abstand z.B. `600` eingetragen, muss der Nutzer mind. `600` Pixel nach unten scrollen, bis der Header fixiert wird. Dadurch werden die Menüpunkte, die unterhalb des Browser-Falzes verschwunden sind beim Scrollen wieder erreichbar. Der Header wird erst zu einem späteren Scrollabstand fixiert.

![Beispiel 2: Kategorien unterhalb des Browser Falzes](/files/qQ4pwIHTkRw5P626vTBR)

Die **Auto Hide (3)** Funktion sorgt dafür, dass der komplette Header erst wieder sichtbar wird, wenn der Nutzer im Begriff ist nach oben zu Scrollen.

{% hint style="success" %}
Die **Auto Hide Funktion** verbessert die Usability, da so auch bei mehrzeiligen Headern oder sehr hohen einzeiligen Headern nicht permanent der [Viewport](/tipps/lexikon) künstlich verkleinert wird.
{% endhint %}

Die **Abweichende Header Höhe:sticky (4)** lässt Dich eine zusätzliche (meist geringere) **Header Höhe:sticky (5)** festlegen. Der Header kann so im Sticky Zustand auf diese abweichende Höhe schrumpfen (oder eben wachsen). Die Einstellung soll insbesondere Layouts mit ausladendem Header die Möglichkeit geben, die Sticky-Funktion nutzerfreundlich einzusetzen ohne zu viele Bereiche mit dem Sticky-Header zu überdecken.

### Checkout Minimal Header

<figure><img src="/files/Jxvamlbf6uYDhD0Bdjli" alt=""><figcaption></figcaption></figure>

Der Header im Checkout unterscheidet sich in Shopware vom normalen Header. Hier gibt es die Möglichkeit einen **Schlagschatten (1)** zu setzen.

Für die **Farbe** des Schlagschattens eignet sich in der Regel am besten ein teiltransparenter Farbton. In diesem Beispiel ist der Wert  in rgba angegeben, welchen Du im Color-Picker über die Alpha-Transparenz auswählen kannst. Der Wert `rgba(0,0,0,0.1)` ist also ein reines Schwarz mit 10% Sichtbarkeit.

Die **Weite** ist in Pixel anzugeben und gibt an, wie groß der Schatten in Pixeln ist.

Der gesamte Checkout Header kann einen **Rahmen unten (2)** erhalten und so stärker vom Content abgetrennt werden.


# Suche

## Farben

Je nach Einstellung der Suche (Overlay Suche, Ausklappbare Suche und Standard Suche) haben die Farbfelder eine unterschiedliche Funktion. Erfahren unter den Hilfe-Labels mehr über die jeweilige Funktion der Farbe.

{% hint style="info" %}
Die grundlegenden Erscheinungs-Einstellungen der Suche findest Du im Tab "[Allgemein](/styling/allgemein)".
{% endhint %}

![](/files/klFfJN7TutmYpBOD9ZJq)

## Grundeinstellungen

Die Angabe der **Suchfeld-Breite (1, 2)** erfolgt in Prozent und bezieht sich auf die **gesamte Header-Breite**. Wenn der eingestellte Prozentwert größer ist als der tatsächlich zur Verfügung stehende Platz in der entsprechenden Header-Zeile, wächst das Suchfeld nicht über diesen verfügbaren Bereich hinaus. Das bedeutet: Auch eine auf 50% gesetzte Breite kann in der Praxis bereits den vollständigen Raum zwischen Logo und Hauptnavigation ausfüllen.

Der **Kategorie Filter (3)** aktiviert eine Zusatzfunktion des Themes, die bereits bei Eingabe des Suchbegriffs auf eine gewünschte Kategorie filtern lässt.

Die Trennlinien in der Vorschlagssuche lassen sich mit der Auswahl **Vorschlagssuche Trennlinien (4)** aktivieren.

<figure><img src="/files/D0TYOZuYJnRix2FjseCV" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Nicht jeder Shop stellt in erster Ebene die Kategorien dar. Solltest Du die eigentliche Kategorie in einer anderen Ebene haben, kannst Du den Einstiegspunkt für den Kategorie Filter wählen.&#x20;
{% endhint %}

Beispiel:

<figure><img src="/files/RdUCg1t1LnmVXcYOmHYN" alt=""><figcaption><p>50% Breite der Suche</p></figcaption></figure>

<figure><img src="/files/ovH2FYjuFyKVcOckrxRK" alt=""><figcaption><p>Kategorie Filter</p></figcaption></figure>

<figure><img src="/files/l9R92xGiMEl4p7EIMMM4" alt="" width="563"><figcaption><p>Suchergebnisse Trennlinien</p></figcaption></figure>


# Top Bar

Die grundlegenden Erscheinungs-Einstellungen der Top Bar findest Du im Tab "[Allgemein](/styling/allgemein)". Dort kannst Du einstellen, ob die Top Bar als solche dargestellt werden soll, oder zu einem Offcanvas-Element umfunktioniert werden soll, siehe Beispiele unten.

### Farben

Keine Besonderheiten

### Grundeinstellungen

**Sprachauswahl Text (3):** Stellt die Art der Darstellung der Sprachauswahl dar.\
**Sprachauswahl Flagge (4):** Kann die Darstellung der Landesflagge unterbinden.\
**Service-Navigation anzeigen (5):** Zeigt die Service-Navigation in der Top Bar an. Die Service-Navigation befindet sich optional zusätzlich im unteren Footer. Im Checkout-Footer wird die Service-Navigation immer angezeigt.\
Die Einstellung **Login- und Registrierungslinks anzeigen (6)** aktiviert die Anzeige der Links in der Top Bar.

![](/files/F8VwKnA6pivGzIci8I5A)

Beispiele:

![Login- und Registierungslinks | Sprachauswahl mit einfachem ISO Code und Flagge](/files/6SN0m4ZjXbydZRd9GIEE)

![Top Bar als Offcanvas Element - die Einstellung dazu befindet sich in Allgemein > Grundlayout](/files/tYZ0wNPJTC1k07mwWCi1)

### Logo

**Logo Größe (1)** definiert die Höhe des Logos, welches in der optionalen Offcanvas Top Bar angezeigt wird. Wird die Top Bar als klassische Zeile über dem Header abgebildet, entfällt das Logo.

<figure><img src="/files/H14cZtdeZjLc0moEq4cF" alt=""><figcaption></figcaption></figure>

Beispiel:

![Top Bar als Offcanvas Element mit Logo](/files/tYZ0wNPJTC1k07mwWCi1)

### Rahmen unten

Mit Hilfe der Option **Volle Breite (2)** kannst Du die Linie auf die volle Header-Breite strecken. Damit läuft die Linie je nach gewähltem Grundlayout bis an den Browserrand und wird nicht durch die maximale Inhaltsbreite beschränkt.

<figure><img src="/files/COM2ToB2ik4DIVBI95HG" alt=""><figcaption></figcaption></figure>


# Shop Navigation

Shop Navigation (Suche, Konto, Warenkorb)

![](/files/Zc4OWnj3vmxetwSUPrIA)

### Farben

<figure><img src="/files/60X4sxwNbOHCtoacnxBv" alt=""><figcaption></figcaption></figure>

Zusätzlich zu den allgemeinen Einstellungen für die Hintergrund- und Vordergrundfarben der einzelnen Elemente kannst Du eine **Badge Farbe (1)** definieren. Das betrifft das Badge für eingeloggte Benutzer und das Badge für die Anzahl der Artikel auf dem Merkzettel.&#x20;

Zusätzlich kannst Du den Elementen einen **Rahmen (1)** hinzufügen und deren Farben mit den Farbfeldern **Rahmen (3)** und **Rahmen:hover (4)** konfigurieren.

Beispiel:

<figure><img src="/files/AzJejrbsPuDo4U73RIWQ" alt=""><figcaption></figcaption></figure>

### Grundeinstellungen

**Schriftgröße (1) & Schriftstärke (2)** - Insbesondere bei der Darstellung des zweizeiligen Headers werden diese Einstellungen auf die Sprachauswahl, Währungsauswahl und Service-Navigation angewandt.\
**Tooltips (3) & Tooltips Platzierung (4)** - Ergänzend zu den Icons können Tooltips positioniert und angezeigt werden, welche die Funktion der Icons bei Mouse-Over unmissverständlich erklären.\
**Badges minimieren (5)** - Merkzettel, Account und Warenkorb verfügen über sogenannte Badges. Das sind kleine Labels, welche zB. die Anzahl der Produkte im Merkzettel anzeigen. Diese Labels können zu einem kleinen Punkt minimiert werden und erst bei MouseOver die Anzahl anzeigen. Dadurch wirkt der Bereich im Sinne eines minimal Designs sauberer und ordentlicher. \
**Icon Größe (6):** Bestimmte die Größe der Icons für Suche, Merkzettel, Konto und Warenkorb.\
**Merkzettel im Account-Menü anzeigen (7, 8)** verschiebt den Merkzettel in das Account-Menü. Insbesondere auf mobilen Geräten erlaubt das mehr Platz zur Anzeige des Logos bei einzeiligem Header.

![](/files/WNLszLnj1ZPcLMUf6YRG)

Beispiele:

<div align="left"><img src="/files/OLU7rqMACSo8W03yWccf" alt="Tooltip Beispiel - Suche Shopnavigation"></div>

<figure><img src="/files/gROwXB2R77AJePFQ1j4N" alt=""><figcaption><p>Merkzettel im Account anzeigen (mobile)</p></figcaption></figure>

### Warenkorb

Der Warenkorb kann über eine eigene Farb- und Schriften-Konfiguration **(1-6)** hervorgehoben werden.

![](/files/oWyNDioPlPitgJxDx84B)

Je nach gewählter Hintergrundfarbe kann es sinnvoll sein, die **Badge Farbe (7)** der "Anzahl der Produkte im Warenkorb" anzupassen. Die Textfarbe des Badges wird dabei automatisch mit dem optimalen Kontrast in schwarz oder weiß ermittelt.

Zusätzlich kannst Du den Elementen einen **Rahmen (8)** hinzufügen und deren Farben mit den Farbfeldern **Rahmen (9)** und **Rahmen:hover (10)** konfigurieren.

Beispiel:

![Rot hervorgehobener Warenkorb](/files/i7vMeoD844RIedOXFurI)


# Main Navigation

Main Navigation (Kategorien)

![](/files/vxmA8sKspHeptkSezjlb)

### Grundeinstellungen

Aktiviere oder deaktiviere den **Home-Link** in den Einstellungen Deines Katalogs. Ein Tutorial zum Einstellen des Home-Links findest du [hier](/faq/allgemein/home-link).

Der **Home-Link Aktiv-Status (1)** kann aus optischen Gründen auch deaktiviert und optional durch ein **Home-Icon (2)** abgebildet werden.

Beispiel:

<figure><img src="/files/zCUiKHk6pY41ANJgUHd0" alt=""><figcaption><p>Home-Link Aktiv-Status</p></figcaption></figure>

<figure><img src="/files/ehYYP4jacOPIE3zev0o7" alt=""><figcaption><p>Home Icon</p></figcaption></figure>

Über die **Ausrichtung (3)** kannst Du die Menüpunkte horizontal ausrichten und verteilen. Die **Trenner (4)** Einstellung unterteilt die einzelnen Menü-Elemente mit einem Trennzeichen.

Wähle aus 13+ **Hover Animation (5)** die passende Animation für Deinen Shop aus.

![](/files/jZenfzCHkhZx61OU6iRO)

Der **Scroller (6)** sorgt optional dafür, dass Kategorien der Main Navigation nicht umbrechen können - egal wie viele Hauptkategorien Du abbilden möchtest. Auf mobilen Geräte mit Toucheingabe kann horizontal gescrollt werden, auf Desktop-Geräten können mit Hilfe der **Pfeile (**<mark style="color:red;">**1**</mark>**,&#x20;**<mark style="color:red;">**2**</mark>**)** die weiteren Kategorien erreicht werden.

Beispiel:

![Menu-Scroller - Pfeil](/files/r6uSaTMAd8IbidUu7jgv)

![Menu-Scroller - Pfeil zum Zurückscrollen](/files/rVdP4uSVbSEKRqwaW32W)

Die Option **Unternavigation Aussehen (7)** bietet die Möglichkeit das Flyout-Menü durch ein einfaches Dropdown-Menü auszutauschen.

{% hint style="success" %}
Die Einstellung „**Unternavigation Aussehen**“ zum Festlegen eines Dropdown- oder Flyout-Menüs findest Du zusätzlich in den Zusatzfeldern jeder Kategorie. So kann pro Kategorie zwischen beiden Menüarten unterschieden und die Hauptnavigation flexibel kombiniert werden. [Weiterlesen](/content/kategorie/unternavigation)
{% endhint %}

Beispiel:

![Dropdown-Menü](/files/JeipRGICWXG67ZvT3EXP)

Mit der Option **Service-Navigation anzeigen mobile (8)** kann die Service-Navigation in de mobile Offcanvas-Menü angezeigt werden.

Beispiel:

<figure><img src="/files/tpRfAtMrj36mftFyfvXb" alt="" width="563"><figcaption></figcaption></figure>

### Rahmen oben

Wahlweise kann die Main-Navigation vom oberen Header-Bereich durch eine Trennlinie (Border) abgehoben werden.

![](/files/gDTUDQ77nohK2xBtRzHc)

Mit Hilfe der Einstellung **Volle Breite (1)** kannst Du die Linie auf die volle Header-Breite strecken. Damit läuft die Linie je nach gewähltem Grundlayout bis an den Browserrand und wird nicht durch die maximale Inhaltsbreite beschränkt.

Beispiel:

![](/files/LVXnP7pU0UdrQyU0Jjd5)

### Menü Elemente

Über die Option **Pfeile (1)** kannst Du kleine Pfeile neben den Kategorien darstellen, die angezeigt werden, wenn eine Kategorie Unterkategorien besitzt, siehe Beispiel 1.

**Icon bei externen Links (2)** <mark style="color:purple;">(ab Theme Version 2.4.3)</mark> zeigt das bekannte "Externer Link" Icon bei Kategorien des Typs "Link" an, wenn dieser durch den Haken ["In neuem Tab öffnen"](https://docs.shopware.com/de/shopware-6-de/kataloge/kategorien?category=shopware-6-de/kataloge#allgemein) als externer Link eingestellt wurde. Damit wissen Deine Besucher ganz genau, was passiert, wenn sie auf einen solches Link klicken, siehe Beispiel 2.

Den Abstand zwischen den einzelnen Kategorien setzt Du mit **Abstand links/rechts (3)**. Solltest Du sehr viele Kategorien verwenden, reduzieren den Abstand zwischen den Kategorien.

![](/files/p4RdPlpzZtc2Tbf9Yoci)

Beispiel 1:

![Pfeile bei Kategorien mit Unterkategorien](/files/jdwCjEdcCHUIVJIOGbDV)

Beispiel 2:

![Externer Link mit "Externer Link"-Icon](/files/gBmc30okT2EZDLUy3qxl)

### Kategorie Icons

> ab Theme Version 4.7.0

Über die **Zusatzfelder** unter Kataloge > Kategorien > \[Kategorie auswählen] im Tab "Weitere" findest Du ein Medienfeld **Kategorie Icon** zum Hinterlegen des Kategorie Icons.

<figure><img src="/files/2BG2AcrTgsXzRVZW7Mp5" alt=""><figcaption></figcaption></figure>

Über die **Checkbox Icon (1)** aktivierst Du die Darstellung der Icons im Hauptmenü und stellst die **Größe (2)** der Icons für das jeweilige Menü ein. In der mobilen Darstellung wird das Hauptmenü als mobiles Offcanvas-Menü angezeigt. Auch hier kannst Du über eine Checkbox Icon mobile (2) bestimmen, ob Kategorie Icons in diesem Menü angezeigt werden sollen. Im Feld **Größe (4)** hinterlegst Du die Größe des Bildes in Pixeln.

Beispiel:

<figure><img src="/files/B032k3GVmrNS0sk58B9O" alt="" width="375"><figcaption><p>Kategorie Icons im mobilen Offcanvas Menü</p></figcaption></figure>


# Flyout Navigation

Die Flyout-Navigation ist das Megamenü in Shopware 6, welches beim Überfahren der Kategorien die Unterkategorien darstellt.

{% hint style="info" %}
Aktiviere die Flyout Navigation unter\
\&#xNAN;*Header >* [*Main Navigation*](#main-navigation-kategorien) *>* [*Grundeinstellungen*](#grundeinstellungen-1) *> Unternavigation Aussehen*
{% endhint %}

### Farben

![](/files/vEb7nwOAcllmz671Hq3c)

Die **Hintergrundfarbe (1)** des Flyout-Menüs kann auch eine teiltransparente Farbe sein. Über den Colorpicker kann die Sichtbarkeit im Alpha-Kanal hinterlegt werden.

T**extfarbe (2)** und **Text:hover-Farbe (3)** müssen nicht unterschiedlich sein. Beim Überfahren mit der Maus rücken die einzelnen Einträge ein paar Pixel zur Seite.

### Grundeinstellungen

![](/files/Mfx4o63nCy2Ti8NL0BOa)

Über **Volle Breite (1)** stellst Du ein, ob das Menü die volle Breite des Themes ausnutzen soll. Über **Flyout Header Zeile (2)** kann der Bereich **"Zur Kategorie XY >"** ausgeblendet werden, um ein ablenkungsfreies Design zu kreieren. Verschiedene wählbare **Animationen (5)** runden das Konzept ab.

Das Kategoriebild kann über **Flyout-Teaser (3)** global ein oder ausgeschaltet werden. Oft wünscht man sich das Kategoriebild als [Kategoriebild im Header](/content/kategorie/kategoriebild) der Folgekategorie, möchte dieses aber nicht in der Flyout-Navigation darstellen.

**Icon bei externen Links (4)** zeigt das bekannte "Externer Link" Icon bei Kategorien des Typs "Link" an, wenn dieser durch den Haken ["In neuem Tab öffnen"](https://docs.shopware.com/de/shopware-6-de/kataloge/kategorien?category=shopware-6-de/kataloge#allgemein) als externer Link eingestellt wurde. Damit wissen Deine Besucher ganz genau, was passiert, wenn sie auf einen solches Link klicken, siehe Beispiel 2.

Der **Gruppierungsrahmen links (6)** hilft bei vielen Unterkategorien eine Abgrenzung der Spalten hervorzuheben, siehe Beispiel 3.

Die **Navigations-Ebenen (7)** geben an, wie viele Ebenen des Kategoriebaums dargestellt werden sollen. Gezählt wird ab der Hauptkategorien-Ebene.

{% hint style="warning" %}
**Achtung:** In den Einstellungen des Sales-Channels muss die Anzahl der Hauptnavigations-Ebenen mindestens so hoch sein wie hier angegeben.

Diese Einstellung behebt die Shopware Bugs NEXT-9461 und NEXT-13203.
{% endhint %}

**Spalten (8)** gibt an, auf wie viele Spalten die Menüpunkte im Flyout-Menü angeordnet werden sollen.

Über die **Dynamische Spaltenfüllung (9)** werden Inhalte nicht zeilenweise, sondern spaltenweise von oben nach unten gefüllt. Der Browser teilt den verfügbaren Platz automatisch in mehrere vertikale Spalten auf. Dabei versucht das Layout, alle Spalten möglichst gleich hoch zu halten (Balancing).\
Je nach Höhe der einzelnen Elemente kann der Browser Inhalte deshalb in andere Spalten verschieben. So können in einer Spalte auch mehrere Oberkategorien Platz finden.&#x20;

{% tabs %}
{% tab title="Dynamische Spaltenfüllung" %}

| <p>Kategorie 1<br>    Unterkategorie<br>    Unterkategorie<br>    Unterkategorie<br><br>Kategorie 2<br><br>Kategorie 3</p> | <p>Kategorie 4<br>    Unterkategorie<br>    Unterkategorie<br>    Unterkategorie<br>    Unterkategorie<br>    Unterkategorie<br>    Unterkategorie<br>    Unterkategorie</p> | <p>Kategorie 5<br>    Unterkategorie<br>    Unterkategorie<br><br>Kategorie 6<br>    Unterkategorie<br>    Unterkategorie<br>    Unterkategorie</p> |
| -------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
| {% endtab %}                                                                                                               |                                                                                                                                                                              |                                                                                                                                                     |

{% tab title="Ohne dynamische Spaltenfüllung" %}

| <p>Kategorie 1<br>    Unterkategorie<br>    Unterkategorie<br>    Unterkategorie</p>                                                                                         | <p>Kategorie 2<br><br><br></p>                                                     | <p>Kategorie 3<br><br><br></p>                                                                       |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
| <p>Kategorie 4<br>    Unterkategorie<br>    Unterkategorie<br>    Unterkategorie<br>    Unterkategorie<br>    Unterkategorie<br>    Unterkategorie<br>    Unterkategorie</p> | <p>Kategorie 5<br>    Unterkategorie<br>    Unterkategorie<br><br><br><br><br></p> | <p>Kategorie 6<br>    Unterkategorie<br>    Unterkategorie<br>    Unterkategorie<br><br><br><br></p> |
| {% endtab %}                                                                                                                                                                 |                                                                                    |                                                                                                      |
| {% endtabs %}                                                                                                                                                                |                                                                                    |                                                                                                      |

Aktivierst Du die Option **Inhalte scrollbar (10)** definiert Du mit der **Maximale Höhe (11)** die Begrenzung des Flyouts und die Darstellug der Scrollleisten. Damit kannst Du sicherstellen, dass Deine Kunden alle Navigationspunkte auch bei umfangreicheren Navigationen komfortabel erreichen können **- auch wenn der Header Sticky ist.**

### Kategoriebilder von Unterkategorien

<figure><img src="/files/YXzl0FhaJVsTQ8MqES9Q" alt=""><figcaption></figcaption></figure>

**Kategoriebilder von Unterkategorien anzeigen (1)** aktiviert die Kategoriebilder global für Unterkategorien deiner ersten Haupt-Navigationsebene in der Flyout-Navigation. Als Bild wird das zugewiesene Kategorie-Bild verwendet.

In den Zusatzfeldern der Kategorie kannst Du diese Einstellung je Kategorie umstellen. Zusätzlich kannst Du ein alternatives Kategorie-Bild hinterlegen, wenn Du nicht das eigentliche Kategorie-Bild anzeigen möchtest.

<figure><img src="/files/DWIU00CORZDzeeALVjqP" alt=""><figcaption></figcaption></figure>

Du kannst das **Aussehen (2)** auf "Text unter Bild" oder "Text neben Bild" stellen.

Du kannst den **Zwischenabstand (3)** zwischen den Kachel bestimmen.

Du kannst die **Hintergrundfarbe (4 und 5)** und die **Textfarbe (6 und 7)** der Kachel des Kategoriebildes konfigurieren.

Zusätzlich kannst Du einen **Rahmen (8 und 9)** und einen **Schlagschatten (10 und 11)** einstellen.

Die **Maximale Bildhöhe (12)** bestimmt die maximale Höhe der Kacheln. Das sorgt dafür, dass die Kacheln auch bei unterschiedlichen Bildformaten immer in einer einheitlichen Größe angezeigt werden.

Mit dem **Anzeigemodus (13)** entscheidest Du, wie das Bild dargestellt werden soll:

* **Original:** Das Bild wird in der Originalgröße der Bilddatei ausgespielt.
* **Zugeschnitten:** Das Element wird vollständig mit dem Bild gefüllt. Bei kleineren Bildern führt dies dazu, dass diese gestreckt werden (und dadurch ggf. unscharf wirken). Bei Bildern mit einem unpassenden Seitenverhältnis wird die längere Seite abgeschnitten, es wird also nicht das vollständige Bild angezeigt.
* **Feste Höhe:** Das Bild wird gestreckt und auf die Größe des Containers angepasst. Es wird hierbei nicht beschnitten.

Die **Vertikale Bildausrichtung (14)** legt fest, wie sich das Bild vertikal am Container orientiert.

Die **Horizontale Bildausrichtung (15)** legt fest, wie sich das Bild horizontal am Container orientiert.

Mit dem **Seitenverhältnis (16)** stellst Du ein, ob die Kacheln im Hoch- oder Querformat angezeigt werden.

Der **Innenabstand (17)** legt fest, wieviel Abstand zwischen dem Inhalt der Kachel zum Rand dargestellt wird.

Du kannst eine **Hover-Animation (18)** einstellen. Dabei kannst Du zwischen "Keine" und "Bildzoom" wählen.

Beispiel:

<figure><img src="/files/QyfV033y2ZSA6v2HjuQz" alt=""><figcaption></figcaption></figure>

### Elemente

Über die Einstellung im Block Elemente kannst Du die einzelnen Einträge der Flyout-Navigation formatieren.

![](/files/veD5uFRNN04BBwaXBIZV)

Beispiel 1:

![Die Hintergrundfarbe kann halb transparent sein.](/files/nAJFpqfbGGYjdCwIIvr0)

{% hint style="info" %}
Die Hintergrundfarbe kann auch transparent sein. Mit der kleinen rgba-Funktion kann zusätzlich zur Farbe eine Sichtbarkeit angegeben werden.

`rgba($sw-color-brand-primary, 90%)`
{% endhint %}

Beispiel 2:

![Externe Links werden mit Icons gekennzeichnet](/files/2AfWAKCQqW0o2j89QFeP)

Beispiel 3:

![Flyout-Navigation mit Gruppierungsrahmen links](/files/W2O69FDI8JZLBqsaQ7as)

### Kategorie Icons

> ab Theme Version 4.7.0

Über die **Zusatzfelder** unter Kataloge > Kategorien > \[Kategorie auswählen] im Tab "Weitere" findest Du ein Medienfeld **Kategorie Icon** zum Hinterlegen des Kategorie Icons.

<figure><img src="/files/LIN3rneuG1ifw8STZP27" alt=""><figcaption></figcaption></figure>

Über die **Checkbox Icon (1)** aktivierst Du die Darstellung der Icons im Hauptmenü und stellst die **Größe (2)** der Icons für das jeweilige Menü ein.

Beispiel:

<figure><img src="/files/W7eAVXMx2qe35pXlX7zh" alt=""><figcaption><p>Kategorie Icons im Flyout Menü</p></figcaption></figure>


# Dropdown Navigation

> ab Theme Version 2.6.0

{% hint style="info" %}
Aktiviere die Dropdown Navigation unter\
\&#xNAN;*Header >* [*Main Navigation*](#main-navigation-kategorien) *>* [*Grundeinstellungen*](#grundeinstellungen-1) *> Unternavigation Aussehen*
{% endhint %}

### Farben

Die Farben für den **Hintergrund (1)** sowie **Vordergrund (2)** der Dropdown Navigation lassen sich unabhängig von der Flyout-Navigation einstellen. Ein zusätzlicher **Rahmen (3)** kann die Dropdown Navigation stärker vom Hintergrund abheben - hier gibt es keine :hover-Farbe, da der Rahmen um die ganze Liste gelegt wird.

![](/files/H2Xv42s7CgMCNKKm6iaF)

### Grundeinstellungen

Eine Dropdown Navigation kann grundsätzlich durch ein MouseOver-Event (Hover-Event) oder ein Click-Event ausgelöst werden. Über die Einstellung **Dropdown Auslöser** <mark style="background-color:red;">(Entfernt in Version 5.0.0)</mark> kannst Du selbst bestimmen, wie sich ein Dropdown auf Deinem Onlineshop öffnen lässt.

Die **Navigations-Ebenen (1)** geben an, wie viele Ebenen des Kategoriebaums dargestellt werden sollen. Gezählt wird ab der Hauptkategorien-Ebene.

Du kannst zwischen mehreren **Animationen (2)** wählen und ein **Icon bei "In neuem Tab öffnen" Links (3)** hinzufügen.

![](/files/oJN8tlfkdh3vtFG8jRto)

#### Dropdown mit Click-Event

Da sich bei einem Click-Event auf die **Eltern-Kategorie (1)** diese selbst nicht öffnen lässt, zeigt das Dropdown die Eltern-Kategorie im Dropdown mit dem Zusatztest "{Kategoriename} anzeigen" an, wenn es sich nicht um eine Strukturkategorie handelt.

![Dropdown mit Click-Event Auslöser](/files/77rJfxjGBp7VWGGoUpcn)

#### Dropdown mit Hover-Event

Anders als beim Dropdown ausgelöst durch ein Click-Event besteht hier keine Notwendigkeit, die Elternkategorie erneut in das Dropdown aufzunehmen.

### Elemente

Wie beim Flyout-Menü lassen sich hier die Schriftgröße und das Schriftgewicht für die einzelnen Menü-Items anpassen.

### Kategorie Icons

> ab Theme Version 4.7.0

Über die **Zusatzfelder** unter Kataloge > Kategorien > \[Kategorie auswählen] im Tab "Weitere" findest Du ein Medienfeld **Kategorie Icon** zum Hinterlegen des Kategorie Icons.

<figure><img src="/files/LIN3rneuG1ifw8STZP27" alt=""><figcaption></figcaption></figure>

Über die **Checkbox Icon (1)** aktivierst Du die Darstellung der Icons im Hauptmenü und stellst die **Größe (2)** der Icons für das jeweilige Menü ein.


# Footer


# Footer

### Farben

Neben den grundlegenden Farben kann dem Footer auch eine **Rahmenfarbe (2)** oben **aktiviert (1)** werden. Über die **Innenabstände (3, 4, 5, 6)** gibst Du den einzelnen Spalten im Footer einen zusätzlichen Abstand zum obern und unteren Rand des Footers.

![](/files/0df5zwDpVQl0fokM9Jad)

Beispiele:

![](/files/a3NP4nnDwqL2E9mCSsRT)

![Footer mit Abstand](/files/htZkkkkeW8BydTVnIrbK)


# Inhalte

### Inhalte Zuweisung

Bestimmte Inhalte können dem Footer zugewiesen werden. So kann beispielsweise ein zusätzliches Logo an verschiedenen Positionen im Footer ausgegeben werden oder auch eine Newsletter-Anmeldung.

Im Feld **Footer Logo** legst Du fest, wo und ob das zusätzliche Logo im Footer dargestellt werden soll. Das Logo kann **ausgeblendet** werden oder in der **Newsletter Spalte**, in der **Hotline Spalte**, in der **Social Media Icons Spalte** oder mit einer ganz **eigenen Spalte** versehen werden.

Die **Hotline** kann als **Spalte** angezeigt oder **ausgeblendet** werden.

**Social Media Icons** haben neben dem **ausgeblendeten** Modus die Bereiche als **Footer Spalte** oder im **Footer Bottom** Bereich.

Der **Newsletter** kann als **Spalte** angezeigt oder **ausgeblendet** werden.&#x20;

![](/files/GDhzTiGOlT5USR3hhxdc)

{% hint style="success" %}
Einige Elemente lassen sich auch außerhalb der Footer Spalten darstellen, wie die Social Media Icons, die Newsletter-Anmeldung oder die Zahlungs- und Versandarten Icons.
{% endhint %}

Beispiele:

![](/files/FQ6ZY2IwkLCjBwPjPiJi)

<figure><img src="/files/aNbmSXibTaEMJQlBhpnN" alt=""><figcaption></figcaption></figure>

![](/files/yIGdfQs3Xj2BhsSYJGqK)


# Spalten

### Spalten Überschrift

Der Footer besteht aus verschiedenen Spalten, die einen Inhalt und eine Überschrift besitzen. Neben der Ausrichtung der Überschriften, kannst Du hier die Größe, Schriftstärke auswählen. Dabei steht Dir ebenfalls die Wahl der Schriftfamilie.

![](/files/GEhT7cZPR7AUKrFrw4cb)

Die Option **Aus- / Einklappen Icon (mobile) (1)** bietet die Möglichkeit das Icon der mobilen Footerspalten zu verändern.

Über **Aussehen (2)** kann der Spalten Überschrift eine Unterlinie zugewiesen werden.

Beispiel:

![](/files/u4dGP6g6vgnKy2eskAqk)

### Spalten Inhalte

Der Inhalt einer Spalte kann sehr unterschiedlich sein. Er kann die Navigationen aus dem Einstiegspunkt der Footer-Navigationen erhalten, Informationen zur Hotline, eine Newsletter-Anmeldung uvm.

{% hint style="info" %}
Den Einstiegspunkt für die Footer-Navigation definierst Du in den Grundeinstellungen des Verkaufskanals.

<https://docs.shopware.com/de/shopware-6-de/einstellungen/Verkaufskanaele?category=shopware-6-de/swverkaufskanaele#grundeinstellungen>
{% endhint %}

![](/files/QdupKWVwd4w8GC8krtWr)

Beispiel:

![](/files/WdOxQArskVUvcNCN1MNe)

![Alternatives Beispiel mit anderer Konfiguration](/files/yIGdfQs3Xj2BhsSYJGqK)

### Spaltenbreiten

Ein Layout wird in einem sogenannten Grid aufgebaut. Man kann sich das vorstellen wie **eine Tabelle mit 12 Spalten** und beliebigen Zeilen. Wir nutzen ein solches Grid um die Breiten der Spalten im Footer zu kontrollieren.

![Beispiel eines Grids](/files/P1gr7DkXlYPX3iMSoAMK)

Du kannst hier jedem Bereich eine Spaltenbreite zuordnen. Geht die Gesamtsumme der Breiten über 100% bzw. über 12 Spalten rutschen die Elemente **automatisch in eine neue Zeile.**

Die Spaltenbreiten werden für Tablet- und Desktop-Geräte definiert. Auf allen kleineren Geräten rutschen die Spalten untereinander.

![](/files/GxjKDaDBdzhKWoQEvNwT)

{% hint style="info" %}
Die **Navigation Spalten** Breite bezieht sich auf die automatisch generierten Footer-Navigations-Spalten. Jede Spalte erhält die eingestellte Breite.
{% endhint %}

Beispiel:

![](/files/QqxH9G1TcQyUmi7Vdc4c)

In unserem Beispiel hat der Newsletter eine Breite 6 von 12 (50%). Die Spalten Information und Service sind Navigationsspalten aus dem gewählten Einstiegspunkt der Footer-Navigationen. Jede erzeugte Spalte der Footer-Navigation hat 3 von 12 (25%) erhalten. Damit ist die erste Zeile mit 12 von 12 Spalten auf 100% gefüllt.

Die zweite Zeile besteht aus der Service Hotline mit 3 von 12 (25%), der Social Media Icons Spalte mit 4 von 12 (33,33333%) und der optionalen Custom Spalte mit ebenfalls 4 von 12 (33,33333%) Breite. In Summe ergibt das 11 von 12 Spalten, also 91,67%. Wir könnten also noch 1 von 12 (8,33333%) Spaltenbreiten auf eine Spalte verteilen, ohne dass eine neue Zeile begonnen würde.

### Spaltensortierung

Die Sortierreihenfolge bestimmst Du durch Angabe einer Positionsnummer. Je höher die Zahl, desto weiter hinten wird die Spalte angezeigt.

{% hint style="warning" %}
Erlaubt sind hier Positionsnummer von 1 - 12.
{% endhint %}

![](/files/kRvvSEtVOgugGcQjbijn)

Beispiel:

![](/files/mk3FbrJQVOpVQqS8e13B)

### Spalten standardmäßig ausgeklappt (Mobile)

Auf mobilen Geräten werden die einzelnen Footerspalten eingeklappt dargestellt. Der Besucher kann diese dann durch Klicken auf die Zeile ausklappen. Bei Bedarf können einzelne Spalten auch initial ausgeklappt dargestellt werden.

![](/files/MhGqfFRdAOJQcAnehBcU)

Beispiel:

![Newsletteranmeldung bereits initial ausgeklappt](/files/oaEAW7ovZ1Wa55SXMRRn)


# Spalten Styling

### Logo Spalte

Die Logo Spalte kann einen eigenen Hintergrund besitzen. Man kann zwar ein eigenes Logo für den Footer hochladen - doch kann der gewählte Footer Hintergrund störend sein.

Die **vertikale Ausrichtung** erlaubt es Dir das Logo in seinem Container auszurichten.

![](/files/CSOAt9r7ke1SpkXIAlsa)

Beispiel:

![Vertikal zentriertes Logo in einer Spalte mit dunklerem Hintergrund](/files/4O63U6orMtVo6P3rFkIe)

### Hotline Spalte

Für die Hotline Spalte können ebenfalls Anpassungen an dem Erscheinungsbild vorgenommen werden. Hier können neben einer abweichenden Hintergrundfarbe auch die Textfarben von der allgemeinen Footer Farbeinstellung verändert werden.

![](/files/kfsscwgNUAolazVP24Qz)

### Social-Media Spalte

Für die Social Media Icons Spalte können ebenfalls Anpassungen an dem Erscheinungsbild vorgenommen werden. Hier können neben einer abweichenden Hintergrundfarbe auch die Textfarben von der allgemeinen Footer Farbeinstellung verändert werden.

Hinterlege die Verlinkungen zu den Social Media Kanälen in den Einstellungen des Themes.\
Mehr dazu findest Du im Abschnitt [Social Media Icons](/settings/social-media-icons).

{% hint style="info" %}
Die Einstellungen gelten nur, wenn die Social Media Icons auch als Spalte dargestellt werden. Bei der Darstellung im Footer Bottom greifen die Farbeinstellungen des Footer Bottoms.
{% endhint %}

![](/files/TwQGoP4b9SVkf87vMwCQ)

### Newsletter Spalte

Neben den allgemeinen Spalten Farbeinstellungen solltest Du hier auch die Farben der Newsletter-Form einstellen. Mit Form wird das Input-Feld bezeichnet, in welches der Nutzer seine E-Mail Adresse eingibt.

![](/files/VRVoYumb9QHxWntRIUdR)

### Custom Spalte 1 - 3

Für die Optionalen Spalten oder auch Custom Spalte genannt, können ebenfalls Anpassungen an dem Erscheinungsbild vorgenommen werden. Hier können neben einer abweichenden Hintergrundfarbe auch die Textfarben von der allgemeinen Footer Farbeinstellung verändert werden.

![](/files/xRIan0ZFWnMsNTR2EbrO)

### Zahlungsarten

In der Zahlungsarten-Spalte können die Zahlungsarten-Icons aus Deiner Zahlungsarten-Konfiguration des Shops geladen werden.

<figure><img src="/files/pGnQfiAwPnaQ3eiCgVOS" alt=""><figcaption></figcaption></figure>

{% embed url="<https://docs.shopware.com/de/shopware-6-de/einstellungen/Zahlungsarten?category=shopware-6-de/einstellungen/shop#zahlungsart-anlegen>" %}

### Versandarten

In der Versand-Spalte können die Versandarten-Icons aus Deiner Versandarten-Konfiguration des Shops geladen werden.

<figure><img src="/files/ecg5kzGX1UqETPp6Xar2" alt=""><figcaption></figcaption></figure>

{% embed url="<https://docs.shopware.com/de/shopware-6-de/einstellungen/versand?category=shopware-6-de/einstellungen/shop#basisinformationen>" %}


# Unterer Footer

Als Footer Bottom wird der untere Teil des Footers bezeichnet. In diesem werden die Hinweise zur Steuer, das Copyright und je nach Einstellung auch die Social Media Icons dargestellt.

### Farben

Über die Farbeinstellungen kannst Du diesen Bereich optisch vom restlichen Footer trennen oder verbinden.

![](/files/5labNDwfGBAqyAAwc8PI)

Beispiele:

![Footer Bottom hat identische Farbeinstellungen wie Footer](/files/fiSHUOTV0xlOihxCDbM3)

![Footer Bottom gehört optisch nicht mehr zum Hauptfooter durch weißen Hintergrund](/files/5T7a9HpZQMfRQuaGAveg)

### Grundeinstellungen

![](/files/56Bof60rxKYM7JrdSAwO)

**MwSt.-Hinweis anzeigen (1):** Mit Shopware 6.7 wurde die Darstellung des Mehrwertsteuer-Hinweises im Rahmen der Barrierefreiheits-Anpassungen überarbeitet.\
Das bisher verwendete Sternchen (\*) am Preis mit Verweis auf einen Hinweis in der Fußzeile entsprach nicht mehr den geltenden rechtlichen Anforderungen.

Ab Shopware 6.7 wird der Hinweis zur Mehrwertsteuer direkt am Preis angezeigt, sobald ein Warenkorb-Button vorhanden ist (z. B. „In den Warenkorb“).\
Damit entfällt die Notwendigkeit, einen separaten MwSt.-Hinweis im Footer zu platzieren.

{% hint style="warning" %}
**Keine Rechtsberatung** - Bitte prüfe die Anforderungen deines Shops und deiner Zielmärkte gemeinsam mit deiner Rechtsberatung oder Rechtsabteilung, um sicherzustellen, dass alle rechtlichen Vorgaben korrekt umgesetzt sind.
{% endhint %}

**Service-Navigation anzeigen (2):** Die Service-Navigation beinhaltet wichtige und oft rechtlich relevante Informationen, die auf keiner Shopseite fehlen dürfen. Die Service-Navigation des Shops wird daher an verschiedenen Stellen des Shops ausgegeben.

Im Kopfbereich der Seite kann die Service-Navigation im Bereich der Top Bar oder im Bereich der Offcanvas Top Bar angezeigt werden.

Zusätzlich findet man die Service-Navigation optional im unteren Footer, wo sie neben den Footer-Navigationen oft überflüssig wirkt. Über die Einstellung **Service-Navigation anzeigen (2)** kann die Service-Navigation im Footer Bottom deaktiviert werden.

{% hint style="success" %}
Der Checkout Bereich beinhaltet zur Optimierung der Conversion ein ablenkungsfreies Layout mit Minimal Header und Minimal Footer. (Der Minimal Footer besteht praktisch lediglich auf dem Footer Bottom Bereich.)

Damit rechtlich relevante Inhalte hier nicht fehlen, wird die Service-Navigation im Checkout wieder im Footer Bottom dargestellt.
{% endhint %}

![Service-Navigation in der Top Bar](/files/rgEq8eorslLBnzb9DaBZ)

![Service-Navigation in der Offcanvas Top Bar](/files/eDX4G5Jo2BQLo3oQUW9W)

![Service-Navigation im Footer Bottom](/files/61LNmJUBdDx2jFCBXT5i)


# Elemente


# Sidebar

Für die Sidebar kann eine **Sticky (1)** Funktion aktiviert werden. Beim Scrollen läuft diese dann fixiert mit uns verschwindet nicht. Die Sticky-Funktion wird nur dann angewendet, wenn die Inhalte der Sidebar nicht höher sind als die Höhe des Browser-Viewports.

**Sticky erzweingen (2):** Die Sticky-Funktion funktioniert nur, wenn alle Eltern-Elemente nicht die CSS Eigenschaft "overflow:hidden" verwenden. Es gibt Erweiterungen, welche diese Eigenschaft setzen. Wenn aktiv, wird die Sticky-Funktion erzwungen und alle Eltern-Elemente mit "overflow: hidden", werden auf "overflow: visible" umgeschrieben.

<figure><img src="/files/JxV6LbrOdfaJgqstqNtv" alt=""><figcaption></figcaption></figure>


# Sidebar Navigation

![](/files/wGWczzDlSOdYj9cLVBgG)

### Farben

Zusätzlich zu den üblichen Farben, kann auch der aktive Pfad (2) eingefärbt werden. Die :hover (3) Farben werden zusätzlich für das aktive Element verwendet.

![](/files/xOXYCEcaXHiPOMm9ebfo)

**Background (1)** ist die allgemeine Hintergrundfarbe eines Menü-Elementes. **Background:aktiver Pfad (4)** legt die Farbe für die aktive Ebene fest. Dadurch kann der Kunde leichter unterscheiden in welchen Bereich welcher Ebene er tiefer navigieren kann. **Background:hover (2)** markiert das aktive obere Element und weitere **Mouse-Over Aktionen** über den Menü-Elementen.

![](/files/rU9MbbP43sKvIhi1zwO5)

{% hint style="info" %}
Der Unterstrich am aktiven Element kann in den Grundeinstellungen im nächsten Schritt aktiviert werden.
{% endhint %}

### Grundeinstellungen

![](/files/o74F2BbbV5iRtjU4IRhe)

Neben den Einstellungen für die Darstellung der Schrift kann auch ein **vertikaler Innenabstand (1)** gesetzt werden. Der **Vertikale Innenabstand (1)** bestimmt, wie hoch die einzelnen Menü-Einträge werden. Bei vielen Kategorien sollte ein möglichst kleiner Wert gewählt werden.

Durch die Option **Abstand unten (2)** können die einzelnen Elemente nochmal voneinander getrennt werden.

Der **Anzeigemodus (3)** bestimmt den Modus der Sidebar-Navigation. Im Modus `Aufklappbar` können die Unterkategorien auf- und zugeklappt werden, ohne die Seite zu wechseln.

Für das **Auf- / Einklappen Icon (4)** stehen Dir verschiedene Optionen bereit. Die Symbole werden angezeigt, sobald der **Anzeigemodus** auf **Aufklappbar** steht.

Mit Hilfe der **Hover Animation (5)** kann eine animierte Unterlinie bei Mouse-Over und Aktiv-Status ab der zweiten Navigations-Ebene dargestellt werden.

![](/files/ZKkBCIIdwk7q2dHnwqTY)

Beispiele:

![2px Abstand nach unten, Hover Animation Standard](/files/qIKg8ClZPmPlFpBDXRmJ)

![Minimal Design Beispiel, keine Farben oder Konturen, Hover Animation: Unterlinie](/files/PIVjYCdFOamnbiWiuQgG)

### Kategorie Icons

> ab Theme Version 4.7.0

Über die **Zusatzfelder** unter Kataloge > Kategorien > \[Kategorie auswählen] im Tab "Weitere" findest Du ein Medienfeld **Kategorie Icon** zum Hinterlegen des Kategorie Icons.

<figure><img src="/files/LIN3rneuG1ifw8STZP27" alt=""><figcaption></figcaption></figure>

Über die **Checkbox Icon (1)** aktivierst Du die Darstellung der Icons im Hauptmenü und stellst die **Größe (2)** der Icons für das jeweilige Menü ein.

Beispiel:

<figure><img src="/files/VGh97rLx9yMzHYflQ7tW" alt=""><figcaption><p>Kategorie Icons in der Sidebar Navigation</p></figcaption></figure>


# Formulare

### Farben

Formular-Elemente sind Input-Felder, Textfelder oder Select-Felder. Diese können einen Hintergrund, eine Textfarbe und eine Kontur haben.

### Grundeinstellungen

![](/files/NYN0MCJXpiBqqDXCgIMw)

Mit der **Aussehen (1)** Einstellung kannst Du das globale Erscheinungsbild von Formularfeldern beeinflussen. Wähle zwischen dem Aussehen mit einer Unterlinie oder dem Standard-Aussehen.

Mit Hilfe der Konfiguration **Floating Labels (2)** kannst Du die Labels der Formularfelder für einen minimaleren und weniger redundanten Look umgestalten.

Die Option **Passwort anzeigen/verstecken (3)** fügt in der Storefront bei Passwort-Feldern ein Auge-Icon hinzu. Durch einen Klick auf das Icon kann das Passwort sichtbar gemacht werden, sodass der Kunde überprüfen kann, ob es korrekt eingegeben wurde.

Beispiele:

![](/files/st9YanlwzKmkygo7bTjI)

![Formularfelder: Standard](/files/bjUBING70Ac79pxNyjlm)

![Formularfelder: Unterlinie](/files/Hv9QtN3nu0gGEJ5fYRLv)

<div><figure><img src="/files/sCMqRiVxp56iU3iDh2fR" alt=""><figcaption><p>Passwort anzeigen/verstecken</p></figcaption></figure> <figure><img src="/files/xSWwc6jnn3IYfM7TrV5W" alt=""><figcaption><p>Passwort anzeigen/verstecken</p></figcaption></figure></div>


# Bild- & Galerie-Slider

In Shopware 6 gibt es verschiedenen Slider-Navigations-Elemente. Grundsätzlich wird zwischen der Dot-Navigation und den Pfeilen unterschieden.

Es gibt drei wichtige Slider-Typen

1. Image Slider = Erlebniswelten-Element zur Darstellung von Bild-Slidern
2. Galerie Slider = Element zur Darstellung der Produktbilder auf der Produktdetailseite
3. Produkt Slider = Element zur Darstellung von Produktkacheln als Slider-Element

Zusätzlich kann man in den meisten Slidern bestimmen, ob die Navigationselemente innen (auf dem Bild) oder außen, außerhalb des Bildes dargestellt werden sollen.

### Galerie-Slider (Navigation Modus: Außen)

![](/files/70CfOlxwqKqnExzF0dR2)

Beispiel:

![Pfeile und Dots einer Galerie](/files/Yno5vIjxkJWzmnfhRyHF)

### Galerie-Slider (Navigation Modus: Innen)

![](/files/vhJAoDcVrkLACQVDX9Og)

Beispiel:

![Pfeile und Dots einer Galerie](/files/Yno5vIjxkJWzmnfhRyHF)

### Bild-Slider (Navigation Modus: Außen)

![](/files/sg4ybnZoTYKHW7VeEoo1)

Beispiel:

![Navigations-Elemente außen](/files/Ny7xUin8qxFBMYx4waCJ)

### Bild-Slider (Navigation Modus: Innen)

![](/files/M9ZeO5tzXD2sxAcRmL21)

Beispiel:

![Navigations-Elemente innen](/files/xdCBNH6LYqnjMdCVl7cp)

### Grundeinstellungen

![](/files/3NGLXwxQtW9GwM5TT0Vm)

Die **Platzierung (1)** der **Pfeile (2)** und **Dots (1)** kann `Alternativ` auf die rechte Seite des Sliders gesetzt werden. Im `Standard` befinden sich die Dots im unteren mittigen Bereich. Die Pfeile liegen links und rechts vertikal zentriert.

Das Aussehen der **Punkte Navigation (2)** kann von `Punkten` zu `Balken` oder `Expandieren` geändert werden.

**(3, 4)** Die Pfeile der jeweiligen Slider können so eingestellt werden, dass diese erst sichtbar werden, wenn man mit der Maus über dem Slider fährt.

Beispiele:

![Standard Platzierung](/files/6bWmuDwRJZtRyHNqe3eE)


# Produkt Slider

![](/files/93lCuHvxSGFY0kAYiKKk)

Beispiel:

![](/files/blytTH4UjSxMBeD3fL9W)

Das **Aussehen (1)** der Produktslider kann so eingestellt werden, dass auch außerhalb des aktiven Bereichs liegende Elemente mit einer Sichtbarkeit von 50% dargestellt werden. Oftmals kann dies die Wirkung des Produkt-Sliders und die Interaktion mit diesem Element erhöhen.

Optional können die Slider **Pfeile ausgeblendet (2)** und erst bei MouseOver eingeblendet werden.

![](/files/bETZXxNDV7ByiTZD2Mk6)

Beispiele:

![Standard](/files/3LfbdmtwBdHCuGsYuerr)

![Erweitert](/files/bOCQSV3B6GOi2StB2QEF)


# Kategorie Listing Slider

<figure><img src="/files/mFzvCGt49QTSSnWXph30" alt=""><figcaption></figcaption></figure>

Neben den allgemeinen Einstellung zu Vordergrund und Hintergrundfarbe der Slider Navigations Pfeile lässt sich hier analog zu den anderen Slidern auch die Option **Pfeile nur bei Mouseover anzeigen** aktivieren.


# Paginierung

### Farben

Die Paginierung des Listings hat neben den üblichen Farben auch Farben für die verschiedenen Status: :hover, :active und :disabled.

{% hint style="info" %}
**Tipp:** Die Werte der Felder können SCSS-Funktionen sein:

`hsl(hue($sw-border-color), saturation($sw-border-color), 89%)`

Hier wird die Farbe per hsl-Format definiert. Der Farbwinkel und Sättigung der Rahmenfarbe werden mit einer Helligkeit von 89% kombiniert.
{% endhint %}

![](/files/3O4TWpV7r0L6kBaCKAGu)

### Grundeinstellungen

<figure><img src="/files/AfTFoAG5GPoC7JOsBsZx" alt=""><figcaption></figcaption></figure>

Das **Aussehen (1)** der Paginierung ist als `Pills` und `Standard` darstellbar. Elemente, die als `Pills` definiert sind, haben einen Abstand zueinander.

Die Option **Disabled-Buttons ausblenden (3)** blendet die überflüssigen Button aus, da diese ohnehin nicht klickbar sind. Befindet man sich beispielsweise auf Seite 1, sind die Buttons für "erste Seite" und "Seite vor" überflüssig.

Beispiele:

![Pills rund](/files/thtxP4wGq0ZxIcz8asWD)

![Standard](/files/emmD4vQXxiE3q3SvxG5I)

![Pills eckig](/files/J1ke7ieryd4J7IzdYiyr)

<figure><img src="/files/uTaxI8CEEE45h64HFMax" alt=""><figcaption><p>Disabled-Button ausgeblendet</p></figcaption></figure>

{% hint style="info" %}
Die Abrundungen der Pills ergeben sich aus dem eingestellten Button-Radius aus dem Tab der Allgemein-Einstellungen. Für runde Pill müssen Buttons `rund` eingestellt sein.
{% endhint %}


# BreadcrumbsKannst du

Breadcrumbs sind eine sekundäre Navigation, bei welcher der zurückgelegte Pfad von der Startseite bis zur aktuellen Seite dargestellt wird. Es zeigt die Ebenentiefe an, in welcher man sich befindet.

### Farben

<figure><img src="/files/yJjRKaH1JaUG2zbIgqTT" alt=""><figcaption></figcaption></figure>

### Grundeinstellungen

**Breadcrumbs anzeigen (1)** aktiviert oder deaktiviert die Breadcrumbs-Navigation für alle Seiten in Deinem Shop.

{% hint style="warning" %}
Das Deaktivieren hat keinen Einfluss auf manuell platzierte Breadcrumbs in den Erlebniswelten.
{% endhint %}

Neben der **Ausrichtung (5)** der Breadcrumbs können diese auch optisch auf die **volle Breite (6)** gesetzt werden. Die Breadcrumbs dehnen sich dann je nach gewähltem [Grundlayout](/settings/grundeinstellungen) des Shops bis zum Browserrand aus. (In den Layout-Modi `Full-Width-Boxed` und `Boxed`, sowie `Full-Width-Header` dehnt sich die Hintergrundfarbe bis an den Browserrand aus - nicht aber der Inhalt.)

Die Option **Startseite anzeigen (7)** stellt einen Startseiten-Link als erstes Element den Breadcrumbs voran. Zusätzlich kann ein einleitender **Text 'Du bist hier' (8)** angezeigt werden. Der text wurde als Textbaustein implementiert und kann in den Textbausteinen der Administration geändert werden.

Die Felder **Oberer Abstand (9)** und **Unterer Abstand (10)** definieren den Abstand der Breadcrumbs zum Header sowie zum weiteren Content der Seite.

![](/files/j00ZwrJHPdvpi8DcWa3O)

Beispiel:

![Breadcrumbs mit Hintergrundfarbe nicht volle Breite](/files/b9wM4tPZrGeyCLj735H1)

![Breadcrumbs mit Hintergrundfarbe auf voller Breite (2)](/files/R6EUPKHfSzbjXerRqPBU)

{% hint style="success" %}
Wie Du Breadcrumbs in das Kategorie-Bild setzen kannst, erfährst Du im Bereich [Kategoriebild Headerbereich](/content/kategorie/kategoriebild#erlebniswelt-konfigurieren).
{% endhint %}

![Breadcrumbs im Kategorie-Bild](/files/IgKtZRJSkxwUCiXQGsEw)


# Cookie Banner

Das **Cookie Banner Aussehen (1)** kann als Widget, als kleine Leiste im unteren Bereich, als Popup mittig oder als Leiste (Standard) im unteren Bereich der Seite dargestellt werden.

Zusätzlich kannst **rechtliche Links anzeigen (2)** lassen, damit Verlinkungen zum Impressum und der Datenschutzerklärung im Banner dargestellt werden.

![](/files/6aZ6cCMH06OZT6MwjEh1)


# Offcanvas

Ein Offcanvas-Element ist ein Widget im Shop bei dem zusätzliche Inhalte oder Menüs außerhalb des sichtbaren Bildschirms platziert und bei Bedarf sichtbar gemacht werden. In Shopware ist das mobile Menü und der Offcanvas-Warenkorb ein solches Element.

<figure><img src="/files/aoSlGkXU77K2QLTWw0HZ" alt=""><figcaption></figcaption></figure>

Für einen besondern Look lässt sich ein **Außenabstand (1)** um Offcanvas-Elemente definieren, welches auf größeren Endgeräten das Offcanvas-Element von den Browser-Rändern abhebt. Zusätzlich kann eine **Weite (2)** definiert werden. Die maximale Breite des Elementes wird durch die Breite des Endgerätes limitiert.

**Beispiel:**

<figure><img src="/files/ycW87nwwDxEF1izylyd2" alt=""><figcaption><p>Offcanvas Warenkorb mit Außenabstand</p></figcaption></figure>


# Backdrop

Ein Backdrop ist ein halbtransparentes Layer, welches sich bei Verwendung eines Modals[^1] oder Offcanvas zwischen diesem und der restlichen Seite legt. Es dient dazu das Modal bzw. Offcanvas Elementen zu fokussieren und verhindert, dass Benutzer gleichzeitig mit dem Hintergrund der Seite interagieren.

<figure><img src="/files/3rKsdtuJfuHMlJk8VJat" alt=""><figcaption></figcaption></figure>

Achte bei der Auswahl der Farbe für den **Hintergrund (1)** darauf, eine teiltransparente Farbe über den Colorpicker auszuwählen. Der Shop im Hintergrund des Elementes sollte nur verblassen - nicht komplett verschwinden.

Zusätzlich kannst Du eine optionale **Akzentfarbe (2)** wählen, welche zu der Farbe für den Hintergrund (1) über einen Farbverlauf hinzugemischt wird.

Über den Wert im Feld **Hintergrund weichzeichnen (3)** kann der Shop im Hintergrund des Popups oder Offcanvas unscharf gemacht werden. Das verstärkt den Fokus auf das Vordergrundelement nochmals.

**Beispiel:**

<figure><img src="/files/k1h8uTJgBzQHWcRdGLTJ" alt=""><figcaption></figcaption></figure>

[^1]: Popup


# Scroll-Up Button

### Farben

\-

### Grundeinstellungen

Der Scroll-Up Button ist nützlich, kann aber manchmal mit einem Chat-Button oder Trusted-Shops überlagert werden. Daher kannst Du die Position dieses Buttons bestimmen.

\
Wähle über **Position (1)** die grundlegende Position des Buttons am unteren Bildschirmrand. Mit **Vertikaler Abstand (2)** und **Horizontaler Abstand (3)** bestimmst Du jeweils den Abstand zum Bildschirmrand.

<figure><img src="/files/4N0Wh0St3AWjWrK96HGD" alt=""><figcaption></figcaption></figure>


# Kategorie

Die Kategorie oder auch Listing genannt, listet Deine Produkte auf.


# Kategorie-Header

### Überlagernder Header

Der Header kann andere Elemente überlagern. Die globalen Einstellungen können in der Theme-Konfiguration voreingestellt und optional in den Kategorien für jede Kategorie abweichend gesetzt werden.

![](/files/vpJNZaeeeGHkr6HJBNc9)

{% hint style="success" %}
**\[ ≡ ] Einstellung pro Kategorie möglich**

Soll dieser Effekt auf den **überwiegenden** Kategorieseiten genutzt werden, können in der Theme-Konfiguration die [**globalen Einstellungen**](/content/kategorie/ueberlagernden-header#uberlagernder-header-1) getätigt werden.

Soll dieser Effekt gezielt auf nur **wenigen** Kategorieseiten genutzt werden, sollte die Konfiguration in der [**jeweiligen Kategorie**](/content/kategorie/ueberlagernden-header#uberlagernder-header) eingestellt werden.
{% endhint %}

Eine ausführliche Dokumentation findest Du unter:

{% content-ref url="/pages/1A9WZ5euFh31E9EGUGhd" %}
[Kategorie-Header](/content/kategorie/ueberlagernden-header)
{% endcontent-ref %}

### Header Kontrast

Diese Einstellung ist besonders sinnvoll, wenn der Header überlagernd eingestellt wurde und die Hintergrundfarben des Headers in ihrer Deckkraft auf 0% gestellt wurden.

<figure><img src="/files/POe5WcnxWXcjEKXLRo8O" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
**\[ ≡ ] Einstellung pro Kategorie möglich**

Soll dieser Effekt auf den **überwiegenden** Kategorieseiten genutzt werden, können in der Theme-Konfiguration die [**globalen Einstellungen**](/content/kategorie/ueberlagernden-header#header-kontrast-1) getätigt werden.

Soll dieser Effekt gezielt auf nur **wenigen** Kategorieseiten genutzt werden, sollte die Konfiguration in der [**jeweiligen Kategorie**](/content/kategorie/ueberlagernden-header#header-kontrast) eingestellt werden.
{% endhint %}

Eine ausführliche Dokumentation findest Du unter:

{% content-ref url="/pages/1A9WZ5euFh31E9EGUGhd" %}
[Kategorie-Header](/content/kategorie/ueberlagernden-header)
{% endcontent-ref %}


# Hero Sektion

Das Kategoriebild kann automatisiert in die erste Sektion der Erlebniswelt als Hintergrund eingelesen werden. Dadurch wird es möglich die Erlebniswelten Blöcke auf dem Hintergrundbild zu platzieren.

Die globalen Einstellungen können in der Theme-Konfiguration vor eingestellt und optional in den Kategorien für jede Kategorie abweichend gesetzt werden.

{% hint style="success" %}
**\[ ≡ ] Einstellung pro Kategorie möglich**

Soll dieser Effekt auf den **überwiegenden** Kategorieseiten genutzt werden, können in der Theme-Konfiguration die [**globalen Einstellungen**](https://themedocs-sw6.zenit.design/tutorials/headerbereich#konfiguration-fuer-alle-kategorien) getätigt werden.

Soll dieser Effekt gezielt auf nur **wenigen** Kategorieseiten genutzt werden, sollte die Konfiguration in der [**jeweiligen Kategorie**](https://themedocs-sw6.zenit.design/tutorials/headerbereich#konfiguration-pro-kategorie) eingestellt werden.
{% endhint %}

Eine ausführliche Dokumentation findest Du in unseren Tutorials, folge einfach dem folgenden Link:

{% content-ref url="/pages/9TC6CpWajLVasqPkQq60" %}
[Hero Sektion](/content/kategorie/kategoriebild)
{% endcontent-ref %}

![](/files/BoxzIh1X6rVSYMm0MkQe)


# Filter

Filter können über die Erlebniswelt horizontal im Hauptinhaltsbereich der Seite oder aber in der Sidebar als vertikales Element dargestellt werden.

### Farben

![](/files/mGXBLOAzzYt7tx6ADIjw)

Beispiel:

![Horizontale Darstellung im Hauptinhaltsbereich](/files/MUiQ81wYpAS2wcxmpmrn)

### Grundeinstellungen

In den Grundeinstellungen der Filter können neben allgemeinen Einstellungen zum **Schriftbild (1, 2, 3, 4)** ein **Auf- / Einklappen Icon (5)** zum Aufklappen der Filter wie auch eine **Filteroptionen Trennlinie (6)** zwischen den Filter-Optionen gewählt werden.&#x20;

Die Option **Filteroptionen ohne Ergebnisse ausblenden (7)** verstärkt die im Standard von Shopware bereits enthaltene Funktion "Filteroptionen ohne Ergebnisse deaktivieren". Wenn aktiv, werden die Filteroptionen ohne Ergebnisse ausgeblendet.

{% hint style="info" %}
Diese Einstellung greift nur, wenn unter *Einstellungen > Produkte* die Option "Filteroptionen ohne Ergebnisse deaktivieren" aktiv ist.
{% endhint %}

<figure><img src="/files/K2IcU7sXGTe1Ci8fV5yn" alt=""><figcaption></figcaption></figure>

Beispiel:

![Trennlinien zwischen den Optionen](/files/bBS4M9Y1MUDhY7hAj6il)

### Sidebar Filter

Die Filter **in der Sidebar** können mit Hilfe des Themes auch geöffnet dargestellt werden. Dadurch sind die Filter ersichtlicher und die Filterung fällt dem Kunden leichter. Dabei kannst Du **beschränken**, wie viele Filter geöffnet dargestellt werden sollen.

{% hint style="info" %}
Hast Du sehr viele Filter, kannst von Vorteil sein zu beschränken, wie viele Filter direkt ausgeklappt werden sollen.
{% endhint %}

![](/files/qRsOMip1OBiTzqLquwNk)

Beispiel:

![Sidebar Filter mit geöffnetem Farbfilter](/files/a60naFoptrbi3RdxzTwd)


# Listing Actions

## Grundeinstellungen

Der Listing Aktionen Zeile kann ein **Rahmen oben (1)** und **Rahmen unten (2)** vergeben werden. Dabei werden automatisch Abstände hinzugefügt.

Zusätzlich lassen sich die **Anzahl der Produkte (3)** anzeigen. Auf mobilen Geräten werden diese nicht ausgegeben.

![](/files/hgFBqgGCuBZ0A8lEB1TL)

Beispiel:

![](/files/LPDzzLjEJdEYckHCeAW2)


# Produkt-Boxen

Cards sind die Artikel-Boxen oder auch Produktboxen des Shops.

### Farben

Lege hier die Hintergrundfarbe der Produkt-Boxen fest.

<figure><img src="/files/GTgbXyR1ru4yciDrtoBx" alt=""><figcaption></figcaption></figure>

### Produkte pro Zeile

Für das Listing kannst Du nun für jeden einzelnen Viewport definieren, wieviele Produkte in einer Zeile dargestellt werden sollen.

<details>

<summary>Was ist ein Layout-Raster</summary>

Ein Layout wird in einem sogenannten **Grid** aufgebaut. Man kann sich das vorstellen wie **eine Tabelle mit 12 Spalten** und beliebigen Zeilen.

<img src="/files/P1gr7DkXlYPX3iMSoAMK" alt="" data-size="original">

</details>

<details>

<summary>Viewport / Displaygrößen erklärt</summary>

Die Definitionen *Smartphones*, *Tablet*, *Laptops* und *Desktop* sind vereinfachte Begriffe die für eine Mindestbreite in Pixeln stehen.

Die Darstellung von **2 Artikeln pro Zeile auf kleinen Smartphones** bezieht sich auf Endgeräte mit einer Mindestbreite im Viewport von `374px` und sind angelehnt an die Viewport-Größen des integrierten Frameworks Bootstrap (<https://getbootstrap.com/docs/4.6/layout/grid/>).

Bei allen Geräten mit einer geringeren Viewport-Breite (also unter 374 Pixeln Breite) wird nur ein Artikel pro Zeile dargestellt

</details>

![](/files/bUiU1pVxo9WUZo0V8LiP)

{% hint style="success" %}
\[≡] Abweichende Einstellungen pro Kategorie kannst Du im Bereich Zusatzfelder > [Produkte pro Zeile](#produkte-pro-zeile) der Kategorie hinterlegen.
{% endhint %}

### Produkte pro Zeile (Layouts mit Sidebar)

Bei aktiver Sidebar kannst Du gesonderte Einstellungen tätigen, da hier die zur Verfügung stehende Breite um die Breite der Sidebar geringer ist.

![bei aktiver Sidebar](/files/tvbqcppU6sxolbJWbW1o)

{% hint style="success" %}
\[≡] Abweichende Einstellungen pro Kategorie kannst Du im Bereich Zusatzfelder > [Produkte pro Zeile](#produkte-pro-zeile) der Kategorie hinterlegen.
{% endhint %}

### Produkte pro Zeile (Produkt-Slider)

Die Konfiguration der Anzahl Produkte pro Zeile für Produkt-Slider findest Du in den **Einstellungen (1)** des Produkt-Slider Elementes in der Erlebniswelt. Der Wert für die **Minimale Weite (2)** gibt dabei die Mindestbreite der Produktkachel an - per Javascript wird dann errechnet, wie viele Elemente in eine Zeile passen.

Beträgt die Breite des Inhaltes z.B. `1340px` können `4` Produktkacheln in einer Reihe dargestellt werden, weil `1340px / 4 = 335px` und damit die Mindestbreite von `300px` nicht unterschreitet. Bei `5` Kacheln pro Zeile wäre die maximal mögliche Breite einer Produktkachel `1340px / 5 = 268px` und damit zu gering.

![Element-Einstellungen eines Produkt-Sliders der Erlebniswelt](/files/vPf1XpEZMJ5x2ZSpdwmr)

### Grundeinstellungen

{% hint style="info" %}
Die Kurzbeschreibung im Listing wird über den Layout-Typ der Erlebniswelt gesteuert. Standard, Großes Bild, Minimaler Inhalt.
{% endhint %}

Über die Option **Rahmen (1)** bekommt die gesamte Produktbox einen Rahmen in der angegebenen Farbe. **Schatten (2)** und **Schatten:hover (3)** heben die Produktbox mit einem Schlagschatten in der gewählten Farbe vom Hintergrund ab.\
Über den **Abstand (4)** bestimmst Du den Abstand zwischen den einzelnen Produktboxen im Listing-Raster. Die Einstellung kann für mobile Geräte abweichend eingestellt werden.\
Die Option **Ersparnis in % (5)** stellt die prozentuale Ersparnis bei reduzierten Artikel im Badge an.\
Die **Aufmerksamkeits-Animation (6)** bewegt die Produkt-Box bei Mouseover um wenige Pixel nach oben. Wenn **Ausverkaufte Produkte kennzeichnen (7)** aktiv ist, werden ausverkaufte Produkte (Lagerbestand 0 + Abverkauf) mit einem Badge markiert.

![](/files/homq4rHCt1YIWGxap3ow)

Beispiele:

![Aufmerksamkeits-Animation (7)](/files/0uVLHsHHLs29CSinIqQ7)

![Artikel-Layout mit Schatten und Hintergrundfarbe](/files/ICt2MHr4RLnMxF9Txi5h)

![Artikel-Layout ohne Schatten und ohne Hintergrundfarbe, dafür mit Bild-Rahmen.](/files/u4vviHj9uiSgWIQXUFzs)

### Bild

Über **Mouseover Bildwechsel (1)** legst Du fest, ob beim Überfahren mit der Maus ein alternatives Artikelbild dargestellt wird. Dabei sucht das Theme sich automatisch das nächstliegende zugewiesene Artikelbild aus der Konfiguration des Artikel heraus. quo

Die Checkbox **Hintergrundfarbe (2)** bietet die Möglichkeit, die unter *Allgemein > Produktbilder > Hintergrundfarbe* hinterlegte Farbe für Produktboxen anzuwenden. So kannst Du gezielter Steuern, wann die Hintergrundfarbe angewendet werden soll. Im Bereich der Detailseite gibt es ebenfalls eine solche Checkbox für die Galerie.

Neben der Produkt-Box selbst kann auch das Produktbild einen **Rahmen (3)** mit der gewählten **Rahmenfarbe (4)** erhalten.

Die Einstellung **Layout-Typ Großes Bild - maximale Höhe (5)** gibt Dir die Möglichkeit diesem speziellen Produktlayout eine individuelle Höhe zu geben. Das Produktlayout "Großes Bild" orientiert sich anders als die anderen Produktboxen Layouts nicht am Seitenverhältnis der Bilder und verwendet die Darstellung von eingepassten Artikelbildern mit einer fixen Höhe.

![](/files/Yw0AopLN5nqiUZVaF3g3)

Beispiel:

![Artikelbilder mit Rahmen](/files/iDBmM6Vfsfkua7Xy3YGV)

### Bildgrößen

Für die Darstellung des optimalen [Produktbild Thumbnails](https://docs.shopware.com/de/shopware-6-de/Inhalte/medien?category=shopware-6-de/inhalte#einstellungen) in den Produkt Boxen für die verschiedenen Endgeräte und Bildschirmgrößen spielen viele Faktoren eine Rolle. Dazu gehören z.B. die einstellbare Anzahl der Artikel pro Zeile, die einstellbare maximale Layoutbreite wie auch der Abstand zwischen den Produktboxen. Eben Einstellungen welche die Größe der Boxen und damit auch der dargestellten Bilder beeinflussen.

{% hint style="success" %}
Grundsätzlich **errechnet das Theme** anhand der verschiedenen Parameter, die zu ladende Bildgröße der **verschiedenen Thumbnails** im Listing **automatisch.** Eine manuelle Einstellung fixer Bildgrößen ist nur in wenigen Ausnahmefällen ratsam.
{% endhint %}

{% hint style="info" %}
**Hintergrundwissen:**

Die Einstellung Produktbild Größen definiert die festgelegten Bildgrößen der Produktbilder für die unterschiedlichen Anzeigegrößen / Viewportbreiten. Das `img-srcset` entscheidet anhand der im `sizes`-Attribut hinterlegten Rahmenbedingungen, welches Bild geladen werden soll. Jede Rahmenbedingung besteht dabei aus einem optionalen Media Query der die Viewport-Breite beschreibt, und der Breite des Bildes.
{% endhint %}

Sobald die Einstellung **Verwende eigene srcset-Größen (1)** aktiviert wurde, greifen die festgelegten Bildgrößen für die einzelnen Viewports in den Einstellungsfelder darunter.

<figure><img src="/files/T9VDhd7sBcOY8jog5kdZ" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/39nPAtR9vKWeWiAmGxZ2" alt=""><figcaption><p>Beispiel eines srcset HTML-Attributes t</p></figcaption></figure>

### Bewertungen

<figure><img src="/files/C1SVPtZjhUVAl4faYi66" alt=""><figcaption></figcaption></figure>

Wähle mit der Konfiguration **Bewertungen Position (1)** zwischen verschiedenen Positionen der Bewertungssterne und lege fest, ob ausgegraute Sterne als Platzhalter angezeigt werden sollen, wenn zu einem Produkt noch keine Bewertungen vorliegen.

* **Sterne (Standard)** – zeigt die klassische Stern-Darstellung. Sterne werden nur angezeigt, wenn bereits Bewertungen vorhanden sind.
* **Sterne und Platzhalter** – zeigt graue Platzhalter-Sterne, wenn noch keine Bewertungen vorhanden sind.
* **Bewertungswert** – zeigt einen Stern sowie den durchschnittlichen Bewertungswert als Zahl.
* **Bewertungswert mit gefüllter Anzeige** – zeigt einen Stern, der proportional zum durchschnittlichen Bewertungswert gefüllt ist, sowie den durchschnittlichen Bewertungswert als Zahl.

Beispiel:

<figure><img src="/files/gRh6uzsC7lcl8CT0SZsq" alt=""><figcaption><p>Darstellung als <strong>Sterne und Platzhalter</strong> </p></figcaption></figure>

<figure><img src="/files/stFK4upHEIFi8fAffzaa" alt="" width="305"><figcaption><p>Darstellung mit <strong>Bewertungswert</strong></p></figcaption></figure>

### Name

Neben den allgemeinen Einstellungen zu **Farbe und Typografie (1-6)** kann mit der Option **Zeilen (9**) die Anzahl der Zeilen der Produktbezeichnung im Listing verändert werden. Dies kann bei besonders kurzen oder besonders langen Produktbezeichnungen sinnvoll sein, da für ein einheitliches Erscheinungsbild im Listing die Länge der Produktbezeichnungen durch die Anzahl der dargestellten Zeilen begrenzt ist.&#x20;

Die Option zum Trimmen der Zeilen lässt sich  deaktivieren indem die Option **Produktnamen begrenzen (8)** deaktiviert wird.

<figure><img src="/files/fBiRca4zrW6ynyDWnoUt" alt=""><figcaption></figcaption></figure>

### Beschreibung

Die Produktbeschreibung ist nur beim Standard Artikel-Layout vorhanden. Der **Layout-Typ (1)** kann in jeder Kategorie und Erlebniswelt eingestellt werden.

![](/files/P95JV7aIwYTCXRN3YX6I)

Du kannst die Typografie deiner Produktbeschreibung **(1–4)** konfigurieren.\
Die Option **Kurzbeschreibung statt gekürzte Produkt-Beschreibung (5)** lässt Dich die angerissene Produkt-Beschreibung, durch das Zusatzfeld "Kurzbeschreibung" des Produktes austauschen. Ist das Zusatzfeld nicht gefüllt, wird stattdessen die Meta-Beschreibung des Produktes genutzt. Ist auch diese leer, wird als Fallback wieder die Produkt-Beschreibung verwendet.

<figure><img src="/files/VkN5EFYeh5cIEvmllPTM" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/FGnLdtnTJaPhmho9qwxH" alt=""><figcaption></figcaption></figure>

### Artikelnummer

Stelle die Artikelnummer bereits im Listing dar. Durch das Deaktivieren der Anzeige derArtikelnummer kannst Du die Darstellung der Produktboxen in der Höhe verkleinern, da kein Platz für diese Information reserviert wird.

### Varianten Merkmale

Durch das Deaktivieren der Anzeige der Varianten Merkmale kannst Du die Darstellung der Produktboxen in der Höhe verkleinern, da kein Platz für diese Information reserviert wird.

### Varianten-Auswahl

<figure><img src="/files/rTXuWwz7CR3O6mLs60hB" alt=""><figcaption></figcaption></figure>

Über die Konfiguration **Position (1-2)** legst Du fest ob und wo die Variantenauswahl in der Produktbox angezeigt wird.\
Du kannst das Design der Varianten-Auswahl konfigurieren. Dazu zählen die **Ausrichtung (3)**, die **Hintergrundfarbe (4–5)**, die **Textfarbe (6–7)** sowie die **Rahmenfarbe (8–9)**.\
\
Mit Titel **anzeigen (10)** legst Du fest, ob der Titel der Varianten-Ausprägung mit angezeigt wird (z.B. "Größe" oder "Farbe"). **Nicht kombinierbare Eigenschaften durchstreichen (11)** streicht die Eigenschaften/Varianten entsprechend, wenn sie nicht verfügbar sind.\
Du kannst **Tooltips anzeigen (12)** lassen, wenn der Nutzer mit der Maus über die Varianten-Ausprägungen fährt.\
\
Du kannst einen **Varianten-Gruppen Schwellenwert (13)** festlegen, wenn nicht alle Varianten-Gruppen angezeigt werden sollen. Beispielsweise haben deine Produkte die Eigenschaften "Farbe" und "Größe" aber Du möchtest nur die Farbe in den Produkt-Boxen zur Auswahl stellen.

Ebenso kann der **Varianten-Optionen Schwellenwert (14)** festgelegt werden um zu begrenzen, wie viele der einzelnen Optionen angezeigt werden. Das ist nützlich, wenn deine Produkte sehr viele unterschiedliche Varianten haben. Überschüssige Varianten-Optionen werden getrimmt und zum Beispiel als "+10" dargestellt.

{% hint style="info" %}
Die Schwellenwerte sind besonders sinnvoll um Performance einzusparen. Bei mehreren Artikeln auf einer Listing-Seite mit vielen Varianten-Optionen kann die Ladezeit beeinträchtigt werden.
{% endhint %}

Beispiele:

<div><figure><img src="/files/EPukieeCaJKjdyNXlDe8" alt=""><figcaption></figcaption></figure> <figure><img src="/files/44DmFxtYhTls8oR8B3eh" alt=""><figcaption></figcaption></figure> <figure><img src="/files/QuyrEyePTlOdyTrpUFOB" alt=""><figcaption></figcaption></figure> <figure><img src="/files/JVnyVgOuEqZql64Fi3Vj" alt=""><figcaption></figcaption></figure></div>

### Varianten günstigster Preis

Durch das Deaktivieren der Anzeige des günstigsten Variantenpreises kannst Du die Darstellung der Produktboxen in der Höhe verkleinern, da kein Platz für diese Information reserviert wird.

### Grundpreis

Durch das Deaktivieren der Anzeige des Grundpreises kannst Du die Darstellung der Produktboxen in der Höhe verkleinern, da kein Platz für diese Information reserviert wird.

{% hint style="warning" %}
Prüfe bitte vorher die Anzeige von **Pflichtangaben!**

\
\&#xNAN;*"Wer Produkte nach Länge, Volumen, Gewicht oder Fläche anbietet, ist zur Nennung eines Grundpreises verpflichtet."* Quelle: [Shopware Blog](https://www.shopware.com/de/news/preisangaben-richtlinie-diese-fakten-muessen-onlinehaendler-kennen/) zum Thema Preisangaben

Solltest Du also zur Darstellung eines Grundpreises verpflichtet sein, schalte diesen nicht aus - verkaufst Du hingegen aussschließlich z.B. Bekleidung kannst Du womöglich den unnötigen Leerraum der Grundpreisberechnung einsparen.
{% endhint %}

### Preis

Du kannst die Typografie des Produktpreises **(1–4)** konfigurieren.

<figure><img src="/files/El1O5NZVBJJx6AvTOYmg" alt=""><figcaption></figcaption></figure>

### Lieferzeit

<figure><img src="/files/yDpfDGlHtZ90nazZbwNW" alt=""><figcaption></figcaption></figure>

Aktiviere die **Lieferzeit (1)** in Listings, um Lieferinformationen in der Produktkarte in einem minimalen **Aussehen (2)** oder Standardmodus anzuzeigen. Passe die Schriftausrichtung an die Ausrichtung der anderen Elemente an.

Beispiele:&#x20;

<div><figure><img src="/files/0Kv6LpnfzDpKcAEnbCvi" alt=""><figcaption><p>Aussehen Minimal</p></figcaption></figure> <figure><img src="/files/mHDhYkUCj8EMg6kgBYpd" alt=""><figcaption><p>Aussehen Minimal :hover</p></figcaption></figure> <figure><img src="/files/Bpa7EHE3yalDlMqEfBiu" alt=""><figcaption><p>Aussehen Standard</p></figcaption></figure></div>

### Produktaktionen

Ein Produkt kann Aktionen haben, wie das Hinzufügen des Artikels in den Warenkorb, der Details Button bei Varianten uvm.

Die Darstellung von **Kaufen-Buttons in Produktlistings** ist eine Standardfunktion in Shopware und kann unter Einstellungen > Shop > Produkte aktiviert werden. Mehr Informationen unter:&#x20;

{% embed url="<https://docs.shopware.com/de/shopware-6-de/einstellungen/produktliste?category=shopware-6-de/einstellungen/shop#kaufen-buttons-2>" %}

![](/files/CeV7Mx5WPPWej02qgcgo)

**Hintergrund (1):** Gib dem Bereich der Produktaktionen eine eigene Hintergrundfarbe. Alternativ setze hier die Farbe der Product-Card - das kann auch mit einer Variable wie `$zen-product-listing-card-bg` angegeben werden.

**Aussehen (2):** Produktaktionen können bei Mouseover das Produktbild überlagern, die Produktinformationen nach oben schieben oder den Produktpreis überlagern. Im Standard sind die Aktionen unterhalb des Preises immer sichtbar.

**Aussehen (mobile) (3):** Werden Produktaktionen erst bei Mouseover sichtbar, interpretieren mobile Geräte den Mouseover mit der ersten Touch-Geste. Der erste "klick" wird daher für die Darstellung der Produktaktionen genutzt - das Öffnen des Produktes wird also erst beim zweiten "Klick" möglich. Du kannst deshalb eine abweichende Einstellung für mobile Geräte treffen.

**Merkzettel (4):** Aktiviert die Merkzettel Produktaktion, sofern in den Shopware Grundeinstellungen die Merklistenfunktion aktiv ist.

**Bestellmengenfeld (5):** Zusätzlich zum Warenkorb-Button kann direkt im Listing auch eine **Mengenauswahl** angezeigt werden.

{% hint style="info" %}
Die Darstellung des Bestellmengenfeldes setzt die aktive Option [**Kaufen-Buttons in Produktlistings anzeigen** ](https://docs.shopware.com/de/shopware-6-de/einstellungen/produktliste?category=shopware-6-de/einstellungen/shop#kaufen-buttons-2)in den Shopware Grundeinstellungen voraus.
{% endhint %}

**Produktaktion Button anzeigen (6):** Wenn aktiv, wird ein Produktaktion Button in Listings angezeigt, wenn erweiterte Preise oder Varianten die direkte Anzeige des Kaufen-Buttons nicht ermöglichen.\
\&#xNAN;*Im Folgenden kannst Du für diese Fälle einstellen, was angezeigt werden soll.*

**Produktaktion für Varianten - Hauptprodukt (7):** Produktaktion der in der Storefront-Darstellung als Hauptprodukt dargestellten Variante.`Details Button` | `Optionen wählen Button`\
\&#xNAN;*Für 'Optionen wählen Button' muss Quickview aktiv sein.*

**Produktaktion für Varianten - Einzelprodukt (8):** Produktaktion der in der Storefront-Darstellung nach Eigenschaften aufgefächerten Varianten oder als Einzelprodukt mit vorausgewählter Variante. `Details Button` | `Optionen wählen Button` | `Warenkorb Button`Da bei Einzelprodukten klar ist, welche Variante im Warenkorb landet, kann hier ebenfalls ein Warenkorb Button angezeigt werden.\
\&#xNAN;*Für 'Optionen wählen Button' muss Quickview aktiv sein.*

**Produktaktion für Produkt mit erweiterten Preisen (9):** Produktaktion von Produkten mit erweiterten Preisen. `Details Button` | `Optionen wählen Button`Da bei erweiterten Preisen in der Regel der günstigste Preis im Listing angezeigt wird, kann es hier keinen Warenkorb Button geben. (Keine Rechtsberatung)\
\&#xNAN;*Für 'Optionen wählen Button' muss Quickview aktiv sein.*

Beispiel:

<div><figure><img src="/files/aS0JcH3FZqhYkjBWjnOI" alt=""><figcaption></figcaption></figure> <figure><img src="/files/Z71Y2EudbHLvefUyBS1B" alt=""><figcaption></figcaption></figure></div>


# Quickview

### Grundeinstellungen

<figure><img src="/files/kV6KHDryofvvzZDkUefJ" alt=""><figcaption></figcaption></figure>

**Quickview (1)** - Aktiviert die Quickview Funktion des Themes. Für alle Produkt-Boxen und im Checkout steht nun die Quickview Funktion bereit. \
\
**Produktname Position (2)** - Definiert, ob der Produktname über der Galerie oder in der rechten Seite in der Buybox dargestellt wird.

**Hersteller Position (3)** - Bestimmt, wo und ob das Hersteller-Logo angezeigt wird.\
\
**Kaufen-Funktion aktivieren (4)** - Legt fest, ob das Produkt im Quickview zum Warenkorb hinzugefügt werden kann.&#x20;

**Zoom in Galerie** **(5)** - Legt fest, ob in der Produkt-Galerie gezoomt werden kann.&#x20;

Beispiel:

![Quickview (Vorschau Funktion)](/files/dzYxhUGaUGcdcTLowFtD)


# Produkt

Die Produkt-Detailseite


# Produkt-Header

### Überlagernder Header

Der Header kann andere Elemente überlagern. Die globalen Einstellungen können in der Theme-Konfiguration voreingestellt und optional in den Kategorien für jedes Produkt abweichend gesetzt werden.

![](/files/t4Z77x5KfQq1TGyOR8Sx)

{% hint style="success" %}
**\[ ≡ ] Einstellung pro Produkt möglich**

Soll dieser Effekt auf den **überwiegenden** Produktseiten genutzt werden, können in der Theme-Konfiguration die [**globalen Einstellungen**](/content/kategorie/ueberlagernden-header#uberlagernder-header-1) getätigt werden.

Soll dieser Effekt gezielt auf nur **wenigen** Produktseiten genutzt werden, sollte die Konfiguration im [**jeweiligen Produkt**](/content/detailseite/produkt-header#konfiguration-pro-produkt) eingestellt werden.
{% endhint %}

Eine ausführliche Dokumentation findest Du unter:

{% content-ref url="/pages/qvzYbxc5EzPFFUPiXdnB" %}
[Produkt-Header](/content/detailseite/produkt-header)
{% endcontent-ref %}

### Header Kontrast

Diese Einstellung ist besonders effektvoll, wenn der Header überlagernd eingestellt wurde und die Hintergrundfarben des Headers in ihrer Deckkraft auf `0%`⁣ gestellt wurden.

<figure><img src="/files/2RtAwoX0TvEGYQ7342u5" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
**\[ ≡ ] Einstellung pro Produkt möglich**

Soll dieser Effekt auf den **überwiegenden** Produktseiten genutzt werden, können in der Theme-Konfiguration die [**globalen Einstellungen**](/content/kategorie/ueberlagernden-header#header-kontrast-1) getätigt werden.

Soll dieser Effekt gezielt auf nur **wenigen** Produktseiten genutzt werden, sollte die Konfiguration in der [**jeweiligen Kategorie**](/content/kategorie/ueberlagernden-header#header-kontrast) eingestellt werden.
{% endhint %}

Eine ausführliche Dokumentation findest Du unter:

{% content-ref url="/pages/qvzYbxc5EzPFFUPiXdnB" %}
[Produkt-Header](/content/detailseite/produkt-header)
{% endcontent-ref %}


# Buybox

### Farben

<figure><img src="/files/sBAvrm9bW1ROTT9wResz" alt=""><figcaption></figcaption></figure>

Du kannst die Gallerie und Buybox deiner Produkt-Detailseite gobal mit einer **Hintergrund**-Farbe versehen. Damit das funktioniert, müssen Gallerie und Buybox in einer andern Sektion liegen als die Produktbeschreibung

### Grundeinstellungen

{% hint style="info" %}
Diese Einstellungen wirken sich auch auf die Darstellung der Quickview Funktion aus.
{% endhint %}

<figure><img src="/files/3jVGFkUbQaMlotugeIFA" alt=""><figcaption></figcaption></figure>

**Kurzbeschreibung (1):** Das Theme unterstützt die Anzeige einer zusätzlichen Kurzbeschreibung, welche aus einem Zusatzfeld oder der Metabeschreibung des Produktes gezogen wird.

**Varianten Merkmale (2):** Die wesentlichen Merkmale einer Variante können unterhalb des Produkttitels angezeigt oder ausgeblendet werden.

**Bewertung Position (3):** Bewertungen können im Titelbereich oder unterhalb des Preises dargestellt werden.

**Bewertung Platzhalter (4):** Zeigt inaktive Sterne als Platzhalter an, sollte das Produkt noch keine Bewertungen haben.

**Merkzettel Position (5):** Positioniere den zum Merkzettel Hinzufügen-Link über der Galerie oder unter dem Warenkorb-Button.

**Hersteller Position (6):** Der Herstellername bzw. das Hersteller-Logo kann an verschiedenen Stellen dargestellt werden. Du kannst die Darstellung auch unterbinden.

**Bestellmengenfeld (7):** Die Mengenauswahl/-eingabe kann nach Bedarf ausgeblendet werden. Der Nutzer kann vorerst nur eine Abgabemenge in den Warenkorb legen. Im Checkout und Warenkorb kann die Menge weiterhin angepasst werden.

{% hint style="info" %}
**Im Listing** wird die Mengenauswahl/-eingabe unter *Kategorie > Produkt-Boxen > Produktaktionen* ein- oder ausgeschaltet werden.

**Im Quickview** wird die Einstellung der Detailseite übernommen.
{% endhint %}

**Lieferstatus Indikator Aussehen (8):** Verändert das Aussehen des Lieferstatus.

Beispiel:

<figure><img src="/files/dZu3sbvn1iFu4j0YRoba" alt=""><figcaption><p>Lieferstatus als Badge</p></figcaption></figure>

**Sticky (9):** Wenn aktiv, wird die Buybox beim Scrollen fixiert, solange die Inhalte nicht höher sind als der Viewport.

{% hint style="info" %}
Wenn die Option Sticky auch für die benachbarte Galerie aktiviert ist, wird immer das Element mit der geringeren Höhe sticky.
{% endhint %}

**Sticky erzwingen (10):** Die Sticky-Funktion funktioniert nur, wenn alle Eltern-Elemente nicht die CSS Eigenschaft "overflow:hidden" verwenden. Es gibt Erweiterungen, welche diese Eigenschaft setzen. Wenn aktiv, wird die Sticky-Funktion erzwungen und alle Eltern-Elemente mit "overflow: hidden", werden auf "overflow: visible" umgeschrieben.

### Produkttitel

<figure><img src="/files/jipOPRNySTpYnGFH4YwK" alt=""><figcaption></figcaption></figure>

Die **Text (1)**-Farbe des Produktitels kann global konfiguriert werden. Außerdem kannst Du die **Schriftgröße (2)**, **Schriftfamilie (3)** und **Schriftstärke (4)** einstellen. Optional kannst Du mit **Text Transform (5)** festlegen, dass deine Produkttitel nur aus Groß. oder Kleinbuchstaben bestehen.

### Produktpreis

<figure><img src="/files/CAMd7cwPfPxTWMWukQLi" alt=""><figcaption></figcaption></figure>

Die **Text (1)**-Farbe des Preises kann global konfiguriert werden. Zusätzlich kannst Du die **Schriftgröße (2)**, **Schriftfamilie (3)** und **Schriftstärke (4)** bestimmen.

Die Option **Ersparnis (%) gerundet (5)** sorgt dafür, dass der prozentuale Rabatt bei Streichpreisen als gerundete Zahl angezeigt wird. Beispiel: Aus *-12,8 %* wird *-13 %*.

### Produkt Konfigurator Elemente

Die Einstellungen **1-6** steuern das Aussehen der Auswahl-Optionen.

Werden Medienauswahlen bereitgestellt, kann die Größe dieser Bilder über **Breite Medien (7)** und **Höhe Medien (8)** eingestellt werden.

Die Farben des Produkt Konfigurators (Variantenauswahl) können über die Einstellungen angepasst werden. Weiterhin lassen sich **nicht kombinierbare Eigenschaften** **durchstreichen (9)**, **gestrichelt (10)** darstellen und in ihrer **Deckkraft (11)** reduziert anzeigen. **Tooltips (12)** zeigen bei z.B. Farbauswahlen den hinterlegten Namen der Farbe an.

<figure><img src="/files/NVOYFzQzxOW2UW8mGgvp" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**Tipp:** Die Reduzierung der Deckkraft verfälscht die Farben einer Farbauswahl, sodass es sinnvoll sein kann die Optionen zum Durchstreichen und/oder gestrichelter Darstellung zu verwenden.
{% endhint %}

Beispiel:

<figure><img src="/files/GG7XzNmyN0YR8mRnV9Sa" alt=""><figcaption><p>Reuzierung der Deckkraft verändert Blauton</p></figcaption></figure>

### Produkt Details

Über das Feld **Aussehen** kannst die grundlegende Optik der aufgelisteten Details bestimmen.

![](/files/gczDzUolrMF57eZt4xcu)

Beispiel:

![](/files/ByQbuo7buKGMM1aOCCrl)

### Produkt Features

Über die Produkt-Features lassen sich beliebig viele Vorteile eines Produktes auf der Detailseite darstellen. Neben dem globalen **Aktivieren (1)** stehen zwei verschieden **Anzeigemodi (2)** sowie die Auswahl eines **Icons (4)** bereit. Über die Position (3) kannst Du bestimmen, wo diese Features dargestellt werden. Die **Überschrift (5)** ist optional und kann ausgebendet werden.

![](/files/cdQTnGcWf3DaIzRQrfh9)

Die Inhalte werden direkt im Produkt im Bereich der Zusatzfelder im Tab **Zusatzinhalte (1)** hinterlegt. Im Feld **Produkt Features (2)** können beliebig viele Vorteile eingefügt und durch ein Semikolon getrennt werden.

![](/files/EfHavmUFzzwflOHMLrtL)

Beispiel:

![](/files/x0IOFIJSuGW2AqSPPn4g)


# Galerie

### Grundeinstellungen

<figure><img src="/files/onETTKIgHCJxB2nAt0bB" alt=""><figcaption></figcaption></figure>

Der **\[≡] Galerie Anzeigemodus (1)** definiert das Verhalten der Galerie. Sie kann sich als `Galerie Slider` zum horizontalen sliden oder als `Galerie Scroller` zum vertikalen Scrollen im Dokumentenfluss verhalten. Ab Theme Version 2.6.0 steht die neue Darstellung als `Galerie Raster` zur Verfügung.

{% hint style="info" %}
**\[≡]** Der Galerie Modus kann **in jedem Produkt** über die **Zusatzfelder** im *Tab Spezifikationen > Zusatzfelder > Galerie* eingestellt werden.

Er muss nicht global gesetzt werden und kann so genutzt werden, um Produkte gezielt in der Darstellung zu optimieren.

Mehr dazu findest Du in der Doku unter *INHALTE > Detailseite >* [*Galerie Modus*](/content/detailseite/galerie-modus)
{% endhint %}

**Galerie Raster - Cover volle Breite (2)** setzt das Cover-Bild im Galerie Raster auf die volle Breite. Alle nachfolgenden Bilder werden gemäß des Rasters nebeneinander dargestellt.

| Cover volle Breite aktiviert                                                                                                              | Cover volle Breite deaktiviert                                                                                               |
| ----------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
| <p>         <code>COVER 1</code> </p><p>   <code>BILD 2</code> <code>BILD 3</code> </p><p>   <code>BILD 4</code> <code>BILD 5</code> </p> | <p>  <code>COVER 1</code> <code>BILD 2</code> <br>   <code>BILD 3</code> <code>BILD 4</code> <br>   <code>BILD 5</code> </p> |

**Galerie Raster - Dynamisch (3)** sorgt dafür, dass das Raster nicht mit einem einzelnen Bild endet. Sind beispielsweise fünf Produktbilder anzuzeigen, werden in der letzte Zeile drei Bilder nebeneinander dargestellt, sodass kein Bild alleine umbricht und eine optische Lücke entsteht.    &#x20;

| Dynamisch aktiviert                                                                                                   | Dynamisch deaktiviert                                                                                                        |
| --------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
| <p>    <code>BILD 1</code> <code>BILD 2</code> <br> <code>BILD 3</code> <code>BILD 4</code>  <code>BILD 5</code> </p> | <p>   <code>BILD 1</code> <code>BILD 2</code> <br>   <code>BILD 3</code> <code>BILD 4</code> <br>   <code>BILD 5</code> </p> |

**Hintergrundfarbe (4)** hinterlegt das Bild der Galerie mit der gewählten Hintergrundfarbe. In Kombination mit der Einstellung **Hintergrundfarbe überlagernd (5)** kann diese Farbe auch dazu genutzt werden nicht transparente oder nicht ausgeschnittene Produktbilder auf einen z.B. grauen Hintergrund zu legen.

Mit **Fallback Bild-Titel (6)** legst Du den Titel des Bildes fest, der hinterlegt werden soll, wenn kein Bild-Titel zu dem Bild in der Medienverwaltung hinterlegt wurde. Das kann der Name der Bilddatei oder der Name des Produktes sein.

**Sticky (7):** Wenn aktiv, wird die Galerie beim Scrollen fixiert, solange die Inhalte nicht höher sind als der Viewport oder die Galerie nicht höher ist als die benachbarte Buybox.

{% hint style="info" %}
Wenn die Option Sticky auch für die benachbarte Buybox aktiviert ist, wird immer das Element mit der geringeren Höhe sticky.
{% endhint %}

**Sticky erzwingen (8):** Die Sticky-Funktion funktioniert nur, wenn alle Eltern-Elemente nicht die CSS Eigenschaft "overflow:hidden" verwenden. Es gibt Erweiterungen, welche diese Eigenschaft setzen. Wenn aktiv, wird die Sticky-Funktion erzwungen und alle Eltern-Elemente mit "overflow: hidden", werden auf "overflow: visible" umgeschrieben.

Beispiel:

![](/files/pShniEvIZGgmL0J8j2S7)

### Breite & Höhe

![](/files/yoxSTl3kv943uXv7TGCK)

Die **Galerie Breite (1)** bestimmt, wie viel Platz die Galerie gegenüber der rechten Buybox einnehmen darf.

Beispiel:

![Galeriebreite](/files/Hq0LYX0hMVEuXGM6Fvct)

Die Höhe des Galerie Sliders kann grundlegend durch die Option **Verwende Seitenverhältnis Artikelbilder (2)** gesetzt werden.

{% hint style="success" %}
Diese Einstellung bezieht sich auf die in [Allgemein > Produktbilder](https://themedocs-sw6.zenit.design/styling/grundeinstellungen#produktbilder) getroffene Einstellung für das Seitenverhältnis des Produktbildes.
{% endhint %}

Zusätzlich kann eine **minimale Höhe (3, 4)** für den Galerie Slider für verschiedene Gerätegrößen hinterlegt werden. **Verwende Seitenverhältnis Artikelbilder (2)** kann die Einstellungen der **minimalen Höhen (3)** ergänzen. Sind die Artikelbilder im Hochformat, die Mindesthöhe aber sehr niedrig gewählt, kann das Artikelbild auf der Produktseite höher und größer angezeigt werden, als es die Mindesthöhe vorgibt.

Ist die Einstellung **Verwende Seitenverhältnis Artikelbilder  (2)** jedoch nicht aktiv, sind die Bilder auf der Produktseite immer nur so hoch, wie es die Mindesthöhe für das jeweiligen Endgerät eingestellt wurde.

{% hint style="info" %}
Die grundsätzliche minimale Höhe für alle großen Viewports wird in den Einstellungen der Galerie und Buybox im Galerie Element des Produkt-Layouts der Erlebniswelt vorgenommen. Die in der Theme-Konfiguration einstellbaren minimalen Höhen sind lediglich ergänzende Werte für mobile Endgeräte wie Smartphones oder Tablets.
{% endhint %}

Beispiel:

![Bild hat selbes Bildformat wie im Listing](/files/AV5dwlLrH4viYE1URYjO)

### Navigation

Analog zu den Einstellungen des Erlebniswelten Element Galerie und Buybox lassen sich Einstellungen zur Navigation tätigen:

**Pfeile-Navigation (1):** Fügt Pfeile zum Durchklicken der Bilder hinzu. Du kannst festlegen, ob die Pfeile auf oder neben dem angezeigten Bild dargestellt werden sollen oder diese auch ausblenden. [<mark style="background-color:red;">Entfernt in Version 4.0.0</mark>](#user-content-fn-1)[^1]\
\
**Punkte-Navigation (2):** Alternativ (oder zusätzlich) zu der Pfeilnavigation kannst Du die Punkte-Navigation verwenden. Diese stellt für jedes hinterlegte Bild einen kleinen Punkt dar, über den Du direkt das jeweilige Bild aufrufen kannst.\
Die Darstellung ist auf oder unter dem Bild möglich. [<mark style="background-color:red;">Entfernt in Version 4.0.0</mark>](#user-content-fn-1)[^1]

**Verwende Seitenverhältnis der Artikelbilder (3):** Die Bilder der Vorschau-Navigation werden im eingestellten Bildformat angezeigt und nicht in quadratischen Boxen.

{% hint style="info" %}
Diese Einstellung bezieht sich auf die in [Allgemein > Produktbilder](https://themedocs-sw6.zenit.design/styling/grundeinstellungen#produktbilder) getroffene Einstellung für das Seitenverhältnis des Produktbildes.
{% endhint %}

**Vorschau Navigation Position (4):** Lege fest, ob die kleinen Bilder für die Galerie-Vorschau links neben dem Bild oder unterhalb angezeigt werden soll. [<mark style="background-color:red;">Entfernt in Version 4.0.0</mark>](#user-content-fn-1)[^1]

**Vorschau Navigation Aussehen (5):** Stellt das Aussehen dieser Navigation ein. Im Modus Alternativ entfällt die Rahmung, inaktive Elemente werden abgeschwächt dargestellt.

![](/files/1rcCBuw42CpTUuEVSwMP)

Die Punkte kann bei zu vielen Navigationspunkten insbesondere auf mobilen Geräten störend wirken. Mit den folgenden Einstellungen kannst Du bestimmen, ab wie vielen Punkten bzw. Bildern diese Navigation nicht angezeigt wird:

**Punkte-Navigation max (mobile) (6):** Legt fest, ab wie vielen Bilder die Punkte Navigation auf mobilen Geräten nicht angezeigt wird.\
**Punkte-Navigation max (7):** Legt fest, ab wie vielen Bilder die Punkte Navigation auf großen Geräten nicht angezeigt wird.

### Zoom

**Zoom (1):** Wenn Du diese Option aktivierst, wird eine vergrößerte Darstellung des Bildes angezeigt, wenn der Shopbesucher mit der Maus über das Bild fährt. [<mark style="background-color:red;">Entfernt in Version 4.0.0</mark>](#user-content-fn-1)[^1]\
\
**Zoomfaktor (2):** Über den Zoomfaktor kannst Du bestimmen, wie stark die Vergrößerung des Bildes ist.\
\
**Seitenverhältnis beim Zoomen beibehalten (3):** Steuert, ob die Zoomansicht im Seitenverhältnis des Bildes oder quadratisch ist. [<mark style="background-color:red;">Entfernt in Version 4.0.0</mark>](#user-content-fn-1)[^1]\
\
**Lupe über Galerie (4):** Bietet die Möglichkeit die Zoom-Funktion (Lupenfunktion) über der Galerie selbst zu platzieren. Andernfalls wird die Zoomansicht die Buybox überlagern. [<mark style="background-color:red;">Entfernt in Version 4.0.0</mark>](#user-content-fn-1)[^1]\
\
**Vollbild-Galerie (5):** Ermöglicht es mit einem Klick auf das Bild die Galerie vollflächig im Browserfenster anzuzeigen. [<mark style="background-color:red;">Entfernt in Version 4.0.0</mark>](#user-content-fn-1)[^1]

![](/files/Ak5Qjch9DOiCFAnrhbn0)

### Erlebniswelten Produktseiten Layouts

Bei Produktseiten, welche mit den ab Shopware 6.4.0.0 verfügbaren Erlebniswelten für **Produktseiten** erstellt werden, wird die Mindesthöhe im Element `Galerie und Buybox` im Feld **Minimale Höhe (1)** hinterlegt. So kann für einzelne Produkte gezielt eine individuelle Höhe angegeben werden.

{% hint style="info" %}
Die Minimale Höhe im Erlebniswelten Element überschreibt die Mindesthöhe für die Desktop-Ansicht aus der Theme-Konfiguration. Die anderen Werte bleiben bestehen, da die Einstellung aus dem Erlebniswelten-Element nur die Desktop-Ansicht beeinflusst.
{% endhint %}

![](/files/vlq2bpQdmV48ZVzDt5St)

[^1]: Ab Shopware 6.6 befinden sich diese Einstellungen ausschließlich in den Erlebniswelten Blöcken und Elementen. Die Theme Standard Produktseite wird durch das Standard Produktseite Layout der Erlebniswelten ersetzt.


# Beschreibung

### Farben

Setze für den gesamten Bereich der Tabs und Crossselling-Tabs eine Hintergrundfarbe.

Beispiel:

![Grauer Hintergrund des Tabs-Bereiches](/files/dkv4h6NX8tnuxQe5HJTn)

### Grundeinstellungen

Mit **Position (1)** bestimmst Du die Platzierung der Produktbeschreibung und weiteren Tabs. Im Standard zeigt Shopware diese Informationen unter den Elementen der Galerie sowie der Buybox an. Mit der Option `Buybox` kannst Du diese Informationen auch rechts neben der Galerie in der Buybox platzieren. [<mark style="background-color:red;">Entfernt in Version 4.0.0</mark>](#user-content-fn-1)[^1]

**Aussehen (mobil) (2)**:&#x20;

* **Offcanvas:** Im Standard werden die Inhalte auf mobilen Geräten in einem sogenannten Offcanvas Element angezeigt. Die Inhalte der Tabs werden nur in einer Vorschau angezeigt. Bei längeren Produktbeschreibungen eignet sich die Darstellung als `Offcanvas (Standard)` besser, da der Nutzer die darunter liegenden Inhalte (z.B. Crossselling) besser erreichen kann und den Überblick behält.&#x20;
* **Scroller**: Möchtest Du den Inhalt durch Scrollen erreichbar halten, wähle die Option `Scroller` . Die Tab-Navigation funktioniert dann als Anker-Navigation und scrollt beim Klick zum jeweiligen Inhalt.
* **Linear**: Möchtest Du den Inhalt durch Scrollen erreichbar halten, wähle die Option `Linear`. Die Tab-Navigation wird im Unterschied zum `Scroller` Modus ausgeblendet.
* **Akkordeon**: Stellt die verschiedenen Inhalte in einem aufklappbaren Akkordeon dar.

**Aussehen (3):**&#x20;

* **Tabs:** Die Standard-Darstellung von Shopware. Bei längeren Produktbeschreibungen eignet sich die Darstellung als `Tabs (Standard)` besser, da der Nutzer die darunter liegenden Inhalte (z.B. Crossselling) besser erreichen kann und den Überblick behält.&#x20;
* **Scroller**: Möchtest Du den Inhalt durch Scrollen erreichbar halten, wähle die Option `Scroller` . Die Tab-Navigation funktioniert dann als Anker-Navigation und scrollt beim Klick zum jeweiligen Inhalt.
* **Linear**: Möchtest Du den Inhalt durch Scrollen erreichbar halten, wähle die Option `Linear`. Die Navigation wird im Unterschied zum `Scroller` Modus ausgeblendet.
* **Akkordeon**: Stellt die verschiedenen Inhalte in einem aufklappbaren Akkordeon dar.

<figure><img src="/files/cgs6CC8mNfx77rCEpO7D" alt=""><figcaption></figcaption></figure>

Beispiel:

<figure><img src="/files/ANABku9ay6uD5lKbCiFY" alt=""><figcaption><p>Position: Buybox; Aussehen: Akkordeon</p></figcaption></figure>

[^1]: Ab Shopware 6.6 befinden sich diese Einstellungen ausschließlich in den Erlebniswelten Blöcken und Elementen. Die Theme Standard Produktseite wird durch das Standard Produktseite Layout der Erlebniswelten ersetzt.


# Beschreibung Navigation

### Farben

Je nach Einstellung der Erscheinung, wird die **Hintergrundfarbe (1)** für den Unterstrich oder den Hintergrund des Tabs verwendet.

{% hint style="info" %}
Die Einstellung für die Erscheinung mit Hintergrundfarbe oder Unterstrich findest Du im folgenden Abschnitt Grundeinstellungen.
{% endhint %}

![](/files/GCMtnWZo2fB87hY1u2jT)

Beispiele:

![Tab-Navigation Hintergrund](/files/k2mgRGy80XOfmGRWqOzy)

![Tab-Navigation Unterlinie](/files/P6W22F0Z6XflKCnDL4E1)

### Grundeinstellungen

**Erscheinung**: Standard (Unterstrich), Tabs, Pills

Die **Tab Ausrichtung (2)** der Tabs kann zwischen `gleichmäßig verteilt` auf der vollen Breite und den normalen Ausrichtung `links`, `mittig`, `rechts` gewählt werden. Zusätzlich dazu kann die Ausrichtung der Schrift mit dem Feld **Schriftausrichtung (6)** bestimmt werden.

![](/files/iVGz8oc4YiJiaHkAuC13)

Beispiele:

![Erscheinung: Tabs, Ausrichtung: links](/files/OcwfmUnOB78TNWJKI0Uk)

![Erscheinung: Standard, Ausrichtung: gleichmäßig verteilt](/files/SIvyvvgRg6dBAygm6yc7)

![Erscheinung: Pills, Ausrichtung: links](/files/ZcM2TLDnCXQ5tVLHNxQd)

### Reihenfolge

Die Reihenfolge bestimmst Du durch Angabe einer Positionsnummer. Je höher die Zahl, desto weiter hinten wird der Tab angezeigt.

<figure><img src="/files/m77sKSJdpELPT1yAPpBF" alt=""><figcaption></figcaption></figure>

### Zusätzliche Tabs

Über das Theme kann im Artikel direkt ein Tab mit Informationen zum **Hersteller** ausgespielt werden. Logo, Name, Beschreibung und Link zur Webseite des Herstellers werden als Informationen in den Tabs aufgenommen.

Die **Eigenschaften** können ebenfalls optional in einem Tab dargestellt werden. Das eignet sich besonders dann, wenn sehr viele Eigenschaften dargestellt werden sollen.

![](/files/U5mhd6dY7gnpAJrjpAHw)

Beispiele:

![Hersteller Tab](/files/97F0ztGpDOGUR4HcVOkv)

![Eigenschaften als Tab](/files/SepDRhf12ibGvhHXFfNY)


# Beschreibung Inhalt

### Farben

Eine Hintergrundfarbe für den Tab Inhalt zu definieren ist immer dann sinnvoll, wenn der gesamten Tabs-Sektion eine Hintergrundfarbe zugewiesen wurde.

![](/files/XwsvvaPtjcTWE8IZ2b8w)

### Grundeinstellungen

<figure><img src="/files/uh2sM38l4pLZ1bzQwoRz" alt=""><figcaption></figcaption></figure>

Aktiviere oder deaktiviere die **Überschrift Produktbeschreibung (1)** und wähle über **Aussehen Überschrift Produktbeschreibung (2)**, ob der Produktname, der Titel oder Priduktname und Titel in Kombination angezeigt werden sollen.


# Dokumente

Der Bereich der Dokumente ist eine Weiterentwicklung der Datenblätter-Funktion des Themes. Neben der Darstellung von eingebetteten PDF-Dateien können nun Dokumente zum Download angeboten werden.

**Eine vollständige Beschreibung zur Nutzung der Dokumente-Funktion findest Du unter:**

{% content-ref url="/pages/aDwICmgj47UP1cyHI5Qq" %}
[Dokumente](/content/detailseite/dokumente)
{% endcontent-ref %}

## Grundeinstellungen

Über das **Aussehen (1)** hast Du die Möglichkeit die Dokumente `Eingebettet/Viewer`, als `Download-Buttons`, `Download-Liste` oder `Download-Tabelle` anzuzeigen.

Dabei entscheidest Du über **Position (2)**, ob die Dokumente im eigenen `Tab`, der `Buybox` oder der `Beschreibung` des Produktes angezeigt werden sollen.

Solltest Du die Darstellung in der Buybox oder Beschreibung wählen, kannst Du einen **Schwellenwert für Tab (3)** definieren, ab wie vielen Dateien Du die Ansicht doch lieber in einem eigenen Tab darstellen möchtest. \
\&#xNAN;*Beispiel: Werden mehr als 4 Dateien angezeigt oder zum Download in der Buybox angezeigt, werden diese Dateien/Dokumente in einen eigenen Tab verschoben. Damit bleibt die Buybox oder die Beschreibung weiterhin übersichtlich.*

Zusätzlich kannst Du nach Belieben eine **Überschrift (4)** über dem Download-Bereich darstellen. Der Text dazu ist natürlich in den Textbausteinen hinterlegt und kann dort individualisiert werden.

<figure><img src="/files/0Lxr2BIx2D8leZJ2Qc63" alt=""><figcaption></figcaption></figure>

Beispiele:

<div><figure><img src="/files/3DN46kyntzEihGo4UIX3" alt=""><figcaption></figcaption></figure> <figure><img src="/files/nOlTNAyrwFsljuFxKjBw" alt=""><figcaption></figcaption></figure> <figure><img src="/files/z3hkJNTy1vvcnVxkM8zE" alt=""><figcaption></figcaption></figure> <figure><img src="/files/0Aaz4fK96bPhfTxAELsw" alt=""><figcaption></figcaption></figure> <figure><img src="/files/TBJBuEF5r1PQBFSQtr5L" alt=""><figcaption></figcaption></figure></div>


# Account


# Übersicht

## Grundeinstellungen

In den Grundeinstellungen des Account-Bereiches lässt sich das Feld für die **Newsletteranmeldung** ausblenden.

<figure><img src="/files/EvuYav3L3lqgjo03p3w0" alt=""><figcaption></figcaption></figure>

Beispiel:

<figure><img src="/files/oEpxKv2z1oUyczUzXFP5" alt=""><figcaption></figcaption></figure>


# Kasse

Der Kasse- oder auch Checkout-Bereich Deines Onlineshops


# Warenkorb

## Basic configuration

Mit der Option **Gesamtmenge (1)** kann festgelegt werden, ob die Zählung im Warenkorb auf der Gesamtanzahl der Produkte oder der Anzahl der Positionen basiert.\
Mit aktiver Option **Versanddetails aufgeklappt (1)** können die Versanddetails im Warenkorb bereits im aufgeklappten Zustand dargestellt werden. \
Mit der Einstellung **Produktnummer-Eingabe (3)** entscheidest Du, ob Du das Eingabefeld `Nicht anzeigen (Standard)`, `Immer anzeigen` oder nur dann anzeigen möchtest, `Wenn Produkte im Warenkorb liegen` .\
Die Option **Merkzettel (4)** ermöglicht das Anzeigen der Merkenfunktion für die Artikel im Warenkorb. Du kannst hier selbst entscheiden, ob Du diese Funktion auch im Warenkorb benötigst. *Beachte, dass die Merkzettelfunktion in Shopware grundsätzlich aktiviert sein muss, wenn die Option angezeigt werden soll.*\
Du kannst ein **Schloss-Symbol bei "Zur Kasse"-Buttons (4)** anzeigen, wenn dein Shop über HTTPS läuft, um das Vertrauen des Kunden zu stärken, da er über eine sichere Verbindung bestellt.

<figure><img src="/files/iQjpmRN9lAOBUWLgJv0C" alt=""><figcaption></figcaption></figure>

Beispiel:

<figure><img src="/files/Z8ASjn59qnoJuP4M6Wjv" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/v34tTEgg1Phne8zffCVF" alt="" width="563"><figcaption></figcaption></figure>


# Offcanvas Warenkorb

## Basic configuration

Die Einstellung **Offcanvas Warenkorb unterdrücken (1)** sorgt dafür, dass der Offcanvas Warenkorb sich nicht öffnet, wenn ein Artikel zum Warenkorb hinzugefügt wird. Das ist immer dann sinnvoll, wenn der Shop so ausgerichtet ist, dass Kunden in der Regel viele Artikel bereits aus dem Listing in den Warenkorb legen. Das ist besonders nützlich, sollte Dein Shop auf B2B ausgerichtet sein.\
Mit der Einstellung **Produktnummer-Eingabe (3)** entscheidest Du, ob Du das Eingabefeld `Nicht anzeigen (Standard)`, `Immer anzeigen` oder nur dann anzeigen möchtest, `Wenn Produkte im Warenkorb liegen` .

Darüber hinaus kannst Du die Informationsdichte im Offcanvas Warenkorb mit den Optionen **Produktnummer (3)**, **Lieferzeit (4)**, **Gutscheincode Eingabe (5)** reduzieren und unnötige Informationen ausblenden.&#x20;

<figure><img src="/files/omwARdHiaHYW7XSzkotG" alt=""><figcaption></figcaption></figure>

Beispiel:

<figure><img src="/files/v1KanfCMk2zA9Df2yowj" alt=""><figcaption></figcaption></figure>


# Kasse

### Grundeinstellungen

Neben dem Standard-Layout des sogenannten Checkouts (Kasse) bietet das Theme ein zusätzliches zweispaltiges **Kasse-Layout (1)**.&#x20;

Die Zusammenfassung in der rechten Seite kann über **Checkout-Zusammenfassung Sticky (2)** beim Scrollen mitlaufend dargestellt werden - so bleibt der "Zahlungspflichtig bestellen" Button auch bei längeren Warenkörben immer im Blick.

Optional können die **Checkout-Schritte (3)** aktiviert werden, um dem Käufer einen Überblick über die drei einfachen Checkout-Abschnitte zu geben.

Oftmals wird der Haken für AGB und Widerruf übersehen, weshalb die **Position der Servicebedingungen (4)** in die Nähe des "Zahlungspflichtig bestellen"-Buttons verschoben werden kann.

Die Länge der Beschreibung der Zahlungs- & Versandarten kann in Feld [**Länge Zahlungs- & Versandarten Beschreibung (5)**](#user-content-fn-1)[^1] definiert werden. Ab 75 Zeichen wird der Text im Standard gekürzt, was manchen Shopbetreiber nicht ausreicht.

Die Felder [**Limit für sichtbare Zahlungsarten (6)**](#user-content-fn-1)[^1] und [**Limit für sichtbare Versandarten (7)**](#user-content-fn-1)[^1] geben an, wie viele Zahlungs- bzw. Versandarten direkt sichtbar sind. Alle weiteren Versandarten sind über "Mehr anzeigen" im Checkout ausklappbar.

<figure><img src="/files/up5zNJGQ69Ba2EGfHGTI" alt=""><figcaption></figcaption></figure>

Beispiel:

<figure><img src="/files/k0dnEtkyLKMCu9ELF1Ww" alt=""><figcaption></figcaption></figure>

[^1]: Im Zuge der Anpassungen an die Barrierefreiheit wurde diese Einstellung in Version 5.0.0 entfernt.


# Grundeinstellungen

{% hint style="info" %}
Anders als der Bereich **Styling** (Theme Konfiguration) werden die Einstellungen eines Themes immer im Eltern-Theme hinterlegt. Ein Child-Theme hat keinen eigenen Bereich mit Einstellungen (Plugin / App-Konfiguration).

[**Wo finde ich den Bereich "Einstellungen"?**](/#schritt-5-einstellungen-plugin-app-konfiguration)
{% endhint %}

## Nicht sichtbare Bilder aufschieben

Auch unter dem Begriff **Lazy-Loading** bekannt - optimiert die Ladezeiten des Shops, indem nicht sichtbare Bilder aufgeschoben werden. Sie werden erst geladen, wenn diese z.B. beim Scrollen kurz davor sind in den Viewport einzutreten. Im Google PageSpeed behebt es die Meldung "Nicht sichtbare Bilder aufschieben".

![](/files/vJtDB2JnM3IC5ztfAyOy)

## Google Fonts Cookie Consent

> ab Theme Version 2.6.0 / nur Pro Version

Wenn aktiv, wird im Cookie Consent Manager ein neuer Cookie Eintrag im Bereich "Komfortfunktionen" mit dem Namen "Google Fonts" erzeugt.

Schriftarten, welche über die Theme-Einstellung "Lade Schriften von Google" bezogen werden, werden erst geladen, wenn der Nutzer seine Einwilligung erteilt hat. Die Darstellung des Shops kann sich dadurch optisch verändern, da als Fallback auf die Systemschriften des Nutzers zurückgegriffen wird.

{% hint style="warning" %}
Aufgrund der technischen Beschränkungen der App, lässt sich diese Funktion bisher nur auf der Pro Version mit self-hosted System umsetzen.
{% endhint %}

<figure><img src="/files/Sq1ZYQKsOCcIJcim6khT" alt=""><figcaption></figcaption></figure>

## Youtube Video Consent

> ab Theme Version 2.8.0

Wenn aktiv, werden YouTube Videos auf der Produkt-Detailseite im Tab Video blockiert, bis der Nutzer beim jeweiligen Video seine Einwilligung erteilt hat. Nach erfolgter Einwilligung durch den Nutzer kann das Video angesehen werden.

<figure><img src="/files/10Bk57gPLPbeAgIuHPLb" alt=""><figcaption></figcaption></figure>

## Youtube Video Vorschaubild

> ab Theme Version 2.9.0

Wenn aktiv, wird das YouTube Video Vorschaubild als Platzhalter der blockierten Videos dargestellt, bis der Nutzer seine Einwilligung zum Video gegeben hat.

<figure><img src="/files/ZYQLrMIeT3pKULvXfmIG" alt=""><figcaption></figcaption></figure>

Beispiel:

<figure><img src="/files/ZFOWYDFrCksg6ara42LW" alt=""><figcaption><p>Blockiertes Video mit Vorschaubild</p></figcaption></figure>

## Twig Syntax erlauben

> Pro Version

Wenn aktiv, erlaubt es die Verwendung der Twig Syntax (Variablen, Textbausteine) in den Zusatzfeldern des Themes. Die Funktion beschränkt sich dabei auf die theme-eigenen Bereiche:

* Produkt > Zusatzinhalte > Produkt Features
* Produkt > Zusatzinhalte > Tab 1 Text
* Produkt > Zusatzinhalte > Tab 2 Text
* Konfiguration > Custom Tab > Tab Text
* Erlebniswelten > Teaser Element > Teaser Text
* Erlebniswelten > Bild-Text Slider Element
* Erlebniswelten > Feature Element > Feature Text

In den Editoren und Eingabefeldern der oben genannten Bereiche ist die Verwendung von Twig-Syntax wie **Twig-Variablen oder Zugriff auf die Konfiguration (1)** oder die Verwendung von **Textbausteinen (2)** erlaubt.

<figure><img src="/files/fF8lrA7OwA4kJ422bg9p" alt=""><figcaption></figcaption></figure>

Die Bearbeitung sollte in der Code-Ansicht des Editors erfolgen.

<figure><img src="/files/eg1VwAeTZiAskc2RvomT" alt=""><figcaption></figcaption></figure>

Beispiel:

<figure><img src="/files/ECc7o2UcYTmYWiggiN5K" alt=""><figcaption></figcaption></figure>


# Suche

{% hint style="info" %}
Anders als der Bereich **Styling** (Theme Konfiguration) werden die Einstellungen eines Themes immer im Eltern-Theme hinterlegt. Ein Child-Theme hat keinen eigenen Bereich mit Einstellungen (Plugin / App-Konfiguration).

[**Wo finde ich den Bereich "Einstellungen"?**](/#schritt-5-einstellungen-plugin-app-konfiguration)
{% endhint %}

## Kategorie-Filter Einstiegspunkt

<figure><img src="/files/ovH2FYjuFyKVcOckrxRK" alt=""><figcaption><p>Kategorie Filter</p></figcaption></figure>

{% hint style="info" %}
Der Kategorie-Filter wird in den Theme-Einstellungen aktiviert. Du findest die Einstellung in den Theme-Einstellungen unter Header > [Suche](/styling/header/suche). Aktiviere dort die Option Kategorie-Filter.
{% endhint %}

Für den Kategorie-Filter in der Suche kannst du einen Einstiegspunkt festlegen, damit die Filterstruktur genau zu deinem Shop passt. Nicht jedes Sortiment ist über klassische Oberkategorien aufgebaut – manche Shops starten die Navigation z. B. erst auf einer Ebene wie „Produkte“ oder nutzen andere Einstiegskategorien. Mit dem **Kategorie-Filter Einstiegspunkt (1)** steuerst du, ab welcher Kategorieebene die Suche Kategorien für den Filter berücksichtigt.

<figure><img src="/files/JuWV3k8R6eeOqXVTSEZs" alt=""><figcaption></figcaption></figure>


# Zusatzfeld Zuweisung


# Zusatzfelder für Details auf der Produktseite

Über die Zusatzfeld Zuweisung kannst Du eigene Zusatzfelder auswählen und in der Buybox der Produkt-Detailseite anzeigen. Lege beliebig viele Zusatzfelder an und weise sie in der Konfiguration zu.

> ab Theme-Version 4.8.0

{% hint style="success" %}
Zusatzfelder können in der Buybox der Produktseite angezeigt werden - **ganz ohne Template-Anpassung.**
{% endhint %}

<figure><img src="/files/YtQr3fX4whxMkxMFjQmu" alt=""><figcaption></figcaption></figure>

{% stepper %}
{% step %}

### Zusatzfeld anlegen

Über *Einstellungen > System > Zusatzfelder* legst Du ein beliebiges Zusatzfeld an.&#x20;

**Set auswählen oder anlegen:** Wähle dazu entweder das bereits bestehende Set `Zusatzinhalte (THEMENAME)` aus, oder erstelle ein eigenes Set. Bei der Anlage eines neuen Sets achte darauf die Verwendung für `Produkte` zuzuweisen.&#x20;

**Zusatzfeld anlegen:** Im gewünschten Set lege über **Neues Zusatzfeld** ein neues Feld vom **Typ (1)** `Textfeld` an. In der Shopware Doku findest Du weitere Informationen zum [Anlegen eines Zusatzfeldes](https://docs.shopware.com/de/shopware-6-de/einstellungen/zusatzfelder#textfeld).

In unserem Beispiel nennen wir das Zusatzfeld `custom_details_example`.

<figure><img src="/files/VHgc0mmhByLasbctxNnG" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Label über Textbaustein festlegen

Wie in der blauen Infomeldung aus Schritt 1 bereits angemerkt, steht Dir nach den Anlage des Zusatzfeldes ein Textbaustein zur Verfügung, welcher in der Storefront als Label ausgegeben werden kann. Über *Einstellungen > Shop > Textbausteine > \[Textbaustein-Set wählen]* kannst Du nach dem technischen Namen Deines Zusatzfeldes **suchen (1)**. Klicke im Kontextmenü auf **Bearbeiten (2)** und hinterlege die Bezeichnung in allen verfügbaren Sprachen.

<figure><img src="/files/TqjoqW6MU3cUJvR9k1L0" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Achte darauf einen **Doppelpunkt** in das Label aufzunehmen, um die Darstellung einheitlich zu halten.
{% endhint %}
{% endstep %}

{% step %}

### Zusatzfeld zuweisen

Über *Erweiterungen > Meine Erweiterungen > Tab: Themes > \[Theme auswählen] > Konfigurieren* gelangst Du in die Einstellungen des Themes. In der Auswahl **Zusatzfelder für Details auf der Produktseite (1)** kannst Du nun das neu angelegte Zusatzfeld suchen (2) und auswählen (3).

<figure><img src="/files/JW4Vgmoaq0a8iCQbiec6" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Inhalt hinterlegen

Damit das Zusatzfeld in der Storefront sichtbar wird, musst Du noch beim jeweiligen Produkt einen Inhalt hinterlegen. Unter *Kataloge > Produkt > \[Produkt wählen] > im Tab: Spezifikationen* findest Du ganz unten die Zusatzfelder. Wähle das Set aus, in welchem das Zusatzfeld angelegt wurde und hinterlege einen Wert (1).

<figure><img src="/files/cM4pjkVBOr4QeCgjVRKU" alt=""><figcaption></figcaption></figure>
{% endstep %}
{% endstepper %}


# Zusatzfelder für Produkt-Dokumente

Über die Zusatzfeld Zuweisung kannst Du Zusatzfelder auswählen und im Datenblätter Tab der Produkt-Detailseite anzeigen. Lege beliebig viele Zusatzfelder an und weise sie in der Konfiguration zu.

> ab Theme-Version 4.8.0

{% hint style="success" %}
Dokumente können über Zusatzfelder im Datenblätter-Tab der Produktseite angezeigt werden - **ganz ohne Template-Anpassung.**
{% endhint %}

<figure><img src="/files/86CuC8qEx2MqeyJZkTNc" alt=""><figcaption></figcaption></figure>

###

{% stepper %}
{% step %}

### Zusatzfeld anlegen

Über *Einstellungen > System > Zusatzfelder* legst Du ein beliebiges Zusatzfeld an.&#x20;

**Set auswählen oder anlegen:** Wähle dazu entweder das bereits bestehende Set `Datenblätter (THEMENAME)` aus, oder erstelle ein eigenes Set. Bei der Anlage eines neuen Sets achte darauf die Verwendung für `Produkte` zuzuweisen.&#x20;

**Zusatzfeld anlegen:** Im gewünschten Set lege über **Neues Zusatzfeld** ein neues Feld vom **Typ (1)** `Medienfeld` an. In der Shopware Doku findest Du weitere Informationen zum [Anlegen eines Zusatzfeldes](https://docs.shopware.com/de/shopware-6-de/einstellungen/zusatzfelder#medium).

In unserem Beispiel nennen wir das Zusatzfeld `custom_details_example`.

<figure><img src="/files/L333MsRyZW9f4WvxSBYC" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Zusatzfeld zuweisen

Über *Erweiterungen > Meine Erweiterungen > Tab: Themes > \[Theme auswählen] > Konfigurieren* gelangst Du in die Einstellungen des Themes. In der Auswahl **Zusatzfelder für Produkt-Datenblätter (1)** kannst Du nun das neu angelegte Zusatzfeld suchen (2) und auswählen (3).

<figure><img src="/files/0q0GlieKfFrXCGKiYArG" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Inhalt hinterlegen

Damit das Zusatzfeld in der Storefront sichtbar wird, musst Du noch beim jeweiligen Produkt einen Inhalt hinterlegen. Unter *Kataloge > Produkt > \[Produkt wählen] > im Tab: Spezifikationen* findest Du ganz unten die Zusatzfelder. Wähle das Set aus, in welchem das Zusatzfeld angelegt wurde und hinterlege eine Datei (1).

<figure><img src="/files/3xTKjdHQCxyaxxyZmsrx" alt=""><figcaption></figcaption></figure>
{% endstep %}
{% endstepper %}


# Social Media Icons

Darstellung von Social Media Icons im Fußbereich der Seite.

{% hint style="info" %}
Anders als der Bereich **Styling** (Theme Konfiguration) werden die Einstellungen eines Themes immer im Eltern-Theme hinterlegt. Ein Child-Theme hat keinen eigenen Bereich mit Einstellungen (Plugin / App-Konfiguration).

[**Wo finde ich den Bereich "Einstellungen"?**](/#schritt-5-einstellungen-plugin-app-konfiguration)
{% endhint %}

## Einrichtung

Im Fußbereich der Seite können Social Media Icons durch Eingabe des Links in den Einstellungen des Themes eingestellt werden.

In den Einstellungen des Themes können für jeden Verkaufskanal Einstellungen zu den Social Media Icons getroffen werden. Dabei kann der Style für die Icons (1) pro Verkaufskanal eingerichtet werden. Dabei hast Du die Wahl zwischen runden, eckigen oder der Darstellung der Icons im Standard.

In den darunterliegenden **Url-Feldern (2)** für den jweilige Social Media Anbieter trägst Du einfach nur noch den Link zu deiner Seite ein. Sobal das Feld einen Wert hat, wird ein Icon dargestellt.

Für verschiedene **Verkaufskanäle (3)** können unterschiedlich Social Media Icons dargestellt werden.

{% hint style="info" %}
Hierbei handelt es sich nur um eine Verlinkung zu den Plattformen und nicht um eine Teilen-Funktion, weshalb die Einbindung datenschutzrechtlich unbedenklich ist.

**Achtung:** Angabe ohne Gewähr. Dies ersetzt keine rechtliche Prüfung Deines Onlineshops.
{% endhint %}

![Einstellungen](/files/dsnazhLaFWzvtJTyOvJ1)

## Positionierung

In den Einstellungen des Themes im Bereich Footer > Grundeinstellungen kannst Du die Positionierung der Social Media Icons beeinflussen:

![](/files/xJ4RUSWRtd9Pjq7XqIKp)

Beispiele:

![Darstellung im Footer Bottom](/files/zG80QVQUwrcUd5xL3pvv)

![Darstellung als eigenständige Footer Spalte](/files/KqGalgfwuHn48Bo53RDe)

## Wo finde ich die Theme Einstellungen?

Du erreichst die Einstellungen über das Dashboard oder über das Kontext-Menü im Bereich Erweiterungen.

![Theme Einstellungen über das Dashboard erreichen](/files/GqxhDrCDKKJB4GEliIOR)

![Theme Einstellungen über das Kontext-Menü der App](/files/zPtenIUIYqsQdnyqJG9n)


# Marketing Text Slider

Animierter Text-Slider im Frontend ausgeben.

{% hint style="info" %}
Anders als der Bereich **Styling** (Theme Konfiguration) werden die Einstellungen eines Themes immer im Eltern-Theme hinterlegt. Ein Child-Theme hat keinen eigenen Bereich mit Einstellungen (Plugin / App-Konfiguration).

[**Wo finde ich den Bereich "Einstellungen"?**](/#schritt-5-einstellungen-plugin-app-konfiguration)
{% endhint %}

## Einrichten

In den Einstellungen kannst Du einen Marketing-Slider pro Verkaufskanal einrichten. Dabei kann im Feld **Marketing Text (2)** mehrere Zeilen Text eingegeben werden. Jede Zeile rotiert dann im Text-Slider als eigener Slide. Durch die Bewegung erzielst Du Aufmerksamkeit.

Zusätzlich kann ein Link als Button implementiert werden. Neben dem der **Beschriftung des Buttons (3)** und dem eigentlichen **Link (4)** kannst Du bestimmen, ob sich der Link in einem **neuen Fenster (5)** oder im selben Fenster öffnet. Vergiss nicht den Marketing Slider zu **aktivieren (1)**.

![](/files/MbTCFpn1DzhSvi1bbVTX)

## Übersetzung der Inhalte

Texte in der Theme-Konfiguration lassen sich zur Mehrsprachigkeit über die Textbausteine in der Storefront in verschiedenen Sprachen ausliefern. Folge den blauen Hilfe-Icons, um direkt in den Textbaustein zu springen.

{% hint style="success" %}
Verwende in der Übersetzung des **Marketing Text (2)** Semikolons als Trennzeichen einzelner Zeilen. Beispiel mit drei Text-Slides / Zeilen:

Lorem ipsum dolor sit amet\*\*;\*\* consetetur sadipscing elitr\*\*;\*\* sed diam nonumy eirmod
{% endhint %}

Mehr Informationen zur Mehrsprachigkeit haben wir in einem eigenen [Tutorial zum Theme Mehrsprachigkeit](/content/mehrsprachigkeit) zusammengestellt.

## Positionierung

In den Einstellungen des Themes im Bereich Allgemein > Grundlayout > Grundeinstellungen kannst Du die Positionierung des Marketing Slider beeinflussen.

Da es sich um ein Element der Top Bar handelt, beeinflusst die **Top Bar Positionierung** auch die Position des Marketing Sliders

![](/files/4PaOMj7u0jQGk37j3thv)

Beispiele:

![Marketing Slider in der Offcanvas Topbar](/files/ZV66gDi6rZNiZ35S6M8s)

![Marketing Slider als Topbar](/files/grtbhjEVXGi8p4vgRUFX)


# Custom Tab Detailseite

Globaler Tab auf Artikel Detailseiten

{% hint style="info" %}
Anders als der Bereich **Styling** (Theme Konfiguration) werden die Einstellungen eines Themes immer im Eltern-Theme hinterlegt. Ein Child-Theme hat keinen eigenen Bereich mit Einstellungen (Plugin / App-Konfiguration).

[**Wo finde ich den Bereich "Einstellungen"?**](/#schritt-5-einstellungen-plugin-app-konfiguration)
{% endhint %}

*Wir unterscheiden zwischen der Darstellung eines globalen Tabs auf allen Produktseiten und der Darstellung von Tabs mit unterschiedlichen Inhalten pro Produkt:*

{% hint style="success" %}
**Custom Tabs pro Produkt möglich**

Zusätzlich zum Custom Tab aus der Theme-Einstellung können weitere individuelle Tabs im Produkt hinterlegt werden um für jedes Produkt individuelle Inhalte bereitzustellen.
{% endhint %}

{% content-ref url="/pages/Np6jSAoqugOgsRrfF0Vm" %}
[Custom Tabs](/content/detailseite/custom-tabs)
{% endcontent-ref %}

## Einrichten

In den Einstellungen kannst Du einen globalen Tab auf den Detailseite Deiner Artikel ausgeben. Dazu musst Du nur einen **Titel (2)** für den Tab und einen **Inhalt (3)** eingeben. Vergiss nicht, den Tab auch auf **aktiv (1)** zu setzen.

In diesem Tab kannst Du globale Hinweise zu Versand oder Zahlung implementieren oder andere zusätzliche Inhalte ausspielen, welche die Conversion Deines Shops verbessern.

![](/files/RtK8VPdUUOFNgL3GKShL)

Beispiel:

![](/files/cGViUf8BS5LPDzT5Avrv)


# Custom Spalten (Footer)

Bis zu 3 zusätzliche Spalten im Footer kannst Du mit individuellen Inhalten befüllen.

{% hint style="info" %}
Anders als der Bereich **Styling** (Theme Konfiguration) werden die Einstellungen eines Themes immer im Eltern-Theme hinterlegt. Ein Child-Theme hat keinen eigenen Bereich mit Einstellungen (Plugin / App-Konfiguration).

[**Wo finde ich den Bereich "Einstellungen"?**](/#schritt-5-einstellungen-plugin-app-konfiguration)
{% endhint %}

## Einrichten

In den Einstellungen kannst Du eine globale Spalte im Footer implementieren. Jede Spalte hat einen **Titel (2)** und einen **Inhalt (3)**. Die Inhalte lassen sich pro Verkaufskanal mit unterschiedlichen Inhalten befüllen und pro Verkaufskanal **aktivieren oder deaktivieren (1)**.

In dieser Spalte kannst Du einfache Texte oder auch Siegel von Trust-Anbietern einpflegen.

![](/files/d6SrLLPJW5guUsezaRos)

Beispiel:

![Optionale Spalte im Footer](/files/TpLS6eWrxgZu4PZzNsBR)


# Eigener Code

In den Einstellungen des Themes kannst Du zusätzlichen CSS Code und Javascript Code hinterlegen.

{% hint style="info" %}
Anders als der Bereich **Styling** (Theme Konfiguration) werden die Einstellungen eines Themes immer im Eltern-Theme hinterlegt. Ein Child-Theme hat keinen eigenen Bereich mit Einstellungen (Plugin / App-Konfiguration).

[**Wo finde ich den Bereich "Einstellungen"?**](/#schritt-5-einstellungen-plugin-app-konfiguration)
{% endhint %}

## CSS Code

Kleinere Anpassungen lassen sich in den Einstellungen des Themes hinterlegen. Neben der Verlinkung externer CSS Dateien kann auch CSS eingetragen werden.

{% hint style="info" %}
**Bei Verwendung eines Child-Themes:**

Hierzu wird immer die Theme Einstellung des **Eltern-Themes** genutzt. Ein Child-Theme hat keine eigenen Einstellungen - jedoch eine Styling Konfiguration.\
\
\&#xNAN;*Wo finde ich die Einstellungen? <https://themedocs-sw6.zenit.design/#schritt-5-einstellungen-plugin-konfiguration>*
{% endhint %}

<figure><img src="/files/F4BzwLk8XoTXoWRs6zLr" alt=""><figcaption></figcaption></figure>

### CSS Dateien (1)

```html
<link href="https://.../style.css" rel="stylesheet">
```

### CSS Code (2)

```css
body {
    background: #ffffff;
}
```

*Es sind keine \<style>-Tags zu setzen.*

## Javascript Code

Kleinere Anpassungen und Funktionen lassen sich in den Einstellungen des Themes hinterlegen. Dabei kannst Du zwischen dem Verlinken von **externen Javascript Dateien** und einbetten von Inline **Javascript Code** wählen.

Auch kannst Du zwischen der Einbindung im \<Head/>-Bereich der Seite und dem Footer-Bereich wählen. Manche Anwendungen müssen in den \<Head/>-Bereich eingebunden werden, andere Scripte wiederum sollten in den Footer um das Laden der Seite nicht zu verzögern.

{% hint style="info" %}
**Bei Verwendung eines Child-Themes:**

Hierzu wird immer die Theme Einstellung des **Eltern-Themes** genutzt. Ein Child-Theme hat keine eigenen Einstellungen - jedoch eine Styling Konfiguration.\
\
\&#xNAN;*Wo finde ich die Einstellungen? <https://themedocs-sw6.zenit.design/#schritt-5-einstellungen-plugin-konfiguration>*
{% endhint %}

<figure><img src="/files/Qdbq7qmCFIEPeSj9XgXS" alt=""><figcaption></figcaption></figure>

### Head Javascript-Dateien (1)

```markup
<script src="https://.../javascript.js"></script>
```

### Head javascript Code (2)

```javascript
// JavaScript Code
console.log('Hello World');
```

*Es sind keine \<script>-Tags zu setzen.*

### Footer Javascript-Dateien (3)

```markup
<script src="https://.../javascript.js"></script>
```

### Footer javascript Code (4)

```javascript
// JavaScript Code
console.log('Hello World');

```

*Es sind keine \<script>-Tags zu setzen.*


# Erlebniswelten




---

[Next Page](/llms-full.txt/1)