# Herzlich Willkommen

Du hast dich für eine unserer Erweiterungen entschieden – Herzlichen Glückwunsch! Wir freuen uns dich als Teil der Community begrüßen zu dürfen.

### Theme Nutzer

Unsere Themes basieren alle auf der gleichen Konfigurationsbasis und zeichnen sich durch stetige Weiterentwicklung, einer Vielzahl von [Konfigurationsmöglichkeiten](/theme-konfiguration) und bereits [enthaltenen Features](/enthaltene-erweiterungen), sowie ausgezeichnete Erweiterbarkeit mit Drittanbieter Apps aus.

Für dich sehen viele Shops gleich aus? Nicht mit uns! Mittels modernem und vor allem durchdachtem Design erlebst du mit unserem Theme E-Commerce auf höchstem Niveau.

Lass uns direkt mit der Einrichtung starten! Beachte jedoch, dass im Laufe der Dokumentation immer wieder Fachbegriffe auftauchen werden. Damit du die Dokumentation optimal nutzen kannst, empfehlen wir dir dich parallel mit den notwendigen Fachbegriffen über unsere [Academy](/academy/fachbegriffe) vertraut zu machen. Diese werden an jeder Stelle in der Dokumentation entsprechend verlinkt. Somit kannst du die Theme Konfiguration optimal nutzen und verstehst die Auswirkungen auf deinen Online Shop noch besser.

### App Nutzer

Lass uns nicht lange um den heißen Brei reden und starten wir direkt mit der Einrichtung! Am linken Rand kannst du die entsprechende App wählen, um weitere Informationen zur Einrichtung zu erfahren.


# Einrichtung

Damit du unser Theme in deinem Shopware 6 Shop verwenden kannst, musst du es zunächst über den [Shopware Store](https://store.shopware.com/atl9522843782617m/katana.-theme.html) erwerben. Das Theme ist sowohl für Cloud- als auch als Self-Hosted-Shops einsetzbar und bietet gleichermaßen den selben Funktionsumfang.

### Shopware Account verbinden

Nachdem du das Theme erfolgreich über den Shopware Store erworben hast, kannst du dich in die Administration deines Shopware 6 Shops bewegen.

Als nächstes begibst du dich zu "Erweiterungen > Meine Erweiterungen" und klickst auf den Tab "Shopware Account". Hier verbindest du zunächst deinen Shopware Account mit dem Shop.

### Installation

Im nächsts Schritt klickst du auf den Tab "Themes". Dort solltest du das Theme wie folgt sehen können:

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

Mit Klick auf "Installieren" kannst du das Theme nun installieren. Anschließend aktivierst du das Theme über den Schalter-Button neben dem Icon am linken Rand.

### Theme zuweisen

Damit du das Theme nun verwenden kannst ist immer ein [Verkaufskanal](https://docs.shopware.com/de/shopware-6-de/einstellungen/Verkaufskanaele) der Art "Storefront" nötig. Dieser kommt automatisch mit jeder Shopware 6 Installation und ist in der linken Menüleiste deiner Administration zu sehen. Das kleine Shop Icon links neben dem Verkaufskanal zeigt dir diesen an.

Klicke nun auf deinen Verkaufskanal und im oberen Teil der Seite auf "Theme". Nun kannst du mit dem "Theme ändern" Button auf das eben installierte Theme wechseln. Mit Klick auf "Theme übernehmen" bestätigst du den Wechsel. Abschließend drückst du auf "Speichern" am rechten oberen Bildschirmrand.


# Theme Konfiguration

Die Theme Konfiguration bietet dir eine breite Vielfalt an Einstellungsmöglichkeiten für deinen Shop. Alle Anpassungen beziehen sich dabei auf die [Storefront](/academy/fachbegriffe/storefront).

Nachdem du die [Einrichtung](/einrichtung) erfolgreich abgeschlossen hast, steht dir das Theme in der Administration am linken Rand unter "Inhalte > Themes" zur Verfügung.&#x20;

Alternativ erreichst du die Theme Konfiguration auch direkt über deinen Verkaufskanal, der sich ebenfalls am linken Rand deiner Administration befindet. Dort angekommen begibst du dich auf den Tab "Theme". Nun gelangst du mit Klick auf "Theme bearbeiten" zur Konfigurations-Übersicht.

<figure><img src="/files/Q7oNKMuKDEyiFBYND0zf" alt=""><figcaption><p>Übersicht der Theme Konfiguration</p></figcaption></figure>

Die Theme Konfiguration lässt sich in insgesamt acht Abschnitte untergliedern, auf welche wir nun in den folgenden Lektionen genauer eingehen werden. Jeder dieser acht Abschnitte wird dabei als Tab dargestellt. Diese Tabs bestehen wiederum aus einzelnen Konfigurationsfeldern.&#x20;

Jedes dieser Felder besitzt im Übrigen ein kleines blaues Fragezeichen als Hilfestellung. Diese Hilfestellung erklärt dir das Feld noch einmal kurz und knapp, sodass du die Dokumentation bei späteren Anpassungen nicht erneut aufsuchen musst, falls du die genaue Funktion vergessen hast. Lass uns nun mit der Konfiguration beginnen! Fangen wir mit dem Tab "Allgemein" an.

{% hint style="info" %}
Sollte etwas für dich unklar sein, zögere nicht uns zu kontaktieren! Wir sind stets daran interessiert unsere Dokumentation weiter zu verbessern. Unsere Kontaktmöglichkeiten findest du am linken Rand ganz unten unter dem Reiter Support.
{% endhint %}


# Allgemein

{% content-ref url="/pages/jUtWmx35X6T41jeQAwXu" %}
[Verwaltung](/theme-konfiguration/allgemein/verwaltung)
{% endcontent-ref %}

{% content-ref url="/pages/iOhX2mB6W0DgS9ch6mfa" %}
[Theme-Farben](/theme-konfiguration/allgemein/theme-farben)
{% endcontent-ref %}

{% content-ref url="/pages/iHqMqwiYZYV7FQdPEqhA" %}
[Status-Ausgaben](/theme-konfiguration/allgemein/status-ausgaben)
{% endcontent-ref %}

{% content-ref url="/pages/3Pk44nL3JyjUehET6vNZ" %}
[Typografie](/theme-konfiguration/allgemein/typografie)
{% endcontent-ref %}

{% content-ref url="/pages/7ktQjKUzd15ZmznGKyO1" %}
[E-Commerce](/theme-konfiguration/allgemein/e-commerce)
{% endcontent-ref %}

{% content-ref url="/pages/gWUbowI8KQIkKFivGvky" %}
[Medien](/theme-konfiguration/allgemein/medien)
{% endcontent-ref %}

{% content-ref url="/pages/CHfYMzuw6iZdQ1BTkpI5" %}
[Layout](/theme-konfiguration/allgemein/layout)
{% endcontent-ref %}

{% content-ref url="/pages/YmbCVasLOSrFF9kfrNmh" %}
[Produktbilder](/theme-konfiguration/allgemein/produktbilder)
{% endcontent-ref %}

{% content-ref url="/pages/6nvhSlfMNo53V44EvoNY" %}
[Formulare](/theme-konfiguration/allgemein/formulare)
{% endcontent-ref %}

{% content-ref url="/pages/wrUOAqpeHSYbadUDyXlI" %}
[Google Bewertungen](/theme-konfiguration/allgemein/google-bewertungen)
{% endcontent-ref %}

{% content-ref url="/pages/hnWkjvMANRJsDnl3rfa2" %}
[Social](/theme-konfiguration/allgemein/social)
{% endcontent-ref %}


# Verwaltung

Gehen wir zunächst auf den ersten, etwas unscheinbaren Abschnitt ein:

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

Standardmäßig lässt sich das Theme beliebig vielen [Verkaufskanälen](https://docs.shopware.com/de/shopware-6-de/einstellungen/Verkaufskanaele) der Art "Storefront" zuweisen. Im Umkehrschluss heißt das für dich, dass du mehrere Shops mit nur einer Theme Lizenz betreiben kannst! So kannst du bspw. über das angehängte Kontext-Menü das Theme duplizieren und umbenennen, sodass du es deinen anderen Verkaufskanälen entsprechend anpassen kannst.

Beachte jedoch, dass jedes Theme Duplikat, auch "Child Theme" genannt, die Einstellungen von diesem Theme automatisch vererben wird. Somit nennt man das Ursprungs-Theme, auch "Eltern-" oder "Parent-Theme". Im Duplikat selbst, welches du unter "Inhalte > Themes" anschließend einsehen kannst, kannst du die Vererbungen aufheben und anpassen.

{% hint style="warning" %}
Außerdem kannst du das Theme auf seine Standard Werte zurücksetzen. Beachte jedoch, dass du das Theme danach erneut speichern musst, damit die Standard Werte wieder aktiv werden.
{% endhint %}


# Theme-Farben

### Übersicht

Die Farben, die du hier hinterlegst spiegeln sich an unterschiedlichen Stellen deines Shops wider.

### Konfiguration

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

<details>

<summary>Primärfarbe</summary>

Dies ist die Hauptfarbe deines Shops. Sie zieht zieht sich wie ein roter Faden durch alle Unterseiten und färbt verschiedene Elemente in den hier hinterlegten Wert. Ganz konkret sind dies bspw. die [Buttons](/academy/fachbegriffe/button), die [Top Bar](/academy/fachbegriffe/top-bar) oder auch die [Ankündigungsleiste](/academy/fachbegriffe/ankundigungsleiste).

***

[Variable:](/academy/fachbegriffe/variable) `$sw-color-brand-primary`

</details>

<details>

<summary>Sekundärfarbe</summary>

Die Sekundärfarbe dient als Akzentfarbe und tritt an vereinzelten Stellen in deinem Online Shop auf. Ein Beispiel hierfür ist der [Button](/academy/fachbegriffe/button) des Gutschein-Einlösefeldes im [Offcanvas](/academy/fachbegriffe/offcanvas)-Warenkorb.

***

[Variable:](/academy/fachbegriffe/variable) `$sw-color-brand-secondary`

</details>

<details>

<summary>Rahmen</summary>

Wie der Name schon verrät ist diese Farbkonfiguration für die Rahmen in deinem Online Shop verantwortlich. Diese kannst du bspw. an der Trennlinie auf der [Produkt Detailseite](/academy/fachbegriffe/produkt-detailseite) oder im [Warenkorb](/academy/fachbegriffe/warenkorb) sehen.

***

[Variable:](/academy/fachbegriffe/variable) `$sw-border-color`

</details>

<details>

<summary>Hintergrund</summary>

Dies ist die Hintergrundfarbe deines Shops auf allen Seiten. Wir empfehlen diesen komplett weiß oder in einem leichten hellgrau zu halten. Andernfalls kann es schnell passieren, dass der Hintergrund zu stark ablenkt.

***

[Variable:](/academy/fachbegriffe/variable) `$sw-background-color`

</details>

<details>

<summary>Browser-Farbe</summary>

Mit dieser Einstellung lässt sich die mobile Browser-Farbe anpassen. Jedoch unterstützt nicht jeder Browser dieses Feature. Daher kann unter Umständen in manchen Browsern immer noch eine Standard-Systemfarbe dargestellt werden.

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

</details>


# Status-Ausgaben

### Übersicht

Die Status-Ausgaben treten bei Interaktion mit dem Online Shop an unterschiedlichen stellen auf. Im Allgemeinen sind dies Meldungen, welche den Besucher über verschiedene Ereignisse in deinem Shopware Shop informieren. Im folgenden siehst du ein paar Beispiele:

<div align="center"><figure><img src="/files/DijbIW57HsiarmIXyHPv" alt="" width="375"><figcaption><p>Erfolgreiche Status-Ausgabe</p></figcaption></figure> <figure><img src="/files/g7yAzo6nLYbF157zC0IT" alt="" width="375"><figcaption><p>Informative Status-Ausgabe</p></figcaption></figure></div>

<div><figure><img src="/files/ssKuz3PwTV8WFGLhyZLQ" alt="" width="372"><figcaption><p>Warnende Status-Ausgabe</p></figcaption></figure> <figure><img src="/files/X32EMKy4vdxbgjo7qGtj" alt="" width="373"><figcaption><p>Fehlerhafte Status-Ausgabe</p></figcaption></figure></div>

### Konfiguration

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

<details>

<summary>Erfolg</summary>

Die Farbe für erfolgreiche Status-Ausgaben.

***

[Variable:](/academy/fachbegriffe/variable) `$sw-color-success`

</details>

<details>

<summary>Information</summary>

Die Farbe für informative Status-Ausgaben.

***

[Variable:](/academy/fachbegriffe/variable) `$sw-color-info`

</details>

<details>

<summary>Hinweis</summary>

Die Farbe für warnende Status-Ausgaben.

***

[Variable:](/academy/fachbegriffe/variable) `$sw-color-warning`

</details>

<details>

<summary>Fehler</summary>

Die Farbe für fehlerhafte Status-Ausgaben.

***

[Variable:](/academy/fachbegriffe/variable) `$sw-color-danger`

</details>


# Typografie

Übersicht

In diesem Abschnitt findest du alles was mit dem Schriftbild deines Online Shops zu tun hat. So kannst du hier Fließtext, Überschriften und Links nach deinen Vorstellungen anpassen.&#x20;

### Konfiguration

<figure><img src="/files/1jKGS20M8ZtIQdgYHldB" alt=""><figcaption></figcaption></figure>

<details>

<summary>Schriftart Text</summary>

An dieser Stelle hinterlegst du die Schriftart für deinen Fließtext. Der Name der Schriftart muss hierbei in einfachen Anführungszeichen stehen. Standardmäßig ist hier die Schriftart 'Open Sans' integriert.

Anschließen empfiehlt es sich immer kommagetrennt mit `system-ui, sans-serif` oder `system-ui, serif` abzuschließen. Dies ist die Browser Ausweichschriftart, falls die eigentliche Schriftart nicht geladen werden konnte. Je nachdem ob du eine serifen oder serifenlose Schriftart hinterlegst, wählst du den entsprechenden Wert.

***

Bitte beachte, dass sich die Schriftart, welche du verwenden möchtest, auch auf deinem Server befindet. Diese lässt sich entweder händisch oder mit einer App aus dem Shopware Store hochladen. Eine direkte Einbindung über einen Google Link empfehlen wir aus datenschutzrechtlichen Gründen nicht. Voreingestellte verfügbare Schriftarten sind: 'Open Sans', 'Raleway' und 'Inter'.

</details>

<details>

<summary>Textfarbe</summary>

Dies ist die verwendete Schriftfarbe für deinen Fließtext im Shop.

***

[Variable:](/academy/fachbegriffe/variable) `$sw-text-color`

</details>

<details>

<summary>Schriftart Überschrift</summary>

An dieser Stelle hinterlegst du die Schriftart für deine Überschriften. Der Name der Schriftart muss hierbei in einfachen Anführungszeichen stehen. Standardmäßig ist hier die Schriftart 'Raleway' integriert.

Anschließen empfiehlt es sich immer kommagetrennt mit `system-ui, sans-serif` oder `system-ui, serif` abzuschließen. Dies ist die Browser Ausweichschriftart, falls die eigentliche Schriftart nicht geladen werden konnte. Je nachdem ob du eine serifen oder serifenlose Schriftart hinterlegst, wählst du den entsprechenden Wert.

***

Bitte beachte, dass sich die Schriftart, welche du verwenden möchtest, auch auf deinem Server befindet. Diese lässt sich entweder händisch oder mit einer App aus dem Shopware Store hochladen. Eine direkte Einbindung über einen Google Link empfehlen wir aus datenschutzrechtlichen Gründen nicht. Voreingestellte verfügbare Schriftarten sind: 'Open Sans', 'Raleway' und 'Inter'.

</details>

<details>

<summary>Überschriftfarbe</summary>

Dies ist die verwendete Schriftfarbe für deine Überschriften im Shop.

***

[Variable:](/academy/fachbegriffe/variable) `$sw-headline-color`

</details>

<details>

<summary>Link Style</summary>

Das Theme bietet dir die Möglichkeit deine Links in unterschiedlichen Designs darzustellen. Diese wirken sich ins besondere auf den [Hover-Effekt](/academy/fachbegriffe/hover-effekt) aus. Diesen kannst du dir bspw. auf der [Produkt Detailseite](/academy/fachbegriffe/produkt-detailseite) am Hinweis "Preise inkl. MwSt. zzgl. Versandkosten" ansehen.

***

Unterstrichen:

<img src="/files/BzeOjDGnzLdOEJ6b96Wm" alt="Katana" data-size="original">

Unterstrichen mit Animation:

<img src="/files/8UW4POO0btYz03TiBmKu" alt="Bonsai" data-size="original">

</details>

<details>

<summary>Link Farbe</summary>

Dies ist die verwendete Schriftfarbe für deine Links im Shop.

***

[Variable:](/academy/fachbegriffe/variable) `$atl-link-color`

</details>

<details>

<summary>Link Dekorations Farbe</summary>

Die Link Dekorations Farbe stellt die Farbe der Unterstreichung deiner Links dar.

</details>

<details>

<summary>Kontrast Schwellenwert</summary>

Das Kontrastverhältnis bestimmt, wann die Helligkeit der Farbe von "dunkel" zu "hell" wechselt.&#x20;

Akzeptable Werte der Web Content Accessibility Guidelines (WCAG) 2.0 sind 3, 4.5 und 7. Dieser Wert berechnet, wann eine Vordergrundfarbe auf einem Hintergrund "dunkel" oder "hell" dargestellt wird. Beispielsweise errechnet sich so die Textfarbe auf einem Primärbutton.

<img src="/files/fmNOuFmENMfkTzD9cOfs" alt="" data-size="original">

</details>


# E-Commerce

### Übersicht

In diesem Bereich kannst du die wichtigsten E-Commerce Farben in deinem Shop definieren. Dazu gehören deine Preisauszeichnungen, sowie die [Kaufen-Buttons](/academy/fachbegriffe/button), welche an unterschiedlichen Stellen in deinem Shop vorkommen.

### Konfiguration

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

<details>

<summary>Preis</summary>

Diese Farbe wird für jede Preisauszeichnung in deinem Shop verwendet.

***

Hier wird standardmäßig die Textfarbe als [Variable](/academy/fachbegriffe/variable) übernommen, welche du im Abschnitt [Typografie](/theme-konfiguration/allgemein/typografie#textfarbe) definiert hast.

</details>

<details>

<summary>Kaufen-Button</summary>

Dieses Feld definiert die Farbe deiner [Kaufen-Buttons](/academy/fachbegriffe/button).

***

Hier wird standardmäßig die Primärfarbe als [Variable](/academy/fachbegriffe/variable) übernommen, welche du im Abschnitt [Theme-Farben](/theme-konfiguration/allgemein/theme-farben#primaerfarbe) definiert hast.

</details>

<details>

<summary>Kaufen-Button-Text</summary>

Dies ist die Textfarbe innerhalb deiner [Kaufen-Buttons](/academy/fachbegriffe/button).

</details>

<details>

<summary>Bewertungs-Icon Farbe</summary>

Mit dieser Einstellung kannst du die Farbe der Bewertungs-Sterne anpassen, welche an unterschiedlichen Stellen im Shop angezeigt werden.

</details>

<details>

<summary>Details-Button</summary>

Dieses Feld definiert die Farbe deiner [Details-Buttons](/academy/fachbegriffe/button).

</details>

<details>

<summary>Details-Button-Text</summary>

Dies ist die Textfarbe innerhalb deiner [Details-Buttons](/academy/fachbegriffe/button).

</details>


# Medien

### Übersicht

Dieser Abschnitt ermöglicht dir dein eigenes Logo in deinen Shopware Shop zu integrieren. Standardmäßig sind hier Platzhalter definiert, welche du einfach austauschen kannst. Hebe dafür die Bildverknüpfung einfach mit dem "✕" an der rechten Seite auf.

{% hint style="success" %}
Falls vorhanden empfehlen wir dir `.svg` Dateien für deine Medien an dieser Stelle zu verwenden. Diese bieten dir i.d.R. die beste Auflösung auf eine kleine Dateigröße.
{% endhint %}

### Konfiguration

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

<details>

<summary>Desktop</summary>

Das Logo, welches du an dieser Stelle hinterlegst, wird nur für Desktop Bildschirme angezeigt.

</details>

<details>

<summary>Tablet</summary>

Das Logo, welches du an dieser Stelle hinterlegst, wird nur für Tablets angezeigt.

</details>

<details>

<summary>Mobil</summary>

Das Logo, welches du an dieser Stelle hinterlegst, wird nur für Smartphones angezeigt.

</details>

<details>

<summary>App- &#x26; Share-Icon</summary>

Das Logo, welches du an dieser Stelle hinterlegst, wird als Vorschau angezeigt, wenn dein Shop in sozialen Netzwerken geteilt wird.

</details>

<details>

<summary>Favicon</summary>

Das Logo, welches du an dieser Stelle hinterlegst, wird im Browser Tab und in den Suchresultaten der Suchmaschine angezeigt.

</details>

<details>

<summary>Footer</summary>

Das Logo, welches du an dieser Stelle hinterlegst, wird in deinem [Footer](/academy/fachbegriffe/footer) angezeigt. Standardmäßig wird dort dein Desktop Logo verwendet. Ein abweichendes Bild kann jedoch Sinn machen. Beispielsweise wenn du in der [Footer-Konfiguration](/theme-konfiguration/footer/layout#farben) einen dunklen Hintergrund verwendest und dein Logo unterhalb der [Service-Hotline](/theme-konfiguration/footer/spalten#service-hotline-1) somit nicht mehr gut zu erkennen wäre.

</details>

<details>

<summary>Checkout</summary>

Das Logo, welches du an dieser Stelle hinterlegst, wird in deinem [Checkout](/academy/fachbegriffe/checkout) angezeigt. Standardmäßig wird dort dein Desktop Logo verwendet. Ein abweichendes Bild kann jedoch Sinn machen. Beispielsweise wenn du in der [Header-Konfiguration](/theme-konfiguration/header/header#farben) einen dunklen Hintergrund verwendest und dein Logo somit nicht mehr gut zu erkennen wäre.

</details>


# Layout

### Übersicht

Der Layout-Abschnitt umfasst allgemeine Einstellungen, welche in deinem Shop global Anwendung finden.

### Konfiguration

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

<details>

<summary>Maximale Containerbreite (in px)</summary>

Mit diesem Feld definierst du die globale Breite deines Shops. Das folgende Bild veranschaulicht das ganze etwas besser:

<img src="/files/0sSWI0wpRdY4uukEWEpM" alt="" data-size="original">

</details>

<details>

<summary>Abgerundete Ecken (in px)</summary>

Mit dem Theme entstehen Rahmen und Ecken an unterschiedlichen Elementen und Stellen in deinem Shop. Ein Beispiel hierfür sind die [Buttons](/academy/fachbegriffe/button). Mit dieser Option kannst du festlegen, ob und wie stark deine Ecken abgerundet werden sollen. Je höher der Wert, desto stärkere Rundungen entstehen.

</details>

<details>

<summary>Icon-Set</summary>

Das gewählte Icon-Set bietet dir teilweise unterschiedlich aussehende [Icons](/academy/fachbegriffe/icon) für deinen Shop. Folgende Bilder veranschaulichen dir beispielhaft die unterschiedlichen Icons für die [Header](/academy/fachbegriffe/header) Aktionen:

***

Icon-Set 1:

<img src="/files/h6Tv1zdMTY0ghVAT3Gyb" alt="Katana Icon-Set" data-size="original">

Icon-Set 2:

<img src="/files/M5FYnIEX1KsAbqJN7Smn" alt="" data-size="original">

Icon-Set 3:

<img src="/files/iEkZJuag8iO8iXa6bTYO" alt="" data-size="original">

</details>

<details>

<summary>Button Hover Effekt</summary>

Mit dieser Option kannst du unterschiedliche [Hover Effekte](/academy/fachbegriffe/hover-effekt) für deine [Buttons](/academy/fachbegriffe/button) festlegen.

***

Standard:

<img src="/files/NWRDKhxu0haJPo6orCCg" alt="" data-size="original">

Schimmer:

<img src="/files/l4uCzGwGDhymQ9A6Qh6B" alt="" data-size="original">

</details>

<details>

<summary>Schatten</summary>

Dieser Wert repräsentiert die Farbe und Härte deiner Schatten an unterschiedlichen Stellen in deinem Shop.

</details>

<details>

<summary>Scroll-Up Button</summary>

**Anzeigen**\
Mit dieser Einstellung kannst du den Scroll-Up [Button](/academy/fachbegriffe/button) in deinem Shop einblenden. Dieser erscheint rechts unten sobald der Besucher die Seite ein wenig nach unten scrollt. Er ermöglicht es mit einem Klick automatisch wieder ganz nach oben zur Seite zu gelangen.

**Ausblenden**\
Der Scroll-Up-Button wird deaktiviert.

</details>


# Produktbilder

### Übersicht

Gute Produktbilder sind im E-Commerce das A und O. Treffe daher in diesem Abschnitt die richtige Konfiguration zur optimalen Darstellung deiner Artikelbilder auf allen Endgeräten.

### Konfiguration

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

<details>

<summary>Seitenverhältnis der Produktbilder</summary>

Damit das Theme die Produktbilder an unterschiedlichen Stellen auch richtig skalieren kann, ist es notwendig hier das entsprechende Seitenverhältnis zu hinterlegen, in welchem du deine Artikelbilder hochgeladen hast. Der Standardwert ist hierbei "1:1 Quadratisch".

</details>


# Formulare

### Übersicht

Hier kannst du Farbkonfigurationen für deine Formularfelder vornehmen. Diese findest du bspw. auf der Login- und Registrierungs-Seite.

### Konfiguration

<figure><img src="/files/3WZ1v6XbzxjbyiJ91SHS" alt=""><figcaption></figcaption></figure>

<details>

<summary>Rahmen</summary>

Dieses Feld stellt die Rahmenfarbe deiner Formularfelder dar.

</details>

<details>

<summary>Rahmen Fokus</summary>

Diese Rahmenfarbe erscheint, wenn du ein Formularfeld anklickst/fokussierst.

</details>


# Google Bewertungen

### Übersicht

Mit dem Theme lassen sich deine Google Bewertungen vollkommen kostenlos in nur wenigen Schritten integrieren. Standardmäßig werden die Bewertungen in der [Top Bar](/academy/fachbegriffe/top-bar) ausgegeben. Im folgenden Video zeigen wir dir alle notwendigen Schritte. Nachfolgend findest du die einzelnen Schritte inkl. Links ebenfalls noch in Textform aufgeführt.

{% embed url="<https://www.youtube.com/watch?v=EsBTKFvDuDE>" %}

### Konfiguration

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

<details>

<summary>Google Maps API-Schlüssel</summary>

Ermittle deinen Google Maps API-Schlüssel wie folgt:

1. Logge dich in der [Google Cloud Platform](https://console.cloud.google.com/) mit deinem Unternehmenskonto an.
2. Erstelle, soweit noch nicht vorhanden, ein Projekt an der oberen Leiste.
3. Klicke auf das Navigationsmenü in der linken oberen Ecke und danach auf "Abrechnung".
4. Erstelle, soweit noch nicht vorhanden, ein Rechnungskonto inkl. Zahlungsmethode. Reale Kosten werden hierbei nicht auf dich zukommen. Das Theme fragt die Bewertungen nur einmal pro Tag ab, aktualisiert sie ggf. und speichert diese in Shopware 6 zwischen. Dies bewegt sich im kostenlosen Rahmen von Google.
5. Öffne das Navigationsmenü erneut und begebe dich zu "APIs und Dienste > Bibliothek".
6. Suche in der Suchleiste nach "Places API".
7. Klicke auf das entsprechende Suchergebnis und aktiviere die API.
8. Aktiviere zusätzlich die "Maps JavaScript API" unter "Zusätzliche APIs".
9. Öffne das Navigationsmenü und begebe dich zu "APIs und Dienste > Anmeldedaten".
10. Klicke auf "Create Credentials" und danach auf "API Schlüssel", falls noch kein API Schlüssel vorhanden sein sollte.
11. Kopiere den API-Schlüssel und füge ihn in die App Konfiguration ein.

</details>

<details>

<summary>Google Maps Place ID</summary>

Die Place ID dient als eindeutige Zuordnung für deinen Account. Diese lässt sich ganz leicht über die [Suche](https://developers.google.com/maps/documentation/places/web-service/place-id#find-id) ermitteln. Gib dafür lediglich den Namen deines Unternehmens ein, wie du es von der herkömmlichen Google Maps Suche kennst. Anschließend wird dir deine Place ID angezeigt, welche du in dieses Feld kopierst.

</details>

<details>

<summary>Google Maps Bibliothek laden</summary>

Damit die Google Bewertungen geladen werden können wird die entsprechende Bibliothek von Google benötigt. Bestätige die Integration daher an dieser Stelle mit "Ja".

</details>


# Social

### Übersicht

An dieser Stelle hinterlegst du die Links zu deinen Social Media Profilen. Die [Icons](/academy/fachbegriffe/icon) für die Plattformen können dabei an unterschiedlichen Stellen in deinem Shop eingeblendet werden. So kannst du sie über die nachfolgenden Konfigurationen bspw. im [Header](/academy/fachbegriffe/header), [Footer](/academy/fachbegriffe/footer) oder mobilen [Offcanvas-Menü](/academy/fachbegriffe/offcanvas) anzeigen. Standardmäßig werden diese ohne weitere Konfiguration an den meisten Stellen automatisch integriert.

### Konfiguration

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


# Header

{% hint style="info" %}
Bitte mache dich zunächst mit dem Konzept des [Headers](/academy/fachbegriffe/header) und den [Widgets](/academy/fachbegriffe/widget) vertraut, bevor du mit der Konfiguration beginnst. Dies hilft dir die einzelnen Konfigurationsoptionen in diesem Abschnitt besser zu verstehen.
{% endhint %}

{% content-ref url="/pages/2T23JxV0bFCttPmePPte" %}
[Ankündigungsleiste](/theme-konfiguration/header/ankundigungsleiste)
{% endcontent-ref %}

{% content-ref url="/pages/zHEObMeAu3b1hJPYO0il" %}
[Top Bar](/theme-konfiguration/header/top-bar)
{% endcontent-ref %}

{% content-ref url="/pages/HFEfDlsYFTQGW6odxJWJ" %}
[Header](/theme-konfiguration/header/header)
{% endcontent-ref %}

{% content-ref url="/pages/zuOJvv3iKOZIJxViJezS" %}
[Such Overlay](/theme-konfiguration/header/such-overlay)
{% endcontent-ref %}

{% content-ref url="/pages/k7Xq9kjPgyvMp7du7mRN" %}
[Navigation](/theme-konfiguration/header/navigation)
{% endcontent-ref %}

{% content-ref url="/pages/38AgTGogj9SNVuYuwKgD" %}
[Flyout Navigation](/theme-konfiguration/header/flyout-navigation)
{% endcontent-ref %}


# Ankündigungsleiste

### Übersicht

Die [Ankündigungsleiste](/academy/fachbegriffe/ankundigungsleiste) wird standardmäßig ausgeblendet. Sie verwendet den [Textbaustein](https://docs.shopware.com/de/shopware-6-de/einstellungen/Textbausteine) `theme.header.announcement-bar.text` und kann mit folgenden Konfigurationen an unterschiedlichen Stellen eingeblendet und konfiguriert werden.

### Grundeinstellungen

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

<details>

<summary>Position</summary>

**Oberhalb des Headers**\
Blendet die Ankündigungsleiste direkt über der [Top Bar](/academy/fachbegriffe/top-bar) ein.

**Unterhalb des Headers**\
Blendet die Ankündigungsleiste direkt unterhalb der Navigation ein.

**Ausblenden**\
Blendet die Ankündigungsleiste komplett aus.

</details>

<details>

<summary>Schließbar</summary>

**Ja**\
Der Kunde kann die Ankündigungsleiste schließen.

**Nein**\
Der Kunde kann die Ankündigungsleiste nicht schließen.

</details>

<details>

<summary>Höhe (in px)</summary>

Dieses Feld beeinflusst die Höhe der Ankündigungsleiste. Je höher dieser Wert, desto höher auch die Leiste.

</details>

### Farben

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

<details>

<summary>Hintergrund</summary>

In diesem Feld kannst du die Hintergrundfarbe der Ankündigungsleiste definieren. Standardmäßig ist hier die [Variable](/academy/fachbegriffe/variable) der Primärfarbe hinterlegt.

</details>

<details>

<summary>Schriftfarbe</summary>

Hiermit kannst du die Schriftfarbe innerhalb der Ankündigungsleiste festlegen.

</details>


# Top Bar

### Übersicht

Die [Top Bar](/academy/fachbegriffe/top-bar) befindet sich immer ganz oben in deinem Shop und lässt sich durch individuelle Einstellungsmöglichkeiten exakt auf deine Wünsche anpassen.

### Grundeinstellungen

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

<details>

<summary>Anzeigen ab</summary>

**Immer**\
Die Top Bar wird auf jedem Endgerät anzeigt.&#x20;

**Tablet** \
Die Top Bar wird lediglich für Tablets und Desktops eingeblendet.

**Ausblenden** \
Die Top Bar wird nicht angezeigt.

</details>

<details>

<summary>Höhe (in px)</summary>

Mit dieser Einstellung kannst du die Top Bar höher oder schmaler einstellen. Beachte jedoch, dass du sie nicht zu schmal konfigurierst. Im Zweifel sind die einzelnen Text Elemente innerhalb der Top Bar nicht mehr lesbar.

</details>

<details>

<summary>Volle Breite</summary>

**Ja**\
Nutzt die volle Breite der Top Bar. So wird der Inhalt der Top Bar immer auf die volle Bildschirmbreite gestreckt.&#x20;

**Nein**\
Die Breite des Top Bar Inhalts wird automatisch auf die von dir konfigurierte [Containerbreite](/theme-konfiguration/allgemein/layout#maximale-containerbreite-in-px) begrenzt.

</details>

<details>

<summary>Social Media Icons</summary>

**Links**\
Deine [Social Media Icons](/theme-konfiguration/allgemein/social) werden am linken Rand der Top Bar eingeblendet.&#x20;

**Ausblenden**\
Die [Social Media Icons](/theme-konfiguration/allgemein/social) werden komplett deaktiviert.

</details>

<details>

<summary>Ausrichtung</summary>

**Gleichmäßige Verteilung**\
Die einzelnen Elemente innerhalb der Top Bar werden gleichmäßig verteilt, sodass ein einheitlicher Abstand zwischen den Elementen entsteht.

**Rechtsbündig**\
Die Elemente innerhalb der Top Bar werden rechtsbündig ausgerichtet.

</details>

### Labels

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

<details>

<summary>Erstes Label anzeigen</summary>

**Ja**\
Das erste Label innerhalb der Top Bar wird angezeigt.

**Nein**\
Das erste Label innerhalb der Top Bar wird nicht angezeigt.

***

Den Inhalt kannst du in den [Textbausteinen](https://docs.shopware.com/de/shopware-6-de/einstellungen/Textbausteine) jederzeit auf deine Bedürfnisse anpassen und übersetzen.\
\
Name: `theme.header.top-bar.labelOne`\
Standardwert: 1 Monat Widerrufsrecht

</details>

<details>

<summary>Zweites Label anzeigen</summary>

**Ja**\
Das zweite Label innerhalb der Top Bar wird angezeigt.

**Nein**\
Das zweite Label innerhalb der Top Bar wird nicht angezeigt.

***

Den Inhalt kannst du in den [Textbausteinen](https://docs.shopware.com/de/shopware-6-de/einstellungen/Textbausteine) jederzeit auf deine Bedürfnisse anpassen und übersetzen.\
\
Name: `theme.header.top-bar.labelTwo`\
Standardwert: Schneller Versand

</details>

<details>

<summary>Drittes Label anzeigen</summary>

**Ja**\
Das dritte Label innerhalb der Top Bar wird angezeigt.

**Nein**\
Das dritte Label innerhalb der Top Bar wird nicht angezeigt.

***

Den Inhalt kannst du in den [Textbausteinen](https://docs.shopware.com/de/shopware-6-de/einstellungen/Textbausteine) jederzeit auf deine Bedürfnisse anpassen und übersetzen.\
\
Name: `theme.header.top-bar.labelThree`\
Standardwert: Made in Germany

</details>

<details>

<summary>Viertes Label anzeigen</summary>

**Ja**\
Das vierte Label innerhalb der Top Bar wird angezeigt.

**Nein**\
Das vierte Label innerhalb der Top Bar wird nicht angezeigt.

***

Den Inhalt kannst du in den [Textbausteinen](https://docs.shopware.com/de/shopware-6-de/einstellungen/Textbausteine) jederzeit auf deine Bedürfnisse anpassen und übersetzen.\
\
Name: `theme.header.top-bar.labelFour`\
Standardwert: Support: +49 000 0000

</details>

### Icons

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

<details>

<summary>Icon für erstes Label</summary>

In diesem Feld kannst du ein passendes [Icon](/academy/fachbegriffe/icon) zu deinem zuvor konfigurierten ersten Label bestimmen.

</details>

<details>

<summary>Icon für zweites Label</summary>

In diesem Feld kannst du ein passendes [Icon](/academy/fachbegriffe/icon) zu deinem zuvor konfigurierten zweiten Label bestimmen.

</details>

<details>

<summary>Icon für drittes Label</summary>

In diesem Feld kannst du ein passendes [Icon](/academy/fachbegriffe/icon) zu deinem zuvor konfigurierten dritten Label bestimmen.

</details>

<details>

<summary>Icon für viertes Label</summary>

In diesem Feld kannst du ein passendes [Icon](/academy/fachbegriffe/icon) zu deinem zuvor konfigurierten vierten Label bestimmen.

</details>

### Widgets

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

{% hint style="info" %}
**Hinweise zum Sprach Schalter**

Solltest du einen mehrsprachigen Shop betreiben wollen, so bietet dir Shopware von Haus aus bereits ein Sprach Schalter Feature. Die jeweiligen Sprachen, die du in deinem [Verkaufskanal](https://docs.shopware.com/de/shopware-6-de/einstellungen/Verkaufskanaele) definierst, werden anschließend in einem Sprach Schalter in der [Top Bar](/academy/fachbegriffe/top-bar) und im [Offcanvas Menü](/academy/fachbegriffe/offcanvas) ausgegeben. Durch diesen kann der Kunde im Shop mit wenigen Klicks die Sprache ändern. Ähnliche Einstellungen können ebenfalls in der [Theme Konfiguration für das Offcanvas](/theme-konfiguration/offcanvas/navigation) vorgenommen werden.
{% endhint %}

<details>

<summary>Sprach-Schalter-Icon anzeigen</summary>

**Ja**\
Ein Icon wird vor deinem Sprach Schalter angezeigt.

**Nein**\
Kein Icon wird vor deinem Sprach Schalter angezeigt.

</details>

<details>

<summary>Sprach-Schalter-Layout</summary>

Stelle den Sprach-Schalter in unterschiedlichen Layouts dar:

***

**Text** \
Zeigt nur den Text der ausgewählten Sprache an.

**Flagge** \
Zeigt nur die Flagge der ausgewählten Sprache an.

**Flagge und Text** \
Zeigt sowohl die Flagge als auch den Text der ausgewählten Sprache an.

</details>

<details>

<summary>Sprach-Schalter-Dropdown-Layout</summary>

Stelle das Sprach-Schalter-Dropdown in unterschiedlichen Layouts dar.

***

**Text** \
Zeigt nur den Text der ausgewählten Sprache an.

**Flagge**\
Zeigt nur die Flagge der ausgewählten Sprache an.

**Flagge und Text** \
Zeigt sowohl die Flagge als auch den Text der ausgewählten Sprache an.

</details>

<details>

<summary>Service Menü</summary>

**Dropdown**\
Das Service Menü wird am rechten Rand der Top Bar als Dropdown dargestellt.

**Liste**\
Das Service Menü wird am linken Rand der Top Bar in einzelnen Listenpunkten hintereinander dargestellt.

**Ausblenden**\
Das Service Menü wird deaktiviert.

***

Damit du ein Service Menü in deiner Top Bar darstellen kannst, musst du die einzelnen Elemente innerhalb des Menüs zunächst konfigurieren. Hierzu legst du  im ersten Schritt eine [Kategoriestruktur](https://docs.shopware.com/de/shopware-6-de/tutorials-und-faq/einrichtung-des-footers#kategoriestruktur-anlegen) an. Anschließend verknüpfst du diese in den [Verkaufskanal Einstellungen](https://docs.shopware.com/de/shopware-6-de/tutorials-und-faq/einrichtung-des-footers#navigationspunkte-dem-verkaufskanal-zuweisen) im Punkt "Einstiegspunkt für die Footer-Service-Navigation".

</details>

### Typografie

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

<details>

<summary>Schriftgröße (in px)</summary>

Mit dieser Einstellung kannst du die Schriftgröße aller vier Labels innerhalb der Top Bar anpassen.

</details>

### Farben

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

<details>

<summary>Hintergrund</summary>

Hiermit kannst du die Hintergrundfarbe der Top Bar bestimmen.

</details>

<details>

<summary>Text Farbe</summary>

Diese Einstellung definiert die Textfarbe aller Text Elemente und [Icons](/academy/fachbegriffe/icon) innerhalb der Top Bar.&#x20;

</details>

<details>

<summary>Rahmenfarbe</summary>

Mit dieser Einstellung kannst du die untere Rahmenfarbe der Top Bar festlegen. So kannst du bspw. mit einer weißen Hintergrundfarbe und der `$sw-border-color` als Rahmenfarbe eine dezente Abgrenzung von Top Bar und Header schaffen.

Solltest du keine Rahmenfarbe verwenden wollen, kannst du hierfür dieselbe Farbe wie für den Hintergrund wählen und es entsteht keine sichtbare Trennlinie mehr.

</details>


# Header

### Übersicht

Der [Header](/academy/fachbegriffe/header) beschreibt den inneren Teil zwischen Top Bar und Navigation und lässt sich durch unterschiedliche Einstellungen einfach und schnell umgestalten.

### Grundeinstellungen

<figure><img src="/files/41RZPo1JJp5ecuP6s4Bi" alt=""><figcaption></figcaption></figure>

<details>

<summary>Style für Tablet und Desktop</summary>

Gibt dir die Möglichkeit den Header auf Tablets und Desktops in unterschiedlichen Theme Styles darzustellen.

**Variante 1**

1. Logo linksbündig
2. Navigation mittig
3. [Icons](/academy/fachbegriffe/icon) rechtsbündig

**Variante 2**

1. Suche linksbündig
2. Logo mittig
3. [Icons](/academy/fachbegriffe/icon) rechtsbündig

**Variante 3**

1. Logo linksbündig
2. Suche mittig
3. [Icons](/academy/fachbegriffe/icon) rechtsbündig

**Variante 4**

1. Navigation linksbündig
2. Logo mittig
3. [Icons](/academy/fachbegriffe/icon) rechtsbündig

</details>

<details>

<summary>Style für Smartphones</summary>

Gibt dir die Möglichkeit den Header auf Smartphones in unterschiedlichen Theme Styles darzustellen.

**Variante 1**

<img src="/files/89uocX5E9PIHhGl72EOj" alt="Header Style Katana" data-size="line">

1. Logo linksbündig
2. [Icons](/academy/fachbegriffe/icon) rechtsbündig

**Variante 2**

<img src="/files/qOlVfweVFdzH9IHC5zWF" alt="Header Style Bonsai" data-size="line">

1. Menü linksbündig
2. Logo linksbündig
3. [Icons](/academy/fachbegriffe/icon) rechtsbündig

**Variante 3**

<img src="/files/CFOGfeyL9u8AlWTBh5zR" alt="Header Style Tempura" data-size="original">

1. Menü & Merkzettel linksbündig
2. Logo mittig
3. Account & Warenkorb rechtsbündig
4. Suche unterhalb

</details>

<details>

<summary>Volle Breite</summary>

**Ja**\
Nutzt die volle Breite des Headers. So wird der Inhalt des Headers immer auf die volle Bildschirmbreite gestreckt.&#x20;

**Nein**\
Die Breite des Header Inhalts wird automatisch auf die von dir konfigurierte [Containerbreite](/theme-konfiguration/allgemein/layout#maximale-containerbreite-in-px) begrenzt.

</details>

<details>

<summary>Sticky Header</summary>

**Immer**\
Der Header bewegt sich beim Scrollen immer mit.

**Scroll Up**\
Der Header bewegt sich nur beim Scroll nach oben mit.

**Nie**\
Der Header bleibt statisch an seinem Platz.

</details>

<details>

<summary>Layout der Suche</summary>

**Overlay**\
Beim sog. "Overlay" ist die Suche für den Nutzer nicht direkt ersichtlich. Dies sorgt für einen aufgeräumten, minimalistischen Header. Stattdessen wird ein Lupen [Icon](/academy/fachbegriffe/icon) angezeigt. Klickt der Besucher darauf, öffnet sich das Overlay, welches die eigentliche Suchleiste enthält.

**Standard**\
Mit dieser Option wird die Suchleiste direkt im Header angezeigt.

</details>

<details>

<summary>Account Menü</summary>

**Dropdown**\
Das Account Menü wird eingebunden, sobald sich ein Besucher einloggt. Mit Klick auf die Account Initialen öffnet sich das Menü als Dropdown. Dies gibt dem Nutzer zusätzliche Informationen über den aktuell angemeldeten Benutzer. Bspw. werden Name, Firma, E-Mail Adresse und der Link zum Konto im Menü angezeigt. Gerade im B2B Sektor ist dies häufig verbreitet, wenn sich mehrere Nutzer ein Konto teilen.

<img src="/files/bOurvhhmlFU4QdIf6XzW" alt="Account Menü im ausgeklappten Zustand" data-size="original">

**Ausblenden**\
Es wird kein Account Menü im Shop eingebunden. Mit Klick auf die Initialen landet der Besucher direkt in seinem Konto.

</details>

<details>

<summary>Beschreibung der Aktions-Buttons</summary>

**Unterhalb**\
Ist diese Option ausgewählt wird die Beschreibung der einzelnen Aktions-Buttons unterhalb der [Icons](/academy/fachbegriffe/icon) ausgegeben. Gerade bei älteren Zielgruppen kann dies die Benutzerfreundlichkeit deines Shops verbessern.

<img src="/files/7jwVcGKeODCRLhEP8eA5" alt="Beschreibung unterhalb der Aktions-Buttons" data-size="original">

**Keine**\
Keine Beschreibung wird angezeigt.

</details>

<details>

<summary>Höhe für Tablet und Desktop (in px)</summary>

Mit diesem Feld kannst du die Höhe des Headers für Tablet und Desktop festlegen. Je höher der Wert, desto größer der Header.

***

Die minimale Höhe des Headers richtet sich immer nach der Größe des Inhalts innerhalb des Headers aus. Hast du bspw. von Haus aus ein hohes Logo, ist die minimale Höhe des Header immer so groß, dass auch dein Logo im Header Platz findet und nicht gequetscht wird.

</details>

<details>

<summary>Höhe für Smartphones (in px)</summary>

Mit diesem Feld kannst du die Höhe des Headers für Smartphones festlegen. Je höher der Wert, desto größer auch der Header auf mobilen Endgeräten.

***

Die minimale Höhe des Headers richtet sich immer nach der Größe des Inhalts innerhalb des Headers aus. Hast du bspw. von Haus aus ein hohes Logo, ist die minimale Höhe des Header immer so groß, dass auch dein Logo im Header Platz findet und nicht gequetscht wird.

</details>

<details>

<summary>Größe des Logos für Tablet und Desktop (in px)</summary>

Hiermit lässt sich die Größe deines Logos für Tablet und Desktop definieren. Je größer der Wert, desto größer auch dein Logo.

</details>

<details>

<summary>Größe des Logos für Smartphones (in px)</summary>

Hiermit lässt sich die Größe deines Logos für Smartphones definieren. Je größer der Wert, desto größer auch dein Logo auf mobilen Endgeräten.

</details>

### Typografie

<figure><img src="/files/1N67aV8AjbiRktYRNOg1" alt=""><figcaption></figcaption></figure>

<details>

<summary>Schriftgröße für die Beschreibung der Aktions-Buttons (in px)</summary>

Lege die Schriftgröße für die Beschreibung der Aktions-Buttons fest.

</details>

<details>

<summary>Schriftstärke für die Beschreibung der Aktions-Buttons</summary>

Definiert die Schriftstärke für die Beschreibung der Aktions-Buttons. Je nach [Schriftart](/theme-konfiguration/allgemein/typografie) stehen dir hierbei folgende Konfigurationsoptionen zur Verfügung:

100 = Thin\
200 = Extra Light\
300 = Light\
400 = Normal\
500 = Medium\
600 = Semi Bold\
700 = Bold\
800 = Extra Bold\
900 = Black

</details>

### Farben

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

<details>

<summary>Hintergrund</summary>

Hiermit kannst du die Hintergrundfarbe des Headers bestimmen.

</details>

<details>

<summary>Rahmenfarbe</summary>

Mit dieser Einstellung kannst du die untere Rahmenfarbe des Headers festlegen. So kannst du bspw. mit einer weißen Hintergrundfarbe und der `$sw-border-color` als Rahmenfarbe eine dezente Abgrenzung von Header und Navigation schaffen.

Solltest du keine Rahmenfarbe verwenden wollen, kannst du hierfür diesselbe Farbe wie für den Hintergrund wählen und es entsteht keine sichtbare Trennlinie mehr.

</details>

<details>

<summary>Icon Farbe</summary>

Diese Option bietet dir die Möglichkeit die Farbe der [Icons](/academy/fachbegriffe/icon) im Header festzulegen.

</details>

<details>

<summary>Beschreibung der Aktions-Buttons</summary>

Hiermit kannst du die Farbe für die Beschreibung der Aktions-Buttons definieren.

</details>

<details>

<summary>Sucheleiste Hintergrund</summary>

Sofern du in der vorherigen Konfiguration "Layout der Suche" den Wert "Standard" wählst, hast du hier die Möglichkeit die Hintergrundfarbe der Suchleiste anzupassen.

</details>

<details>

<summary>Badge Hintergrund</summary>

Hiermit kannst du die Hintergrundfarbe der Badges im Header bestimmen.

***

Sowohl mit dem [Merkzettel](https://docs.shopware.com/de/shopware-6-de/tutorials-und-faq/merkzettel-verwenden), als auch mit dem Warenkorb, hat der Kunde die Möglichkeit Produkte zu merken bzw. in den Warenkorb zu legen. Sobald dies erfolgt ist, erscheint ein kleines sog. "Badge" am rechten oberen Rand des [Icons](/academy/fachbegriffe/icon). Dieses Badge beinhaltet die Anzahl der Artikel auf dem Merkzettel bzw. im Warenkorb und lässt sich mit dieser Einstellung konfigurieren.

</details>

<details>

<summary>Badge Schriftfarbe</summary>

Hiermit kannst du die Schriftfarbe der Badges im Header bestimmen.

***

Sowohl mit dem [Merkzettel](https://docs.shopware.com/de/shopware-6-de/tutorials-und-faq/merkzettel-verwenden), als auch mit dem Warenkorb, hat der Kunde die Möglichkeit Produkte zu merken bzw. in den Warenkorb zu legen. Sobald dies erfolgt ist, erscheint ein kleines sog. "Badge" am rechten oberen Rand des [Icons](/academy/fachbegriffe/icon). Dieses Badge beinhaltet die Anzahl der Artikel auf dem Merkzettel bzw. im Warenkorb und lässt sich mit dieser Einstellung konfigurieren.

</details>


# Such Overlay

### Übersicht

Das Such Overlay ist ein temporäres Suchfeld oder ein Suchfenster, das über den aktuellen Inhalt der Seite gelegt wird. Es ermöglicht dem Benutzer, direkt auf der aktuellen Seite nach Inhalten oder Produkten zu suchen, ohne die Seite zu verlassen.&#x20;

Das Overlay verschwindet, wenn die Suche abgeschlossen ist oder der Benutzer es schließt. Es verbessert die Benutzerfreundlichkeit, da es eine schnelle und unkomplizierte Möglichkeit bietet, nach gesuchten Informationen zu suchen, ohne die Navigation deines Shops zu unterbrechen.

<figure><img src="/files/jZuDnvXEnP5SuX16kJIV" alt=""><figcaption><p>Such Overlay unseres Kunden <a href="https://donari.de/">https://donari.de/</a></p></figcaption></figure>

Das Such Overlay wird immer auf mobilen Endgeräten verwendet. Für Tablet und Desktop kannst du mit der Einstellung [Layout der Suche](/theme-konfiguration/header/header#layout-der-suche) in der Sektion "Header" das Such Overlay aktivieren bzw. deaktivieren. Des Weiteren kannst du es mit folgenden Konfigurationen weiter auf deine Bedürfnisse anpassen und bis zu vier Bilder hinterlegen.

### Konfiguration

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

<details>

<summary>Erste Spalte</summary>

Hinterlege das Bild für die erste Spalte.

***

Standardmäßig wird eine Bezeichnung unterhalb der Kategorie ausgegeben. Den Inhalt kannst du in den [Textbausteinen](https://docs.shopware.com/de/shopware-6-de/einstellungen/Textbausteine) jederzeit auf deine Bedürfnisse anpassen und übersetzen. Zusätzlich lässt sich noch eine Verlinkung konfigurieren.

**Bezeichnung**\
Name: `theme.header.search-overlay.searchOverlayOneDescription`\
Standardwert: Erste Kategorie

**Link**\
Name: `theme.header.search-overlay.searchOverlayOneLink`\
Standardwert: /

</details>

<details>

<summary>Zweite Spalte</summary>

Hinterlege das Bild für die zweite Spalte.

***

Standardmäßig wird eine Bezeichnung unterhalb der Kategorie ausgegeben. Den Inhalt kannst du in den [Textbausteinen](https://docs.shopware.com/de/shopware-6-de/einstellungen/Textbausteine) jederzeit auf deine Bedürfnisse anpassen und übersetzen. Zusätzlich lässt sich noch eine Verlinkung konfigurieren.

**Bezeichnung**\
Name: `theme.header.search-overlay.searchOverlayTwoDescription`\
Standardwert: Zweite Kategorie

**Link**\
Name: `theme.header.search-overlay.searchOverlayTwoLink`\
Standardwert: /

</details>

<details>

<summary>Dritte Spalte</summary>

Hinterlege das Bild für die dritte Spalte.

***

Standardmäßig wird eine Bezeichnung unterhalb der Kategorie ausgegeben. Den Inhalt kannst du in den [Textbausteinen](https://docs.shopware.com/de/shopware-6-de/einstellungen/Textbausteine) jederzeit auf deine Bedürfnisse anpassen und übersetzen. Zusätzlich lässt sich noch eine Verlinkung konfigurieren.

**Bezeichnung**\
Name: `theme.header.search-overlay.searchOverlayThreeDescription`\
Standardwert: Dritte Kategorie

**Link**\
Name: `theme.header.search-overlay.searchOverlayThreeLink`\
Standardwert: /

</details>

<details>

<summary>Vierte Spalte</summary>

Hinterlege das Bild für die vierte Spalte.

***

Standardmäßig wird eine Bezeichnung unterhalb der Kategorie ausgegeben. Den Inhalt kannst du in den [Textbausteinen](https://docs.shopware.com/de/shopware-6-de/einstellungen/Textbausteine) jederzeit auf deine Bedürfnisse anpassen und übersetzen. Zusätzlich lässt sich noch eine Verlinkung konfigurieren.

**Bezeichnung**\
Name: `theme.header.search-overlay.searchOverlayFourDescription`\
Standardwert: Vierte Kategorie

**Link**\
Name: `theme.header.search-overlay.searchOverlayFourLink`\
Standardwert: /

</details>


# Navigation

### Übersicht

Die Navigation ist das Hauptnavigationselement in deinem Shop. Den Inhalt bzw. die einzelnen Links pflegst du über das [Kategorie Modul](https://docs.shopware.com/de/shopware-6-de/kataloge/kategorien?category=shopware-6-de/kataloge) von Shopware. Anschließend definierst du den Einstiegspunkt der Hauptnavigation in den Grundeinstellungen deines [Verkaufskanals](https://docs.shopware.com/de/shopware-6-de/einstellungen/Verkaufskanaele#grundeinstellungen).

### Grundeinstellungen

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

<details>

<summary>Position</summary>

**Innerhalb des Headers (Voraussetzung: Header Style "Variante 1" oder "Variante 4")**\
Mit dieser Einstellung lässt sich die Navigation innerhalb deines [Headers](/theme-konfiguration/header/header) darstellen. Vergewissere dich jedoch, dass du den [Header Style](/theme-konfiguration/header/header#style) "Variante 1" oder "Variante 4" ausgewählt hast. Andernfalls wird die Navigation automatisch unterhalb deines Headers eingebunden. Je schmaler der Bildschirm eines Endgeräts wird, desto weniger Platz entsteht innerhalb des Headers für die Navigation. Bevor die Navigation abgeschnitten wird, springt sie bei kritischer Bildschirmbreite automatisch unter den Headers.

**Unterhalb des Headers** \
Die Navigation wird unterhalb deines [Headers](/theme-konfiguration/header/header) mittels einer neuen Zeile integriert.

</details>

<details>

<summary>Ausrichtung</summary>

**Linksbündig**\
Die einzelnen Links innerhalb deiner Navigation werden linksbündig ausgerichtet.

**Zentriert** \
Die einzelnen Links innerhalb deiner Navigation werden zentriert.

</details>

<details>

<summary>Home Link</summary>

Der sog. "Home Link" ist ein Navigations-Element, der einen Besucher per Klick automatisch auf die Startseite führt. Gerade bei Shops mit wenigen Kategorien, kann dieser häufig Sinn machen, um die Navigation mit einem weiteren sinnigen Link aufzufüllen.

***

**Anzeigen**\
Der Home Link wird integriert.

**Ausblenden** \
Der Home Link wird deaktiviert.

</details>

<details>

<summary>Hover Effekt Style</summary>

Hier kannst du dich zwischen unterschiedlichen [Hover Effekten](/academy/fachbegriffe/hover-effekt) für deine Links innerhalb der Navigation entscheiden.

***

Effekt 1:

<img src="/files/wgdKVrwOCzg1VbTTMH5J" alt="" data-size="original">

Effekt 2:

<img src="/files/ovAUyialU1MdvcUzKm6z" alt="" data-size="original">

</details>

<details>

<summary>Hervorhebungen</summary>

Wähle eine oder mehrere Hauptkategorien, die du farblich hervorheben möchtest. Die Farbe kannst du in den Abschnitten weiter unten je nach Position deiner Navigation konfigurieren.

</details>

### Abstände

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

<details>

<summary>Höhe (in px)</summary>

Definiert die Höhe der Navigationsleiste. Je größer der Wert, desto höher die Navigation. Je kleiner der Wert, desto schmaler.

</details>

<details>

<summary>Abstand zwischen den Links (in px)</summary>

Mit dieser Einstellung kannst du den Zwischenabstand deiner Links innerhalb der Navigation anpassen.

</details>

<details>

<summary>Hover Effekt Versatz (in px) - Innerhalb des Headers</summary>

Hiermit kannst du den Versatz des zuvor konfigurierten [Hover Effekts](#hover-effekt-style) für die [Navigation innerhalb des Headers](#position) festlegen. Je höher der Wert, desto näher rückt der Effekt an die Schrift.

***

Beachte, dass die Navigation innerhalb des Headers für kleinere Bildschirme automatisch auf eine Darstellung unterhalb des Headers umbricht, sofern es an Platz innerhalb des Headers mangelt. Stelle daher sicher, dass du den Hover Effekt Versatz ebenfalls für die Navigation unterhalb des Headers konfigurierst.

</details>

<details>

<summary>Hover Effekt Versatz (in px) - Unterhalb des Headers</summary>

Hiermit kannst du den Versatz des zuvor konfigurierten [Hover Effekts](#hover-effekt-style) für die [Navigation unterhalb des Headers](#position) festlegen. Je höher der Wert, desto näher rückt der Effekt an die Schrift.

</details>

### Typografie

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

<details>

<summary>Schriftgröße (in px)</summary>

Lege die Schriftgröße der Links innerhalb der Navigation fest.

</details>

<details>

<summary>Schriftstärke</summary>

Definiere die Schriftstärke der Links innerhalb der Navigation. Je nach [Schriftart](/theme-konfiguration/allgemein/typografie) stehen dir hierbei folgende Konfigurationsoptionen zur Verfügung:

100 = Thin\
200 = Extra Light\
300 = Light\
400 = Normal\
500 = Medium\
600 = Semi Bold\
700 = Bold\
800 = Extra Bold\
900 = Black

</details>

<details>

<summary>Großbuchstaben</summary>

**Ja**\
Schreibt deine Links innerhalb der Navigation automatisch in Großbuchstaben. Somit musst du deine [Kategorien](https://docs.shopware.com/de/shopware-6-de/kataloge/kategorien?category=shopware-6-de/kataloge) nicht in Großbuchstaben verfassen.

**Nein** \
Verwendet die Normalschreibweise, wie die [Kategorien](https://docs.shopware.com/de/shopware-6-de/kataloge/kategorien?category=shopware-6-de/kataloge) angelegt wurden.

</details>

<details>

<summary>Zeichenabstand (in px)</summary>

Passe den Zeichenabstand deiner Links innerhalb der Navigation an. Je größer der Wert, desto mehr Platz entsteht zwischen den einzelnen Zeichen.

</details>

### Farben für die Navigation innerhalb des Headers

{% hint style="info" %}
Sofern du dich für die [Position](#position) deiner Navigation innerhalb des Headers entschieden hast, steht dir an dieser Stelle eine gesonderte Farbkonfiguration für deine Navigation zur Verfügung. Solltest du deine Navigation unterhalb des Headers konfiguriert haben, hat diese Farbkonfiguration keinen Einfluss mehr.
{% endhint %}

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

<details>

<summary>Link</summary>

Lege die Farbe deiner Links innerhalb der Navigation fest. Hierbei wird automatisch die [Variable](/academy/fachbegriffe/variable) für die [Link Farbe](/theme-konfiguration/allgemein/typografie#link-farbe) verwendet.&#x20;

</details>

<details>

<summary>Aktiver Link</summary>

Lege die Farbe für den aktiven Link innerhalb deiner Navigation fest. Ein Link ist aktiv, sobald die Kategorie selbst bzw. eine Unterkategorie oder ein Produkt innerhalb der Kategorie geöffnet wurde. Hierbei wird automatisch die [Variable](/academy/fachbegriffe/variable) für die [Link Farbe](/theme-konfiguration/allgemein/typografie#link-farbe) verwendet.

</details>

<details>

<summary>Hover Effekt</summary>

Lege die Farbe für den oben konfigurierten [Hover Effekt Style](#hover-effekt-style) fest. Standardmäßig wird hierbei deine [Primärfarbe](/theme-konfiguration/allgemein/theme-farben#primaerfarbe) über eine [Variable](/academy/fachbegriffe/variable) verwendet.

</details>

<details>

<summary>Hervorhebung</summary>

Farbe für hervorgehobene [Hauptkategorien](#hervorhebungen).

</details>

### Farben für die Navigation unterhalb des Headers

{% hint style="info" %}
Mit dieser Konfiguration kannst du die Farben deiner Navigation unterhalb des Headers anpassen. Diese ist ebenfalls für die Konfiguration der [Position](#position) innerhalb des Headers relevant. Gerade bei schmaleren Bildschirmen bricht die Navigation automatisch um und wird unterhalb des Headers dargestellt.
{% endhint %}

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

<details>

<summary>Hintergrund</summary>

Definiere eine Hintergrundfarbe für die gesamte Navigationsleiste.

</details>

<details>

<summary>Rahmenfarbe</summary>

Hinterlege eine Farbe für den Rahmen unterhalb der Navigationsleiste. Der Rahmen dient hierbei als visuelle Abtrennung des Headers zum Seiteninhalt, sobald man auf einer Seite scrollt. Standardmäßig wird an dieser Stelle deine [Rahmenfarbe](/theme-konfiguration/allgemein/theme-farben#rahmen) über eine [Variable](/academy/fachbegriffe/variable) eingebunden.

</details>

<details>

<summary>Link</summary>

Lege die Farbe deiner Links innerhalb der Navigation fest. Hierbei wird automatisch die [Variable](/academy/fachbegriffe/variable) für die [Link Farbe](/theme-konfiguration/allgemein/typografie#link-farbe) verwendet.&#x20;

</details>

<details>

<summary>Aktiver Link</summary>

Lege die Farbe für den aktiven Link innerhalb deiner Navigation fest. Ein Link ist aktiv, sobald die Kategorie selbst bzw. eine Unterkategorie oder ein Produkt innerhalb der Kategorie geöffnet wurde. Hierbei wird automatisch die [Variable](/academy/fachbegriffe/variable) für die [Link Farbe](/theme-konfiguration/allgemein/typografie#link-farbe) verwendet.

</details>

<details>

<summary>Hover Effekt</summary>

Lege die Farbe für den oben konfigurierten [Hover Effekt Style](#hover-effekt-style) fest. Standardmäßig wird hierbei deine [Primärfarbe](/theme-konfiguration/allgemein/theme-farben#primaerfarbe) über eine [Variable](/academy/fachbegriffe/variable) verwendet.

</details>

<details>

<summary>Hervorhebung</summary>

Farbe für hervorgehobene [Hauptkategorien](#hervorhebungen).

</details>


# Flyout Navigation

### Übersicht

Die [Flyout Navigation](/academy/fachbegriffe/flyout-navigation) öffnet sich, sobald man mit dem Mauszeiger über ein Hauptnavigationselement fährt und dieses weitere Unterkategorien besitzt.

### Grundeinstellungen

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

<details>

<summary>Maximale Kategorie Tiefe</summary>

**Flyout ausblenden**\
Das Flyout wird nicht mehr angezeigt, auch wenn Unterkategorien existieren.

**K2** \
Unterkategorien werden maximal bis zur zweiten Ebene angezeigt.

**K3** \
Unterkategorien werden maximal bis zur dritten Ebene angezeigt.

</details>

<details>

<summary>Spaltenabstand (in px)</summary>

Definiere den Spaltenabstand zwischen den Kategorien innerhalb des Flyouts.

<img src="/files/Hy6N5PIkcfuFCZ2qIepq" alt="" data-size="original">

</details>

<details>

<summary>Zeilenabstand (in px)</summary>

Definiere den Zeilenabstand zwischen den Kategorien innerhalb des Flyouts.

<img src="/files/gZWd84WoY5t4PgadxBbQ" alt="" data-size="original">

</details>

<details>

<summary>Minimale Spaltenbreite (in px)</summary>

Definieren die minimale Spaltenbreite der Kategorien innerhalb des Flyouts.

<img src="/files/2NXenzwEnFESIyWbJOUY" alt="" data-size="original">

</details>

<details>

<summary>Kategorie Beschreibung anzeigen</summary>

**Ja**\
Zeigt die [Kategorie Beschreibung](https://docs.shopware.com/de/shopware-6-de/kataloge/kategorien?category=shopware-6-de/kataloge#allgemein) des Hauptnavigationselements innerhalb der Flyout Navigation unter den Kategorien an.

**Nein** \
Deaktiviert die Kategorie Beschreibung des Hauptnavigationselements.

</details>

<details>

<summary>Rand</summary>

Der untere Rand der Flyout Navigation dient zur visuellen Abgrenzung von Flyout und dem eigentlichen Seiteninhalt. Dabei stehen dir folgende Konfigurationsoptionen zur Verfügung:

***

**Linie**\
Grenzt das Flyout mit einer Linie vom Seiteninhalt ab. Die Linie wird dabei automatisch mit der von dir konfigurierten [Rahmenfarbe](/theme-konfiguration/allgemein/theme-farben#rahmen) gefärbt.

**Schatten**\
Zeigt einen Schatten am unteren Rand des Flyout um den Seiteninhalt abzugrenzen. Der Schatten verwendet dabei die von dir definierte [Farbkonfiguration](/theme-konfiguration/allgemein/layout#schatten).

</details>

### Typografie

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

<details>

<summary>Überschriften Schriftgröße (in px)</summary>

Lege die Schriftgröße für alle Kategorien zweiter Ordnung fest.

</details>

<details>

<summary>Überschriften in Großbuchstaben</summary>

**Ja**\
Schreibt alle Kategorien zweiter Ordnung automatisch in Großbuchstaben. Somit muss der Name im [Kategorie Modul](https://docs.shopware.com/de/shopware-6-de/kataloge/kategorien?category=shopware-6-de/kataloge#allgemein) nicht in Großbuchstaben verfasst werden.

**Nein**\
Zeigt die Kategorie so an wie sie im [Kategorie Modul](https://docs.shopware.com/de/shopware-6-de/kataloge/kategorien?category=shopware-6-de/kataloge#allgemein) angelegt wurde.

</details>

<details>

<summary>Überschriften Schriftstärke</summary>

Definiert die Schriftstärke aller Kategorien zweiter Ordnung im Flyout. Je nach [Schriftart](/theme-konfiguration/allgemein/typografie) stehen dir hierbei folgende Konfigurationsoptionen zur Verfügung:

100 = Thin\
200 = Extra Light\
300 = Light\
400 = Normal\
500 = Medium\
600 = Semi Bold\
700 = Bold\
800 = Extra Bold\
900 = Black

</details>

<details>

<summary>Überschriften unterstreichen</summary>

**Ja**\
Alle Kategorien zweiter Ordnung werden unterstrichen.

**Nein**\
Kategorien zweiter Ordnung werden nicht unterstrichen.

</details>

<details>

<summary>Unterer Abstand der Überschriften (in px)</summary>

Hinterlege den unteren Abstand aller Kategorien zweiter Ordnung innerhalb der Flyout Navigation.

</details>

<details>

<summary>Basis Link Schriftgröße (in px)</summary>

Lege die Schriftgröße für alle Kategorien dritter Ordnung fest.

</details>

<details>

<summary>Basis Link Schriftstärke</summary>

Definiert die Schriftstärke aller Kategorien dritter Ordnung im Flyout. Je nach [Schriftart](/theme-konfiguration/allgemein/typografie) stehen dir hierbei folgende Konfigurationsoptionen zur Verfügung:

100 = Thin\
200 = Extra Light\
300 = Light\
400 = Normal\
500 = Medium\
600 = Semi Bold\
700 = Bold\
800 = Extra Bold\
900 = Black

</details>

<details>

<summary>Basis Link Zeilenabstand (in px)</summary>

Definiere den Zeilenabstand für alle Kategorien dritter Ordnung.

</details>

### Farben

<figure><img src="/files/1ATXinthWpib6dbrUMRZ" alt=""><figcaption></figcaption></figure>

<details>

<summary>Überschriften Farbe</summary>

Hinterlege die Schriftfarbe für alle Kategorien zweiter Ordnung. Standardmäßig wird an dieser Stelle die [Variable](/academy/fachbegriffe/variable) für deine [Textfarbe](/theme-konfiguration/allgemein/typografie#textfarbe) verknüpft.

</details>

<details>

<summary>Basis Link Farbe</summary>

Definiere die Schriftfarbe für alle Kategorien dritter Ordnung innerhalb der Flyout Navigation.

</details>


# Footer

{% hint style="info" %}
Bitte mache dich zunächst mit dem Konzept des [Footers](/academy/fachbegriffe/footer) vertraut, bevor du mit der Konfiguration beginnst. Dies hilft dir die einzelnen Konfigurationsoptionen in diesem Abschnitt besser zu verstehen.
{% endhint %}

{% content-ref url="/pages/Mx1qihL2eEcCnh3PrxZS" %}
[Top Bar](/theme-konfiguration/footer/top-bar)
{% endcontent-ref %}

{% content-ref url="/pages/uywpmXb8gQmVvDAg5aFr" %}
[Layout](/theme-konfiguration/footer/layout)
{% endcontent-ref %}

{% content-ref url="/pages/HQ6lzSWB3BwERd9gKYgr" %}
[Spalten](/theme-konfiguration/footer/spalten)
{% endcontent-ref %}

{% content-ref url="/pages/3SgroH7oNR1Z8MmxSW67" %}
[Zeile](/theme-konfiguration/footer/zeile)
{% endcontent-ref %}

{% content-ref url="/pages/CFyrkHoo0dzCJvbZrx8T" %}
[Abschluss](/theme-konfiguration/footer/abschluss)
{% endcontent-ref %}


# Top Bar

### Übersicht

Neben der [Top Bar](/academy/fachbegriffe/top-bar) für den [Header](/theme-konfiguration/header/top-bar), bietet dir das Theme in diesem Abschnitt ebenfalls die Möglichkeit eine Top Bar für den Footer zu konfigurieren. Diese wird standardmäßig direkt über dem eigentlichen [Footer](/academy/fachbegriffe/footer) dargestellt.

<figure><img src="/files/hKcf4kywsugjngpWqQr4" alt=""><figcaption><p>Footer Top Bar unseres Kunden <a href="https://www.profeline-katzenshop.de/">https://www.profeline-katzenshop.de/</a></p></figcaption></figure>

Du hast hierbei die Möglichkeit ein Newsletter Formular präsent in deinem Shop zu integrieren. Außerdem können zusätzliche Besonderheiten und Alleinstellungsmerkmale mittels [Textbausteinen](https://docs.shopware.com/de/shopware-6-de/einstellungen/Textbausteine) und [Medien](#medien) angefügt werden.

### Grundeinstellungen

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

<details>

<summary>Newsletter</summary>

**Text links, Formular rechts**\
Blendet ein Newsletter Formular ein. Hierbei wird eine Überschrift mit kurzem Text, sowie ein dazugehöriges Formular in deiner Footer Top Bar integriert. Überschrift und Text lassen sich hierbei über die [Textbausteine](https://docs.shopware.com/de/shopware-6-de/einstellungen/Textbausteine) wie folgt anpassen:

Überschrift: `theme.footer.top-bar.newsletterHeadline`\
Text: `theme.footer.top-bar.newsletterParagraph`

**Ausblenden**\
Es wird kein Newsletter Formular in der Footer Top Bar eingebunden.

</details>

<details>

<summary>Bezeichnungen</summary>

**Rechts neben dem Bild**\
Mit dieser Option werden fünf Bezeichnungen in der Footer Top Bar eingebunden. Dazu können im [nachfolgenden Abschnitt](#medien) noch fünf passende Bilder zu den Bezeichnungen verknüpft werden. Die Bezeichnungen lassen sich dabei wie gewohnt über die nachfolgenden [Textbausteine](https://docs.shopware.com/de/shopware-6-de/einstellungen/Textbausteine) auf deine Bedürfnisse anpassen:

Erste Bezeichnung: `theme.footer.top-bar.labelOne`\
Zweite Bezeichnung: `theme.footer.top-bar.labelTwo`\
Dritte Bezeichnung: `theme.footer.top-bar.labelThree`\
Vierte Bezeichnung: `theme.footer.top-bar.labelFour`\
Fünfte Bezeichnung: `theme.footer.top-bar.labelFive`

**Ausblenden**\
Es werden keine Bezeichnungen in der Footer Top Bar integriert.

</details>

<details>

<summary>Bezeichnungen ohne Bild anzeigen</summary>

**Ja**\
Bezeichnungen werden auch ohne hinterlegtem Bild angezeigt. Mit dieser Einstellung bist du nicht gezwungen ein Bild für jede Bezeichnung zu hinterlegen, um sie in der Footer Top Bar zu darzustellen.

**Nein**\
Die Bezeichnungen werden nur mit hinterlegtem Bild angezeigt.

</details>

<details>

<summary>Größe der Bilder (in px)</summary>

Mit dieser Einstellung kannst du die Größe der nachfolgenden Bilder anpassen.

</details>

### Medien

{% hint style="info" %}
Damit die verknüpften Medien aus der nachfolgenden Konfiguration in der Footer Top Bar angezeigt werden, dürfen die [Bezeichnungen](#bezeichnungen) nicht ausgeblendet werden.
{% endhint %}

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

<details>

<summary>Erstes Bild</summary>

Verknüpfe das erste Bild zur ersten Bezeichnung.

</details>

<details>

<summary>Zweites Bild</summary>

Verknüpfe das zweite Bild zur zweiten Bezeichnung.

</details>

<details>

<summary>Drittes Bild</summary>

Verknüpfe das dritte Bild zur dritten Bezeichnung.

</details>

<details>

<summary>Viertes Bild</summary>

Verknüpfe das vierte Bild zur vierten Bezeichnung.

</details>

<details>

<summary>Fünftes Bild</summary>

Verknüpfe das fünfte Bild zur fünften Bezeichnung.

</details>

### Farben

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

<details>

<summary>Hintergrund</summary>

Lege die Hintergrundfarbe der Footer Top Bar fest. Standardmäßig wird hier die [Primärfarbe](/theme-konfiguration/allgemein/theme-farben#primaerfarbe) über eine [Variable](/academy/fachbegriffe/variable) verknüpft.

</details>

<details>

<summary>Text Farbe</summary>

Lege die Textfarbe innerhalb der Footer Top Bar fest.

</details>

### Typografie

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

<details>

<summary>Schriftstärke der Bezeichnungen</summary>

Definiert die Schriftstärke aller [Bezeichnungen](#bezeichnungen) in der Footer Top Bar. Je nach [Schriftart](/theme-konfiguration/allgemein/typografie) stehen dir hierbei folgende Konfigurationsoptionen zur Verfügung:

100 = Thin\
200 = Extra Light\
300 = Light\
400 = Normal\
500 = Medium\
600 = Semi Bold\
700 = Bold\
800 = Extra Bold\
900 = Black

</details>

<details>

<summary>Bezeichnungen in Großbuchstaben</summary>

**Ja**\
Gibt dir die Möglichkeit alle [Bezeichnungen](#bezeichnungen) innerhalb der Footer Top Bar groß zu schreiben.

**Nein**\
Zeigt die [Bezeichnungen](#bezeichnungen) so an, wie sie in den [Textbausteinen](https://docs.shopware.com/de/shopware-6-de/einstellungen/Textbausteine) hinterlegt wurden.

</details>


# Layout

### Übersicht

Dieser Abschnitt enthält Konfigurationsmöglichkeiten, die sich auf das Layout deines gesamten [Footers](/academy/fachbegriffe/footer) auswirken. Dir stehen dabei die nachfolgenden Optionen zur Verfügung.

### Grundeinstellungen

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

<details>

<summary>Volle Breite</summary>

**Ja**\
Der Inhalt des Footers streckt sich auf die volle Bildschirmbreite.

**Nein**\
Der Inhalt des Footers orientiert sich an der [maximalen Containerbreite](/theme-konfiguration/allgemein/layout#maximale-containerbreite-in-px).

</details>

### Farben

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

<details>

<summary>Hintergrundbild</summary>

Definiere ein Hintergrundbild für deinen Footer.

</details>

<details>

<summary>Hintergrund</summary>

Hinterlege eine Hintergrundfarbe für deinen Footer. Sofern ein Hintergrundbild konfiguriert wurde, hat die hier definierte Farbe keine Auswirkung mehr.

</details>


# Spalten

### Übersicht

Der Hauptinhalt des [Footers](/academy/fachbegriffe/footer) kann in Spalten untergliedert werden. So kann ein Einstiegspunkt der Footer Navigation über die [Grundeinstellungen des Verkaufskanals](https://docs.shopware.com/de/shopware-6-de/einstellungen/Verkaufskanaele#grundeinstellungen) vorgenommen werden, um rechtliche Seiten wie Impressum, AGB, etc. zu verlinken. Zusätzlich können weitere Informationen wie Kontakt- oder [FAQ-Seiten](/enthaltene-erweiterungen/faqs) verknüpft werden.

<figure><img src="/files/f8I0BadqpHHbwvY2uIoK" alt=""><figcaption><p>Footer Spalten unseres Kunden <a href="https://outdoordino.de/">https://outdoordino.de/</a></p></figcaption></figure>

Neben diesen Möglichkeiten bietet dir das Theme jedoch noch weitere sinnvolle Elemente, um den Footer nach deinen Wünschen zu konfigurieren.

### Elemente zuweisen

Insgesamt stehen dir fünf Elemente für deine Footer Spalten zur Verfügung:

{% tabs %}
{% tab title="Service-Hotline" %}
Mit dem Service-Hotline Element kannst du die Kontaktdaten für deine Besucher schnell und einfach in deinem Footer integrieren. Hierbei werden folgende [Textbausteine](https://docs.shopware.com/de/shopware-6-de/einstellungen/Textbausteine) verwendet:

Überschrift: `theme.footer.serviceHotlineHeadline`\
Inhalt: `theme.footer.serviceHotline`
{% endtab %}

{% tab title="Footer Navigation" %}
Hiermit kannst du festlegen, an welcher Stelle du die [Navigation](https://docs.shopware.com/de/shopware-6-de/einstellungen/Verkaufskanaele#grundeinstellungen) deines Footers anzeigen möchtest, die du im Verkaufskanal verknüpft hast.

{% hint style="info" %}
Beachte hierbei, dass die Spaltenüberschriften, sowie der Einstiegspunkt im [Kategorie Modul](https://docs.shopware.com/de/shopware-6-de/kataloge/kategorien#allgemein) vom Typ "Strukturelement / Einstiegspunkt" sind. Andernfalls verlinkt die Überschrift zu einer leeren Kategorie.
{% endhint %}
{% endtab %}

{% tab title="Newsletter" %}
Blendet ein Newsletter Element als Footer Spalte ein. Hierbei werden folgende [Textbausteine](https://docs.shopware.com/de/shopware-6-de/einstellungen/Textbausteine) verwendet:

Überschrift: `theme.footer.newsletter.headline`\
Inhalt: `theme.footer.newsletter.content`
{% endtab %}

{% tab title="Zahlungs- und Versandarten" %}
Bietet dir die Möglichkeit die [Icons](/academy/fachbegriffe/icon) deiner [Zahlungs-](https://docs.shopware.com/de/shopware-6-de/einstellungen/Zahlungsarten) und [Versandarten](https://docs.shopware.com/de/shopware-6-de/einstellungen/versand) in einer Footer Spalte anzuzeigen. Hierbei kommt folgender [Textbaustein](https://docs.shopware.com/de/shopware-6-de/einstellungen/Textbausteine) zum Einsatz:

Überschrift: `theme.footer.payment-shipping.headline`

{% hint style="success" %}
Einheitliche, von uns erstellte Logos stellen wir dir kostenlos über unsere [Hilfsmittel](/zahlungs-und-versandarten-icons) zur Verfügung.
{% endhint %}
{% endtab %}

{% tab title="Qualitätssiegel" %}
Gibt dir die Option ein Qualitäts- bzw. Gütesiegel in deinem Footer zu integrieren. Die [Konfiguration](#qualitaetssiegel-1) erfolgt hierfür im Abschnitt weiter unten. Für dieses Element wird folgender [Textbaustein](https://docs.shopware.com/de/shopware-6-de/einstellungen/Textbausteine) verwendet:

Überschrift: `theme.footer.quality.headline`
{% endtab %}
{% endtabs %}

Gegebenenfalls kannst du über die Option "Keins" die Zuweisung für ein Element aufheben bzw. überspringen. Somit bist du nicht gezwungen alle verfügbaren Elemente zu verwenden.

Durch die nachfolgende Konfiguration kannst du die Elemente, sowie deren Reihenfolge innerhalb des Footers festlegen. Beachte jedoch, dass die Mehrfachauswahl eines Elements nicht möglich ist. Jedes Element kann nur einmal als Footer Spalte verwendet werden.

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

<details>

<summary>Erstes Element</summary>

Wähle das erste Element.

</details>

<details>

<summary>Zweites Element</summary>

Wähle das zweite Element.

</details>

<details>

<summary>Drittes Element</summary>

Wähle das dritte Element.

</details>

<details>

<summary>Viertes Element</summary>

Wähle das vierte Element.

</details>

<details>

<summary>Fünftes Element</summary>

Wähle das fünfte Element.

</details>

### Grundeinstellungen

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

<details>

<summary>Ausrichtung</summary>

**Linksbündig**\
Richtet die Footer Spalten linksbündig aus. Dies macht besonders Sinn sobald deine Footer Spalten zweizeilig sein sollten, da sie sich ggf. durch ihre unterschiedliche Breite nicht mehr sinnig einreihen lassen.

**Zentriert**\
Platziert deine Footer Spalten mittig. Diese Einstellung empfiehlt sich für einzeilige Footer Spalten.

</details>

### Service-Hotline

{% hint style="info" %}
Die Konfiguration in diesem Abschnitt bezieht sich auf das [Service-Hotline Element](#elemente-zuweisen).
{% endhint %}

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

<details>

<summary>Logo anzeigen</summary>

**Ja**\
Blendet dein Desktop Logo unterhalb der Service-Hotline ein. Alternativ kannst du für deinen Footer ein anderes [Logo](/theme-konfiguration/allgemein/medien#footer) definieren.

**Nein**\
Blendet das Logo unterhalb der Service-Hotline aus.

</details>

<details>

<summary>Größe des Logos (in px)</summary>

Legt die Größe deines Logos unterhalb der Service-Hotline fest.

</details>

### Newsletter

{% hint style="info" %}
Die Konfiguration in diesem Abschnitt bezieht sich auf das [Newsletter Element](#elemente-zuweisen).
{% endhint %}

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

<details>

<summary>Social Media Icons unter Newsletter anzeigen</summary>

**Ja**\
Zeigt die [Icons](/academy/fachbegriffe/icon) inkl. Verlinkung deiner konfigurierten [Social Media Kanäle](/theme-konfiguration/allgemein/social) unterhalb des Newsletter Elements an.

**Nein**\
Blendet die Social Media Icons unterhalb des Newsletter Elements aus.

</details>

### Zahlungs- und Versandarten

{% hint style="info" %}
Die Konfiguration in diesem Abschnitt bezieht sich auf das [Zahlungs- und Versandarten Element](#elemente-zuweisen).
{% endhint %}

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

<details>

<summary>Größe der Zahlungs- und Versandarten Logos (in px)</summary>

Definiert die Größe der Logos innerhalb des Zahlungs- und Versandarten Elements.

</details>

### Qualitätssiegel

{% hint style="info" %}
Die Konfiguration in diesem Abschnitt bezieht sich auf das [Qualitätssiegel Element](#elemente-zuweisen).
{% endhint %}

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

<details>

<summary>Bild</summary>

Hinterlege ein Bild, das die Qualitäts- und Gütesiegel deines Shops enthält.

</details>

<details>

<summary>Qualitätssiegel - Maximale Breite (in px)</summary>

Definiere die maximale Breite des von dir hinterlegten Bildes.

</details>

### Typografie

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

<details>

<summary>Überschriften Schriftgröße (in px)</summary>

Lege die Schriftgröße deiner Footer Spalten Überschriften fest.

</details>

<details>

<summary>Überschriften Schriftstärke</summary>

Definiert die Schriftstärke aller Footer Spalten Überschriften. Je nach [Schriftart](/theme-konfiguration/allgemein/typografie) stehen dir hierbei folgende Konfigurationsoptionen zur Verfügung:

100 = Thin\
200 = Extra Light\
300 = Light\
400 = Normal\
500 = Medium\
600 = Semi Bold\
700 = Bold\
800 = Extra Bold\
900 = Black

</details>

<details>

<summary>Überschriften in Großbuchstaben</summary>

**Ja**\
Schreibt alle Footer Spalten Überschriften in Großbuchstaben.

**Nein**\
Die Footer Spalten Überschriften werden so angezeigt, wie sie in den [Textbausteinen](https://docs.shopware.com/de/shopware-6-de/einstellungen/Textbausteine) angelegt wurden.

</details>

<details>

<summary>Text Schriftgröße (in px)</summary>

Legt die Schriftgröße des Textes innerhalb der Footer Spalten fest.

</details>

### Farben

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

<details>

<summary>Überschriften Schriftfarbe</summary>

Lege die Schriftfarbe für deine Footer Spalten Überschriften fest. Standardmäßig wird an dieser Stelle die globale [Überschriftfarbe](/theme-konfiguration/allgemein/typografie#ueberschriftfarbe) als [Variable](/academy/fachbegriffe/variable) verwendet.

</details>

<details>

<summary>Text Schriftfarbe</summary>

Hinterlege die Schriftfarbe für den Text innerhalb der Footer Spalten. Hier wird im Standard die globale [Textfarbe](/theme-konfiguration/allgemein/typografie#textfarbe) mittels [Variable](/academy/fachbegriffe/variable) eingebunden.

</details>

<details>

<summary>Überschriften Hintergrund</summary>

Hinterlege eine Farbe für den Hintergrund deiner Footer Spalten Überschriften. Im nächsten Abschnitt kannst du den Innenabstand zur Schrift vergrößern. Solltest du keine Hintergrundfarbe verwenden wollen, schreibe hier "transparent" in das Feld.

</details>

### Abstände

{% hint style="info" %}
Die Innenabstände der Footer Spalten Überschriften sollten nur im Falle einer konfigurierten Hintergrundfarbe größer als 0 sein.
{% endhint %}

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

<details>

<summary>Überschriften Innenabstand oben und unten (in px)</summary>

Lege den oberen und unteren Innenabstand der Footer Spalten Überschriften fest.

</details>

<details>

<summary>Überschriften Innenabstand links und rechts (in px)</summary>

Definieren den linken und rechten Innenabstand der Footer Spalten Überschriften.

</details>


# Zeile

### Übersicht

Die Footer Zeile befindet sich unterhalb der [Spalten](/theme-konfiguration/footer/spalten) und kann auf ähnliche Weise konfiguriert werden. So bietet dir die Theme Konfiguration eine zusätzliche Möglichkeit deinen [Footer](/academy/fachbegriffe/footer) ganz auf deine Bedürfnisse zuschneiden.

<figure><img src="/files/IjaFcaAgIDj6d97Q6BKv" alt=""><figcaption><p>Footer Zeile unseres Kunden <a href="https://outdoordino.de/">https://outdoordino.de/</a></p></figcaption></figure>

### Elemente zuweisen

Für die Footer Zeile stehen dir vier Elemente zur Verfügung:

{% tabs %}
{% tab title="Copyright" %}
Das Copyright ist ein einfacher [Textbaustein](https://docs.shopware.com/de/shopware-6-de/einstellungen/Textbausteine) mit dem du deinem Shop ein schickes Branding verleihen kannst. Er lässt sich über den Namen `theme.footer.copyright` anpassen.
{% endtab %}

{% tab title="Service Menü" %}
Mit diesem Element kannst du dein Service Menü in der Footer Zeile als Liste ausgeben.

{% hint style="info" %}
Beachte dabei, dass du zuvor einen Einstiegspunkt für die Footer-Service-Navigation in den [Grundeinstellungen des Verkaufskanals](https://docs.shopware.com/de/shopware-6-de/einstellungen/Verkaufskanaele#grundeinstellungen) verknüpft hast. Voraussetzung hierfür ist, dass du auch die entsprechenden Kategorien für dein Service Menü im [Kategorie Modul](https://docs.shopware.com/de/shopware-6-de/kataloge/kategorien) erstellt hast.
{% endhint %}
{% endtab %}

{% tab title="Zahlungs- und Versandarten Logos" %}
Hiermit kannst du deine [Zahlungs-](https://docs.shopware.com/de/shopware-6-de/einstellungen/Zahlungsarten) und [Versandarten](https://docs.shopware.com/de/shopware-6-de/einstellungen/versand) Logos in der Footer Zeile anzeigen.
{% endtab %}

{% tab title="Soziale Medien" %}
Mit dem Soziale Medien Element kannst du die [Icons](/academy/fachbegriffe/icon) inkl. Link zu deinen gepflegten [Social Media Kanälen](/theme-konfiguration/allgemein/social) in der Footer Zeile einblenden.
{% endtab %}
{% endtabs %}

Über die nachfolgenden Felder kannst du die gewünschten Elemente entsprechend deiner Vorstellung und Reihenfolge verknüpfen. Das erste und zweite Element wird dabei auf der linken Seite und das dritte und vierte Element auf der rechten Seite der Zeile dargestellt. Mit der Option "Keins" kannst du ein oder mehrere Element(e) leer lassen, sodass du nicht gezwungen bist alle verfügbaren Elemente zu verwenden. Beachte dabei, dass jedes Element nur einmal in der Footer Zeile angezeigt werden kann.

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

<details>

<summary>Erstes Element</summary>

Weise das erste Element zu.

</details>

<details>

<summary>Zweites Element</summary>

Weise das zweite Element zu.

</details>

<details>

<summary>Drittes Element</summary>

Weise das dritte Element zu.

</details>

<details>

<summary>Viertes Element</summary>

Weise das vierte Element zu.

</details>

### Zahlungs- und Versandarten

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

{% hint style="info" %}
Die Konfiguration in diesem Abschnitt bezieht sich auf das [Zahlungs- und Versandarten Element](#elemente-zuweisen).
{% endhint %}

<details>

<summary>Größe der Zahlungs- und Versandarten Logos (in px)</summary>

Definiere die Größe der Zahlungs- und Versandarten [Icons](/academy/fachbegriffe/icon) in der Footer Zeile.

</details>

### Farben

<figure><img src="/files/12vaDzbuV3eCdPRgDsa8" alt=""><figcaption></figcaption></figure>

<details>

<summary>Rahmenfarbe Oben</summary>

Lege die obere Rahmenfarbe der Footer Zeile fest. Standardmäßig wird hier die globale [Rahmenfarbe](/theme-konfiguration/allgemein/theme-farben#rahmen) über eine [Variable](/academy/fachbegriffe/variable) eingebunden. Solltest du keinen Rahmen verwenden wollen, kannst du auch den Wert "transparent" im Feld hinterlegen.

</details>

<details>

<summary>Rahmenfarbe Unten</summary>

Hinterlege die untere Rahmenfarbe der Footer Zeile.

</details>

### Abstände

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

<details>

<summary>Oberer Außenabstand (in px)</summary>

Definiert den Abstand zwischen dem oberen Rahmen der Footer Zeile und den [Footer Spalten](/theme-konfiguration/footer/spalten).

</details>

<details>

<summary>Unterer Außenabstand (in px)</summary>

Definiert den Abstand zwischen dem unteren Rahmen der Footer Zeile und dem [Footer Abschluss](/theme-konfiguration/footer/abschluss).

</details>

<details>

<summary>Oberer Innenabstand (in px)</summary>

Definiert den Abstand zwischen dem Inhalt der Footer Zeile und dem oberen Rahmen.

</details>

<details>

<summary>Unterer Innenabstand (in px)</summary>

Definiert den Abstand zwischen dem Inhalt der Footer Zeile und dem unteren Rahmen.

</details>


# Abschluss

### Übersicht

Der Footer Abschluss ist der letzte Abschnitt im [Footer](/academy/fachbegriffe/footer) und bietet dir die nachstehenden Konfigurationsmöglichkeiten.

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

### Grundeinstellungen

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

<details>

<summary>Copyright</summary>

**Über dem Steuerhinweis**\
Mit dieser Einstellung kannst du dein Copyright im Footer Abschluss über dem Steuerhinweis anzeigen. Das Copyright ist ein einfaches Textelement mit dem du deinem Online Shop ein Branding verleihen kannst. Es lässt sich ebenfalls in der [Footer Zeile](/theme-konfiguration/footer/zeile#elemente-zuweisen) konfigurieren und kann über den [Textbaustein](https://docs.shopware.com/de/shopware-6-de/einstellungen/Textbausteine) `theme.footer.copyright` angepasst werden.

**Ausblenden**\
Das Copyright wird nicht im Footer Abschluss integriert.

</details>

### Abstände

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

<details>

<summary>Oberer Innenabstand (in px)</summary>

Definiert den Abstand zwischen [Footer Zeile](/theme-konfiguration/footer/zeile) und dem Inhalt des Footer Abschlusses.

</details>

<details>

<summary>Unterer Innenabstand (in px)</summary>

Definiert den Abstand zwischen dem Inhalt des Footer Abschlusses und dem Ende der Seite.

</details>

### Farben

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

<details>

<summary>Hintergrundbild</summary>

Hinterlege ein Hintergrundbild, das sich auf die volle Breite des Footer Abschlusses zieht.

</details>

<details>

<summary>Hintergrund</summary>

Lege eine Hintergrundfarbe für den Footer Abschluss fest. Diese zieht sich wie das Hintergrundbild auf die volle Breite. Falls du keine Hintergrundfarbe verwendem möchtest, kannst du an dieser Stelle "transparent" in das Feld eintragen. Beachte, dass die hier hinterlegte Farbe keine Auswirkung hat, sobald ein Hintergrundbild verknüpft ist.

</details>

### Typografie

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

<details>

<summary>Schriftfarbe</summary>

In diesem Feld kannst die Schriftfarbe im Footer Abschluss definieren. Standardmäßig wird an dieser Stelle die globale [Textfarbe](/theme-konfiguration/allgemein/typografie#textfarbe) als [Variable](/academy/fachbegriffe/variable) eingebunden.

</details>


# Produkt Detailseite

{% hint style="info" %}
Bitte mache dich zunächst mit dem Konzept der [Produkt Detailseite](/academy/fachbegriffe/produkt-detailseite) vertraut, bevor du mit der Konfiguration beginnst. Dies hilft dir die einzelnen Konfigurationsoptionen in diesem Abschnitt besser zu verstehen.
{% endhint %}

{% content-ref url="/pages/40zT5rCDaN1CalP17QZt" %}
[Layout](/theme-konfiguration/produkt-detailseite/layout)
{% endcontent-ref %}

{% content-ref url="/pages/fAePK9SZcrZQWk3ogJGf" %}
[Galerie](/theme-konfiguration/produkt-detailseite/galerie)
{% endcontent-ref %}

{% content-ref url="/pages/nSH0HFApiS7dm70jlad5" %}
[Buy Box](/theme-konfiguration/produkt-detailseite/buy-box)
{% endcontent-ref %}

{% content-ref url="/pages/DKLv8SVl6WvbdLswDTsT" %}
[Tabs](/theme-konfiguration/produkt-detailseite/tabs)
{% endcontent-ref %}

{% content-ref url="/pages/sLOhG4VRNfh2vIA5XnuG" %}
[Cross Selling](/theme-konfiguration/produkt-detailseite/cross-selling)
{% endcontent-ref %}


# Layout

### Übersicht

In diesem Abschnitt kannst du grundlegende Layout Einstellungen vornehmen, die sich auf die komplette [Produkt Detailseite](/academy/fachbegriffe/produkt-detailseite) auswirken.

### Konfiguration

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

<details>

<summary>Maximale Containerbreite (in px)</summary>

Definiere die maximale Containerbreite für den Inhalt deiner Produkt Detailseite. [Header](/academy/fachbegriffe/header) und [Footer](/academy/fachbegriffe/footer) sind dabei nicht betroffen. Hier kannst du eine abweichende Einstellung von der [globalen Containerbreite](/theme-konfiguration/allgemein/layout#maximale-containerbreite-in-px) vornehmen.

<img src="/files/qtfgJBhHJq8Hc2UPWFr1" alt="" data-size="original">

In der Regel macht es Sinn den Inhalt der Produkt Detailseite etwas schmaler zu gestalten. Andernfalls kann es vorkommen, dass Produktbilder in der [Galerie](/theme-konfiguration/produkt-detailseite/galerie) unverhältnismäßig groß skaliert werden können.

</details>

<details>

<summary>Layout</summary>

**8:4 (Größere Galerie)**\
Mit dem Verhältnis 8:4 wird die [Galerie](/theme-konfiguration/produkt-detailseite/galerie) deutlich größer und die [Buy Box](/theme-konfiguration/produkt-detailseite/buy-box) kleiner dargestellt.

**7:5 (Größere Galerie)**\
Mit dem Verhältnis 7:5 wird die [Galerie](/theme-konfiguration/produkt-detailseite/galerie) größer und die [Buy Box](/theme-konfiguration/produkt-detailseite/buy-box) kleiner dargestellt.

<img src="/files/ICPnr6OsFQXVmtbx91iA" alt="" data-size="original">

**6:6 (Gleiche Größe)**\
Mit dem Verhältnis 6:6 wird die [Galerie](/theme-konfiguration/produkt-detailseite/galerie) und die [Buy Box](/theme-konfiguration/produkt-detailseite/buy-box) gleich groß dargestellt.

<img src="/files/sLs2RLovLxsKUx3wZygJ" alt="" data-size="original">

</details>


# Galerie

### Übersicht

In diesem Abschnitt kannst du Einstellungen für deine Produktgalerie vornehmen. Die Galerie lässt sich hierbei in zwei Abschnitte unterteilen. Die Vorschau Navigation und das ausgewählte Bild.

<figure><img src="/files/cz0HGXI3v3y30Kvnfxp0" alt=""><figcaption><p>Galerie unseres Kunden <a href="https://spruchreif-geschenke.de/">https://spruchreif-geschenke.de/</a></p></figcaption></figure>

{% hint style="success" %}
Über das Galerie Element einer [Erlebniswelt](https://docs.shopware.com/de/shopware-6-de/Inhalte/Erlebniswelten) vom Typ "Produktseite" kann man die Position der Vorschau Navigation für Tablet und Desktop über die Einstellung "Vorschau Navigation" verändern.
{% endhint %}

### Grundeinstellungen

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

<details>

<summary>Style</summary>

**Standard**\
Es wird ein Galerie-Slider mit Thumbnails zur Anzeige der Produktbilder verwendet.

**Gitter**\
Die Produktbilder werden in einem Gitter ohne Thumbnail Navigation angezeigt.

</details>

<details>

<summary>Versatz (in px)</summary>

Die Produktgalerie bewegt sich standardmäßig beim Scrollen der Detailseite mit. Dies hat den Vorteil, dass deine Produktbilder stets im Fokus bleiben. Je nach [Konfiguration](/theme-konfiguration/header), kann sich die Höhe deines [Headers](/academy/fachbegriffe/header) jedoch unterscheiden. Da der Header ebenfalls ein mitscrollendes Seitenelement ist, kann es zu Überschneidungen von Produktgalerie und Header kommen. Damit man diesem Problem entgegensteuern kann, hast du die Möglichkeit in diesem Feld den Versatz zu definieren, damit die Galerie ausreichend Abstand zum Header behält.

</details>

<details>

<summary>Vorschau Navigation Anzeigemodus</summary>

Solltest du mit dem Konzept der [Anzeigemodi](/academy/fachbegriffe/anzeigemodus) noch nicht vertraut sein, empfehlen wir dir zunächst dich damit auseinanderzusetzen.

***

**Füllen**\
Mit diesem Anzeigemodus wird das Bild innerhalb der Vorschau Navigation auf alle Seiten gestreckt, sodass es die Box komplett ausfüllt. Je nach Seitenverhältnis des Bildes, kann es hier passieren, dass das Produktbild zugeschnitten wird.

**Strecken**\
Dieser Anzeigemodus streckt die Produktbilder innerhalb der Vorschau Navigations auf die maximale Größe ohne dabei das ursprüngliche Seitenverhältnis zu verändern.

</details>

<details>

<summary>Vorschau Navigation Breite (in px)</summary>

Definiert die Breite deiner Vorschau Navigation.

</details>

<details>

<summary>Vorschau Navigation Höhe (in px)</summary>

Definiert die Höhe deiner Vorschau Navigation.

</details>

<details>

<summary>Position Mobil</summary>

**Ausblenden**\
Die Vorschau Navigation wird mobil deaktiviert.

**Unterhalb**\
Die Vorschau Navigation wird mobil unterhalb des ausgewählten Bildes dargestellt.

</details>

<details>

<summary>Galeriebilder Ausrichtung</summary>

**Oben**\
Die Galeriebilder werden am oberen Rand ausgerichtet.

**Zentriert**\
Die Galeriebilder werden zentriert ausgerichtet.

</details>

### Linke Vorschau Navigation

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

<details>

<summary>Anzahl - Tablet</summary>

Definiert die Anzahl der Elemente der Vorschau Navigation für Tablets.

</details>

<details>

<summary>Anzahl - Laptop</summary>

Definiert die Anzahl der Elemente der Vorschau Navigation für Laptops.

</details>

<details>

<summary>Anzahl - Desktop</summary>

Definiert die Anzahl der Elemente der Vorschau Navigation für Desktops.

</details>

### Darunterliegende Vorschau Navigation

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

<details>

<summary>Anzahl - Tablet</summary>

Definiert die Anzahl der Elemente der Vorschau Navigation für Tablets.

</details>

<details>

<summary>Anzahl - Laptop</summary>

Definiert die Anzahl der Elemente der Vorschau Navigation für Laptops.

</details>

<details>

<summary>Anzahl - Desktop</summary>

Definiert die Anzahl der Elemente der Vorschau Navigation für Desktops.

</details>


# Buy Box

### Übersicht

Die Buy Box ist neben der [Galerie](/theme-konfiguration/produkt-detailseite/galerie) der zweite Hauptbestandteil der [Produkt Detailseite](/academy/fachbegriffe/produkt-detailseite) und enthält alle Informationen zum Produkt. Hierunter fallen bspw. Preis- und Lieferzeitangaben, aber auch die Mengenauswahl und der Warenkorb [Button](/academy/fachbegriffe/button). Durch die nachstehenden Konfigurationsmöglichkeiten kannst du die Buy Box ganz auf deine Wünsche zuschneiden. Die Felder sind hierbei von oben nach unten sortiert und entsprechend der Reihenfolge innerhalb der Buy Box.

<figure><img src="/files/3Ya5TVXudSfAHFBjcqM2" alt=""><figcaption><p>Buy Box unseres Kunden <a href="https://donari.de/">https://donari.de/</a></p></figcaption></figure>

### Produkttitel

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

<details>

<summary>Schriftgröße (in px)</summary>

Passe die Schriftgröße des Produkttitels an.

</details>

<details>

<summary>Schriftstärke</summary>

Definiert die Schriftstärke des Produkttitels. Je nach [Schriftart](/theme-konfiguration/allgemein/typografie) stehen dir hierbei folgende Konfigurationsoptionen zur Verfügung:

100 = Thin\
200 = Extra Light\
300 = Light\
400 = Normal\
500 = Medium\
600 = Semi Bold\
700 = Bold\
800 = Extra Bold\
900 = Black

</details>

<details>

<summary>Zeichenabstand (in px)</summary>

Passe den Zeichenabstand des Produkttitels an.

</details>

<details>

<summary>Großbuchstaben</summary>

**Ja**\
Schreibt den Produkttitel automatisch in Großbuchstaben. Somit muss der Name im [Produkt Modul](https://docs.shopware.com/de/shopware-6-de/kataloge/produkte) nicht in Großbuchstaben verfasst werden.

**Nein**\
Zeigt den Produkttitel so an wie er im [Produkt Modul](https://docs.shopware.com/de/shopware-6-de/kataloge/produkte) angelegt wurde.

</details>

<details>

<summary>Unterer Abstand (in px)</summary>

Hinterlege den unteren Abstand des Produktitels zum [Preis](#preis).

</details>

<details>

<summary>Schriftfarbe</summary>

Lege die Schriftfarbe des Produkttitels fest. Standardmäßig wird hier die [Überschriftfarbe](/theme-konfiguration/allgemein/typografie#ueberschriftfarbe) als [Variable](/academy/fachbegriffe/variable) eingebunden.

</details>

### Preis

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

<details>

<summary>Preis Schriftgröße (in px)</summary>

Definiere die Schriftgröße des Preises.

</details>

<details>

<summary>Preis Schriftstärke</summary>

Definiert die Schriftstärke des Preises. Je nach [Schriftart](/theme-konfiguration/allgemein/typografie) stehen dir hierbei folgende Konfigurationsoptionen zur Verfügung:

100 = Thin\
200 = Extra Light\
300 = Light\
400 = Normal\
500 = Medium\
600 = Semi Bold\
700 = Bold\
800 = Extra Bold\
900 = Black

</details>

<details>

<summary>Streichpreis Schriftgröße (in px)</summary>

Lege die Schriftgröße des Streichpreises fest.

</details>

<details>

<summary>Streichpreis Schriftstärke</summary>

Definiert die Schriftstärke des Streichpreises. Je nach [Schriftart](/theme-konfiguration/allgemein/typografie) stehen dir hierbei folgende Konfigurationsoptionen zur Verfügung:

100 = Thin\
200 = Extra Light\
300 = Light\
400 = Normal\
500 = Medium\
600 = Semi Bold\
700 = Bold\
800 = Extra Bold\
900 = Black

</details>

<details>

<summary>Rechter Abstand des Preises (in px)</summary>

Hiermit kannst du mehr oder weniger Abstand zwischen Preis und Streichpreis schaffen.

</details>

<details>

<summary>Formulierung der erweiterten Preise</summary>

**Standard**\
Im Shopware Standard erfolgt eine "Bis-Ab-Formulierung" wie folgt:

<img src="/files/GA3Z4T1ky4piVrckivIC" alt="" data-size="original">

**Ab-Formulierung**\
Die "Ab-Formulierung" kann helfen, dass Staffelpreise einfacher zu lesen sind:

<img src="/files/PPMR4UV0XSkDOduSzgFw" alt="" data-size="original">

</details>

<details>

<summary>Rabatt der erweiterten Preise anzeigen</summary>

**Ja**\
Die Staffelpreis Tabelle wird um die Spalte "Rabatt" erweitert, sodass die prozentuale Einsparung pro Stück mit höherer Anzahl für den Besucher besser ersichtlich wird:

<img src="/files/2fT0bOe1FcqkrhqKYxVb" alt="" data-size="original">

Der Spaltentitel "Rabatt" lässt sich hierbei über den [Textbaustein](https://docs.shopware.com/de/shopware-6-de/einstellungen/Textbausteine) `theme.detail.dataColumnDiscount` anpassen.

**Nein**\
Die Staffelpreis Tabelle wird nicht um die Spalte "Rabatt" erweitert.

</details>

### Grundpreisangabe

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

<details>

<summary>Schriftgröße (in px)</summary>

Passe die Schriftgröße der Grundpreisangabe an. Diese kann im [Produkt Modul](https://docs.shopware.com/de/shopware-6-de/kataloge/produkte#spezifikationen) im Tab "Spezifikationen" unter dem Abschnitt "Maße & Verpackung" pro Produkt und Variante definiert werden.

</details>

### Steuer

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

<details>

<summary>Schriftgröße (in px)</summary>

Passe die Schriftgröße des rechtlich notwendigen Steuerhinweises "Preise inkl. MwSt. zzgl. Versandkosten" an.

</details>

### Hersteller

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

<details>

<summary>Position</summary>

**Standard**\
Blendet den Hersteller unterhalb des [Steuerhinweises](#steuer) ein.

**Überhalb des Produkttitels**\
Integriert den Hersteller über dem [Produkttitel](#produkttitel).

**Ausblenden**\
Blendet den Hersteller aus. Dies kann Sinn machen, wenn man selbst der Hersteller all seiner Produkt ist.

</details>

<details>

<summary>Logo anzeigen</summary>

**Ja**\
Das Hersteller-Logo wird immer angezeigt, sofern es gepflegt ist.

**Nein**\
Das Hersteller-Logo wird nie angezeigt, auch wenn es hinterlegt ist.

</details>

<details>

<summary>Schriftgröße (in px)</summary>

Definiert die Schriftgröße des Herstellernamens. Voraussetzung ist hierfür das [Layout](#layout) "Text".

</details>

<details>

<summary>Schriftstärke</summary>

Definiert die Schriftstärke des Herstellers. Je nach [Schriftart](/theme-konfiguration/allgemein/typografie) stehen dir hierbei folgende Konfigurationsoptionen zur Verfügung:

100 = Thin\
200 = Extra Light\
300 = Light\
400 = Normal\
500 = Medium\
600 = Semi Bold\
700 = Bold\
800 = Extra Bold\
900 = Black

</details>

<details>

<summary>Unterstrichen</summary>

**Ja**\
Der Hersteller-Link wird unterstrichen dargestellt.

**Nein**\
Der Hersteller-Link wird nicht unterstrichen dargestellt.

</details>

<details>

<summary>Unterer Innenabstand (in px)</summary>

Definiert den Abstand zwischen Hersteller und dem Rahmen unterhalb des Herstellers.

</details>

<details>

<summary>Unterer Außenabstand (in px)</summary>

Definiert den Abstand zwischen dem Rahmen unterhalb des Herstellers und dem nächsten Element.

</details>

<details>

<summary>Rahmenfarbe unten</summary>

Legt die Farbe des Rahmens unterhalb des Herstellers fest. Standardmäßig wird hier die globale [Rahmenfarbe](/theme-konfiguration/allgemein/theme-farben#rahmen) als [Variable](/academy/fachbegriffe/variable) eingebunden. Wenn du die visuelle Trennlinie nicht anzeigen möchtest kannst du hier "transparent" in das Feld eintragen und den unteren Innenabstand entsprechend anpassen.

</details>

### Bewertungen

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

<details>

<summary>Position</summary>

**Unterhalb des Produkttitels**\
Zeigt die Sterne der Produktbewertungen direkt unter dem [Produkttitel](#produkttitel) an.

**Standard**\
Blendet die Sterne der Produktbewertungen standardmäßig unterhalb des [Herstellers](#hersteller) ein.

</details>

<details>

<summary>Schriftgröße (in px)</summary>

Legt die Schriftgröße für die Anzahl der Bewertungen hinter den Sternen fest.

</details>

<details>

<summary>Schriftfarbe</summary>

Definiert die Schriftfarbe für die Anzahl der Bewertungen hinter den Sternen. Standardmäßig wird hier die globale [Textfarbe](/theme-konfiguration/allgemein/typografie#textfarbe) als [Variable](/academy/fachbegriffe/variable) eingebunden.

</details>

<details>

<summary>Unterer Abstand (in px)</summary>

Legt den unteren Abstand der Bewertungen fest.

</details>

### Features

{% hint style="info" %}
Bei den [Features](/enthaltene-erweiterungen/features) handelt es sich um eine enthaltene Erweiterung des Themes. Diese können pro Produkt und Variante individuell angepasst und in diesem Abschnitt zusätzlich konfiguriert werden.
{% endhint %}

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

<details>

<summary>Icon</summary>

Hinterlege ein individuelles [Icon](/academy/fachbegriffe/icon), das als Listenpunkt deiner Features dient. Als Bibliothek können wir dir [Flaticon](https://www.flaticon.com/) empfehlen.

</details>

<details>

<summary>Icon Größe (in px)</summary>

Definiere die Icon Größe.

</details>

<details>

<summary>Schriftgröße (in px)</summary>

Legt die Schriftgröße der einzelnen Features fest.

</details>

### Lieferzeit

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

<details>

<summary>Rechter Icon Abstand (in px)</summary>

Definiere den rechten Abstand des Lieferzeit [Icons](/academy/fachbegriffe/icon).

</details>

<details>

<summary>Schriftgröße (in px)</summary>

Lege die Schriftgröße der Lieferzeit fest.

</details>

### Varianten

{% hint style="info" %}
Über jeder Variantenausprägung wird ein Titel wie bspw. "Farbe", "Größe", etc. angezeigt. Dieser wird nachfolgend als Gruppentitel bezeichnet.
{% endhint %}

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

<details>

<summary>Gruppentitel Schriftgröße (in px)</summary>

Legt die Schriftgröße des Gruppentitels fest.

</details>

<details>

<summary>Gruppentitel Schriftstärke</summary>

Definiert die Schriftstärke des Gruppentitels. Je nach [Schriftart](/theme-konfiguration/allgemein/typografie) stehen dir hierbei folgende Konfigurationsoptionen zur Verfügung:

100 = Thin\
200 = Extra Light\
300 = Light\
400 = Normal\
500 = Medium\
600 = Semi Bold\
700 = Bold\
800 = Extra Bold\
900 = Black

</details>

<details>

<summary>Gruppentitel Schriftfarbe</summary>

Passe die Schriftfarbe deiner Varianten Gruppentitel an. Standardmäßig wird hier die [Textfarbe](/theme-konfiguration/allgemein/typografie#textfarbe) als [Variable](/academy/fachbegriffe/variable) verknüpft.

</details>

<details>

<summary>Gruppentitel in Großbuchstaben</summary>

**Ja**\
Schreibt den Gruppentitel automatisch in Großbuchstaben. Somit muss der Name im [Eigenschaften Modul](https://docs.shopware.com/de/shopware-6-de/produkte/eigenschaften) nicht in Großbuchstaben verfasst werden.

**Nein**\
Zeigt den Gruppentitel so an wie er im [Eigenschaften Modul](https://docs.shopware.com/de/shopware-6-de/produkte/eigenschaften) angelegt wurde.

</details>

<details>

<summary>Style</summary>

Gibt dir die Möglichkeit die Auswahlfelder der Varianten in unterschiedlichen Theme Styles darzustellen:

***

Umrandet:

<img src="/files/RywFCvrMziKq5AVcokRI" alt="" data-size="original">

Ausgefüllt:

<img src="/files/3xw3vQXIA9BCIq8XGHgn" alt="" data-size="original">

</details>

<details>

<summary>Unterer Abstand (in px)</summary>

Definiert den unteren Abstand der Varianten zur Mengenauswahl.

</details>

<details>

<summary>Nicht verfügbare Varianten</summary>

Gibt dir die Möglichkeit nicht verfügbare Varianten unterschiedlich darzustellen.

***

Grau hinterlegen:

<img src="/files/9f8JAMA5XJL8EcfHc27f" alt="" data-size="original">

Gestrichelt umranden:

<img src="/files/vNDoGIK2wZFql2uGcdhV" alt="" data-size="original">

Durchstreichen:

<img src="/files/U6O6IKcljipRTQo2lwJd" alt="" data-size="original">

</details>

### Mengenauswahl

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

<details>

<summary>Position</summary>

**Oberhalb des Warenkorb Buttons**\
Stellt die Mengenauswahl über dem Warenkorb Button dar.

**Links neben dem Warenkorb Button**\
Stellt die Mengenauswahl links neben dem Warenkorb Button dar.

**Ausblenden**\
Deaktiviert die Mengenauswahl auf der Produkt Detailseite.

</details>

<details>

<summary>Eingabefeld Breite (in px)</summary>

Definiert die Breite des Eingabefeldes. Besonders bei Warenkörben mit hohen Mengen kann es Sinn ergeben das Feld breiter zu gestalten.

</details>

<details>

<summary>Unterer Abstand (in px)</summary>

Legt den unteren Abstand der Mengenauswahl zum Warenkorb Button fest.

</details>

### Warenkorb Button

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

<details>

<summary>Schriftgröße (in px)</summary>

Lege die Schriftgröße des Textes innerhalb des Warenkorb Buttons fest.

</details>

<details>

<summary>Schriftstärke</summary>

Definiert die Schriftstärke des Textes innerhalb des Warenkorb Buttons. Je nach [Schriftart](/theme-konfiguration/allgemein/typografie) stehen dir hierbei folgende Konfigurationsoptionen zur Verfügung:

100 = Thin\
200 = Extra Light\
300 = Light\
400 = Normal\
500 = Medium\
600 = Semi Bold\
700 = Bold\
800 = Extra Bold\
900 = Black

</details>

<details>

<summary>Großbuchstaben</summary>

**Ja**\
Schreibt den Text innerhalb des Warenkorb Buttons automatisch in Großbuchstaben. Somit muss der Name im [Textbaustein](https://docs.shopware.com/de/shopware-6-de/einstellungen/Textbausteine) `detail.addProduct` nicht in Großbuchstaben verfasst werden.

**Nein**\
Zeigt den Text innerhalb des Warenkorb Buttons so an wie er im [Textbaustein](https://docs.shopware.com/de/shopware-6-de/einstellungen/Textbausteine) `detail.addProduct` angelegt wurde.

</details>

<details>

<summary>Zeilenhöhe (in px)</summary>

Definiere die Zeilenhöhe des Textes innerhalb des Warenkorb Buttons.

</details>

<details>

<summary>Zeichenabstand (in px)</summary>

Lege den Zeichenabstand des Textes innerhalb des Warenkorb Buttons fest.

</details>

<details>

<summary>Innenabstand oben und unten (in px)</summary>

Hinterlege den oberen und unteren Innenabstand des Warenkorb Buttons.

</details>

<details>

<summary>Innenabstand links und rechts (in px)</summary>

Hinterlege den linken und rechten Innenabstand des Warenkorb Buttons.

</details>

<details>

<summary>Unterer Außenabstand (in px)</summary>

Definieren den unteren Abstand des Warenkorb Buttons zum Merkzettel.

</details>

### Merkzettel

{% hint style="info" %}
Der Merkzettel ist eine Shopware eigene Funktion, die im Standard deaktiviert ist. Vergewissere dich zunächst das [Feature zu aktivieren](https://docs.shopware.com/de/shopware-6-de/einstellungen/warenkorb#merkzettel).
{% endhint %}

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

<details>

<summary>Schriftgröße (in px)</summary>

Passe die Schriftgröße des "Zum Merkzettel hinzufügen" Textes an.

</details>

<details>

<summary>Zentrieren</summary>

**Ja**\
Zentriert den Text "Zum Merkzettel hinzufügen" unterhalb des Warenkorb Buttons.

**Nein**\
Richtet den Text "Zum Merkzettel hinzufügen" linksbündig aus.

</details>

<details>

<summary>Unterer Abstand (in px)</summary>

Definiert den unteren Abstand des Merkzettels zu den Spezifikationen.

</details>

### Spezifikationen

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

<details>

<summary>Anzeigemodus</summary>

**Standard**\
Alle Spezifikationen werden linksbündig ausgerichtet.

**Tabelle**\
Alle Spezifikationen werden tabellarisch ausgerichtet.

</details>

<details>

<summary>Produktnummer anzeigen</summary>

**Ja**\
Zeigt die Produktnummer an.

**Nein**\
Blendet die Produktnummer aus.

</details>

<details>

<summary>GTIN/EAN anzeigen</summary>

**Ja**\
Zeigt die GTIN/EAN an.

**Nein**\
Blendet die GTIN/EAN aus.

</details>

<details>

<summary>Hersteller-Produktnummer anzeigen</summary>

**Ja**\
Zeigt die Hersteller-Produktnummer an.

**Nein**\
Blendet die Hersteller-Produktnummer aus.

</details>

<details>

<summary>Maße</summary>

**In mm**\
Zeigt die Maße des Produkts in mm an.

**In cm**\
Zeigt die Maße des Produkts in cm an.

**Ausblenden**\
Blendet die Maße des Produkts aus.

</details>

<details>

<summary>Maße Anzeigemodus</summary>

**Standard**\
Zeigt die Maße jeweils in einer einzelnen Zeile an.

**Einzeilig**\
Zeigt alle Maße in einer Zeile an (B×H×L) .

</details>

<details>

<summary>Gewicht anzeigen</summary>

**Ja**\
Zeigt das Gewicht des Produkts an.

**Nein**\
Blendet das Gewicht des Produkts aus.

</details>

<details>

<summary>Anzahl der Nachkommastellen beim Gewicht</summary>

Hinterlege die Anzahl der Nachkommastellen beim Gewicht.

</details>

<details>

<summary>Unterer Abstand (in px)</summary>

Definiert den unteren Abstand der Spezifikationen.

</details>

### Teilen

{% hint style="info" %}
Die "Teilen-Funktion" ist ein Feature des Themes, das dir ermöglicht zusätzliche Interaktion mit deinen Produkten auf Sozialen Medien zu schaffen. Hierbei handelt es sich um einfache Links zu den Plattformen und um keine sog. "Shariff Buttons", die von datenschutzrechtlicher Relevanz sind.
{% endhint %}

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

<details>

<summary>Position</summary>

**Ende der Buy Box**\
Blendet die "Teilen-Funktion" unterhalb der Spezifikationen ein.

**Ausblenden**\
Deaktiviert die "Teilen-Funktion".

</details>

<details>

<summary>Oberer Abstand (in px)</summary>

Definiert den oberen Abstand der "Teilen-Funktion".

</details>


# Tabs

### Übersicht

Die Tabs enthalten alle wichtigen Produktinformationen. Dazu gehören u.A. Beschreibung und Eigenschaften, aber auch die verfügbaren Zahlungs- und Versandarten in deinem Shop. Hierbei bietet dir das Theme unterschiedliche Konfigurationsmöglichkeiten deine Tabs auf deine Bedürfnisse zuzuschneiden.

<figure><img src="/files/psymiVfykTenbRZXT1Fa" alt=""><figcaption><p>Tabs unseres Kunden <a href="https://outdoordino.de/">https://outdoordino.de/</a></p></figcaption></figure>

### Grundeinstellungen

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

<details>

<summary>Position</summary>

**Buy Box**\
Die Tabs werden in einem Akkordeon in der [Buy Box](/theme-konfiguration/produkt-detailseite/buy-box) unterhalb der Spezifikationen integriert.

**Unterhalb der Galerie**\
Die Tabs werden wie im Shopware Standard unterhalb der [Galerie](/theme-konfiguration/produkt-detailseite/galerie) eingebunden.

</details>

<details>

<summary>Tab Icons</summary>

**Ja**\
Zeigt ein passendes [Icon](/academy/fachbegriffe/icon) vor der Tab Beschreibung an.

**Nein**\
Deaktiviert die [Icons](/academy/fachbegriffe/icon) vor der Tab Beschreibung.

</details>

<details>

<summary>Icon des zusätzlichen Tabs</summary>

Das Theme bietet dir die Möglichkeit einen [zusätzlichen Tab](/enthaltene-erweiterungen/zusatzlicher-tab) mit individuellen Informationen pro Produkt auf der Detailseite zu integrieren.

In diesem Feld kannst du ein passendes, globales [Icon](/academy/fachbegriffe/icon) für deine zusätzlichen Tabs definieren. Als Bibliothek können wir dir [Flaticon](https://www.flaticon.com/) empfehlen.

</details>

<details>

<summary>Hersteller-Tab anzeigen</summary>

**Ja**\
Die Beschreibung des Herstellers wird in Form eines Tabs auf der Produkt Detailseite eingebunden, sofern sie vorhanden ist. Im Bezug auf die Produktsicherheitsverordnung (GPSR) kann dies ggf. rechtlich verpflichtend sein.

**Nein**\
Der Hersteller-Tab wird nicht integriert.

</details>

<details>

<summary>Bezahlung &#x26; Versand Tab anzeigen</summary>

**Ja**\
Die Tabs werden um einen "Bezahlung & Versand" Tab erweitert. Dieser Tab wird global auf jeder Produkt Detailseite eingebunden und kann über folgende [Textbausteine](https://docs.shopware.com/de/shopware-6-de/einstellungen/Textbausteine) angepasst werden:

Tab Beschreibung: `theme.detail.tabsPaymentAndShipping`\
Zahlungsinformationen: `theme.detail.paymentInformation`\
Versandinformationen: `theme.detail.shippingInformation`

**Nein**\
Der "Bezahlung & Versand" Tab wird nicht integriert.

</details>

<details>

<summary>Bezahlungslogos anzeigen</summary>

**Ja**\
Zeigt die Logos deiner [Zahlungsarten](https://docs.shopware.com/de/shopware-6-de/einstellungen/Zahlungsarten) im "Bezahlung & Versand" Tab an.

**Nein**\
Deaktiviert die Logos deiner [Zahlungsarten](https://docs.shopware.com/de/shopware-6-de/einstellungen/Zahlungsarten) im "Bezahlung & Versand" Tab.

</details>

<details>

<summary>Versandlogos anzeigen</summary>

**Ja**\
Zeigt die Logos deiner [Versandarten](https://docs.shopware.com/de/shopware-6-de/einstellungen/versand) im "Bezahlung & Versand" Tab an.

**Nein**\
Deaktiviert die Logos deiner [Versandarten](https://docs.shopware.com/de/shopware-6-de/einstellungen/versand) im "Bezahlung & Versand" Tab.

</details>

<details>

<summary>Akkordeon Style</summary>

Mit dieser Option kannst du zwischen unterschiedlichen Theme Styles für deine Akkordeons im Shop wählen. Betroffen sind hierbei die [Tabs innerhalb der Buy Box](#position), sowie die Fragen & Antworten vom [FAQ Feature](/enthaltene-erweiterungen/faqs).

***

Variante 1:

<img src="/files/YmmbksLZe6wu6W4aqDFr" alt="" data-size="original">

Variante 2:

<img src="/files/DiLvH4vBnkMaw8Mss1Y4" alt="" data-size="original">

</details>

### Qualitätssiegel

<figure><img src="/files/myJhfbj9hF8K0ODDOGwG" alt=""><figcaption><p>Qualitätssiegel unseres Kunden <a href="https://spruchreif-geschenke.de/">https://spruchreif-geschenke.de/</a></p></figcaption></figure>

Über die nachfolgende Konfiguration lassen sich bis zu zwei Qualitätssiegel unterhalb der Produkt Beschreibung integrieren. Zu jedem Qualitätssiegel lässt sich dabei ein passender Text pflegen.

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

<details>

<summary>Erstes Qualitätssiegel</summary>

Hinterlege das erste Qualitätssiegel. Der Inhalt rechts neben dem Bild lässt sich über den [Textbaustein](https://docs.shopware.com/de/shopware-6-de/einstellungen/Textbausteine) `theme.detail.qualitySealOne` anpassen.

</details>

<details>

<summary>Zweites Qualitätssiegel</summary>

Hinterlege das zweite Qualitätssiegel. Der Inhalt rechts neben dem Bild lässt sich über den [Textbaustein](https://docs.shopware.com/de/shopware-6-de/einstellungen/Textbausteine) `theme.detail.qualitySealTwo` anpassen.

</details>

### Nur für die Positions-Einstellung "Buy Box"

{% hint style="info" %}
Voraussetzung für diese Einstellungsmöglichkeit ist die [Position](#position) "Buy Box".
{% endhint %}

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

<details>

<summary>Beschreibung als Tab anzeigen</summary>

**Ja**\
Die Produkt Beschreibung wird als eigener Tab dargestellt, der auf- bzw. zuklappbar ist.

**Nein**\
Die Produkt Beschreibung wird standardmäßig ausgeschrieben.

</details>

### Nur für die Positions-Einstellung "Unterhalb der Galerie"

{% hint style="info" %}
Voraussetzung für diese Einstellungsmöglichkeiten ist die [Position](#position) "Unterhalb der Galerie".
{% endhint %}

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

<details>

<summary>Abstand zwischen den Tab Beschreibungen (in px)</summary>

Definiert der Abstand zwischen den Tab Beschreibungen.

</details>

<details>

<summary>Oberer und unterer Abstand der Tab Beschreibungen (in px)</summary>

Lege den oberen und unteren Innenabstand der Tab Beschreibungen fest. Dies hat besonders Auswirkung auf deren [Hover Effekt](/academy/fachbegriffe/hover-effekt).

</details>

<details>

<summary>Linker und rechter Abstand der Tab Beschreibungen (in px)</summary>

Lege den linken und rechten Innenabstand der Tab Beschreibungen fest. Dies hat besonders Auswirkung auf deren [Hover Effekt](/academy/fachbegriffe/hover-effekt).

</details>

### Typografie

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

<details>

<summary>Tab Beschreibungen in Großbuchstaben</summary>

**Ja**\
Schreibt die Tab Beschreibungen automatisch in Großbuchstaben. Somit muss der Name in den [Textbausteinen](https://docs.shopware.com/de/shopware-6-de/einstellungen/Textbausteine) nicht in Großbuchstaben verfasst werden.

**Nein**\
Zeigt die Tab Beschreibungen so an wie sie in den [Textbausteinen](https://docs.shopware.com/de/shopware-6-de/einstellungen/Textbausteine) angelegt wurden.

</details>

<details>

<summary>Beschreibung Schriftgröße (in px)</summary>

Definiert die Schriftgröße der Produkt Beschreibung.

</details>

### Farben

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

<details>

<summary>Rahmen</summary>

Lege die Rahmenfarbe der Tabs fest. Standardmäßig wird hier die globale [Rahmenfarbe](/theme-konfiguration/allgemein/theme-farben#rahmen) als [Variable](/academy/fachbegriffe/variable) eingebunden.

</details>


# Cross Selling

### Übersicht

Neben [Galerie](/theme-konfiguration/produkt-detailseite/galerie), [Buy Box](/theme-konfiguration/produkt-detailseite/buy-box) und den [Tabs](/theme-konfiguration/produkt-detailseite/tabs), spielt auch das [Cross Selling](/academy/fachbegriffe/cross-selling) auf der Produkt Detailseite eine entscheidende Rolle, die zum Erfolg deines Online Shops beiträgt. Dir stehen hierfür nachstehende Konfigurationsoptionen zur Verfügung.

<figure><img src="/files/KYn88NVKQO9u85wD6iPZ" alt=""><figcaption><p>Cross Selling unseres Kunden <a href="https://wisy-water.com/">https://wisy-water.com/</a></p></figcaption></figure>

### Konfiguration

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

<details>

<summary>Tab Beschreibungen in Großbuchstaben</summary>

**Ja**\
Schreibt die Tab Beschreibungen automatisch in Großbuchstaben. Somit muss der Titel des Cross Sellings im [Produkt Modul](https://docs.shopware.com/de/shopware-6-de/kataloge/produkte#cross-selling) nicht in Großbuchstaben verfasst werden.

**Nein**\
Zeigt die Tab Beschreibungen so an wie die Titel im Reiter "Cross Selling" im [Produkt Modul](https://docs.shopware.com/de/shopware-6-de/kataloge/produkte#cross-selling) angelegt wurden.

</details>


# Erlebniswelten

{% hint style="info" %}
Bitte mache dich zunächst mit dem Konzept der [Erlebniswelten](https://docs.shopware.com/de/shopware-6-de/Inhalte/Erlebniswelten) vertraut, bevor du mit der Konfiguration beginnst. Dies hilft dir die einzelnen Konfigurationsoptionen in diesem Abschnitt besser zu verstehen.
{% endhint %}

{% content-ref url="/pages/ZeTQqbmX3bMR8PGMzRV7" %}
[Breadcrumb](/theme-konfiguration/erlebniswelten/breadcrumb)
{% endcontent-ref %}

{% content-ref url="/pages/5U4ZvDFOX4XFmoc4sDfK" %}
[Filter](/theme-konfiguration/erlebniswelten/filter)
{% endcontent-ref %}

{% content-ref url="/pages/yvIx26AGFPB9tYbluW4a" %}
[Sidebar](/theme-konfiguration/erlebniswelten/sidebar)
{% endcontent-ref %}

{% content-ref url="/pages/9XTIifnwEDgOglPvBING" %}
[Kategorie-Navigation](/theme-konfiguration/erlebniswelten/kategorie-navigation)
{% endcontent-ref %}

{% content-ref url="/pages/fjaJRz6cLK8WeemURYDU" %}
[Listing](/theme-konfiguration/erlebniswelten/listing)
{% endcontent-ref %}

{% content-ref url="/pages/bAvFemIjexbXfDThbMV3" %}
[Produkt Box](/theme-konfiguration/erlebniswelten/produkt-box)
{% endcontent-ref %}


# Breadcrumb

### Übersicht

Die [Breadcrumb](/academy/fachbegriffe/breadcrumb) ist ein grundlegendes Navigationselement auf deinen [Kategorie](/academy/fachbegriffe/kategorieseite)- und [Produkt Detailseiten](/academy/fachbegriffe/produkt-detailseite). So kann sie einerseits über die nachfolgenden Konfigurationsfelder weiter personalisiert werden. Andererseits kann man sie jedoch auch über das [Breadcrumb Feature](/enthaltene-erweiterungen/breadcrumb) des Themes seitenspezifisch verschieben oder auch komplett deaktivieren.

<figure><img src="/files/fqZB0k5ckvFt0ARFz4NI" alt=""><figcaption><p>Breadcrumb unseres Kunden <a href="https://safe-t.ch/">https://safe-t.ch/</a></p></figcaption></figure>

{% hint style="success" %}
Ein Breadcrumb Element ist aktiv, sofern die entsprechende Kategorie oder ein mit ihr verknüpftes Produkt geöffnet wurde. Das aktive Element ist hierbei immer das letzte innerhalb der Breadcrumb.&#x20;
{% endhint %}

### Typografie

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

<details>

<summary>Schriftgröße der Elemente (in px)</summary>

Definiert die Schriftgröße der einzelnen Breadcrumb Elemente.

</details>

<details>

<summary>Icon Größe (in px)</summary>

Lege die Größe der ">" [Icons](/academy/fachbegriffe/icon) zwischen den Breadcrumb Elementen fest.

</details>

<details>

<summary>Schriftstärke der Elemente</summary>

Definiere die Schriftstärke der Breadcrumb Elemente. Je nach [Schriftart](/theme-konfiguration/allgemein/typografie) stehen dir hierbei folgende Konfigurationsoptionen zur Verfügung:

100 = Thin\
200 = Extra Light\
300 = Light\
400 = Normal\
500 = Medium\
600 = Semi Bold\
700 = Bold\
800 = Extra Bold\
900 = Black

</details>

<details>

<summary>Schriftstärke des aktiven Elements</summary>

Lege die Schriftstärke des aktiven Breadcrumb Elements fest. Je nach [Schriftart](/theme-konfiguration/allgemein/typografie) stehen dir hierbei folgende Konfigurationsoptionen zur Verfügung:

100 = Thin\
200 = Extra Light\
300 = Light\
400 = Normal\
500 = Medium\
600 = Semi Bold\
700 = Bold\
800 = Extra Bold\
900 = Black

</details>

### Abstände

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

<details>

<summary>Linker &#x26; rechter Icon Abstand (in px)</summary>

Hinterlege den linken und rechten Abstand zwischen den ">" [Icons](/academy/fachbegriffe/icon).

</details>

### Farben

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

<details>

<summary>Schriftfarbe der Elemente</summary>

Passt die Schriftfarbe der Breadcrumb Elemente an. Standardmäßig wird hier die globale [Textfarbe](/theme-konfiguration/allgemein/typografie#textfarbe) mittels [Variable](/academy/fachbegriffe/variable) verknüpft.

</details>

<details>

<summary>Schriftfarbe des aktiven Elements</summary>

Legt die Schriftfarbe des aktiven Breadcrumb Elements fest. Standardmäßig wird hier die globale [Textfarbe](/theme-konfiguration/allgemein/typografie#textfarbe) mittels [Variable](/academy/fachbegriffe/variable) verknüpft.

</details>

<details>

<summary>Hintergrund der Elemente</summary>

Definiere die Hintergrundfarbe der Breadcrumb Elemente. Solltest du keine Hintergrundfarbe wollen, kannst du an dieser Stelle "transparent" in das Feld eintragen.

</details>

<details>

<summary>Hintergrund des aktiven Elements</summary>

Definiere die Hintergrundfarbe des aktiven Breadcrumb Elements. Solltest du keine Hintergrundfarbe wollen, kannst du an dieser Stelle "transparent" in das Feld eintragen.

</details>


# Filter

### Übersicht

Filter sind ein essenzieller Bestandteil von [Kategorieseiten](/academy/fachbegriffe/kategorieseite). Sie ermöglichen es dem Besucher die vorgeschlagenen Produkte auf eine von ihm definierte Anzahl an Kriterien zu reduzieren. Dabei gibt es im Shopware Standard über die [Erlebniswelten](https://docs.shopware.com/de/shopware-6-de/Inhalte/Erlebniswelten) zwei verschiedene Möglichkeiten deine Filter darzustellen. Standardmäßig über dem [Listing](/theme-konfiguration/erlebniswelten/listing) oder links daneben innerhalb der [Sidebar](/academy/fachbegriffe/sidebar). Zusätzlich lassen sich spezifische Filter über ein [Theme Feature](/enthaltene-erweiterungen/aufgeklappte-sidebar-filter) und die nachstehende Konfiguration standardmäßig immer geöffnet darstellen.

<figure><img src="/files/ZeT3qxK0i6WzFrunOjiU" alt=""><figcaption><p>Sidebar-Filter unseres Kunden <a href="https://bsp-shop.ch/">https://bsp-shop.ch/</a></p></figcaption></figure>

### Grundeinstellungen

Gerade bei vielen Filteroptionen ist es für den Besucher häufig übersichtlicher, wenn man Optionen, die keine Ergebnisse liefern, deaktiviert.

{% hint style="info" %}
Shopware bietet dir hierfür eine hauseigene Konfigurationsmöglichkeit. Unter "Einstellungen > Produkte > Filteroptionen ohne Ergebnisse deaktivieren" kannst du dies vornehmen. Sobald diese Option aktiv ist, werden die Filteroptionen ohne Ergebnisse gräulich hinterlegt, sodass sie nicht mehr anklickbar sind.
{% endhint %}

Mit der nachfolgenden Theme Konfigurationsoption hast du die Möglichkeit deaktivierte Filteroptionen aber auch komplett auszublenden. Dies erleichtert dem Besucher sich bei vielen Filteroptionen besser zurecht zu finden. Hierbei werden nur noch möglich kombinierbare Optionen zur Verfügung stehen. Die Filterkombinationen werden dabei immer Ergebnisse liefern.

{% hint style="warning" %}
Voraussetzung für das nachfolgende Konfigurationsfeld ist, dass "Einstellungen > Produkte > Filteroptionen ohne Ergebnisse deaktivieren" aktiviert ist.
{% endhint %}

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

<details>

<summary>Sichtbarkeit von Filteroptionen ohne Ergebnisse</summary>

**Deaktivieren**\
Die Filter werden wie im Shopware Standard deaktivert und gräulich hinterlegt. Der Besucher kann die abgestellten Filteroptionen immer noch sehen.

**Ausblenden** \
Deaktivierte Filteroptionen werden komplett ausgeblendet.

</details>

### Farben

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

<details>

<summary>Button Hintergrund</summary>

Definiere die Hintergrund Farbe der Filter Buttons.

***

Hinweis: Mit dem Wählen einer Farbe werden auf dem Filter automatisch Abstände angewendet. Solltest du keine Farbe hinterlegen wollen, gebe bitte "transparent" ein.

</details>

<details>

<summary>Button Schriftfarbe</summary>

Lege die Schriftfarbe innerhalb der Filter Buttons fest. Standardmäßig wird hier die globale [Textfarbe](/theme-konfiguration/allgemein/typografie#textfarbe) über eine [Variable](/academy/fachbegriffe/variable) eingebunden.

</details>

<details>

<summary>Dropdown Hintergrund</summary>

Definiere die Hintergrund Farbe der Filter Dropdowns.

***

Hinweis: Mit dem Wählen einer Farbe werden auf dem Filteropdown automatisch Abstände angewendet. Solltest du keine Farbe hinterlegen wollen, gebe bitte "transparent" ein.

</details>

<details>

<summary>Dropdown Schriftfarbe</summary>

Lege die Schriftfarbe innerhalb der Filter Dropdowns fest. Standardmäßig wird hier die globale [Textfarbe](/theme-konfiguration/allgemein/typografie#textfarbe) über eine [Variable](/academy/fachbegriffe/variable) eingebunden.

</details>

### Sidebar

In dieser Sektion kannst du u.A. festlegen die standardmäßigen Shopware Filter "Hersteller", "Bewertung" und "Preis" aufgeklappt darzustellen. Selbst angelegte Filter lassen sich über ein [Theme Feature](/enthaltene-erweiterungen/aufgeklappte-sidebar-filter) geöffnet darstellen.

{% hint style="info" %}
Die Shopware Standard Filter lassen sich über die Listing Element-Einstellungen in der Erlebniswelt der Kategorie weiter anpassen.
{% endhint %}

{% hint style="warning" %}
Die nachfolgenden Einstellungen finden lediglich bei Sidebar-Filtern Anwendung.
{% endhint %}

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

<details>

<summary>Hersteller-Filter geöffnet darstellen</summary>

**Ja**\
Der Hersteller-Filter wird beim Laden der Seite direkt aufgeklappt.

**Nein** \
Der Hersteller-Filter wird beim Laden der Seite standardmäßig zugeklappt.

</details>

<details>

<summary>Bewertung-Filter geöffnet darstellen</summary>

**Ja**\
Der Bewertung-Filter wird beim Laden der Seite direkt aufgeklappt.

**Nein** \
Der Bewertung-Filter wird beim Laden der Seite standardmäßig zugeklappt.

</details>

<details>

<summary>Preis-Filter geöffnet darstellen</summary>

**Ja**\
Der Preis-Filter wird beim Laden der Seite direkt aufgeklappt.

**Nein** \
Der Preis-Filter wird beim Laden der Seite standardmäßig zugeklappt.

</details>

<details>

<summary>Dropdown Rand</summary>

**Rahmen**\
Um das Dropdown wird ein Rahmen mit der globalen [Rahmenfarbe](/theme-konfiguration/allgemein/theme-farben#rahmen) dargestellt.

**Schatten** \
Das Dropdown hebt sich mit einem Schatten ab. Den Schatten selbst kannst du in der [globalen Konfiguration](/theme-konfiguration/allgemein/layout#schatten) anpassen.

**Keiner** \
Es bildet sich kein Rand um das Dropdown.

</details>


# Sidebar

### Übersicht

Die [Sidebar](/academy/fachbegriffe/sidebar) kann über die [Erlebniswelten-Sektionen](https://docs.shopware.com/de/shopware-6-de/Inhalte/Erlebniswelten#neues-layout-anlegen) eingestellt werden. Das Theme bietet dir hierbei nachstehende Konfigurationsmöglichkeiten.

### Konfiguration

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

<details>

<summary>Sticky Sidebar</summary>

**Ja**\
Die Sidebar bewegt sich beim Scrollen mit nach oben und unten.

**Nein**\
Die Sidebar bleibt statisch an ihrem Platz.

</details>

<details>

<summary>Versatz (in px)</summary>

Sobald die Sticky Sidebar aktiviert wurde, kommt diese Einstellung zum Tragen. So kann sich je nach [Konfiguration](/theme-konfiguration/header) die Höhe deines [Headers](/academy/fachbegriffe/header) unterscheiden. Da der Header ebenfalls ein mitscrollendes Seitenelement ist, kann es zu Überschneidungen von Sidebar und Header kommen. Damit man diesem Problem entgegensteuern kann, hast du die Möglichkeit in diesem Feld den Versatz zu definieren, damit die Sidebar ausreichend Abstand zum Header behält.

</details>


# Kategorie-Navigation

### Übersicht

Eine einfache Navigation ist ein essenzieller Bestandteil eines gut funktionierenden Shops. Sobald tiefere Hierarchiestrukturen entstehen, ist es schnell nicht mehr möglich alles über die [Flyout Navigation](/academy/fachbegriffe/flyout-navigation) abzubilden. So gibt es neben dem [Unterkategorie-Navigations-Feature](/enthaltene-erweiterungen/unterkategorie-navigation) auch die Möglichkeit ein Navigations-Element direkt in die [Sidebar](/academy/fachbegriffe/sidebar) zu integrieren. Das ganze lässt sich über die Erlebniswelten auf [Kategorieseiten](/academy/fachbegriffe/kategorieseite) einbinden und über die Einstellungsmöglichkeiten in diesem Abschnitt weiter verfeinern.

<figure><img src="/files/2gyEU9msbwVVo74pVqjz" alt=""><figcaption><p>Sidebar Kategorie-Navigation unseres Kunden <a href="https://www.biobay.de/">https://www.biobay.de/</a></p></figcaption></figure>

### Konfiguration

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

<details>

<summary>Layout der Kategorie-Navigation</summary>

**Standard**\
Das Shopware Standard Layout wird angewendet. Hierbei ist der aktuelle Pfad, sowie alle Haupt- und Unterkategorien zu sehen.

<img src="/files/pcyza3I7lOHBSISFUyxi" alt="" data-size="original">

\
**Aufklappbar**\
Dieses Layout orientiert sich stark am Standard Layout. Jedoch ist jede Kategorie über ein "+" und "-" Symbol direkt auf- und zuklappbar. Dies erleichtert die Navigation besonders bei komplexen Kategoriestrukturen.&#x20;

<img src="/files/72OCMKiqFEJ4ozy3mJ2d" alt="" data-size="original">

\
**Minimal**\
Mit der minimalen Ausgestaltung kannst du die Kategorie-Navigation sehr einfach halten. Hierbei werden lediglich die Ober- und Unterkategorien, sowie die aktuell geöffnete Seite angezeigt.

<img src="/files/K6R8jzNiln5sUwpKSNJn" alt="" data-size="original">

</details>


# Listing

### Übersicht

Das Listing ist das zentrale Element jeder [Kategorieseite](/academy/fachbegriffe/kategorieseite). Hierin werden alle mit der Kategorie verknüpften Artikel in Form von [Produkt Boxen](/theme-konfiguration/erlebniswelten/produkt-box) nebeneinander dargestellt. Jede Produkt Box verlinkt dabei auf die jeweilige [Produkt Detailseite](/academy/fachbegriffe/produkt-detailseite). Durch die folgenden Konfigurationsoptionen kannst du das Listing weiter auf deine Bedürfnisse anpassen.

<figure><img src="/files/i8OzBoMyErWm0AV9Silx" alt=""><figcaption><p>Listing unseres Kunden <a href="https://donari.de/">https://donari.de/</a></p></figcaption></figure>

### Produkte pro Zeile

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

{% hint style="info" %}
In dieser Sektion kannst du die Anzahl aller Produkte pro Zeile für jedes Endgerät spezifisch anpassen.
{% endhint %}

### Produkte pro Zeile (Sidebar-Layout)

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

{% hint style="info" %}
Dieser Abschnitt ermöglicht dir die Anzahl der Produkte pro Zeile Endgerät spezifisch für Sidebar-Layouts zu definieren.
{% endhint %}

### Abstände

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

<details>

<summary>Spaltenabstand (in px)</summary>

Definiere den Abstand zwischen den Produkt Boxen im Listing.

</details>

<details>

<summary>Spaltenabstand für Smartphones (in px)</summary>

Definiere den Abstand zwischen den Produkt Boxen im Listing für Smartphones.

</details>

<details>

<summary>Unterer Abstand der Produkt Box (in px)</summary>

Lege den unteren Abstand der Produkt Box innerhalb des Listings fest. Je größer der Wert, desto größer der Zeilenabstand des Listings.

</details>

<details>

<summary>Unterer Abstand der Produkt Box für Smartphones (in px)</summary>

Lege den unteren Abstand der Produkt Box innerhalb des Listings für Smartphones fest. Je größer der Wert, desto größer der Zeilenabstand des Listings.

</details>


# Produkt Box

Übersicht

Produkt Boxen kommen in Shopware an unterschiedlichen Stellen zum Einsatz. Beispiele sind hierfür das [Listing](/theme-konfiguration/erlebniswelten/listing) auf [Kategorieseiten](/academy/fachbegriffe/kategorieseite) oder ein Produkt Slider im [Cross Selling](/academy/fachbegriffe/cross-selling) auf der [Produkt Detailseite](/academy/fachbegriffe/produkt-detailseite). Sie bilden das zentrale Element einer Produktverlinkung und können über die [Erlebniswelten](https://docs.shopware.com/de/shopware-6-de/Inhalte/Erlebniswelten) dynamisch an unterschiedlichen Stellen in deinem Shop eingebunden werden. Hierbei kannst du vereinzelte Einstellungen direkt in den Element-Einstellungen in einer Erlebniswelt vornehmen. Möchtest du jedoch das Aussehen deiner Produkt Boxen global anpassen, bilden die Konfigurationsmöglichkeiten in diesem Abschnitt die Grundlage dafür.

<figure><img src="/files/v4jGWG4dc8ClTYRsg877" alt=""><figcaption><p>Produkt Box unseres Kunden <a href="https://wisy-water.com/">https://wisy-water.com/</a></p></figcaption></figure>

### Grundeinstellungen

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

<details>

<summary>Rand</summary>

**Rahmen**\
Ein Rahmen umschließt die Produkt Box. Die Farbe des Rahmens kannst du im Abschnitt [Farben](#farben) konfigurieren.

**Schatten**\
Die Produkt Box hebt sich mit einem Schatten ab. Hierbei wird die globale [Schattenkonfiguration](/theme-konfiguration/allgemein/layout#schatten) angewendet.

**Keiner**\
Es bildet sich kein Rand um die Produkt Box.

</details>

<details>

<summary>Hover Effekt</summary>

**Slide Up**\
Die Produkt Box bewegt sich ein Stück nach oben, sobald man mit dem Mauszeiger über sie fährt. Wenn der Mauszeiger die Produkt Box wieder verlässt, senkt sich die Produkt Box wieder herab.

<img src="/files/c1UvuTi4cnsmazaLsISs" alt="" data-size="original">

**Keiner**\
Es wird kein [Hover Effekt](/academy/fachbegriffe/hover-effekt) angewendet.

</details>

<details>

<summary>Hersteller Badge anzeigen</summary>

**Ja**\
Der Herstellername wird am linken oberen Rand der Produkt Box ausgegeben.

**Nein**\
Der Herstellername wird nicht angezeigt.

</details>

<details>

<summary>Rabatt Badge anzeigen</summary>

**Ja**\
Der Rabatt wird am linken oberen Rand der Produkt Box ausgegeben, sofern ein [Streichpreis](https://docs.shopware.com/de/shopware-6-de/kataloge/produkte#preise) auf dem Produkt gepflegt ist.

**Nein**\
Der Rabatt wird nicht angezeigt.

</details>

<details>

<summary>Ausrichtung</summary>

**Zentriert**\
Der Text wird innerhalb der Produkt Box zentriert.

**Linksbündig**\
Der Text wird innerhalb der Produkt Box linksbündig ausgerichtet.

</details>

<details>

<summary>Platzhalter verwenden</summary>

**Ja**\
Platzhalter sind maßgeblich dafür verantwortlich, ob sich die Inhalte verschiedener Produkt Boxen wie Titel oder Preise auf einer gleichen horizontalen Linie befinden. Enthält bspw. ein Produkt Bewertungen ein anderes hingegen nicht, muss ein Platzhalter geschaffen werden, sodass die Preise beider Produkt Boxen weiterhin auf der selben Höhe bleiben. Gerade wenn ein [Rand](#rand) konfiguriert wurde, kann es sonst schnell vorkommen, dass Produkt Boxen sichtlich nicht mehr alle dieselbe Höhe haben. Dies führt im Zweifelsfall zu einem uneinheitlichen Bild in [Listings](/theme-konfiguration/erlebniswelten/listing) oder auch Produkt Slidern.

**Nein**\
Es werden keine Platzhalter angewendet.

</details>

<details>

<summary>Titellänge</summary>

**Eine Zeile**\
Der Produkttitel wird auf eine Zeile begrenzt. Sollte er nicht komplett in die Zeile passen, wird er mit einem "…" abgeschnitten.

**Zwei Zeilen**\
Der Titel streckt sich immer auf zwei Zeilen. Sollte ein Titel kürzer als zwei Zeilen sein, wird der übrige Platz mit einem weißen Platzhalter aufgefüllt. Sollte der Titel länger sein, wird er ebenfalls mit einem "…" abgeschnitten.

**Drei Zeilen**\
Der Titel streckt sich immer auf drei Zeilen. Sollte ein Titel kürzer als drei Zeilen sein, wird der übrige Platz mit einem weißen Platzhalter aufgefüllt. Sollte der Titel länger sein, wird er ebenfalls mit einem "…" abgeschnitten.

**Automatisch**\
Der Titel wird immer komplett ausgeschrieben. Hierbei kann nicht mehr garantiert werden, dass sich die Inhalte unterschiedlicher Produkt Boxen weiterhin auf derselben Höhe befinden. Gerade bei einem gewählten [Rand](#rand), kann dies zu Inkonsistenz zwischen den Produkt Boxen führen.

</details>

<details>

<summary>Bewertungen</summary>

**Standard**\
Die Produktbewertungen werden wie im Shopware Standard unterhalb des Titels integriert.

**Ausblenden**\
Die Bewertungen werden innerhalb der Produkt Box deaktiviert.

</details>

<details>

<summary>Produktnummer</summary>

**Unterhalb des Produkttitels**\
Die Produktnummer wird unterhalb des Titels integriert.

**Ausblenden**\
Die Produktnummer wird nicht in die Produkt Box eingebunden.

</details>

<details>

<summary>Produktnummer Länge</summary>

**Eine Zeile**\
Die Produktnummer wird auf eine Zeile begrenzt. Sollte sie nicht komplett in die Zeile passen, wird sie mit einem "…" abgeschnitten.

**Zwei Zeilen**\
Die Produktnummer streckt sich immer auf zwei Zeilen. Sollte eine Produktnummer kürzer als zwei Zeilen sein, wird der übrige Platz mit einem weißen Platzhalter aufgefüllt. Sollte die Produktnummer länger sein, wird sie ebenfalls mit einem "…" abgeschnitten.

**Automatisch**\
Die Produktnummer wird immer komplett ausgeschrieben. Hierbei kann nicht mehr garantiert werden, dass sich die Inhalte unterschiedlicher Produkt Boxen weiterhin auf derselben Höhe befinden. Gerade bei einem gewählten [Rand](#rand), kann dies zu Inkonsistenz zwischen den Produkt Boxen führen.

</details>

<details>

<summary>Lieferzeit</summary>

**Unterhalb des Produkttitels**\
Die Lieferzeit wird unterhalb des Titels integriert.

**Ausblenden**\
Die Lieferzeit wird nicht in die Produkt Box eingebunden.

</details>

<details>

<summary>Lieferzeit Länge</summary>

**Eine Zeile**\
Die Lieferzeit wird auf eine Zeile begrenzt. Sollte sie nicht komplett in die Zeile passen, wird sie mit einem "…" abgeschnitten.

**Zwei Zeilen**\
Die Lieferzeit streckt sich immer auf zwei Zeilen. Sollte eine Lieferzeit kürzer als zwei Zeilen sein, wird der übrige Platz mit einem weißen Platzhalter aufgefüllt. Sollte die Lieferzeit länger sein, wird sie ebenfalls mit einem "…" abgeschnitten.

**Automatisch**\
Die Lieferzeit wird immer komplett ausgeschrieben. Hierbei kann nicht mehr garantiert werden, dass sich die Inhalte unterschiedlicher Produkt Boxen weiterhin auf derselben Höhe befinden. Gerade bei einem gewählten [Rand](#rand), kann dies zu Inkonsistenz zwischen den Produkt Boxen führen.

</details>

<details>

<summary>Eigenschaften</summary>

**Standard**\
Die [Eigenschaften](https://docs.shopware.com/de/shopware-6-de/kataloge/produkte#eigenschaften) werden in die Produkt Box integriert.

**Ausblenden**\
Die Eigenschaften werden nicht in die Produkt Box eingebunden.

</details>

<details>

<summary>Beschreibung</summary>

**Standard**\
Die Beschreibung wird wie im Shopware Standard in die Produkt Box eingebunden.

**Kurzbeschreibung**\
Blendet die über das gleichnamige [Feature](/enthaltene-erweiterungen/kurzbeschreibung) gepflegte Kurzbeschreibung ein.

**Ausblenden**\
Die Beschreibung wird nicht in die Produkt Box integriert.

</details>

<details>

<summary>Grundpreis</summary>

**Standard**\
Der Grundpreis wird wie im Shopware Standard in die Produkt Box eingebunden.

**Ausblenden**\
Der Grundpreis wird nicht in die Produkt Box integriert.

</details>

<details>

<summary>Warenkorb/Details Button</summary>

**Hover**\
Der Warenkorb/Details [Button](/academy/fachbegriffe/button) erscheint, wenn man mit dem Mauszeiger über das Produktbild fährt. Er verschwindet wieder, sobald der Mauszeiger das Bild wieder verlässt.

<img src="/files/l5T2ZNmikteertJ1zPJe" alt="" data-size="original">

**Standard**\
Der Warenkorb/Details [Button](/academy/fachbegriffe/button) wird wie im Shopware Standard am Ende der Produkt Box statisch eingebunden.

**Ausblenden**\
Der Warenkorb/Details [Button](/academy/fachbegriffe/button) wird entfernt.

</details>

### Produktbild

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

<details>

<summary>Globaler Produktbild Hover</summary>

**Ja**\
Das zweite Bild der [Produktgalerie](/theme-konfiguration/produkt-detailseite/galerie) wird als [Hover Effekt](/academy/fachbegriffe/hover-effekt) verwendet. Erfahre mehr über das [Produktbild Hover Feature](/enthaltene-erweiterungen/produktbild-hover) des Themes.

**Nein**\
Es wird kein Produktbild [Hover Effekt](/academy/fachbegriffe/hover-effekt) integriert.

</details>

<details>

<summary>Minimale Höhe (in px)</summary>

In den Erlebniswelten hast du für jedes Element, das Produkt Boxen enthält, die Möglichkeit den [Anzeigemodus](/academy/fachbegriffe/anzeigemodus) zu definieren. Diese Option hat hierbei lediglich Auswirkung auf den Anzeigemodus "Füllen" und legt letztendlich die Größe des Bildes innerhalb der Produkt Box fest.

</details>

<details>

<summary>Abgerundete Ecken (in px)</summary>

Definiere wie stark die Ecken deiner Artikelbilder abgerundet sein sollen. Diese Einstellung wirkt sich global auf alle Produktbilder aus.

</details>

### Abstände

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

<details>

<summary>Oberer/unterer Innenabstand bei Rand (in px)</summary>

Lege den oberen und unteren Innenabstand der Produkt Box fest. Diese Einstellung wird lediglich bei einem gewählten [Rand-Styling](#rand) angewendet.

</details>

<details>

<summary>Linker/rechter Innenabstand bei Rand (in px)</summary>

Lege den linken und rechten Innenabstand der Produkt Box fest. Diese Einstellung wird lediglich bei einem gewählten [Rand-Styling](#rand) angewendet.

</details>

<details>

<summary>Oberer/unterer Innenabstand bei Rand für Smartphones (in px)</summary>

Lege den oberen und unteren Innenabstand der Produkt Box für Smartphones fest. Diese Einstellung wird lediglich bei einem gewählten [Rand-Styling](#rand) angewendet.

</details>

<details>

<summary>Linker/rechter Innenabstand bei Rand für Smartphones (in px)</summary>

Lege den linken und rechten Innenabstand der Produkt Box für Smartphones fest. Diese Einstellung wird lediglich bei einem gewählten [Rand-Styling](#rand) angewendet.

</details>

<details>

<summary>Unterer Abstand des Titels (in px)</summary>

Lege den unteren Abstand des Produkttitels fest.

</details>

<details>

<summary>Unterer Abstand der Produktnummer (in px)</summary>

Definiere den unteren Abstand der Produktnummer.

</details>

<details>

<summary>Unterer Abstand der Lieferzeit (in px)</summary>

Hinterlege den unteren Abstand der Lieferzeit.

</details>

<details>

<summary>Unterer Abstand des Preises (in px)</summary>

Lege den unteren Abstand des Preises fest.

</details>

### Typografie

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

{% hint style="info" %}
In diesem Abschnitt kannst du die Schriftgröße und Schriftstärke der einzelnen Elemente innerhalb der Produkt Box festlegen. Je nach [Schriftart](/theme-konfiguration/allgemein/typografie) stehen dir für die Schriftstärke folgende Konfigurationsoptionen zur Verfügung:

100 = Thin\
200 = Extra Light\
300 = Light\
400 = Normal\
500 = Medium\
600 = Semi Bold\
700 = Bold\
800 = Extra Bold\
900 = Black
{% endhint %}

### Farben

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

<details>

<summary>Produkt Box Hintergrund</summary>

Lege die Hintergrundfarbe für die Produkt Box fest.

</details>

<details>

<summary>Produkt Box Bild Hintergrund</summary>

Lege die Hintergrundfarbe für die Produkt Box Bilder fest.

{% hint style="info" %}
Beachte, dass die Farbe lediglich angewendet wird, wenn du ein ausgeschnittenes Bildformat wie bspw. PNG verwendest.
{% endhint %}

</details>

<details>

<summary>Rabatt Badge Hintergrund</summary>

Lege die Hintergrundfarbe für das Rabatt Badge fest. Standardmäßig wird in diesem Feld die Farbe von [fehlerhaften Status-Ausgaben](/theme-konfiguration/allgemein/status-ausgaben#fehler) über eine [Variable](/academy/fachbegriffe/variable) verknüpft.

</details>

<details>

<summary>Topseller Badge Hintergrund</summary>

Lege die Hintergrundfarbe für das Topseller Badge fest. Standardmäßig wird in diesem Feld die Farbe von [warnenden Status-Ausgaben](/theme-konfiguration/allgemein/status-ausgaben#hinweis) über eine [Variable](/academy/fachbegriffe/variable) verknüpft. Das Badge lässt sich über das [Produkt Modul](https://docs.shopware.com/de/shopware-6-de/kataloge/produkte#informationen) einblenden, indem du die Option "Produkt hervorheben" aktivierst.

</details>

<details>

<summary>Neu Badge Hintergrund</summary>

Lege die Hintergrundfarbe für das Neu Badge fest. Standardmäßig wird in diesem Feld die Farbe von [erfolgreichen Status-Ausgaben](/theme-konfiguration/allgemein/status-ausgaben#erfolg) über eine [Variable](/academy/fachbegriffe/variable) verknüpft. Das Badge lässt sich über das [Produkt Modul](https://docs.shopware.com/de/shopware-6-de/kataloge/produkte#auszeichnung) einblenden, indem du das "Erscheinungsdatum" pflegst. Alle Produkte, die älter als 30 Tage sind verlieren automatisch das Badge. Die Anzahl dieser Tage kannst du in den [Einstellungen zum Produkt](https://docs.shopware.com/de/shopware-6-de/einstellungen/produktliste#neue-artikel-6) festlegen.

</details>

<details>

<summary>Rahmen</summary>

Voraussetzung hierfür ist die Option "Rahmen" im Feld [Rand](#rand).

***

Definiere die Rahmenfarbe der Produkt Box. Standardmäßig wird hier die globale [Rahmenfarbe](/theme-konfiguration/allgemein/theme-farben#rahmen) über eine [Variable](/academy/fachbegriffe/variable) eingebunden.

</details>

<details>

<summary>Titel</summary>

Hinterlege die Schriftfarbe des Titels. Standardmäßig wird hier die globle [Textfarbe](/theme-konfiguration/allgemein/typografie#textfarbe) über eine [Variable](/academy/fachbegriffe/variable) integriert.

</details>

<details>

<summary>Streichpreis</summary>

Hinterlege die Schriftfarbe des Streichpreises. Standardmäßig wird hier die Farbe für [fehlerhafte Status-Ausgaben](/theme-konfiguration/allgemein/status-ausgaben#fehler) über eine [Variable](/academy/fachbegriffe/variable) integriert.

</details>

<details>

<summary>Grundpreis</summary>

Hinterlege die Schriftfarbe des Grundpreises. Standardmäßig wird hier die Farbe für [Preise](/theme-konfiguration/allgemein/e-commerce#preis) über eine [Variable](/academy/fachbegriffe/variable) integriert.

</details>


# Checkout

{% hint style="info" %}
Bitte mache dich zunächst mit dem Konzept des [Checkouts](/academy/fachbegriffe/checkout) vertraut, bevor du mit der Konfiguration beginnst. Dies hilft dir die einzelnen Konfigurationsoptionen in diesem Abschnitt besser zu verstehen. Zudem wird der Checkout durch das Theme erheblich optimiert. Erfahre dazu mehr im [Checkout Feature](/enthaltene-erweiterungen/checkout).
{% endhint %}

{% content-ref url="/pages/z1LTx4l1TcoKRyr1iHfD" %}
[Layout](/theme-konfiguration/checkout/layout)
{% endcontent-ref %}

{% content-ref url="/pages/76SenKESQIHSsKo9Ps6H" %}
[Warenkorb](/theme-konfiguration/checkout/warenkorb)
{% endcontent-ref %}

{% content-ref url="/pages/u9dsOHIZMX1wq4ctuYO6" %}
[Registrierung](/theme-konfiguration/checkout/registrierung)
{% endcontent-ref %}

{% content-ref url="/pages/DqLIH7S5NPoEFU8DNQWL" %}
[Abschluss](/theme-konfiguration/checkout/abschluss)
{% endcontent-ref %}


# Layout

### Übersicht

In diesem Abschnitt kannst du globale Einstellungen für deinen gesamten [Checkout Prozess](/academy/fachbegriffe/checkout) vornehmen. Alle Konfigurationsoptionen wirken sich dabei gleichermaßen auf [Registrierung](/theme-konfiguration/checkout/registrierung), Bestätigung und [Abschluss](/theme-konfiguration/checkout/abschluss) aus.

<figure><img src="/files/W61BSzIhkxH54WQqf83d" alt=""><figcaption><p>Checkout Registrierung unseres Kunden <a href="https://outdoordino.de/">https://outdoordino.de/</a></p></figcaption></figure>

### Grundeinstellungen

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

<details>

<summary>Größe des Logos (in px)</summary>

Lege die Größe deines Logos im Checkout fest. Standardmäßig wird hier das [Desktop Logo](/theme-konfiguration/allgemein/medien#desktop) eingebunden.

</details>

<details>

<summary>Sticky Warenkorbübersicht</summary>

**Ja**\
Die Warenkorbübersicht auf der rechten Seite bewegt sich beim Scrollen mit. Somit hat der Kunde seine Bestellung stets im Blick. Gerade bei kleinen Durchschnittswarenkörben im B2C Bereich kann diese Einstellung Sinn machen.

**Nein**\
Die Warenkorbübersicht bleibt beim Scrollen statisch an ihrem Platz. Diese Einstellung empfiehlt sich besonders bei großen Durchschnittswarenkörben, wie es bspw. im B2B Bereich der Fall ist. Dies erleichtert es den Überblick bei vielen Positionen zu behalten.

</details>

<details>

<summary>Produktnummer der Positionen anzeigen</summary>

**Ja**\
Die Produktnummer wird bei den einzelnen Positionen, sofern sie gepflegt wurde, angezeigt. Dies kann im B2B Bereich häufig Sinn ergeben.

**Nein**\
Die Produktnummer der Positionen wird deaktiviert. Gerade im B2C Bereich ist die Angabe von Produktnummer im Checkout nicht so wichtig.

</details>

<details>

<summary>MwSt. der Positionen anzeigen</summary>

**Ja**\
Die MwSt. wird bei den einzelnen Positionen angezeigt. Dies kann im B2B Bereich häufig Sinn ergeben.

**Nein**\
Die MwSt. der Positionen wird deaktiviert. Gerade im B2C Bereich ist die Angabe der MwSt. pro Position im Checkout nicht so wichtig.

</details>

<details>

<summary>Gutschein-Feld</summary>

**Anzeigen**\
Es wird ein Gutschein-Feld in den Checkout integriert.

**Ausblenden**\
Es wird kein Gutschein-Feld in den Checkout eingebunden.

</details>

<details>

<summary>Vorteile</summary>

**Keine**\
Es werden keine Vorteile im Checkout angezeigt.

**Ein Vorteil**\
Es wird ein Vorteil im Checkout angezeigt.

**Zwei Vorteile**\
Es werden zwei Vorteile im Checkout angezeigt.

***

Den Inhalt kannst du in den [Textbausteinen](https://docs.shopware.com/de/shopware-6-de/einstellungen/Textbausteine) jederzeit auf deine Bedürfnisse anpassen und übersetzen.\
\
Name: `theme.checkout.advantagesTitle`\
Standardwert: Vorteile wenn du bei uns bestellst:

Name: `theme.checkout.advantage1`\
Standardwert: \<div class="mb-1">100 Tage Testen\</div> \<div>Du kannst alle unserer Produkte 100 Tage testen. Falls sie dir nicht gefallen, kannst du sie einfach an uns zurückschicken.\</div>

Name: `theme.checkout.advantage2`\
Standardwert: \<div class="mb-1">Schneller Versand\</div> \<div>Wir alle hassen das ewige Warten auf unsere Pakete - wir setzen daher alles daran, dass deine Bestellung schnell bei dir ankommt.\</div>

</details>

### Medien

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

<details>

<summary>Bild zum ersten Vorteil</summary>

Hier kann noch ein passendes Bild zum ersten Vorteil hinterlegt werden.

</details>

<details>

<summary>Bild zum zweiten Vorteil</summary>

Hier kann noch ein passendes Bild zum zweiten Vorteil hinterlegt werden.

</details>

### Farben

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

<details>

<summary>Primärfarbe</summary>

Legt die Primärfarbe fest. Diese Farbe zieht sich wie ein roter Faden durch deinen gesamten Checkout.

</details>


# Warenkorb

### Übersicht

Der [Warenkorb](/academy/fachbegriffe/warenkorb) lässt sich als Start des [Checkouts](/academy/fachbegriffe/checkout) bezeichnen und bietet dir nachstehende Konfigurationsmöglichkeiten.

<figure><img src="/files/0TmobGU9Pn6BdgimgA8t" alt=""><figcaption><p>Warenkorb unseres Kunden <a href="https://outdoordino.de/">https://outdoordino.de/</a></p></figcaption></figure>

### Konfiguration

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

<details>

<summary>Versanddetails</summary>

Die Versanddetails im Warenkorb enthalten die Auswahlfelder "Lieferland", "Zahlungsart" und "Versandart." Mit diesen Einstellungen kann der Kunde seine Bestellung mit den einhergehenden Nebenleistungen, wie bspw. Versandkosten, automatisch schon im Warenkorb ohne Verwendung eines Kundenkontos berechnen.

***

**Zugeklappt**\
Die Versanddetails unterhalb der einzelnen Positionen sind beim Laden der Seite standardmäßig zugeklappt.

**Aufgeklappt**\
Die Versanddetails werden beim Seitenaufruf direkt aufgeklappt dargestellt.

</details>

<details>

<summary>Produktnummer Feld</summary>

**Anzeigen**\
Zeigt ein Feld an, über das sich ein Produkt mittels Produktnummer hinzufügen lässt.

**Ausblenden**\
Blendet das Feld aus.

</details>


# Registrierung

### Übersicht

Um den [Checkout](/academy/fachbegriffe/checkout) abschließen zu können müssen zunächst die Kundendaten erfasst werden. In diesem Schritt kann der Kunde alle benötigten Daten für ein Kundenkonto hinterlegen oder sich mit seinen bestehenden Login-Daten anmelden. Für die Checkout Registrierung kannst du nachfolgende Optionen konfigurieren.

<figure><img src="/files/W61BSzIhkxH54WQqf83d" alt=""><figcaption><p>Checkout Registrierung unseres Kunden <a href="https://outdoordino.de/">https://outdoordino.de/</a></p></figcaption></figure>

### Konfiguration

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

Der Express Checkout ist die schnellstmögliche Option eine Bestellung abzuschließen. Verschiedene Zahlungsanbieter wie PayPal, Klarna oder Amazon bieten dir die Möglichkeit Express Checkout [Buttons](/academy/fachbegriffe/button) an unterschiedlichen Stellen in deinem Shop zu integrieren. Für die Checkout Registrierung gibt es mit diesem Feld die Option ein passendes Styling anzuwenden, damit die Express Checkout Buttons hervorgehoben werden. Dies kann zu einer verbesserten [Conversion Rate](/academy/fachbegriffe/conversion) in deinem Checkout beitragen.

<figure><img src="/files/7UeFydBcxdt5j6sZkMkV" alt=""><figcaption><p>Express Checkout Styling unseres Kunden <a href="https://outdoordino.de/">https://outdoordino.de/</a></p></figcaption></figure>

{% hint style="success" %}
Sollte es in deinem Shop zu Styling Problemen bei der Integration der Express Checkout Buttons mit einem Zahlungsanbieter kommen, kannst du uns dieses [Problem gerne mitteilen](/support/fehlermitteilung). Wir werden schnellstmöglich versuchen eine passende Lösung dafür zu finden.
{% endhint %}

<details>

<summary>Express Checkout Styling anzeigen</summary>

**Ja**\
Das Express Checkout Styling wird integriert.

**Nein**\
Es wird keine Express Checkout Styling angewendet.

</details>


# Abschluss

### Übersicht

Der Bestellabschluss ist die letzte Seite, die der Kunde im [Checkout Prozess](/academy/fachbegriffe/checkout) sieht. An dieser Stelle wird der Bestelleingang bestätigt. Nun kann der Kunde alle relevanten Daten zu seiner Bestellung wie Liefer- und Rechnungsadresse, Zahlungs- und Versandart, sowie weitere Informationen zur Bestellung einsehen. Die nachfolgenden Konfigurationsmöglichkeiten stehen dir für diese Seite zur Verfügung.

<figure><img src="/files/VnTcD2mhsFTvOGyRBgJS" alt=""><figcaption><p>Checkout Abschluss unseres Kunden <a href="https://outdoordino.de/">https://outdoordino.de/</a></p></figcaption></figure>

### Konfiguration

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

<details>

<summary>Bankverbindung bei folgenden Zahlungsarten anzeigen</summary>

In diesem Feld kannst du alle Zahlungsarten wählen, bei denen du deine Bankverbindung auf der Bestellabschlussseite einblenden möchtest. Besonders für die Zahlungsart "Vorkasse" kann dies häufig Sinn ergeben.&#x20;

Die [Shopbetreiber-Bankinformationen](https://docs.shopware.com/de/shopware-de/einstellungen/stammdaten#stammdaten) müssen dabei zusätzlich in den Stammdaten gepflegt werden. Sobald die Bankinformationen hinterlegt sind und du die Zahlungsart(en) in diesem Auswahlfeld verknüpft hast, werden die entsprechenden Daten im Bestellabschluss über den Informationen integriert.&#x20;

Den Verwendungszweck kannst du über den [Textbaustein](https://docs.shopware.com/de/shopware-6-de/einstellungen/Textbausteine) `theme.checkout.bankAccountPurpose` anpassen.

</details>


# Offcanvas

{% hint style="info" %}
Bitte mache dich zunächst mit dem Konzept des [Offcanvas](/academy/fachbegriffe/offcanvas) vertraut, bevor du mit der Konfiguration beginnst. Dies hilft dir die einzelnen Konfigurationsoptionen in diesem Abschnitt besser zu verstehen.
{% endhint %}

{% content-ref url="/pages/UFxUz5QAnwB5TyVM8m6p" %}
[Navigation](/theme-konfiguration/offcanvas/navigation)
{% endcontent-ref %}


# Navigation

### Übersicht

Das [Offcanvas Menü](/academy/fachbegriffe/offcanvas) ist das zentrale Element der mobilen Navigation. Hierbei stehen dir die nachfolgenden Konfigurationsoptionen zur Verfügung.

<figure><img src="/files/r8JTpCm67h3b2W7uvKrf" alt="" width="188"><figcaption><p>Offcanvas Navigation unseres Kunden <a href="https://wisy-water.com/">https://wisy-water.com/</a></p></figcaption></figure>

### Widgets

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

{% hint style="info" %}
**Hinweise zum Sprach Schalter**

Solltest du einen mehrsprachigen Shop betreiben wollen, so bietet dir Shopware von Haus aus bereits ein Sprach Schalter Feature. Die jeweiligen Sprachen, die du in deinem [Verkaufskanal](https://docs.shopware.com/de/shopware-6-de/einstellungen/Verkaufskanaele) definierst, werden anschließend in einem Sprach Schalter in der [Top Bar](/academy/fachbegriffe/top-bar) und im [Offcanvas Menü](/academy/fachbegriffe/offcanvas) ausgegeben. Durch diesen kann der Kunde im Shop mit wenigen Klicks die Sprache ändern. Ähnliche Einstellungen können ebenfalls in der Theme Konfiguration für die [Top Bar](/theme-konfiguration/header/top-bar#widgets) vorgenommen werden.
{% endhint %}

<details>

<summary>Sprach-Schalter-Layout</summary>

Stelle den Sprach-Schalter in unterschiedlichen Layouts dar:

***

**Text** \
Zeigt nur den Text der ausgewählten Sprache an.

**Flagge** \
Zeigt nur die Flagge der ausgewählten Sprache an.

**Flagge und Text** \
Zeigt sowohl die Flagge als auch den Text der ausgewählten Sprache an.

</details>

<details>

<summary>Sprach-Schalter-Dropdown-Layout</summary>

Stelle das Sprach-Schalter-Dropdown in unterschiedlichen Layouts dar.

***

**Text** \
Zeigt nur den Text der ausgewählten Sprache an.

**Flagge**\
Zeigt nur die Flagge der ausgewählten Sprache an.

**Flagge und Text** \
Zeigt sowohl die Flagge als auch den Text der ausgewählten Sprache an.

</details>


# Benutzerdefiniert

### Übersicht

In diesem Tab lässt sich individueller Code im Theme integrieren. Häufig erfordern Bewertungssiegel oder Trackingdienste einen eingebunden `<script>` Tag, damit die Anwendung korrekt funktioniert. Aber auch wenn man eigenen CSS Code integrieren möchte, hilft dir dieser Abschnitt weiter.

{% hint style="warning" %}
Beachte, dass fehlerhafte Eingaben in die nachfolgenden Feldern schnell zu Problemen führen können. Im Zweifel verhält sich der Shop nicht mehr wie es vorher der Fall war. Überlasse diese Einstellung daher lieber einem Fachmann.
{% endhint %}

{% hint style="info" %}
Idealerweise fügst du individuellen Code über eine eigene [Customizing-Erweiterung](https://developer.shopware.com/docs/guides/plugins/plugins/plugin-base-guide.html) hinzu.
{% endhint %}

### Einstellungen

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

<details>

<summary>Eigenes HTML</summary>

Dieser HTML-Code wird direkt im `<head>` Bereich geladen, um bspw. `<meta>` oder `<style>` Tags zu ergänzen.

</details>

<details>

<summary>Eigenes CSS</summary>

Dieser CSS-Code wird direkt im Head-Bereich geladen und sollte mit einem [CSS-Minifier](https://www.toptal.com/developers/cssminifier) Tool minimiert werden.

</details>

<details>

<summary>Eigenes JavaScript</summary>

Dieser JavaScript-Code wird am Ender der HTML-Seite hinzugefügt. Dieses Feld empfiehlt sich für externe Integrationen wie Siegel oder Trackingdienste.

</details>


# Enthaltene Erweiterungen

Neben den umfassenden Einstellungsmöglichkeiten über die [Theme Konfiguration](/theme-konfiguration) bietet dir das Theme auch noch viele weitere Funktionen die über den Leistungsumfang von herkömmlichen Themes hinausgehen. So enthält das Theme neben einer idealen SEO Ausgangsbasis und weiteren nützlichen Features, auch bspw. die Werkzeuge, um einen vollumfänglichen Blog in deinem Shop zu integrieren. Auf dich warten viele kostenlose Funktionen, für die du i.d.R. weitere Apps aus dem Shopware Store erwerben müsstest.


# Breadcrumb

Die [Breadcrumb](/academy/fachbegriffe/breadcrumb) ist in den meisten Fällen ein essenzieller Bestandteil der Produkt- und Kategorienavigation, sowie der Barrierefreiheit in deinem Shop. Es macht jedoch nicht immer Sinn die Breadcrumb direkt unter der Hauptnavigation darzustellen.

Gerade bei den meisten [Landingpages](/academy/fachbegriffe/landingpage) wird sie nicht benötigt. Aber auch wenn man mit großen Bannern arbeiten möchte, kann die Breadcrumb häufig im Weg sein, sodass gewisse Layouts nur noch schwer realisierbar sind. Aus diesen Gründen gibt es das Breadcrumb Erlebniswelten Element, das dir die Möglichkeit bietet die Breadcrumb zu verschieben oder komplett auszublenden.

<figure><img src="/files/dkRB3SJcy8vnvglLZjIa" alt=""><figcaption><p>Entfernte Breadcrumb bei unserem Kunden <a href="https://wisy-water.com/">https://wisy-water.com/</a></p></figcaption></figure>

### Voraussetzungen

Solltest du mit den [Shopware 6 Erlebniswelten](https://docs.shopware.com/de/shopware-6-de/Inhalte/Erlebniswelten) noch nicht vertraut sein, empfehlen wir dir zunächst dich etwas intensiver mit diesem hervorragenden Werkzeug auseinanderzusetzen. Für diese Anleitung wird ein grundlegendes Verständnis der Erlebniswelten vorausgesetzt.

{% embed url="<https://www.youtube.com/watch?t=244s&v=ru2FYpcnYQ4>" %}

### Breadcrumb Element verwenden

Erstelle zunächst eine Erlebniswelt, in der du das Breadcrumb Element verwenden möchtest. Ziehe im nächsten Schritt einen beliebigen Block, der ein Element in voller Breite enthält, in eine Sektion. Wir verwenden dafür den Standard Shopware Text Block.

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

Als nächstes kannst du das Text Element innerhalb des Blocks über die zwei Pfeile am rechten oberen Rand des Elements austauschen. Anschließend öffnet sich ein Fenster mit allen verfügbaren Elementen. Wähle in dieser Ansicht das Element "Breadcrumb". Nun wurde das Text Element erfolgreich mit dem Breadcrumb Element ausgetauscht.

### Breadcrumb ausblenden

Möchtest du die Breadcrumb in dieser Erlebniswelt komplett ausblenden, kannst du über die [Sichtbarkeit](https://docs.shopware.com/de/shopware-6-de/Inhalte/Erlebniswelten#sichtbarkeit-fuer-viewports) des Blocks entscheiden, für welche Endgerätgrößen die Breadcrumb alles deaktiviert werden soll.

### Breadcrumb verschieben

Wenn du die Breadcrumb an einer anderen Position einbinden möchtest, kannst du den Block über den [Navigator](https://docs.shopware.com/de/shopware-6-de/Inhalte/Erlebniswelten#navigator) beliebig an die entsprechende Position per Drag & Drop verschieben.


# Checkout

Der [Checkout](/academy/fachbegriffe/checkout) ist der wichtigste Vorgang in einem Online Shop und bildet das Herzstück deiner E-Commerce Präsenz. Daher haben wir uns dafür entschieden den kompletten Vorgang vom Warenkorb, über die Registrierung und Checkout Bestätigung bis hin zum Bestellabschluss zu optimieren.

Dabei haben wir uns layouttechnisch am bewährten Shopify Checkout orientiert, der zu den best konvertierenden Checkouts aller Shopsysteme zählt. Einfaches Design, gepaart mit optimierter Usability für Desktop, Tablet und mobilen Endgeräten, verleiht deinem Shop mit dem Theme einen klaren Vorteil zu herkömmlichen Shopware Shops.

So gibt es zunächst Layout-Anpassungen im Warenkorb:

<div><figure><img src="/files/K7Bv1oxbBCGT7heKhJlS" alt=""><figcaption><p>Shopware Standard Warenkorb</p></figcaption></figure> <figure><img src="/files/4UBIW718IyOLY27YMvFq" alt=""><figcaption><p>Theme Warenkorb</p></figcaption></figure></div>

Eine komplette Überarbeitung findet erstmals in der Checkout Registrierung statt. So wird das Login Formular ersichtlicher, Registrierungs-Formularfelder übersichtlicher zusammengefasst und die Eingabe von Gutscheincodes ermöglicht:

<div><figure><img src="/files/f6HdZz64owgMcJzcDNt7" alt=""><figcaption><p>Shopware Standard Checkout Registrierung</p></figcaption></figure> <figure><img src="/files/N9V7klf20bk5KMb4YXOz" alt=""><figcaption><p>Theme Checkout Registrierung</p></figcaption></figure></div>

Auch die Checkout Bestätigung wurde grundlegend neugestaltet. Liefer- und Rechnungsadresse, sowie die Zahlungs- und Versandarten werden übersichtlicher präsentiert. Die Zustimmung der AGBs findet direkt am "Zahlungspflichtig bestellen" Button statt, sodass der Besucher nicht noch einmal zum Start der Seite scrollen muss. Die Warenkorbpositionen bleiben außerdem dauerhaft für den Besucher ersichtlich. Ebenfalls ist auch hier ist die Eingabe von Gutscheincodes möglich:

<div><figure><img src="/files/ttwT58CxQRlO7eRowOBU" alt=""><figcaption><p>Shopware Standard Checkout Bestätigung</p></figcaption></figure> <figure><img src="/files/wsHpnTEdvluQjZnoUg1t" alt=""><figcaption><p>Theme Checkout Bestätigung</p></figcaption></figure></div>

Abschließend wurde auch der Bestellabschluss optimiert. Informationen zur Bestellung werden kompakter zusammengefasst und die Warenkorbpositionen befinden sich nach wie vor bis zum Ende an der selben Stelle:

<div><figure><img src="/files/XGn3hIKD048dIIz2oaRK" alt=""><figcaption><p>Shopware Standard Checkout Abschluss</p></figcaption></figure> <figure><img src="/files/rf5D8TVka6oSGora3MlY" alt=""><figcaption><p>Theme Checkout Abschluss</p></figcaption></figure></div>


# Datenblätter

Gerade technische Produkte haben viel Erklärungsbedarf und benötigen häufig Anleitungen oder zusätzliche Informationen in Form von Datenblättern. Aus diesem Grund bietet dir das Theme von Haus aus die Funktion, bis zu vier Dokumente auf Produktebene in Form von Tabs auszuspielen.

<figure><img src="/files/ShNThhfPB4Rlyh6VldYa" alt=""><figcaption><p>Nutzung des Datenblätter Features bei unserem Kunden <a href="https://wisy-water.com/">https://wisy-water.com/</a></p></figcaption></figure>

Die Mediendateien werden hierfür unter "\[Produkt] > Spezifikationen > Zusatzfelder > Datenblätter" verknüpft.&#x20;

{% hint style="info" %}
Beachte hierbei die unterstützten Dateiformate PDF, TXT, JPG, PNG oder GIF.
{% endhint %}

Sobald du eine oder mehrere Mediendateien hinterlegt hast, erscheint auf der Produkt Detailseite ein zusätzlicher Reiter mit dem Namen "Datenblätter". Als Titel für deine Dokumente wird standardmäßig immer der Dateiname herangezogen, mit dem du die Datei in Shopware hochgeladen hast.

Um dies ansprechender für deine Kunden zu gestalten, lässt sich ein Titel für jeden deiner Mediendateien pflegen. So kannst du unter "Inhalte > Medien > \[Datei]" unter dem Abschnitt "Metadaten" einen eigenen Titel pflegen.

{% hint style="info" %}
Produktmedien landen standardmäßig automatisch im Ordner "Product Media".
{% endhint %}

<div align="center" data-full-width="false"><figure><img src="/files/glsMsDc8PIbbcRULgdOS" alt=""><figcaption><p>In diesem Datenblatt wird der Titel "Anleitung" angezeigt.</p></figcaption></figure></div>

Den Namen "Datenblätter" des Tabs kannst du wie gewohnt über die [Textbausteine](https://docs.shopware.com/de/shopware-6-de/einstellungen/Textbausteine) nach deinem Belieben anpassen. Der Name des Textbausteins hierfür lautet: `detail.tabsDataSheet`


# Erlebniswelten Blöcke

Mit den Shopware Standard Blöcken, kann man mit individuellen Layouts in den Erlebniswelten schnell an seine Grenzen stoßen. Damit du einzigartige Landingpages, Shop-, Kategorie- und Produktseiten erstellen kannst, stellen wir dir mit dem Theme jede Menge neue, durchdachte Blöcke zur Verfügung.

<figure><img src="/files/1IYaGRdeJjHdPsUE2esC" alt=""><figcaption></figcaption></figure>

### Übersicht aller neuen Blöcke

| Block-Kategorie | Block                                             |
| --------------- | ------------------------------------------------- |
| Text            | Zwei Spalten, Text-Teaser                         |
| Bilder          | Vier Spalten, gestreckt                           |
| Bilder          | Sechs Spalten, zentriert                          |
| Bilder          | Zwei Spalten, ohne Umbruch                        |
| Text & Bild     | Vier Spalten, Bild/Text-Karten                    |
| Text & Bild     | Vier Spalten, Bilder mit Unterschrift             |
| Text & Bild     | Zwei Spalten, zentriertes Bild & Text/Bild-Raster |
| Text & Bild     | Zwei Spalten, Bild/Text & zentriertes Bild        |
| Text & Bild     | Zwei Spalten, zentriertes Bild & Text/Bild        |
| Text & Bild     | Zwei Spalten, großes Bild & Text                  |
| Text & Bild     | Zwei Spalten, Bild/Text-Raster & zentriertes Bild |
| Text & Bild     | Zwei Spalten, Text & großes Bild                  |
| Text & Bild     | Zwei Spalten, Text & zwei Bilder                  |
| Text & Bild     | Zwei Spalten, zwei Bilder & Text                  |


# FAQs

Wiederkehrende Fragen von Kunden zu Produkten, Versand- und Zahlungsarten oder anderen Themen können schnell zur Regelmäßigkeit werden. Aus diesem Grund liefert dir das Theme ein vollumfängliches FAQ Modul. Wie du deine eigenen FAQs anlegst zeigen wir dir in diesem Beitrag.

<figure><img src="/files/la5Q25sGqi1yChOA6TRI" alt=""><figcaption><p>FAQ Modul unseres Kunden <a href="https://www.biobay.de/">https://www.biobay.de/</a></p></figcaption></figure>

### FAQs anlegen

Im ersten Schritt müssen die Fragen und die dazugehörigen Antworten formuliert werden. Dazu steht dir im Theme das entsprechende Modul unter "Inhalte > FAQs & FAQ Gruppen > FAQs" zur Verfügung. Lege mit dem Button "FAQ anlegen" in der rechten oberen Ecke einen ersten FAQ an. In der darauf folgenden Maske steht dir das Feld "Frage" und "Antwort" zur Verfügung.

{% hint style="info" %}
Das Feld "Antwort" unterstützt auch HTML Eingaben.
{% endhint %}

Sowohl Frage als auch Antwort kann über den Sprachschalter in der rechten oberen Ecke in all deine Shop Sprachen übersetzt werden. Es lassen sich dabei beliebig viele FAQs erstellen.

### FAQ Gruppe anlegen

FAQs müssen immer in einer FAQ Gruppe zusammengefasst werden. Möchtest du unterschiedliche FAQs an unterschiedlichen Stellen in deinem Shop ausgeben, benötigst du daher auch mehrere unterschiedliche FAQ Gruppen.

Eine FAQ Gruppe kannst du unter "Inhalte > FAQs & FAQ Gruppen > FAQ Gruppen" erstellen. Über den Button "FAQ Gruppe anlegen" kannst du in der darauf folgenden Maske zunächst einen Namen für deine FAQ Gruppe vergeben. Dieser Name lässt sich später optional als Überschrift zur Gruppe anzeigen.

Sobald du den Namen deiner FAQ Gruppe eingegeben und gespeichert hast, steht dir im nächsten Schritt das Auswahlfeld "FAQs" zur Verfügung. Hier lassen sich alle zuvor angelegten FAQs mit der FAQ Gruppe verknüpfen. Wähle daher alle FAQs die du in dieser Gruppe zusammenfassen möchtest und bestätige deine Eingabe mit dem "Speichern" Button in der rechten oberen Ecke. Auch hier lässt sich der Name deiner FAQ Gruppe in all deine Shop Sprachen über den Sprach Schalter in der rechten oberen Ecke übersetzen.

### FAQ Gruppe in der Erlebniswelt verwenden

Nun da wir jetzt alle FAQs in einer FAQ Gruppe zusammengefasst haben, möchten wir diese nun auch in unserem Shop anzeigen. Grundvoraussetzung ist dafür die Verwendung einer Erlebniswelt. Solltest du mit den [Erlebniswelten](https://docs.shopware.com/de/shopware-6-de/Inhalte/Erlebniswelten) noch nicht vertraut sein, empfehlen wir dir dich zunächst etwas in das Konzept einzuarbeiten.

{% embed url="<https://www.youtube.com/watch?t=244s&v=ru2FYpcnYQ4>" %}

Erstellen wir daher zunächst unser Erlebniswelten Layout. Welchen Layout-Typen du dabei verwendest, bleibt vollkommen dir überlassen. Im ersten Schritt ziehen wir einen beliebigen Block unserer Wahl in die Sektion. In diesem Beispiel verwenden wir den Standard Shopware Text Block.

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

Nachdem sich der Text Block in der Sektion befindet, lässt sich das Text Element über die zwei Pfeile in der rechten oberen Ecke innerhalb des Block austauschen. Anschließend öffnet sich ein Fenster mit allen verfügbaren Elementen. Hier wählen wir das Element "FAQ Gruppe".&#x20;

Nachdem sich das Element ausgetauscht hat, können wir erneut mit der Maus über das Element fahren. Hier erscheint nun neben den zwei Pfeilen ebenfalls ein Zahnrad. Mit Klick auf das Zahnrad öffnen sich die Element-Einstellungen der FAQ Gruppe.

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

An dieser Stelle lässt sich nun mit dem Schalter "FAQ Gruppen Name anzeigen" der vergebene Name im FAQ Gruppen Modul ein- bzw. ausblenden. Die FAQ Gruppe selbst können wir im nächsten Auswahlfeld "FAQ Gruppe" verknüpfen. Hier stehen uns alle im FAQ Gruppen Modul angelegten Gruppen zu Verfügung. Nachdem wir mit den Einstellungen fertig sind bestätigen wir unsere Eingaben mit dem "Fertig" Button in der rechten unteren Ecke des Fensters. Nun wird auch in der Erlebniswelt selbst der Name unserer FAQ Gruppe über dem Element angezeigt, sofern die Einstellung "FAQ Gruppen Name anzeigen" aktiv geschaltet ist.

{% hint style="success" %}
Nun haben wir die FAQ Gruppe erfolgreich in der Erlebniswelt verknüpft. Im letzten Schritt muss die Erlebniswelt nur noch mit einer entsprechenden Kategorie bzw. einem Produkt verknüpft werden.
{% endhint %}

### Wissenswertes

<details>

<summary>Kann ich das Aussehen meiner FAQs beeinflussen?</summary>

Über die [Theme Konfiguration](/theme-konfiguration/produkt-detailseite/tabs#akkordeon-style) lässt sich das Design deiner Akkordeons anpassen. Im Auswahlfeld "Akkordeon Style" kannst du zwischen unterschiedlichen Designs wählen. Beachte jedoch, dass das hier hinterlegte Design auf alle Akkordeons in deinem Shop angewendet wird.

</details>

<details>

<summary>Kann ich mehrere FAQ Gruppen in einer Erlebniswelt verwenden?</summary>

Ja, das geht! Es ist jedoch erst seit v6.5.7.0 oder höher möglich.

</details>


# Features

Häufig macht es Sinn besondere Vorteile bei Produkten hervorzuheben, um dem Kunden die Kaufentscheidung leichter zu gestalten. Die Features Erweiterung des Themes ist hierfür ein nützliches Werkzeug, um konkrete Einzelheiten markant auf der [Produkt Detailseite](/academy/fachbegriffe/produkt-detailseite) zu präsentieren.

<figure><img src="/files/7VmS0TeBp73p8GlCMPEF" alt=""><figcaption><p>Verwendung der Features bei unserem Kunden <a href="https://wisy-water.com/">https://wisy-water.com/</a></p></figcaption></figure>

Features kannst du in deiner Shopware Administration unter "\[Produkt] > Spezifikationen > Zusatzfelder > Produkt > Features" hinterlegen. Beachte hierbei, dass die einzelnen Features mit einem Semikolon semantisch getrennt werden müssen, damit eine entsprechende Listenansicht generiert werden kann. Eine korrekte Schreibweise sieht dabei wie folgt aus:

Erstes Feature;Zweites Feature;Drittes Feature

{% hint style="info" %}
Erwähnenswert ist hierbei, dass das letzte Feature nicht mit einem Semikolon abschließt. Ansonsten entsteht ein weiterer Listenpunkt ohne Inhalt.
{% endhint %}

Standardmäßig wird vor jedem Listenpunkt ein Haken [Icon](/academy/fachbegriffe/icon) angezeigt. Dies kannst du in der [Theme Konfiguration](/theme-konfiguration/produkt-detailseite/buy-box#features) unter "Buy Box" im Abschnitt "Features" neben weiteren Einstellungsmöglichkeiten auf deine Bedürfnisse anpassen und austauschen.


# Flyout Navigation

Eine guter Shop zeichnet sich durch eine intuitive und gut strukturierte [Flyout Navigation](/academy/fachbegriffe/flyout-navigation) aus. Da aber nicht jeder Shop seine Flyouts komplett mit Kategorien füllen kann, helfen wir an dieser Stelle mit dem Theme etwas nach. So kannst du mit nur wenigen Klicks eine schickes Flyout erstellen.

<figure><img src="/files/9sn7eQjRrHyRwwSMeSnY" alt=""><figcaption><p>Flyout Navigation unseres Kunden <a href="https://army-shop.ch/">https://army-shop.ch/</a></p></figcaption></figure>

Grundsätzlich hast du fünf Möglichkeiten um dein Flyout aufzupeppen:

1. [Kategorien](#1.-kategorien)
2. [Icons](#2.-icons)
3. [Strukturkategorien & Links](#3.-strukturkategorien-and-links)
4. [Bilder mit Untertitel](#4.-bilder-mit-untertitel)
5. [Beschreibung](#5.-beschreibung)

### 1. Kategorien

Das erste und womit auch offensichtlichste sind die ganz normalen Kategorien. Diese kannst du wie gewohnt im Admin erstellen.

Solltest du bisher noch keine Berührungspunkte mit den [Kategorien](https://docs.shopware.com/de/shopware-6-de/kataloge/kategorien) in Shopware 6 gemacht haben empfehlen wir dir zunächst dich mit den Basics zu befassen. Folgendes Video eignet sich hierfür hervorragend:

{% embed url="<https://www.youtube.com/watch?v=60rg5naRKqI>" %}
Kategorie anlegen in Shopware 6
{% endembed %}

### 2. Icons

Für jede Kategorie im Flyout lässt sich ein eigenes [Icon](/academy/fachbegriffe/icon) hinterlegen. Diese werden automatisch vor dem Kategorienamen platziert.

{% hint style="info" %}
Für passende Icons können wir dir die Icon-Bibliothek [Flaticon](https://www.flaticon.com/) empfehlen. Dort lassen sich unzählige Icons im PNG-Format kostenlos herunterladen.
{% endhint %}

Das Icon selbst kannst du unter "Kataloge > Kategorien > \[Kategorie] > Tab Allgemein > Zusatzfelder > Flyout > Icon" hinterlegen.

{% hint style="success" %}
Beachte jedoch das Shopware es standardmäßig nicht zulässt Zusatzfelder für Kategorien des Typs "Strukturelement / Einstiegspunkt" zu pflegen. Du kannst dies jedoch mit einem kleinen Trick umgehen!

Zunächst wählst du den Kategorietyp "Seite / Liste" und lädst das Icon hoch. Anschließend wechselt du den Kategorietyp wieder auf "Strukturelement / Einstiegspunkt" und voilà! Das Icon wird angezeigt.
{% endhint %}

### 3. Strukturkategorien & Links

Sollte dein Flyout jedoch immer noch relativ leer sein, hast du mit dem Anlegen von Strukturkategorien & Links eine von vier weiteren Möglichkeiten dein Flyout weiter aufzufüllen.

Jeder Shop hat Bestseller oder beliebte Kategorien. Wieso diese also nicht direkt dem Besucher über die Navigation präsentieren? Strukturkategorien & Links eignen sich hierfür ausgezeichnet. Du erstellst mit dieser Methode sinnvolle interne Links, ohne deinen Shop unnötig mit Dummy Kategorien aufzublasen.

Wie gehen wir also am besten vor? Im Prinzip legst du die einzelnen Elemente exakt wie die Kategorien aus [Schritt 1](#1.-kategorien) an. Es gibt nur einen entscheidenden Unterschied. Nehmen wir hierzu den Screenshot von oben genauer unter die Lupe:

<div align="left"><figure><img src="/files/hvJuOGnDHwplxQuuB9bP" alt=""><figcaption><p>Kategorien im Flyout</p></figcaption></figure> <figure><img src="/files/f3nCvX8Q9j5tF2NXGLvA" alt=""><figcaption><p>Kategorien im Admin</p></figcaption></figure></div>

So kann es sich bei "Accessoires & Zubehör" um ein Strukturelement handeln. Sie ist selbst nicht aufrufbar und dient, wie der Name schon vermuten lässt, nur zur Struktur. Daher ändern wir bei dieser Kategorie den Kategorietyp zu "Strukturelement / Einstiegspunkt":

<figure><img src="/files/vDFs6FbysePrqISmOEfQ" alt=""><figcaption><p>Kategorietyp</p></figcaption></figure>

{% hint style="warning" %}
Strukturkategorien erscheinen auch in der [Sidebar](/academy/fachbegriffe/sidebar) Kategorie-Navigation.
{% endhint %}

Nun folgen noch die einzelnen Links unterhalb des Strukturelements "Accessoires & Zubehör". Diese Kategorien versehen wir nun mit dem Kategorietyp "Link". Direkt darunter öffnet sich nun eine weitere Konfigurations-Möglichkeit für den benutzerdefinierten Link:

<figure><img src="/files/UBiwtMGI0QR8cQ7k3LSV" alt=""><figcaption><p>Benutzerdefinierter Link</p></figcaption></figure>

Hierbei verwenden wir für Produktverlinkungen den Linktyp "Intern", die Entität "Produkt" und das entsprechende Produkt. Wie du siehst kannst du sowohl interne als auch externe Verlinkungen setzen. Neben Produktverlinkungen kannst du aber auch Kategorien und Landingpages verlinken. Dir steht also eine breite Vielfalt an Möglichkeiten offen.

{% hint style="info" %}
Du kannst auch nur Strukturkategorien verwenden, um bspw. USPs im Flyout aufzählen. Mit passenden [Icons](#2.-icons) kann dies auch sehr schick aussehen.
{% endhint %}

### 4. Bilder mit Untertitel

Zusätzlich bietet dir das Theme noch die Möglichkeit bis zu drei verlinkbare Bilder inkl. Untertitel im Flyout einzubinden. Hierbei eigenen sich auch wieder besonders Produkt- oder Kategorieverlinkungen mittels Szenebilder. Die Konfiguration findest du hierfür unter "Kataloge > Kategorien > \[Kategorie] > Tab Allgemein > Zusatzfelder > Flyout".

Für jedes der drei Bilder gibt es folgende drei Konfigurationsmöglichkeiten:

<figure><img src="/files/vGfw4aMs3Kk3GfEkm3k7" alt=""><figcaption><p>Bild mit Untertitel</p></figcaption></figure>

Sobald ein Bild hinterlegt ist, wird es entsprechend im Flyout angezeigt. Links und Untertitel sind dabei optional.

{% hint style="info" %}
Je nach Kategorieanzahl empfiehlt es sich eine unterschiedliche Anzahl an Bildern zu verwenden. Manchmal ist weniger auch mehr.&#x20;
{% endhint %}

### 5. Beschreibung

Eine kurze Kategoriebeschreibung inkl. Call-To-Action ist eine weitere Möglichkeit dein Flyout schicker zu gestalten. Das ganze ist auch super simpel! Verwende hierzu einfach den Editor "Beschreibung" in der jeweiligen Hauptkategorie und der Inhalt wird automatisch im Flyout ausgegeben.

{% hint style="info" %}
Wenn du die Beschreibung im Flyout nicht anzeigen möchtest, das Feld "Beschreibung" jedoch nutzen willst, kannst du sie auch global über die [Theme Konfiguration](/theme-konfiguration/header/flyout-navigation#kategorie-beschreibung-anzeigen) ausblenden.
{% endhint %}


# Google Bewertungen

Positive Bewertungen schaffen Vertrauen. Gerade Google Rezensionen zählen zu den wichtigsten Entscheidungsfaktoren, ob ein Kunde in deinem Online Shop bestellt oder nicht. Sie können nur schwer gefälscht oder gar beschönigt werden. Das wissen auch viele Besucher und verlassen sich häufig auf die Erfahrungen anderer.

<figure><img src="/files/hzRbY0rm4AEQn80lRkBu" alt=""><figcaption><p>Header unseres Kunden <a href="https://bsp-shop.ch/">https://bsp-shop.ch/</a> mit integrierten Google Bewertungen</p></figcaption></figure>

Mit unserem Theme kannst du dieses mächtige Werkzeug mit nur wenigen Klicks einrichten und deinem Shopware Shop zu einer verbesserten [Conversion Rate](/academy/fachbegriffe/conversion) verhelfen. Folge hierzu einfach der Anleitung in der [Theme Konfiguration](/theme-konfiguration/allgemein/google-bewertungen).


# Kurzbeschreibung

Um Produktunterschiede bereits im Listing eindeutiger zu kennzeichnen eignet sich häufig eine kurze Beschreibung zum Produkt. Genau das kannst du mit diesem Feature umsetzen.

<figure><img src="/files/3QzUMekyk6dGXgJVoIO3" alt=""><figcaption><p>Produkt Boxen unseres Kunden <a href="https://leguano.eu/">https://leguano.eu/</a></p></figcaption></figure>

Hinterlege die Beschreibung dafür unter "Kataloge > Produkte > \[Produkt] > Spezifikationen > Zusatzfelder > Produkt" im Feld "Kurzbeschreibung". Stelle ebenfalls sicher, dass du die dazugehörige [Theme-Einstellung](/theme-konfiguration/erlebniswelten/produkt-box#beschreibung) aktiviert hast.


# Produktbild Hover

Der Produktbild Hover ist ein beliebtes Feature, dass deinen Shop interaktiver gestaltet und letztendlich die Benutzerfreundlichkeit verbessern kann. So wechselt das Vorschaubild in jeder Produkt Box in deinem Shop auf ein zweites Bild, sobald du mit dem Mauszeiger darüber fährst.

<div data-full-width="false"><figure><img src="/files/gW2e6LvKDfVGThtx4z0J" alt=""><figcaption><p>Produktbild Hover bei unserem eigenen Shop <a href="https://outdoordino.de/">https://outdoordino.de/</a></p></figcaption></figure></div>

### Globale Einstellung

Standardmäßig ist dieses Feature automatisch über die [Theme Konfiguration](/theme-konfiguration/erlebniswelten/produkt-box#globaler-produktbild-hover) aktiviert. Hierüber kannst du die Funktion daher auch ggf. wieder deaktivieren. Als Hover Bild wird dabei immer das zweite Galeriebild des Produktes herangezogen, soweit eines vorhanden ist.

### Hover Bild selbst festlegen

Möchtest du abweichend von der globalen Einstellung oder nur für spezifische Produkte eigene Hover Bilder definieren, so kannst du dies ebenfalls noch auf Produktebene festlegen. Unter \
"\[Produkt] > Spezifikationen > Zusatzfelder > Produkt > Hover Bild" kannst du deine eigene Mediendatei verknüpfen.


# Aufgeklappte Sidebar-Filter

Die [Sidebar](/academy/fachbegriffe/sidebar) kann als zentrales Navigations- und Filterelement in deinem Shopware Shop genutzt werden. Die Sidebar kann dazu beitragen, die Benutzerfreundlichkeit zu steigern. Gerade häufig genutzte Filter kann man mit dem Theme noch präsenter gestalten und automatisch aufgeklappt darstellen.

<figure><img src="/files/sup9w6sETYVbPOflV4iw" alt=""><figcaption><p>Aufgeklappte Sidebar-Filter bei unserem Kunden <a href="https://safe-t.ch/">https://safe-t.ch/</a></p></figcaption></figure>

Die Filter selbst angelegter Eigenschaften kannst du unter "Kataloge > Eigenschaften > \[Eigenschaft] > Zusatzfelder > Eigenschaft > Sidebar-Filter im Listing geöffnet darstellen" konfigurieren.

Hersteller-, Bewertung- und Preisfilter sind von Shopware vorgegebene Filter. Diese lassen sich übrigens über das Listing-Element der Erlebniswelt aktivieren bzw. deaktivieren:

{% embed url="<https://www.youtube.com/watch?v=qtv78QZVkhs>" %}

Möchtest du diese jedoch ebenfalls aufgeklappt darstellen, kannst du die Einstellung direkt über die [Theme Konfiguration](/theme-konfiguration/erlebniswelten/filter#sidebar) vornehmen. Unter der Sektion "Sidebar" der Filter kannst du den Zustand nach deinen Wünschen anpassen.


# Unterkategorie-Navigation

Eine durchdachte Navigationsstruktur ist ein ausschlaggebendes Signal für eine positive Benutzerfreundlichkeit. So lässt sich über die Hauptnavigation jedoch meistens nur sinnig bis in die dritte Kategorieebene verlinken. Neben der [Sidebar](/academy/fachbegriffe/sidebar) Navigation bietet dir das Theme mit der Unterkategorie-Navigation eine weitere Möglichkeit in tiefere Kategorien zu navigieren.

<figure><img src="/files/7eOiQU8Yizg7f2Dwk7la" alt=""><figcaption><p>Unterkategorie-Navigation unseres Kunden <a href="https://spruchreif-geschenke.de/">https://spruchreif-geschenke.de/</a></p></figcaption></figure>

### Erlebniswelten Element verwenden

Damit du die Unterkategorie-Navigation anzeigen kannst, wird ein vom Theme bereitgestelltes Erlebniswelten Element benötigt. Solltest du dich mit den [Erlebniswelten](https://docs.shopware.com/de/shopware-6-de/Inhalte/Erlebniswelten) von Showpare noch nicht auskennen, empfehlen wir dir dich zunächst in das Modul einzuarbeiten.

{% embed url="<https://www.youtube.com/watch?t=244s&v=ru2FYpcnYQ4>" %}

Erstelle zunächst eine Erlebniswelt für deine Kategorie unter "Inhalte > Erlebniswelten". Wichtig ist, dass du den Layout-Typen "Kategorieseite" wählst. Ziehe anschließend einen beliebigen Block mit Element voller Breite in deine Sektion. Wir nehmen in diesem Beispiel den Standard Shopware Text Block.

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

Nun kannst du das Element über die zwei Pfeile am rechten oberen Rand des Text Elements austauschen. Daraufhin öffnet sich ein ein Fenster mit allen verfügbaren Elementen. Wähle in dieser Ansicht das Element "Unterkategorie-Navigation". Nachdem du das Element gewählt hast, schließt sich das Fenster wieder und das Unterkategorie-Navigations-Element wurde erfolgreich mit dem Text Element ausgetauscht.

### Unterkategorie-Navigation konfigurieren

Sobald du mit der Maus erneut über das soeben ausgetauschte Element fährst erscheint neben den zwei Pfeilen ein Zahnrad Symbol. Per Klick auf das Zahnrad öffnen sich die Element-Einstellungen der Unterkategorie-Navigation.

<figure><img src="/files/t9XrHnwzgL66dsynQqBl" alt=""><figcaption><p>Element-Einstellungen der Unterkategorie Navigation</p></figcaption></figure>

In diesem Fenster kannst du weitere Konfigurationen für das Element vornehmen. So kannst du mit dem Auswahlfeld "Anzeigemodus" zwischen der Darstellung "Bild" und "Button" wählen. Für die Bild-Darstellung ist es jedoch zusätzlich notwendig ein [Anzeigebild in den jeweiligen Unterkategorien zu verknüpfen](#anzeigebild-in-der-kategorie-hinterlegen). Für die Button-Darstellung ist hingegen keine weitere Konfiguration notwendig.

Solltest du dich für die Bild-Darstellung entscheiden, erscheinen zusätzliche Einstellungsmöglichkeiten. Mit dem Feld  "Anzahl Spalten" kannst du definieren, wie viele Bilder in einer Reihe nebeneinander angezeigt werden sollen. Außerdem kannst du über das Feld "Seitenverhältnis der Bilder" die Größe der Bilder entsprechend anpassen. Je größer das Seitenverhältnis, desto schmaler wird auch das Bild. Bei dem Seitenverhältnis "1" entsteht ein Quadrat.

### Anzeigebild in der Kategorie hinterlegen

Damit du mit der Bild-Darstellung aus einer Kategorie auf die entsprechenden Unterkategorien verlinken kannst, ist immer ein Anzeigebild für die jeweiligen Unterkategorien notwendig. Verknüpfe daher unter "Kataloge > Kategorien > \[Kategorie] > Menü-Einstellungen > Anzeigebild" deine Bilder, die du verwenden möchtest.

<figure><img src="/files/VHJZ0DCcCrSbaLx5lc2w" alt=""><figcaption><p>Feld für das Anzeigebild einer Kategorie</p></figcaption></figure>


# Zusätzlicher Tab

Häufig benötigt man eine zusätzliche Option um weitere Informationen auf der [Produkt Detailseite](/academy/fachbegriffe/produkt-detailseite) darzustellen. Hierbei kann ein ergänzender Tab in vielen Fällen Aushilfe verschaffen.

<figure><img src="/files/dlZZgxSYHtRl8Qti59hM" alt=""><figcaption><p>Zusätzlicher Tab bei unserem Kunden <a href="https://outdoordino.de/">https://outdoordino.de/</a></p></figcaption></figure>

Unter "Kataloge > Produkte > \[Produkt] > Spezifikationen > Zusatzfelder > Produkt" hast du die Möglichkeit die Beschreibung und den Inhalt des zusätzlichen Tabs individuell für jedes Produkt zu definieren.&#x20;

Mit dem Feld "Zusätzlicher Tab: Beschreibung" und "Zusätzlicher Tab: Inhalt" kannst du hier die entsprechenden Informationen für deine Produkte hinterlegen.&#x20;

{% hint style="warning" %}
Wichtig ist, dass du Beschreibung und Inhalt festlegst. Andernfalls wird der Tab nicht auf der Produkt Detailseite angezeigt.
{% endhint %}

Mit dem Theme hast du außerdem die Möglichkeit, deine Tabs auf der Produkt Detailseite an zwei verschiedenen Positionen darzustellen: Neben oder unterhalb der Produktbild-Galerie. Über die [Theme Konfiguration](/theme-konfiguration/produkt-detailseite/tabs#position) kannst du dies nach deinen Vorstellungen anpassen.


# Zahlungs- und Versandarten Icons

Einheitliche Icons ziehen sich in einem roten Faden durch jeden guten Online Shops. Mit unserem Download erhältst du kostenlose Icons für die gängigsten Zahlungs- und Versandarten in passendem Design:

{% file src="/files/Nl2US5GtcXREXKUNpMvU" %}


# Aufklappbare & sticky fixierbare Sidebar

### Basiskonfiguration

1. Begebe dich in deinem Admin zu "Erweiterungen" > "Meine Erweiterungen".&#x20;
2. Installiere und aktiviere die App.
3. Öffne die Konfiguration und nehme ggf. Designanpassungen vor.
4. Leere den Cache unter "Einstellungen" > "System" > "Caches & Indizes" > "Caches leeren"


# Blog

Wertvolle Inhalte und Informationen werden immer wichtiger. So rutschen Shop Betreiber immer mehr in eine beratende Funktion. Gerade technische Produkte haben einhergehende Fragen, die häufig viel Erklärungsbedarf benötigen. Umso mehr stellt sich daher die Frage, wie ich als Produktexperte alle wichtigen Infos in meinem Shop unterbringe und meinen Kunden die bestmögliche Beratung bieten kann. Blogs, Ratgeber, Magazine oder wie man es auch nennen mag. Sie bieten dir die Möglichkeit vor allem auch SEO technisch auf deinen Online Shop aufmerksam zu machen. In diesem Beitrag erklären wir dir Schritt für Schritt wie du deinen eigenen Blog erstellen kannst.

{% embed url="<https://www.youtube.com/watch?v=x5IPxzHjpDY>" %}
Video Tutorial
{% endembed %}

### Voraussetzungen

Zu Beginn ist es wichtig zu verstehen, dass jeder Blog eine eigene Kategorie in Shopware darstellt. Solltest du das [Konzept von Kategorien](https://docs.shopware.com/de/shopware-6-de/kataloge/kategorien) also noch nicht kennen, mache dich bitte zunächst damit vertraut:

{% embed url="<https://www.youtube.com/watch?v=-BSN6C8mojk>" %}

Ebenfalls geht der Blog sehr stark mit den Erlebniswelten Hand in Hand. Es ist daher ebenfalls von Vorteil sich in den [Erlebniswelten](https://docs.shopware.com/de/shopware-6-de/Inhalte/Erlebniswelten?category=shopware-6-de/inhalte) von Shopware auszukennen:

{% embed url="<https://www.youtube.com/watch?t=244s&v=ru2FYpcnYQ4>" %}

### Blog Übersichtsseite erstellen

Im ersten Schritt benötigen wir eine Blog Übersichtsseite. Diese fasst alle Beiträge von neu nach alt zusammen und bietet dir später ebenfalls die Möglichkeit nach spezifischen Beiträgen über [Tags](#tag-modul) zu filtern.&#x20;

#### Kategorie für die Blog Übersichtsseite erstellen

{% hint style="info" %}
Wo im Kategoriebaum sich dabei dein Blog befindet ist vollkommen egal. Er muss sich lediglich in einem der drei Einstiegspunkte "Haupt-Navigation", "Footer-Navigation" oder "Footer-Service-Navigation" deines [Verkaufkanals](https://docs.shopware.com/de/shopware-6-de/einstellungen/Verkaufskanaele#grundeinstellungen) befinden.
{% endhint %}

Wir legen den Blog in unserem Beispiel im Sevice Menü an, da wir ihn dort auch später entsprechend verlinken möchten.&#x20;

<figure><img src="/files/GvDgSrNhRooannB0xTQo" alt=""><figcaption><p>Kategorie "Blog" unterhalb der Kategorie "Service Menü"</p></figcaption></figure>

Stelle sicher, dass die Kategorie "Blog" den Kategorietyp "Seite / Liste" aufweist. Dies ist notwendig, dass die Seite später auch aufrufbar ist und eine Layout Zuweisung möglich ist. Ebenfalls muss die Kategorie aktiv geschaltet sein.

#### Erlebniswelt für die Blog Übersichtsseite erstellen

Damit die neu angelegte Kategorie "Blog" nicht einfach eine leere Seite ist, benötigen wir nun eine entsprechende Erlebniswelt. Erstelle daher ein neues Layout. Wichtig ist dabei, dass die Erlebniswelt vom Typ "Shopseite" ist. Sobald die Erlebniswelt erstellt wurde kannst du einen beliebigen Block mit Element in voller Breite in die Erlebniswelt ziehen. Hierzu bietet sich bspw. direkt der ersichtliche Standard Block "Text" von Shopware an.

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

Sobald sich der Block in der Sektion befindet, kannst du das Text Element über die zwei Pfeile am rechten oberen Rand des Blocks austauschen. Nun öffnet sich ein Fenster mit allen verfügbaren Elementen. In dieser Auswahl hast du nun unter anderem die Möglichkeit das Element "Blog-Listing" zu wählen. Sobald du das Element wählst, schließt sich das Fenster und das Element wurde erfolgreich ausgetauscht.

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

Speichere die Erlebniswelt und kehre zurück zur eben angelegten Kategorie "Blog". Im Tab "Layout" verknüpfen wir nun die eben erstellte Erlebniswelt. Ggf. kannst du die Zuweisung auch direkt über die Erlebniswelt vornehmen.

### Blog Beitrag erstellen

Nun da wir jetzt eine Blog Übersichtsseite erstellt haben, benötigen wir nun noch einen dazugehörigen Beitrag.

#### Kategorie für den Blog Beitrag erstellen

{% hint style="warning" %}
Hierbei ist es essenziell, dass Blog Beiträge immer unterhalb der "Blog" Kategorie erstellt werden müssen. Andernfalls werden sie nicht mit in das Blog-Listing aufgenommen.
{% endhint %}

Das ganze sieht dann in etwa wie folgt aus:

<figure><img src="/files/AdPkRazHtC63E9sd5C4p" alt=""><figcaption><p>Kategorie "Erster Beitrag" unterhalb der Kategorie "Blog</p></figcaption></figure>

Nun kann es etwas helfen, die soeben angelegte Kategorie "Erster Beitrag" nicht mehr als Kategorie im regulären Shopware Kontext zu sehen, sondern vielmehr als "Blog Seite". Folgende Tabelle veranschaulicht die einzelnen Konfigurationsoptionen:

<table><thead><tr><th width="338">Konfigurations-Option der Kategorie</th><th>Bedeutung im Blog Beitrag Kontext</th></tr></thead><tbody><tr><td>Name</td><td>Der Titel des Blog Beitrags. Dieser wird im Blog-Listing angezeigt und ebenfalls als Überschrift im Beitrag selbst integriert.</td></tr><tr><td>Aktiv</td><td>Aktiviert. bzw. deaktiviert den Blog Beitrag.</td></tr><tr><td>In der Navigation ausblenden</td><td>Sofern der Blog Beitrag aktiv ist, kann diese Option aktiviert werden, um den Beitrag im Blog-Listing auszublenden. Dies ist besonders nützlich, wenn man den Beitrag verfasst, ihn aber noch nicht veröffentlichen möchte, da er weiterhin unter der SEO URL aufrufbar bleibt.</td></tr><tr><td>Anzeigebild</td><td>Dieses Bild wird im Blog-Listing und im Blog Beitrag als Thumbnail verwendet.</td></tr><tr><td>Beschreibung</td><td>Sie dient als Auszug des Blog Beitrags im Blog-Listing. Ebenfalls fungiert sie als einleitender Text zwischen Überschrift und Thumbnail für deinen Beitrag.</td></tr><tr><td>Meta Titel</td><td>Der Meta Titel des Blog Beitrags.</td></tr><tr><td>Meta Beschreibung</td><td>Die Meta Beschreibung des Blog Beitrags.</td></tr><tr><td>SEO-Pfad</td><td>Die SEO URL des Blog Beitrags.</td></tr></tbody></table>

Neben den regulären Konfigurations-Optionen einer Kategorie, erweitert die App die Einstellungsmöglichkeiten im Tab "Allgemein" unter der Karte "Zusatzfelder" mit dem Abschnitt "Blog". Hier lassen sich nun ebenfalls noch Autor, Tag, Lesezeit, sowie das Veröffentlichungsdatum des Blog Beitrags pflegen. Die Lesezeit muss dabei in Minuten als Zahl in das entsprechende Feld eingetragen werden. Wie du einen Autor anlegst und was es mit Tags auf sich hat, erfährst du in den folgenden Abschnitten.

{% hint style="warning" %}
Beachte, dass du das Veröffentlichungsdatum entweder in jeder Kategorie pflegst oder gar nicht pflegst. Bei Mischungen kann es dazu kommen, dass gewisse Beiträge im Blog-Listing oder dem Element, das die neusten drei Beiträge anzeigt, nicht mehr korrekt sortiert  werden.
{% endhint %}

#### Autoren Modul

Unter "Inhalte > Blog > Autor" hast du die Möglichkeit Autoren für deine Blog Beiträge anzulegen. Der Autor eines Artikels wird im Blog-Listing und im Blog Beitrag angezeigt.

Über den Button "Autor anlegen" in der rechten oberen Ecke kannst du einen neuen Autor anlegen. In der darauf folgenden Maske kannst du "Anzeigename", "Vorname", "Nachname" und "Beschreibung" hinterlegen. Es lassen sich dabei beliebig viele Autoren anlegen. Über den Sprachschalter in der rechten oberen Ecke lässt sich die Kurzbeschreibung eines Autors in andere Shop Sprachen übersetzen.

Sobald du einen Autor erstellt hast, kannst du diesen in der entsprechenden Kategorie im Tab "Allgemein" unter der Karte "Zusatzfelder" im Abschnitt "Blog" verknüpfen.

#### Tag Modul

Blog Tags dienen als Filterfunktion für deine Beiträge auf der Blog Übersichtsseite. Alle mit einem Beitrag verknüpften Tags werden dabei angezeigt. Per Klick auf einen Tag werden die dazugehörigen Beiträge gefiltert.

{% hint style="warning" %}
Verwechsle dabei die Blog Tags der App nicht mit den herkömmlichen [Tags von Shopware](https://docs.shopware.com/de/shopware-6-de/einstellungen/tags). Letztere sind nur als Filterung innerhalb der Administration gedacht sind.
{% endhint %}

Unter "Inhalte > Blog > Tag" kannst du über den Button "Tag anlegen" beliebig viele Tags für deine Blog Beiträge ins Leben rufen. Dafür musst du lediglich das Feld "Name" pflegen. Tags lassen sich ebenfalls in all deine Shop Sprachen übersetzen.

Nach der Erstellung kannst du die Tags in der entsprechenden Kategorie deines Beitrags im Tab "Allgemein" unter der Karte "Zusatzfelder" im Abschnitt "Blog" verknüpfen. Du kannst dabei so viele Tags verknüpfen wie du möchtest.

#### Erlebniswelt für den Blog Beitrag erstellen

Nun da wir alle relevanten Daten in der Kategorie des Blog Beitrags gepflegt haben, wird es an der Zeit die entsprechende Erlebniswelt mit dem tatsächlichen Inhalt des Beitrags zu erstellen. Daher benötigen wir nun auch hier eine Erlebniswelt. Diese Erlebniswelt sollte ebenfalls vom Typ "Shopseite" sein. Ob du mit einer Erlebniswelt mit Sidebar Sektion oder einer Sektion in voller Breite startest, ist dabei dir überlassen.

{% hint style="info" %}
Gerade wer ein mitscrollendes Inhaltsverzeichnis zu seinem Beitrag bevorzugt, empfehlen wir eine Sektion mit Sidebar zu verwenden. Wie du ein solches [Inhaltsverzeichnis im Blog](#inhaltsverzeichnis-im-blog-beitrag) Beitrag einstellen kannst, erklären wir dir im Abschnitt weiter unten.
{% endhint %}

In diesem Beispiel verwenden wir eine Sektion mit Sidebar. Auch hier empfiehlt es sich zunächst mit einem Element in voller Breite zu starten. Also ziehen wir, wie auch in der Erlebniswelt für die Blog Übersichtsseite, den Standard Shopware Text Block in die Sektion. Im Anschluss tauschen wir das Text Element über die zwei Pfeile gegen das "Blog Header" Element.

<figure><img src="/files/3kKVgGQkRFyWgGtEjMXP" alt=""><figcaption></figcaption></figure>

Dieses Element ist die Grundlage deines Blog Beitrags. Einerseits schmälert und zentriert es den Beitrag auf eine für Blog Beiträge deutlich besser lesbare Breite. Andererseits enthält es alle wichtigen, verknüpften Infos aus der dazugehörigen Kategorie. Hierzu gehört die Überschrift, Autoreninformationen, Erstellungs- bzw. Aktualisierungsdatum, Tags, Lesedauer, Einleitungstext, Thumbnail und eine "Teilen"-Funktion.

Nun kannst du dich im Beitrag austoben, wie du möchtest. Erstelle Texte, verknüpfe Bilder, verlinke Produkte und integriere Videos. Dir steht die volle Power der Erlebniswelten zur Verfügung!

### Inhaltsverzeichnis im Blog Beitrag

Gerade bei längeren Beiträgen ist ein Inhaltsverzeichnis häufig sinnvoll. So kann der Besucher schnell per Sprungmarke zum gewünschten Abschnitt des Beitrags gelangen, ohne viel scrollen zu müssen.

Das Inhaltsverzeichnis ist dabei lediglich ein kleiner Textblock auf der linken Seite der Sidebar Sektion. Ziehe daher auch hier wieder einfach ein Text Element in voller Breite an die entsprechende Position. Um dein Inhaltsverzeichnis zu konfigurieren ist lediglich etwas HTML Verständnis notwendig:

```html
<ol>
    <li>
        <span>
            Inhaltsverzeichnis
        </span>
    </li>
    <li>
        <a href="#erste-unterueberschrift">
           Erste Unterüberschrift
        </a>
    </li>
    <li>
        <a href="#zweite-unterueberschrift">
           Zweite Unterüberschrift
        </a>
    </li>
</ol>
```

Jede einzelne Sprungmarke umfasst dabei ein eigenes `<li></li>` Element mit einem darin enthaltenen `<a></a>` Element. Kopiere dir daher einfach den oben stehenden Code und füge ihn in dein Text Element ein.

{% hint style="info" %}
Vergiss jedoch vorher nicht den Bearbeitungsmodus über den Shopware Text Editor an der rechten oberen Seite zu wechseln.
{% endhint %}

Anschließend kannst du "Erste Unterüberschrift" und "Zweite Unterüberschrift" anpassen. Innerhalb des `href` Attributes kannst du die ID der Überschrift vom Beitrag hinterlegen. Beachte hierbei, dass du Umlaute und Sonderzeichen vermeiden solltest.

Im Beitrag selbst benötigst du an der Stelle des Textes noch die dazugehörige ID. Dies kann in etwa wie folgt aussehen:

```html
<h2 id="erste-unterueberschrift">
    Erste Unterüberschrift
</h2>
<p>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy 
    eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed voluptua.
</p>

<h2 id="zweite-unterueberschrift">
    Zweite Unterüberschrift
</h2>
<p>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy 
    eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed voluptua.
</p>
```

{% hint style="info" %}
Nachdem du die Erlebniswelt gespeichert hast, wird ein entsprechendes Styling auf dein Inhaltsverzeichnis angewandt. Vergewissere dich daher, den exakten Syntax aus dem oben stehenden Beispiel zu verwenden. Andernfalls kann ein einheitliches Aussehen nicht garantiert werden.
{% endhint %}

### App Konfiguration

Unter "Erweiterungen > Meine Erweiterungen > Blog > Drei Punkte > Konfigurieren" kannst du die App zusätzlich konfigurieren.

#### Versatz des Inhaltsverzeichnisses

Manche Themes verwenden einen sticky Header. Dies kann im Zweifel dazu führen, dass dieser das Inhaltsverzeichnis überlappt. Je höher der Wert an dieser Stelle ist, desto größer ist der Abstand des Inhaltsverzeichnisses zum oberen Rand des Browsers.&#x20;

#### Anzahl der Blog-Posts pro Seite

Lege fest wie viele Blog-Posts im Blog-Listing standardmäßig pro Seite angezeigt werden sollen.

### Element zur Darstellung der drei neusten Beiträge

Neben dem Blog-Listing und Blog-Header Element gibt es ebenfalls das Element "Neuste Blogbeiträge". Dies kannst du nutzen, um auf anderen Seiten die drei aktuellsten Beiträge eines spezifischen Blogs automatisch auszugeben.

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

Wechsle hierbei einfach auf das Element und öffne die Einstellungen über das Zahnrad am rechten oberen Rand des Elements. Nun kannst du in der Konfiguration die Hauptkategorie deines Blogs wählen, die auch das Blog-Listing Element in einer Erlebniswelt zugewiesen bekommen hat.

### Wissenswertes

<details>

<summary>Was sind die idealen Abstände zwischen den einzelnen Blöcken in meinem Beitrag?</summary>

Standardmäßig empfehlen wir den Abstand jedes Blocks zu entfernen bzw. auf "0" zu setzen. Das "Blog Header" Element zu Beginn deines Beitrags sorgt dafür, dass ideale Abstände zwischen den einzelnen Elementen angewendet werden.

</details>

<details>

<summary>Kann ich neben meinem Blog auch noch einen separaten Ratgeber erstellen?</summary>

Du kannst beliebig viele Blogs erstellen und das Feature auch zu anderen Zwecken nutzen. So kann es Sinn machen einen Blog bspw. von einem Ratgeber oder Referenzbeiträgen semantisch zu trennen. Erstelle dafür einfach eine neue Übersichtsseite mit dazugehöriger Kategorie und Erlebniswelt, sowie den entsprechenden Beiträgen.

</details>

<details>

<summary>Wie werden die Blog Beiträge im Blog-Listing sortiert?</summary>

Die Sortierung erfolgt immer von neu nach alt. Das Kriterium hierbei ist das Erstellungsdatum der Erlebniswelt des Beitrags.

</details>

<details>

<summary>Wieso steht in meinem Beitrag "Zuletzt aktualisiert: ..."?</summary>

Das Aktualisierungsdatum orientiert sich immer daran, wann du die Erlebniswelt des Beitrags zuletzt gespeichert hast. So werden die Beiträge zwar nach Erstellungsdatum im Blog-Listing sortiert, im Beitrag selbst steht jedoch immer wann der Beitrag zuletzt überarbeitet wurde.

</details>


# Checkout

### Basiskonfiguration

1. Begebe dich in deinem Admin zu "Erweiterungen" > "Meine Erweiterungen".&#x20;
2. Installiere und aktiviere die App.
3. Öffne die Konfiguration und nehme ggf. Anpassungen vor.
4. Leere den Cache unter "Einstellungen" > "System" > "Caches & Indizes" > "Caches leeren"


# Cross Selling Pop-Up

### Basiskonfiguration

1. Begebe dich in deinem Admin zu "Erweiterungen" > "Meine Erweiterungen".&#x20;
2. Installiere und aktiviere die App.
3. Leere den Cache unter "Einstellungen" > "System" > "Caches & Indizes" > "Caches leeren"
4. Konfiguriere das Pop-Up unter "Kataloge" > "Produkte" > "\[Produkt]" > "Spezifikationen" > "Zusatzfelder" > "Produkt (Cross Selling Pop-Up)" auf Produktebene.


# Merkzettel Manager

### Basiskonfiguration

1. Begebe dich in deinem Admin zu "Erweiterungen" > "Meine Erweiterungen".&#x20;
2. Installiere und aktiviere die App.
3. Leere den Cache unter "Einstellungen" > "System" > "Caches & Indizes" > "Caches leeren"


# Newsletter Pop-Up

{% hint style="info" %}
Die App bietet dir zwei Layout-Optionen: Ein Basis-Layout, das wird dir direkt zur Verfügung stellen und ein erweitertes Layout, in der du das Pop-Up über die Erlebniswelten komplett frei gestalten kannst.
{% endhint %}

### Basiskonfiguration

1. Begebe dich in deinem Admin zu "Erweiterungen > Meine Erweiterungen".&#x20;
2. Installiere und aktiviere die App.
3. Öffne die Konfiguration und pflege alles im Abschnitt "Einstellungen" und ggf. "Logo".
4. Passe ggf. [Textbausteine](https://docs.shopware.com/de/shopware-6-de/einstellungen/Textbausteine) der App auf deine Bedürfnisse an.
5. Leere den Cache unter "Einstellungen > System > Caches & Indizes > Caches leeren".

{% hint style="success" %}
Ergebnis: Du hast das Basis-Layout erfolgreich konfiguriert und kannst die App direkt verwenden.
{% endhint %}

{% hint style="info" %}
Nachdem das Pop-Up geschlossen wurde, wird es für eine Woche nicht mehr angezeigt, sofern der Besucher die Cookies für Komfortfunktionen akzeptiert hat. Wenn sie nicht akzeptiert wurden, wird das Pop-Up lediglich in der Session gespeichert und bei einem erneuten Aufruf der Seite über ein neues Browser-Fenster zu einem späteren Zeitpunkt erneut eingeblendet.
{% endhint %}

### Erweitertes Layout

Wenn du mehr Flexibilität über die Layout-Gestaltung haben möchtest, kannst du über die Konfigurationsoption "Layout", eine eigene [Erlebniswelt](https://docs.shopware.com/de/shopware-6-de/Inhalte/Erlebniswelten) verknüpfen. In dieser Anleitung werden wir das folgende Layout gemeinsam erstellen:

<div data-with-frame="true"><figure><img src="/files/D5CNEshS50H1JOWNfNNj" alt=""><figcaption></figcaption></figure></div>

#### Schritt 1: Anlage der Erlebniswelt

Begebe dich zu "Inhalte > Erlebniswelten" und klicke auf den Button "Neues Layout anlegen". Wähle anschließend "Shopseite" und "Volle Breite" und vergib abschließend einen passenden Namen für die neue Erlebniswelt.

#### Schritt 2: Desktop Konfiguration

Klicke nun auf die Sektion, sodass sich die Sidebar öffnet und ziehe anschließend den Block "Zwei Spalten, Text" aus der Block-Kategorie "Text" in die Sektion. Wähle nun den Block aus und setze den oberen und unteren Abstand in den Block-Einstellungen im Abschnitt "Layout" auf "0".

Öffne jetzt die Einstellungen des linken Text-Elements über das Zahnrad-Symbol und wechsle den Bearbeitungsmodus über die rechte obere Ecke des Editors. Kopiere nun folgenden Code in den Editor:

```html
<div style="text-align: center; padding: 3rem 1.125rem 3rem 3rem;">
    <h2 style="text-transform: uppercase;">Join Us</h2>
    <p style="font-size: 0.875rem; line-height: 1.4; margin-bottom: 1.625rem;">
        Abonniere unseren Newsletter und erhalte 10 % Rabatt auf deine erste Bestellung sowie Informationen zu Produktneuheiten.
    </p>
    {{ newsletter_form() }}
</div>
```

{% hint style="info" %}
Neben dem Inline-Styling für ein besseres Aussehen ist an dieser Stelle die Variable **{{ newsletter\_form() }}** besonders hervorzuheben. Diese wird über die App durch das Anmeldeformular ersetzt und ist essentiell, um das Pop-Up korrekt verwenden zu können.
{% endhint %}

Das rechte Textelement des Blocks ersetzen wir nun über das Pfeile-Symbol durch ein Bild-Element. Hier klicken wir ebenfalls auf das Zahnrad-Symbol um die Einstellungen zu öffnen. Zuerst hinterlegen wir das Bild und wählen anschließend den Anzeigemodus "Zugeschnitten", um nun den Wert "405px" in das Feld "Minimale Höhe" darunter einzutragen zu können.

Zum Abschluss müssen wir nun noch festlegen, dass der Block über die Block-Einstellungen im Abschnitt "Sichtbarkeit" für Mobil ausgeblendet wird.

#### Schritt 3: Mobile Konfiguration

Zu guter letzt ziehen wir nun noch den Block "Text" aus der gleichnamigen Block-Kategorie direkt unter unseren zuvor konfigurierten Block. Bei diesem Block entfernen wir ebenfalls den oberen und unteren Abstand. Anschließend kopieren wir folgenden Code in den Editor:

```html
<div style="text-align: center; padding: 3rem;">
    <h2 style="text-transform: uppercase;">Join Us</h2>
    <p style="font-size: 0.875rem; line-height: 1.4; margin-bottom: 1.625rem;">
        Abonniere unseren Newsletter und erhalte 10 % Rabatt auf deine erste Bestellung sowie Informationen zu Produktneuheiten.
    </p>
    {{ newsletter_form() }}
</div>
```

Dieser ist ziemlich ähnlich zum Template zuvor, hat jedoch einen angepassten Innenabstand für ein einheitlicheres Aussehen auf mobilen Endgeräten. Dadurch dass dieser Block nun kein Bild-Element enthält und nicht zweispaltig ist, ist es für die mobile Darstellung durch die kompaktere Ansicht auch deutlich besser geeignet.

Zu guter Letzt müssen wir nun auch noch bei diesem Block die Sichtbarkeit einschränken. Der Block darf  auf Tablet und Desktop nicht zu sehen sein. Speichere abschließend die Erlebniswelt um alle Einstellungen zu sichern.

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

#### Schritt 4: App Konfiguration

Im letzten Schritt begeben wir uns nun zurück in die Konfiguration der App. Dort können wir nun die soeben erstellte Erlebniswelt in der Konfigurationsoption "Layout" verknüpfen. Ebenfalls erhöhen wir die maximale Breite im gleichnamigen Feld auf "800", um dem Layout genügend Platz zu geben.

{% hint style="success" %}
Herzlichen Glückwunsch! Du hast soeben dein komplett eigenes Newsletter-Layout erstellt.
{% endhint %}


# Pop-Ups

### Basiskonfiguration

1. Begebe dich in deinem Admin zu "Erweiterungen > Meine Erweiterungen".&#x20;
2. Installiere und aktiviere die App.
3. Leere den Cache unter "Einstellungen > System > Caches & Indizes > Caches leeren".

### Pop-Up anlegen

Unter "Marketing > Pop-Ups" gibt es nun die Möglichkeit Pop-Ups anzulegen und zu konfigurieren. Mit einem Klick auf "Pop-Up anlegen" gelangt man zur Bearbeitungsmaske.

{% hint style="info" %}
Nachdem ein Pop-Up geschlossen wurde, wird es für eine Woche nicht mehr angezeigt, sofern der Besucher die Cookies für Komfortfunktionen akzeptiert hat. Wenn sie nicht akzeptiert wurden, wird das Pop-Up lediglich in der Session gespeichert und bei einem erneuten Aufruf der Seite über ein neues Browser-Fenster zu einem späteren Zeitpunkt erneut eingeblendet.
{% endhint %}

#### Basisinformation

<div data-with-frame="true"><figure><img src="/files/ZjlAyQnvE1WwjNBbtx5Z" alt=""><figcaption></figcaption></figure></div>

<details>

<summary>Name</summary>

Hiermit kannst du dem Pop-Up einen Namen vergeben. Er dient nur für den internen Gebrauch.

</details>

<details>

<summary>Priorität</summary>

Diese besagt welches Pop-Up bei gleichen Bedingungen auf einer Seite Vorrang hat.

</details>

<details>

<summary>Gültig ab</summary>

Über dieses Feld kannst du definieren, ab welchem Zeitpunkt das Pop-Up angezeigt werden soll. Lasse dieses Feld frei, um das Pop-Up direkt darzustellen.

</details>

<details>

<summary>Gültig bis</summary>

Über dieses Feld kannst du definieren, bis zu welchem Zeitpunkt das Pop-Up angezeigt werden soll. Lasse dieses Feld frei, um das Pop-Up für immer darzustellen.

</details>

<details>

<summary>Verkaufskanäle</summary>

Definiert in welchen Verkaufskanälen das Pop-Up angezeigt werden soll.

</details>

<details>

<summary>Aktiv</summary>

Entscheidet, ob das Pop-Up aktiv oder inaktiv ist.

</details>

#### Bedingungen

{% hint style="info" %}
Pro Seite wird nur ein Pop-Up angezeigt. Wenn mehrere Pop-Ups zutreffen, wird das Pop-Up mit der höchsten Priorität verwendet.
{% endhint %}

<div data-with-frame="true"><figure><img src="/files/V4ddGctdEZACgxqjjosG" alt=""><figcaption></figcaption></figure></div>

<details>

<summary>Auslöser</summary>

Zum aktuellen Zeitpunkt liefert die App zwei Auslöser-Typen. Solltest du einen anderen Auslöser benötigen, zögere nicht uns zu kontaktieren.

**Nach X Sekunden**\
Das Pop-Up wird nach der definierten Anzahl Sekunden eingeblendet

**Beim Verlassen der Seite**\
Das Pop-Up wird angezeigt, sobald der Besucher die Seite verlassen möchte und den Mauszeiger zum oberen Rand der Browser-Leiste bewegt. Je höher der konfigurierte Schwellenwert, desto früher wird das Pop-Up eingeblendet.  Da auf mobilen Endgeräten kein Mauszeiger existiert wird das Pop-Up mobil mit dieser Option immer angezeigt, wenn 50% der Seite gescrollt wurde.

</details>

<details>

<summary>Anzeigebereich</summary>

Diese Einstellung legt fest wo das Pop-Up angezeigt werden soll.

**Jede Seite**\
Das Pop-Up wird auf jeder Seite eingeblendet.

**Kategorieseiten**\
Das Pop-Up wird auf jeder Kategorieseite eingeblendet.

**Produkt Detailseiten**\
Das Pop-Up wird auf jeder Produkt Detailseite eingeblendet.

**Benutzerdefinierte Kategorie**\
Das Pop-Up wird auf der Kategorieseite eingeblendet, die im Feld rechts daneben verknüpft werden kann.

**Benutzerdefiniertes Produkt**\
Das Pop-Up wird auf der Produkt Detailseite eingeblendet, die im Feld rechts daneben verknüpft werden kann.

</details>

#### Inhalt

<div data-with-frame="true"><figure><img src="/files/mSWORzgsRisWIkkk4F6d" alt=""><figcaption></figcaption></figure></div>

<details>

<summary>Layout</summary>

An dieser Stelle muss die [Erlebniswelt](https://docs.shopware.com/de/shopware-6-de/Inhalte/Erlebniswelten) verknüpft werden, die im Pop-Up angezeigt werden soll.

</details>

<details>

<summary>Maximale Breite (in px)</summary>

Über dieses Feld kann die Breite des Pop-Ups definiert werden.

</details>

<details>

<summary>Pop-Up Header entfernen</summary>

Mit dieser Option lässt sich die Kopfzeile bzw. der Header des Pop-Ups ausblenden. Somit streckt sich der Inhalt der Erlebniswelt auf die volle Breite.

</details>

<details>

<summary>Farbe des Schließen-Icons</summary>

Definiert entsprechend die Farbe.

</details>


# Produkt Konfigurator

{% hint style="info" %}
Für die Einrichtung des Produkt Konfigurator haben wir einen eigenen [Ratgeber Beitrag](https://www.atloss.de/ratgeber/shopware-6-produkt-konfigurator/) geschrieben.
{% endhint %}


# SEO URL Manager

{% hint style="info" %}
**Du möchtest mehr organischen Traffic?**

Dann schau auf jeden Fall in unserem [SEO-Ratgeber](https://atloss.de/ratgeber/shopware-6-seo/) vorbei! In diesem Beitrag findest du alle wichtigen Shopware 6 SEO Maßnahmen für deinen Shop.
{% endhint %}

### Basiskonfiguration

1. Begebe dich in deinem Admin zu "Erweiterungen" > "Meine Erweiterungen".&#x20;
2. Installiere und aktiviere die App.
3. Öffne die Konfiguration und aktiviere die gewünschten Funktionen.
4. Leere den Cache unter "Einstellungen" > "System" > "Caches & Indizes" > "Caches leeren"

### Varianten URLs generieren

1. Begebe dich zu "Einstellungen" > "Shop" > "SEO"
2. Füge folgendes Template in das Feld "Produktdetailseite" ein und speichere deine Eingaben:

{% code title="Produktdetailseite" fullWidth="false" %}

```twig
{{ product.translated.name|lower }}{% if product.variation is not empty and product.parentId is not empty %}{% for var in product.variation %}-{{ var.option|lower }}{% endfor %}{% endif %}/
```

{% endcode %}

{% hint style="success" %}
Dieses Template erstellt die URLs nach folgendem Schema:

*<https://www.shop.de/\\[produkt-name-in-kleinbuchstaben]-\\[variante(n)-in-kleinbuchstaben]/>*
{% endhint %}

Du kannst die Vorlage selbstverständlich noch an deine Bedürfnisse anpassen.

3. Aktualisiere deinen Index unter "Einstellungen" > "System" > "Caches & Indizes" > "Indizes aktualisieren".

{% hint style="info" %}
Den aktuellen Stand der Indexierung kannst du in den Mitteilungen rechts oben verfolgen. Je mehr Produkte du in deinem Shop hast, desto länger kann dieser Prozess dauern.
{% endhint %}

### Sitemap URLs

{% hint style="info" %}
Solltest du den Index im vorherigen Schritt bereits aktualisiert haben, brauchst du dies nicht erneut zu tun.
{% endhint %}

Aktualisiere deinen Index unter "Einstellungen" > "System" > "Caches & Indizes" > "Indizes aktualisieren".

### Canonical URLs

Hierfür ist keine weitere Konfiguration nötig.

### Weitere Optionen

Globale Einstellungen aus der App Konfiguration wie die Verlinkung aus Produkt Boxen, sowie die Canonical-URL Setzung kannst du unter "Kataloge" > "Produkte" > "\[Produkt]" > "Spezifikationen" > "Zusatzfelder" > "Produkt (SEO URL Manager)" auf Produktebene überschreiben.

### FAQ's

<details>

<summary>Meine Listing URLs zeigen nach der Installation der Erweiterung immer noch nicht auf den Parent?</summary>

Da die Erweiterung auf das Listing Template zugreift, kann es vorkommen, dass dein Theme unser Listing Template überschreibt. Sollte dies bei dir der Fall sein, melde dich gerne bei uns und wir lösen das Problem gemeinsam.

</details>

<details>

<summary>Manche Varianten URLs haben nach der Index Generierung eine /detail/3d951aa1fa4549579670c84bb67e5f08 URL. Woran liegt das?</summary>

Diese kryptische URL ist der Shopware 6 Fallback für bereits existierende URLs. Stelle also sicher, dass dein SEO URL Template auf jeden Fall einzigartige und eindeutige URLs generiert. Hast du bspw. zwei Produkte mit dem exakt selben Namen ist die Wahrscheinlichkeit sehr hoch, dass zweimal ein und dieselbe URL generiert wird.

</details>

<details>

<summary>Warum wird auf der Produkt Detailseite die falsche Variante ausgewählt, wenn ich über die App global aus allen Produkt Boxen auf den Parent Artikel verlinke?</summary>

Die Verlinkung auf den Parent aus der Produkt Box ist auch im Shopware Standard möglich. So lässt sich im Produkt im Tab "Varianten" über die Storefront-Darstellung in der Produktliste die Variante definieren, die ausgewählt werden soll, wenn man auf das Hauptprodukt klickt.

Ist dies nicht definiert, handelt das System hierbei nach eigenem Ermessen und wählt selbst eine Variante, da Shopware auf Produkt Detailseiten immer mit einer Vorauswahl arbeitet. Schließlich ist das Hauptprodukt nicht kaufbar.

Der SEO URL Manager linkt daher aus Produkt Boxen über die aktive Konfiguration global immer auf den Parent, es wurde jedoch auf Produktebene nie definiert, was bei Aufruf der Parent-URL ausgewählt werden soll.

Gerade wenn Produkte nach Farben im Listing aufgefächert werden, verlinken dennoch alle Produkte auf den Parent und eine konkrete Vorauswahl nach der entsprechenden Farbe kann aufgrund dieses Konflikts nicht mehr gewährleistet werden. Die Entscheidung zwischen besserer Usability oder SEO Grundstruktur muss dabei jeder für sich selbst entscheiden.

</details>


# Upselling

#### Basiskonfiguration

1. Begebe dich in deinem Admin zu "Erweiterungen > Meine Erweiterungen".
2. Installiere und aktiviere die App.
3. Leere den Cache unter "Einstellungen > System > Caches & Indizes > Caches leeren".

#### Upselling anlegen

Unter "Marketing > Upselling" gibt es nun die Möglichkeit Upsellings anzulegen und zu konfigurieren. Mit einem Klick auf "Neues Upselling erstellen" gelangt man zur Bearbeitungsmaske.

#### **Konfiguration**

<div data-with-frame="true"><figure><img src="/files/z5x5K6CJKnq7udvcF0NV" alt=""><figcaption></figcaption></figure></div>

<details>

<summary>Name</summary>

Hiermit kannst du dem Upselling einen Namen vergeben. Er dient nur für den internen Gebrauch.

</details>

<details>

<summary>Aktiv</summary>

Entscheidet, ob das Upselling aktiv oder inaktiv ist.

</details>

<details>

<summary>Überschrift</summary>

Diese Überschrift wird optional als Titel über dem Upselling im Checkout angezeigt.

</details>

<details>

<summary>Priorität</summary>

Diese besagt welches Upselling bei gleichen Bedingungen im Checkout Vorrang hat. Je höher der Wert, desto höher die Priorität.

</details>

<details>

<summary>Upsell-Produkte</summary>

An dieser Stelle muss die [dynamische Produktgruppe](https://docs.shopware.com/de/shopware-6-de/Kataloge/DynamischeProduktgruppen) verknüpft werden, die im Checkout als Upselling angezeigt werden soll. Über die dynamische Produktgruppe kannst du fein granuliert auswählen, welche Produkte überhaupt für das Upselling infrage kommen.

</details>

<details>

<summary>Maximale Produktanzahl</summary>

Über dieses Feld definierst du, wie viele Upselling Produkte maximal im Checkout ausgespielt werden sollen.

</details>

<details>

<summary>Sortierreihenfolge</summary>

Bestimmt, in welcher Reihenfolge die Upselling Produkte im Checkout dargestellt werden.

**Name aufsteigend**\
Sortierung alphabetisch von A bis Z.

**Name absteigend**\
Sortierung alphabetisch von Z bis A.

**Erstellungsdatum aufsteigend**\
Älteste Produkte zuerst.

**Erstellungsdatum absteigend**\
Neueste Produkte zuerst.

**Preis aufsteigend**\
Günstigste Produkte zuerst.

**Preis absteigend**\
Teuerste Produkte zuerst.

**Erscheinungsdatum aufsteigend**\
Sortierung nach Erscheinungsdatum von alt nach neu.

**Erscheinungsdatum absteigend**\
Sortierung nach Erscheinungsdatum von neu nach alt.

**Zufällig**\
Die Upselling Produkte werden bei jedem Aufruf in zufälliger Reihenfolge ausgespielt.

</details>

<details>

<summary>Auslösebedingung (Warenkorb-Produkte)</summary>

Hier definierst du über eine [dynamische Produktgruppe](https://docs.shopware.com/de/shopware-6-de/Kataloge/DynamischeProduktgruppen), welche Produkte im Warenkorb liegen müssen, damit die Upselling Produkte ausgespielt werden. So lässt sich je nach Produkt oder Kategoriegruppe fein aussteuern, welches Upselling zu welchen Warenkorbinhalten angezeigt wird.

{% hint style="info" %}
Die Auslösebedingungen sind optional. Wird keine Auslösebedingung definiert, greift das Upselling unabhängig vom Warenkorbinhalt, sofern es die höchste Priorität im Verkaufskanal besitzt.
{% endhint %}

</details>

<details>

<summary>Verkaufskanäle</summary>

Definiert in welchem Verkaufskanal das Upselling ausgespielt werden soll.

</details>

{% hint style="success" %}
**Beispiel:** Du möchtest passendes Zubehör als Upselling anzeigen, sobald eine Kamera im Warenkorb liegt. In diesem Fall verknüpfst du als Warenkorbprodukte eine dynamische Produktgruppe, die alle Kameras enthält. Als Upselling Produkte verknüpfst du eine dynamische Produktgruppe mit passendem Zubehör.
{% endhint %}

#### Darstellung im Checkout

Die Upselling Produkte werden auf der Checkout Registrierungsseite und der Checkout Kassenseite ausgespielt. Sowohl auf dem Smartphone als auch auf dem Desktop können deine Kunden Upselling Produkte direkt aus dem Checkout heraus in den Warenkorb legen.

{% hint style="info" %}
Sollte ein Upselling Produkt Varianten besitzen, wird im Checkout automatisch das Parent Produkt geladen. Deine Kunden wählen die gewünschte Variante anschließend direkt im Checkout aus, ohne den Checkout verlassen zu müssen.
{% endhint %}

#### Priorität und Auswahl im Detail

Damit du das Verhalten deiner Upsellings im Checkout vollständig nachvollziehen kannst, hier die Logik zur Auswahl im Detail:

1. Es werden zunächst alle Upsellings ermittelt, die im aktuellen Verkaufskanal aktiv sind.
2. Anschließend wird geprüft, welche Upsellings durch die Auslösebedingungen für den aktuellen Warenkorb infrage kommen.
3. Von den verbleibenden Upsellings wird das Upselling mit der höchsten Priorität ausgespielt.
4. Sollten mehrere Upsellings die gleiche höchste Priorität besitzen, wird zufällig eines davon ausgewählt.

{% hint style="success" %}
**Beispiel:** Du hast zwei aktive Upsellings im gleichen Verkaufskanal angelegt. Upselling A besitzt Priorität 10, Upselling B besitzt Priorität 5. Beide Auslösebedingungen treffen auf den Warenkorb zu. In diesem Fall wird Upselling A ausgespielt, da es die höhere Priorität besitzt.
{% endhint %}


# Fachbegriffe

Wenn du einen eigenen Online Shop aufbauen möchtest, kann die Welt des E-Commerce für Anfänger oft sehr überwältigend sein. Es gibt viele Fachbegriffe, die du kennen musst, um erfolgreich zu sein. Während du also deinen Online Shop einrichtest und das Theme konfigurierst, solltest du dich mit den entsprechenden Begriffen und Konzepten vertraut machen, damit du genau weißt, was du tust.

Deshalb haben wir dir in unserer Academy die wichtigsten Begrifflichkeiten im E-Commerce zusammengestellt. Somit kannst du sicher sein, dass du auch auf dem richtigen Weg bist. [Header](/academy/fachbegriffe/header), [Footer](/academy/fachbegriffe/footer), [Checkout](/academy/fachbegriffe/checkout) und viele weitere Begriffe spielen eine wichtige Rolle bei der Erstellung und dem Betrieb deines Shopware Shops.

Indem du dich mit diesen Begriffen vertraut machst, kannst du sicherstellen, dass du die richtigen Entscheidungen fällst und eine fundierte Entscheidung darüber triffst, welche Tools und Erweiterungen du verwenden solltest, um deine Geschäftsziele zu erreichen.

Also nimm dir Zeit, um diese wichtigen Begriffe zu lernen, während du deinen Shop konfigurierst. Wir sind sicher, dass du dadurch in der Lage sein wirst, einen erfolgreichen und effektiven Shop aufzubauen, der deine Kunden begeistert und deinen Umsatz steigert.


# Ankündigungsleiste

Eine Ankündigungsleiste in einem Online-Shop ist ein horizontales Balkenelement, das normalerweise am oberen Rand der Website platziert wird und wichtige Mitteilungen oder Ankündigungen an die Besucher des Shops kommuniziert. Sie dient dazu, relevante Informationen hervorzuheben und die Aufmerksamkeit der Benutzer auf wichtige Nachrichten oder Aktionen zu lenken.

<figure><img src="/files/8V6szpyrrk1HYvOU60mp" alt=""><figcaption><p>Ankündigungsleiste unseres Kunden <a href="https://outdoordino.de/">https://outdoordino.de/</a></p></figcaption></figure>

Die Ankündigungsleiste kann verschiedene Arten von Informationen enthalten, abhängig von den Zielen des Online-Shops. Hier sind einige gängige Verwendungszwecke einer Ankündigungsleiste:

1. Sonderangebote und Rabatte: Online-Shops nutzen oft die Ankündigungsleiste, um laufende Sonderangebote, Rabattaktionen oder Gutscheincodes zu bewerben. Durch das Hervorheben solcher Angebote können Besucher schnell darauf aufmerksam gemacht werden und ermutigt werden, diese zu nutzen.
2. Versand- und Lieferinformationen: Eine Ankündigungsleiste kann auch genutzt werden, um wichtige Informationen über Versandzeiten, Lieferoptionen, Rückgaberichtlinien oder Änderungen des Lieferprozesses aufgrund spezieller Umstände (wie beispielsweise Feiertage oder Lieferschwierigkeiten) mitzuteilen.
3. Neue Produkte oder Kollektionen: Wenn ein Online-Shop neue Produkte oder eine neue Kollektion einführt, kann die Ankündigungsleiste verwendet werden, um die Besucher darauf aufmerksam zu machen und sie zu erkunden. Dies kann dazu beitragen, die Neugier der Benutzer zu wecken und den Umsatz neuer Produkte anzukurbeln.
4. Wichtige Mitteilungen oder Ereignisse: Eine Ankündigungsleiste kann auch für allgemeine wichtige Mitteilungen oder Ereignisse verwendet werden, die den Shop oder die Benutzer betreffen. Dies kann beispielsweise die Ankündigung von Geschäftsschließungen, Wartungsarbeiten an der Website, neue Datenschutzrichtlinien oder andere relevante Informationen umfassen.

{% hint style="info" %}
Die Ankündigungsleiste ist eine prominente Position auf der Website, um wichtige Informationen zu platzieren und die Benutzer darüber zu informieren. Durch ihre auffällige Platzierung wird sichergestellt, dass Besucher schnell auf die Nachrichten aufmerksam werden, die der Shop mitteilen möchte.
{% endhint %}


# Anzeigemodus

In Shopware 6 finden sich an unterschiedlichen Stellen die Anzeigemodi "Beinhalten" (manchmal auch "Strecken" gennant), "Füllen" und "Standard" wieder. Sie wirken sich dabei besonders auf die Darstellung, sowie die Skalierung eines Bildes aus. Damit du die drei Optionen besser verstehst, erklären wir dir die Begriffe nun etwas genauer.

<figure><img src="/files/w0kcePjNVkUX5qwLXhAc" alt=""><figcaption><p>Die Anzeigemodi "Beinhalten" / "Strecken", "Füllen" und "Standard" im Vergleich</p></figcaption></figure>

### Beinhalten / Strecken

Dieser Anzeigemodus streckt ein Bild auf die maximal verfügbare Breite. Damit das Bild nicht verzerrt wird, behält das Bild immer das ursprüngliche Seitenverhältnis bei.

{% hint style="info" %}
Dieser Modus ist besonders responsiv, da man sich hier immer sicher sein kann, dass das Bild korrekt dargestellt wird. Besonders bei Smartphones kann es jedoch aufgrund der geringen Bildschirmbreite vorkommen, dass Bilder zu klein dargestellt werden.
{% endhint %}

### Füllen

Für diesen Anzeigemodus ist die Angabe einer minimalen Höhe erforderlich. Das Bild streckt sich anschließend in alle Richtungen aus, um den entstehenden Bereich komplett zu füllen. Damit das Bild nicht verzerrt wird, werden die Seiten automatisch vom Browser zugeschnitten.

{% hint style="info" %}
Dieser Modus eignet sich besonders, wenn man einen Bereich mit dem Bild komplett ausfüllen möchte. Durch das automatische Zuschneiden kann es jedoch schnell passieren, dass essenzielle Bestandteile eines Bildes nicht mehr sichtbar sind. Daher sollte dieser Anzeigemodus auf allen Endgerät Typen getestet werden.
{% endhint %}

### Standard

Bei diesem Anzeigemodus behält das Bild immer seine ursprüngliche, native Größe bei. Es wird weder gestreckt, noch zugeschnitten.


# Button

Ein Button ist interaktives Element, das dazu dient, bestimmte Aktionen auszuführen. Typischerweise handelt es sich um eine grafische Schaltfläche, die den Benutzer dazu auffordert, auf sie zu klicken, um eine bestimmte Funktion oder Aktion auszulösen.

<figure><img src="/files/xlLFjYed0J67Q6fENNWx" alt="" width="563"><figcaption><p>Kauf-Button</p></figcaption></figure>

Grundlegend können Buttons verschiedene Funktionen haben, je nachdem, auf welcher Seite sie platziert sind und welches Ziel sie verfolgen. Hier sind einige häufige Arten von Buttons in deinem Shopware Shop:

1. Kauf-Button: Dieser Button ist auf Produkt Detailseiten platziert und dient dazu, den Artikel in den Warenkorb zu legen oder den Kaufprozess zu starten. Er kann in Shopware 6 über die [Textbausteine](https://docs.shopware.com/de/shopware-6-de/einstellungen/Textbausteine) mit Texten wie "In den Warenkorb", "Jetzt kaufen" oder ähnlichem beschriftet werden.
2. Zur-Kasse-Button: Dieser Button befindet sich auf der Warenkorb-Seite oder im [Offcanvas](/academy/fachbegriffe/offcanvas), und ermöglicht dem Nutzer den [Checkout](/academy/fachbegriffe/checkout) zu starten, um den Kauf abzuschließen.
3. Anmelde- oder Registrierungs-Button: Dieser Button wird verwendet, um Benutzer zur Anmeldung oder Registrierung auf der Website aufzufordern. Er kann mit Texten wie "Anmelden", "Registrieren" oder ähnlichem beschriftet werden.

{% hint style="info" %}
Die Gestaltung und Platzierung von Buttons im E-Commerce ist wichtig, um eine gute Benutzererfahrung zu gewährleisten und den Benutzern zu helfen, die gewünschten Aktionen einfach auszuführen.
{% endhint %}


# Breadcrumb

Eine Breadcrumb in einem Online-Shop ist eine Navigationshilfe in Form einer hierarchischen Anzeige von Links, die den Pfad oder die Route anzeigen, die der Benutzer genommen hat, um zu einer bestimmten Seite zu gelangen. Die Breadcrumb-Navigation dient dazu, die Orientierung des Benutzers auf der Website zu verbessern, insbesondere wenn es sich um eine umfangreiche Website mit vielen Seiten und Produktkategorien handelt.

<figure><img src="/files/kRHVd3cnPZfgk5FIO0CD" alt=""><figcaption><p>Breadcrumb unseres Kunden <a href="https://www.profeline-katzenshop.de/">https://www.profeline-katzenshop.de/</a></p></figcaption></figure>

Die Breadcrumb wird normalerweise oben auf der Seite angezeigt und zeigt den hierarchischen Pfad der aktuellen Seite an, beginnend von der Hauptkategorie des Shops bis zur aktuellen Seite. Jeder Link in der Breadcrumb ist anklickbar und führt den Benutzer zurück zu der entsprechenden Seite oder Kategorie.

In dem oben ersichtlichen Beispiel zeigt die Breadcrumb dem Benutzer, dass er von der Kategorie "Katzenmöbel" schließlich zur spezifischen Kategorie für "Wandliegen" navigiert hat.

Die Breadcrumb-Navigation bietet mehrere Vorteile:

1. Orientierun&#x67;**:** Sie hilft dem Benutzer, sich auf der Website zurechtzufinden, insbesondere wenn es viele Produkte oder Kategorien gibt. Der Benutzer kann leicht zur vorherigen Ebene der Hierarchie zurückkehren.
2. Vertrauen: Die Breadcrumb gibt dem Benutzer das Vertrauen, dass er den Pfad zurückverfolgen kann, den er genommen hat, und erleichtert es ihm, zu vorherigen Seiten zurückzukehren, wenn er seine Meinung ändert.
3. SEO: Suchmaschinen wie Google verwenden oft Breadcrumb-Strukturen, um die Hierarchie und Navigation einer Website besser zu verstehen. Dies kann sich positiv auf die SEO-Rankings auswirken.
4. Barrierefreiheit: Breadcrumbs sind auch für Menschen mit Behinderungen von Vorteil, da sie eine zusätzliche Navigationsmethode bieten.

{% hint style="info" %}
Insgesamt verbessert die Breadcrumb-Navigation die Benutzerfreundlichkeit und die Effizienz beim Navigieren in einem Online-Shop und trägt dazu bei, die [Conversion-Raten](/academy/fachbegriffe/conversion) zu erhöhen, da Benutzer leichter zu den gewünschten Produkten oder Seiten gelangen können.
{% endhint %}


# Checkout

Der Checkout ist der letzte Schritt im Einkaufsprozess eines Kunden auf einem Online Shop.

<figure><img src="/files/n9qU6b2WurpZVoR8oo5L" alt=""><figcaption><p>Checkout Bestätigung unseres Kunden <a href="https://www.biobay.de/">https://www.biobay.de/</a></p></figcaption></figure>

Der Checkout-Prozess kann je nach E-Commerce-Plattform und Online-Shop variieren, aber im Allgemeinen umfasst er die folgenden Schritte:&#x20;

1. [Warenkorb](/academy/fachbegriffe/warenkorb) anzeigen
2. Anmelden bzw. registrieren, häufig Checkout Registrierung genannt
3. Lieferadresse, Zahlungsmethode und Versandoptionen auswählen, häufig Checkout Bestätigung genannt
4. Bestellung überprüfen und schließlich die Bestellung abschließen, häufig Checkout Abschluss genannt

{% hint style="info" %}
Ein gut gestalteter und optimierter Checkout-Prozess ist wichtig, um den Kunden ein reibungsloses und angenehmes Einkaufserlebnis zu bieten und den Kaufabschluss zu erleichtern. Ein unübersichtlicher oder umständlicher Checkout-Prozess kann dagegen zu Warenkorbabbrüchen und Kundenverlusten führen.
{% endhint %}


# Conversion

In einem Online-Shop bezieht sich der Begriff "Conversion" auf den Prozess, bei dem Besucher des Shops eine gewünschte Aktion ausführen, die zu einem vordefinierten Ziel führt. Es bezeichnet die Umwandlung eines Website-Besuchers in einen zahlenden Kunden.

Im Kontext eines Online-Shops können verschiedene Arten von Conversions identifiziert werden:

1. Kauf-Conversions: Die gängigste Form der Conversion in einem Online-Shop ist der eigentliche Kauf eines Produkts oder einer Dienstleistung durch einen Besucher. Eine Kauf-Conversion tritt ein, wenn ein Besucher den [Checkout-Prozess](/academy/fachbegriffe/checkout) durchläuft und erfolgreich einen Kauf abschließt.
2. Registrierungs-Conversions: Eine Registrierungs-Conversion tritt auf, wenn ein Besucher des Online-Shops sich für ein Benutzerkonto registriert. Dies kann es dem Besucher ermöglichen, zukünftige Einkäufe einfacher abzuschließen oder von speziellen Angeboten und Funktionen des Online-Shops zu profitieren.
3. Lead-Generierungs-Conversions: In einigen Fällen kann die Conversion darin bestehen, dass ein Besucher seine Kontaktdaten hinterlässt, wie beispielsweise seine E-Mail-Adresse oder Telefonnummer. Dies wird oft genutzt, um potenzielle Kunden zu erfassen und ihnen zukünftig Marketingbotschaften oder Angebote zukommen zu lassen.
4. Warenkorb-Conversions: Eine Warenkorb-Conversion tritt ein, wenn ein Besucher Produkte in den Warenkorb legt, auch wenn der Kauf noch nicht abgeschlossen wurde. Diese Art von Conversion kann ein Hinweis auf ein hohes Kaufinteresse sein und bietet die Möglichkeit, den Besucher dazu zu ermutigen, den Kaufvorgang abzuschließen.

{% hint style="info" %}
Die Messung und Optimierung von Conversions ist für Online-Shops von entscheidender Bedeutung, um den Erfolg zu steigern. Durch die Überwachung und Analyse der Conversion-Raten kann ein Online-Shop feststellen, wie effektiv er Besucher in zahlende Kunden umwandelt. Dies ermöglicht es dem Shop, gezielte Maßnahmen zu ergreifen, um die Conversion-Rate zu verbessern und den Umsatz zu steigern, wie beispielsweise die Optimierung der Website, die Implementierung von verlockenden Angeboten oder die Vereinfachung des Checkout-Prozesses.
{% endhint %}


# Cross Selling

Cross Selling bezieht sich auf die Praxis, Kunden Produkte oder Dienstleistungen zusätzlich zu dem anzubieten, was sie bereits ausgewählt oder in ihrem Warenkorb haben. Ziel des Cross Sellings ist es, den durchschnittlichen Bestellwert zu erhöhen und dem Kunden Produkte zu präsentieren, die seine aktuellen Interessen oder Bedürfnisse ergänzen.

<figure><img src="/files/yrrZ02V56BZwEohYujtv" alt=""><figcaption><p>Cross Selling unseres Kunden <a href="https://outdoordino.de/">https://outdoordino.de/</a></p></figcaption></figure>

Cross Selling Beispiele für deinen Shop sind:

1. "Kunden kauften auch": Dies zeigt dem Kunden Produkte an, die oft zusammen mit dem ausgewählten Artikel gekauft werden.
2. "Ähnliche Produkte": Ähnliche Produkte, die dem Kunden gefallen könnten, werden angezeigt, um Alternativen vorzuschlagen.
3. "Bundle-Angebote": Hierbei werden Produkte in einem Paket zu einem vergünstigten Preis angeboten. Zum Beispiel könnte ein Kunde, der ein Smartphone kauft, ein Bundle-Angebot für eine Schutzhülle und Kopfhörer sehen.
4. "Häufig zusammen gekauft": Dies zeigt Produkte an, die oft zusammen in den Warenkörben von Kunden landen.

{% hint style="info" %}
Das Ziel des Cross Sellings ist es, dem Kunden einen Mehrwert zu bieten und gleichzeitig den Umsatz des Online-Shops zu steigern. Es ist eine gängige Technik im E-Commerce, um die [Conversion-Raten](/academy/fachbegriffe/conversion) zu erhöhen und die Kundenbindung zu stärken.
{% endhint %}


# Flyout Navigation

Die Flyout Navigation in einem Online-Shop ist eine spezielle Art von Navigationsmenü, das in der Regel in einer horizontalen oder vertikalen Leiste angezeigt wird, wenn der Benutzer mit dem Mauszeiger über einen bestimmten Navigationspunkt oder eine Schaltfläche fährt oder klickt. Das Flyout-Menü "fliegt" oder "klappt" aus, um zusätzliche Unterpunkte oder Optionen anzuzeigen, die dem Benutzer eine detailliertere Navigation ermöglichen.

<figure><img src="/files/ZXD00OIoDIY2bYoBR7VO" alt=""><figcaption><p>Flyout Navigation unseres Kunden <a href="https://www.biobay.de/">https://www.biobay.de/</a></p></figcaption></figure>

Hier sind einige wichtige Merkmale und Verwendungszwecke einer Flyout Navigation:

1. Erweiterte Navigation: Flyout-Menüs werden oft verwendet, um die Navigation zu erweitern und dem Benutzer eine Hierarchie von Links oder Optionen anzuzeigen. Dies ist besonders nützlich, wenn ein Online-Shop viele Kategorien oder Unterkategorien hat.
2. Platzersparni&#x73;**:** Da Flyout-Menüs ausgeblendet werden, wenn sie nicht benötigt werden, sparen sie Platz auf der Webseite und ermöglichen eine sauberere Benutzeroberfläche.
3. Mehrebenen-Navigation: Flyout-Menüs unterstützen häufig mehrere Ebenen von Unterpunkten. Benutzer können über einen Hauptpunkt fahren, um eine Liste von Unterpunkten anzuzeigen.
4. Schnelle Navigation: Flyout-Menüs ermöglichen es Benutzern, schnell zwischen verschiedenen Bereichen der Website zu wechseln, ohne die Hauptnavigation zu verlassen.
5. Visuelles Feedback: Die Anzeige eines Flyout-Menüs beim Überfahren eines Navigationspunkts mit dem Mauszeiger bietet dem Benutzer visuelles Feedback, dass es weitere Optionen gibt.

Beispiele für die Verwendung von Flyout Navigationen in einem Online-Shop können das Anzeigen von Produktkategorien und Unterkategorien, das Hervorheben von Sonderangeboten oder Werbeaktionen sowie das Anbieten von Links zu wichtigen Seiten sein.

{% hint style="info" %}
Eine effektive Flyout Navigation sollte gut gestaltet sein, leicht zu bedienen und intuitiv sein, damit Benutzer problemlos auf die gewünschten Informationen oder Bereiche der Website zugreifen können.
{% endhint %}


# Footer

Im E-Commerce bezieht sich der Begriff "Footer" auf den unteren Teil deines Shops, der im Theme auf jeder Seite angezeigt wird. Einzige Ausnahme ist hierbei der [Checkout](/academy/fachbegriffe/checkout).&#x20;

<figure><img src="/files/YB6T3WozvhzM2kCw8nH4" alt=""><figcaption><p>Footer unseres Kunden <a href="https://outdoordino.de/">https://outdoordino.de/</a></p></figcaption></figure>

Der Footer enthält in der Regel Links zu rechtlichen Informationen wie Impressum, Datenschutzerklärung, Widerrufsrecht, Versand- und Zahlungsbedingungen und AGB, Kontaktinformationen des Online-Shops wie Adresse, Telefonnummer und E-Mail-Adresse sowie Links zu Social-Media-Profilen.

Der Footer wird oft als "Abschluss" des Shops betrachtet und kann auch zusätzliche Navigationslinks und Quick-Links zu bestimmten Seiten oder Funktionen des Shops enthalten. Der Footer ist normalerweise weniger auffällig als der Header, da er nicht so prominent platziert ist, aber er ist dennoch ein wichtiger Bestandteil der Benutzerfreundlichkeit des Online Shops.

Ähnlich wie beim [Header](/academy/fachbegriffe/header) ist auch der Footer ein wichtiger Bestandteil der responsiven Webgestaltung. Der Footer kann auf kleineren Bildschirmen wie auf mobilen Geräten anders dargestellt werden als auf Desktop-Computern, z.B. durch Zusammenfassung der Links in einer Dropdown-Liste oder durch Stapelung der Elemente.

{% hint style="info" %}
Der Footer kann auch dazu beitragen, das Vertrauen der Benutzer in den Online-Shop zu stärken, indem er ihnen eine einfache Möglichkeit bietet, auf wichtige Informationen zuzugreifen und Kontakt aufzunehmen. Ein gut gestalteter Footer kann auch das Branding des Online-Shops unterstützen und ihm ein professionelles Erscheinungsbild verleihen.
{% endhint %}


# Header

Im E-Commerce bezieht sich der Begriff "Header" auf den oberen Teil deines Shops, der im Theme auf jeder Seite angezeigt wird. Einzige Ausnahme ist hierbei der [Checkout](/academy/fachbegriffe/checkout).&#x20;

<figure><img src="/files/pUnctoIHvnLv9M07FG3T" alt=""><figcaption><p>Header unseres Kunden <a href="https://spruchreif-geschenke.de/">https://spruchreif-geschenke.de/</a></p></figcaption></figure>

Der Header wird im Theme in vier Komponenten gegliedert:&#x20;

1. Die [Top Bar](/academy/fachbegriffe/top-bar)
2. Der eigentliche Header mit Shop-Suche, Logo oder Namen des Online-Shops, sowie wichtigen Aktionen wie Merkzettel, Kundenaccount oder Warenkorb-Symbol
3. Das Navigationsmenü, welches den Besucher zu unterschiedlichen Kategorien des Online Shops führt.
4. Die [Ankündigungsleiste](/academy/fachbegriffe/ankundigungsleiste)

In der Regel ist der Header auch ein wichtiger Bestandteil der responsiven Ausgestaltung deines Shops. Das bedeutet, dass der Header auf kleineren Bildschirmen wie auf mobilen Geräten anders dargestellt wird als auf Desktop-Computern. Auf mobilen Geräten können Teile des Headers beispielsweise in ein Menüsymbol umgewandelt werden, das angeklickt werden kann, um das vollständige Menü anzuzeigen.

{% hint style="info" %}
Der Header dient dazu dem Benutzer eine schnelle Navigation zu ermöglichen und ihm zu zeigen, wo er sich auf deinem Shop befindet. Ein gut gestalteter Header kann dazu beitragen, die Benutzerfreundlichkeit deines Shops zu verbessern und das Branding deines Online Shops zu stärken.
{% endhint %}


# Hover Effekt

Der Hover Effekt in einem Online-Shop bezieht sich auf eine Designfunktion, bei der eine Aktion oder visuelle Veränderung auftritt, wenn ein Benutzer mit dem Mauszeiger über ein Element, wie zum Beispiel einen [Button](/academy/fachbegriffe/button) oder einen Link, fährt.

<div align="center"><figure><img src="/files/2yAGnsQMbAzDaRH9M9rs" alt="" width="450"><figcaption><p>Hover Effekt von <a href="/pages/9VxyfoYcy6Ph9nHA52gd">Button</a> und Link auf der <a href="/pages/kTU8gklaOGDdOyzz2vWg">Produkt Detailseite</a> von unserem Kunden <a href="https://outdoordino.de/">https://outdoordino.de/</a></p></figcaption></figure></div>

Der Hover Effekt wird verwendet, um die Benutzerinteraktion und das visuelle Feedback zu verbessern. Wenn der Benutzer mit dem Mauszeiger über ein Element schwebt, kann eine Reihe von Reaktionen ausgelöst werden. Hier sind einige häufige Arten von Hover Effekten in deinem Shopware Shop:

1. Farbänderung: Das Element kann seine Farbe ändern, um anzuzeigen, dass es interaktiv ist oder auf den Mauszeiger reagiert. Dies kann beispielsweise dazu dienen, einen [Button](/academy/fachbegriffe/button) hervorzuheben oder auf eine aktive Verknüpfung hinzuweisen.
2. Animation: Bei einem Hover Effekt können animierte Effekte auftreten, wie beispielsweise das Ein- und Ausblenden von Informationen oder das Verschieben von Elementen. Diese Animationen können dem Benutzer visuelles Feedback geben und die Interaktivität des Elements betonen.
3. Vergrößerung oder Zoom: Bei Produkten kann der Hover Effekt dazu verwendet werden, ein vergrößertes Bild des Produkts anzuzeigen, wenn der Benutzer mit dem Mauszeiger über das Produktbild fährt. Dies ermöglicht es dem Benutzer, das Produkt genauer zu betrachten und Details zu erkennen. Diese Funktion findest du bspw. auf der [Produkt Detailseite](/academy/fachbegriffe/produkt-detailseite).
4. Schatten oder Hervorhebung: Ein Element kann einen Schattenwurf erhalten oder hervorgehoben werden, wenn der Benutzer mit dem Mauszeiger darüber schwebt. Dadurch wird das Element betont und hebt sich visuell von anderen Elementen ab.

{% hint style="info" %}
Der Hover Effekt kann die Benutzererfahrung in einem Online-Shop verbessern, indem er Interaktivität und visuelles Feedback bietet. Er kann den Benutzern helfen, interaktive Elemente schneller zu erkennen und die Navigation zu erleichtern. Ein gut gestalteter Hover Effekt kann die Aufmerksamkeit der Benutzer auf wichtige Bereiche lenken, das Einkaufserlebnis ansprechender gestalten und die Benutzerfreundlichkeit des Shops erhöhen.
{% endhint %}


# Icon

Ein Icon bezieht sich auf ein grafisches Symbol oder eine kleine Bildrepräsentation, die eine bestimmte Aktion, Funktion oder Information repräsentiert. Icons werden häufig in Online Shops und Webseiten verwendet, um Benutzern visuelle Hinweise zu geben und die Benutzererfahrung zu verbessern.

<figure><img src="/files/FU0TNmlZy2kj8jDZ6vsh" alt="" width="188"><figcaption><p><a href="/pages/JtKmlMIBiXTGZcYLbWuh">Header</a> Icons</p></figcaption></figure>

Icons dienen dazu, komplexe Informationen auf eine kompakte und visuell ansprechende Weise darzustellen. Sie können verschiedene Formen, Farben und Symbole haben und werden auch teilweise in Verbindung mit Text verwendet, um eine bestimmte Bedeutung zu vermitteln. Hier sind einige Beispiele für Icons in deinem Shopware Shop:

1. Aktionssymbole: Icons können verwendet werden, um bestimmte Aktionen darzustellen, wie z. B. ein Taschen-Symbol für "Warenkorb anzeigen", ein Herz-Symbol für "Zur Wunschliste hinzufügen" oder ein Lupen-Symbol für "Suche aufrufen". Diese Icons ermöglichen es Benutzern, schnell und intuitiv auf bestimmte Funktionen in deinem Shop zuzugreifen.
2. Social-Media-Verknüpfungen: Icons für soziale Medien wie Facebook, Instagram, Twitter oder YouTube werden häufig verwendet, um Benutzern die Möglichkeit zu geben, den Online-Shop in den sozialen Medien zu verfolgen oder Inhalte zu teilen.
3. Navigation: Icons können verwendet werden, um verschiedene Produktkategorien darzustellen, wie z. B. ein T-Shirt-Symbol für Kleidung, ein Schuh-Symbol für Schuhe oder ein Buch-Symbol für Bücher. Diese Icons helfen den Benutzern dabei, die gewünschten Produkte oder Kategorien auf einen Blick zu identifizieren. Wie du dies im Theme realisierst findest du unter dem Feature [Flyout Navigation](/enthaltene-erweiterungen/flyout-navigation).
4. Zahlungsmethoden: Icons werden oft verwendet, um verschiedene akzeptierte Zahlungsmethoden darzustellen, wie z. B. Visa, Mastercard, PayPal oder Apple Pay. Diese Icons vermitteln den Benutzern Vertrauen und zeigen, welche Zahlungsoptionen verfügbar sind.

{% hint style="info" %}
Icons spielen eine wichtige Rolle in der visuellen Kommunikation im E-Commerce. Sie verbessern die Benutzerfreundlichkeit, machen Informationen leicht verständlich und tragen zur Ästhetik und Markenidentität eines Online-Shops bei.
{% endhint %}


# Kategorieseite

Eine Kategorieseite in einem Online-Shop ist eine Seite, auf der Produkte basierend auf ihrer Kategorie oder ihres Typs gruppiert und präsentiert werden. Sie dient dazu, Besuchern des Online-Shops eine strukturierte Übersicht über die verfügbaren Produktkategorien zu bieten und ihnen die Navigation und Auswahl zu erleichtern.

<figure><img src="/files/bdLpuYxTGI2h8JH62vcF" alt=""><figcaption><p>Kategorieseite unseres Kunden <a href="https://safe-t.ch/">https://safe-t.ch/</a></p></figcaption></figure>

Eine Kategorieseite enthält in der Regel eine Liste oder eine Rasteransicht von Produkten, die zu einer bestimmten Kategorie gehören. Jedes Produkt wird normalerweise mit einem Bild, dem Produktnamen, dem Preis und anderen relevanten Informationen dargestellt. Durch Klicken auf ein Produkt gelangt der Benutzer zur [Produkt Detailseite](/academy/fachbegriffe/produkt-detailseite), auf der detailliertere Informationen und die Möglichkeit zum Kauf angezeigt werden.

Die Kategorieseite kann verschiedene Elemente enthalten, um die Navigation und das Browsen zu verbessern. Hier sind einige häufige Merkmale einer Kategorieseite:

1. Filter- und Sortieroptionen: Um die Suche nach Produkten weiter zu verfeinern, bietet eine Kategorieseite oft Filter- und Sortieroptionen. Benutzer können zum Beispiel nach Preis, Marke, Größe, Farbe oder anderen spezifischen Merkmalen filtern, um die Auswahl entsprechend ihren Präferenzen einzuschränken.
2. Seitenzahlen oder Scroll-Funktion: Wenn die Kategorieseite eine große Anzahl von Produkten enthält, kann die Darstellung auf mehrere Seiten aufgeteilt sein. Der Benutzer kann zwischen den Seiten wechseln oder kontinuierlich scrollen, um alle verfügbaren Produkte in der Kategorie zu sehen.
3. Anzeige von Produktattributen: Neben den grundlegenden Informationen zu jedem Produkt können Kategorieseiten auch spezifische Produktattribute oder -merkmale anzeigen. Zum Beispiel können Farboptionen, Hersteller oder Kundenbewertungen angezeigt werden, um den Benutzern zusätzliche Informationen zu bieten. Erfahre wie du die unterschiedlichen Farboptionen deiner Produkte auf Kategorieseiten mit dem Theme anzeigen kannst.

{% hint style="info" %}
Die Kategorieseite ist ein zentraler Bestandteil eines Online-Shops, da sie den Benutzern dabei hilft, die gewünschten Produkte zu finden und ihre Suche auf eine bestimmte Kategorie einzuschränken. Eine gut gestaltete und benutzerfreundliche Kategorieseite trägt dazu bei, die [Conversion-Raten](/academy/fachbegriffe/conversion) zu steigern und die Navigationserfahrung für die Besucher zu verbessern.
{% endhint %}


# Landingpage

Eine Landingpage in einem Online-Shop ist eine spezielle Webseite, die erstellt wurde, um Besucher gezielt auf ein bestimmtes Produkt, eine Aktion, eine Kampagne oder eine Zielsetzung hinzuweisen und zu lenken. Im Gegensatz zu den üblichen Kategorieseiten oder Produktseiten ist eine Landingpage darauf ausgerichtet, eine klar definierte Aktion oder [Conversion-Ziel](/academy/fachbegriffe/conversion) zu fördern.

<figure><img src="/files/VXZXRZcuSIQRwJesWeTd" alt=""><figcaption><p>Landingpage unseres Kunden <a href="https://spruchreif-geschenke.de/">https://spruchreif-geschenke.de/</a>, um B2B Kunden zu gewinnen</p></figcaption></figure>

Hier sind einige häufige Zwecke und Ziele von Landingpages in einem Online-Shop:

1. Produktpromotion: Eine Landingpage kann erstellt werden, um ein bestimmtes Produkt oder eine Produktlinie hervorzuheben. Sie enthält in der Regel detaillierte Informationen über das Produkt, Bilder, Preise und einen klaren Call-to-Action (CTA), um den Kauf anzuregen.
2. Angebote und Aktionen: Landingpages werden oft für zeitlich begrenzte Angebote oder Sonderaktionen erstellt. Sie informieren die Besucher über das Angebot und ermutigen sie, es in Anspruch zu nehmen, indem sie beispielsweise einen Rabattcode verwenden oder sich für den Erhalt von Sonderangeboten registrieren.
3. Lead-Generierung: Landingpages können auch dazu verwendet werden, Leads zu generieren. Dies geschieht oft durch das Anbieten von Inhalten von Wert, wie z. B. E-Books, Whitepapers oder E-Mail-Abonnements, im Austausch gegen die Kontaktdaten des Besuchers.
4. Veranstaltungen oder Webinare: Wenn ein Online-Shop Veranstaltungen oder Webinare anbietet, kann eine Landingpage erstellt werden, um die Besucher über das Event zu informieren und sie zur Anmeldung oder zum Kauf eines Tickets zu ermutigen.
5. Produktlaunch: Eine Landingpage kann auch für den Launch eines neuen Produkts oder einer neuen Kollektion erstellt werden. Sie erzeugt Aufmerksamkeit und Neugierde bei den Besuchern und führt sie zur Produktseite, um mehr zu erfahren oder den Kauf abzuschließen.

Eine effektive Landingpage zeichnet sich durch folgende Merkmale aus:

* Klare Botschaft: Die Hauptbotschaft und das Ziel der Seite sind sofort erkennbar.
* Überzeugende Inhalte: Die Seite bietet überzeugende und relevante Informationen, um den Besucher zur Aktion zu bewegen.
* Auffälliger CTA: Der Call-to-Action-Button oder das Formular, das die gewünschte Aktion auslöst, ist prominent platziert und ansprechend gestaltet.
* Minimalistisches Design: Die Seite sollte frei von Ablenkungen sein und sich auf das Hauptziel konzentrieren.
* Responsive Design: Die Landingpage ist für verschiedene Geräte und Bildschirmgrößen optimiert, um sicherzustellen, dass sie auf allen Plattformen gut funktioniert.

{% hint style="info" %}
Landingpages sind ein wichtiger Bestandteil im Marketing-Mix eines Online-Shops, da sie dazu beitragen, gezielte Aktionen zu fördern, Leads zu generieren und die [Conversion-Raten](/academy/fachbegriffe/conversion) zu erhöhen. Sie werden oft in Verbindung mit gezieltem Online-Marketing eingesetzt, um relevante Zielgruppen anzusprechen und den Erfolg von Werbekampagnen zu maximieren.
{% endhint %}


# Offcanvas

Ein Offcanvas im Online-Shop bezieht sich auf eine Design- und Benutzeroberflächen-Technik, bei der zusätzlicher Inhalt außerhalb des sichtbaren Bildschirmbereichs platziert wird und bei Bedarf eingeblendet werden kann. Dabei wird der zusätzliche Inhalt in der Regel seitlich oder unten außerhalb des Hauptinhaltsbereichs positioniert.

<figure><img src="/files/sc25FY0S0h0idnQm1UQ3" alt=""><figcaption><p>Offcanvas-Warenkorb</p></figcaption></figure>

Der Zweck eines Offcanvas besteht darin, zusätzliche Informationen bereitzustellen, ohne dass der Hauptinhalt der Seite verdeckt wird. Wenn der Benutzer auf einen speziellen [Button](/academy/fachbegriffe/button) oder ein [Icon](/academy/fachbegriffe/icon) klickt, wird das Offcanvas animiert und der zusätzliche Inhalt wird sichtbar. Durch Klicken auf einen Schließen-Button oder außerhalb des Offcanvas-Bereichs kann das Element wieder ausgeblendet werden.

In Shopware wird ein Offcanvas beispielsweise für folgende Zwecke verwendet:

1. Warenkorbvorschau: Ein Offcanvas-Warenkorb zeigt dem Benutzer eine Vorschau auf den aktuellen Inhalt seines Warenkorbs, ohne dass er die Seite verlassen muss. Der Benutzer kann den Warenkorb öffnen, um den Inhalt anzuzeigen, Artikel hinzuzufügen oder zu entfernen und den [Checkout-Prozess](/academy/fachbegriffe/checkout) zu starten.
2. Mobile Navigation: Auf kleinen Bildschirmen wie Smartphones wird das Offcanvas-Menü als Alternative zur herkömmlichen horizontalen Navigationsleiste genutzt. Es ermöglicht eine platzsparende und zugleich leicht zugängliche Navigation für mobile Benutzer.
3. Zusätzliche Filteroptionen: In einer Kategorie Seite kann ein Offcanvas-Menü verwendet werden, um erweiterte Filteroptionen anzuzeigen. Der Benutzer kann das Offcanvas-Element öffnen, um spezifischere Filter wie Preisbereiche, Farben, Größen usw. auszuwählen, ohne den Hauptinhalt der Seite zu überladen.

{% hint style="info" %}
Die Verwendung von Offcanvas-Elementen im Online-Shop kann die Benutzerfreundlichkeit verbessern, indem zusätzlicher Inhalt bereitgestellt wird, der bei Bedarf sichtbar wird, ohne den Hauptinhalt zu überlasten oder die Benutzererfahrung negativ zu beeinflussen.
{% endhint %}


# Produkt Detailseite

Eine Produkt Detailseite (auch als Produktseite, Artikelseite oder Einzelproduktseite bezeichnet) ist eine spezifische Seite in einem Online-Shop, auf der detaillierte Informationen über ein bestimmtes Produkt angezeigt werden. Sie bietet den Besuchern alle relevanten Informationen, um eine fundierte Kaufentscheidung zu treffen.

<figure><img src="/files/6SHnidcpzJf7E5JIX684" alt=""><figcaption><p>Produkt Detailseite unseres Kunden <a href="https://spruchreif-geschenke.de/">https://spruchreif-geschenke.de/</a></p></figcaption></figure>

Die Produkt Detailseite enthält normalerweise folgende Elemente:

1. Produktbild(er): Auf der Produkt Detailseite werden hochwertige Bilder des Produkts angezeigt, um den Besuchern eine visuelle Vorstellung davon zu geben, wie das Produkt aussieht. Oft werden verschiedene Ansichten oder Zoom-Funktionen bereitgestellt, um die Details genauer zu betrachten.
2. Produktdetails: Es werden umfassende Informationen über das Produkt bereitgestellt, wie Produktname, Marke, Modell, Material, Abmessungen, Gewicht, Farbe und andere technische Spezifikationen. Zusätzliche Produktattribute wie Verfügbarkeit, Lieferzeit und Kundenbewertungen können ebenfalls angezeigt werden.
3. Produktbeschreibung: Eine Beschreibung des Produkts wird bereitgestellt, um den Besuchern weitere Informationen über die Eigenschaften, Funktionen, Verwendungsmöglichkeiten und Vorteile des Produkts zu geben. Eine gute Produktbeschreibung soll die Besucher überzeugen und ihnen helfen, zu verstehen, warum das Produkt für sie relevant ist.
4. Preisinformationen: Der Preis des Produkts wird auf der Produkt Detailseite angezeigt, möglicherweise zusammen mit Rabatten, Angeboten oder anderen preisbezogenen Informationen. Gegebenenfalls können auch Optionen für verschiedene Varianten des Produkts, wie Größe oder Farbe, angezeigt werden, die den Preis beeinflussen können.
5. Call-to-Action: Auf der Produkt Detailseite befindet sich normalerweise ein eindeutiger Aufruf zum Handeln (Call-to-Action), der den Benutzer dazu ermutigt, das Produkt zu kaufen. Dies kann beispielsweise ein "In den Warenkorb legen"-[Button](/academy/fachbegriffe/button), ein "Jetzt kaufen"-Button oder ein "Angebot anfordern"-Button sein, der den Besucher zur Conversion führt.
6. Verwandte Produkte oder Empfehlungen: Oft werden auf der Produkt Detailseite auch verwandte Produkte oder Empfehlungen angezeigt, die dem Benutzer weitere Optionen bieten oder alternative Produkte vorschlagen, die für ihn von Interesse sein könnten.

{% hint style="info" %}
Die Produkt Detailseite ist entscheidend, um die Besucher von einem Produkt zu überzeugen und sie zum Kauf zu bewegen. Eine gut gestaltete Produkt Detailseite bietet alle relevanten Informationen, um Vertrauen aufzubauen, Fragen zu beantworten und dem Besucher eine klare Vorstellung vom Produkt zu vermitteln. Durch eine ansprechende Gestaltung, hochwertige Bilder und überzeugende Beschreibungen kann die [Conversion-Rate](/academy/fachbegriffe/conversion) erhöht und das Einkaufserlebnis für die Kunden verbessert werden.
{% endhint %}


# Sidebar

Eine Sidebar in einem Online-Shop ist ein vertikales Bereichselement, das sich in der Regel an der linken Seite des Hauptinhalts oder der Produktliste befindet. Die Sidebar enthält im Shopware Kontext zusätzliche Links, Filteroptionen, Widgets oder Navigationsmenüs, um die Benutzererfahrung und die Interaktion im Shop zu verbessern.

<figure><img src="/files/gjWBr3D5cDv7DNiEuQwu" alt=""><figcaption><p>Sidebar unseres Kunden <a href="https://www.biobay.de/">https://www.biobay.de/</a></p></figcaption></figure>

Dies sind die häufigsten Elemente und Funktionen, die in einer Sidebar zu finden sind:

1. Kategorien und Filter: Die Sidebar kann Kategorien oder Produktfilter anzeigen, die es dem Benutzer ermöglichen, die Produktliste nach bestimmten Kriterien wie Kategorie, Preis, Marke, Größe, Farbe und mehr zu filtern. Dies erleichtert es den Benutzern, gezielt nach bestimmten Produkten zu suchen.
2. Angebote und Werbeaktionen: Die Sidebar kann verwendet werden, um Sonderangebote, Rabatte oder Werbeaktionen hervorzuheben. Dies kann dazu beitragen, die Aufmerksamkeit der Benutzer auf laufende Aktionen zu lenken.

{% hint style="info" %}
Die Sidebar dient dazu, die Website-Navigation und -Interaktion zu erleichtern, indem sie relevante Informationen und Funktionen auf jeder Seite anzeigt. Eine gut gestaltete Sidebar trägt zur Benutzerfreundlichkeit bei und kann die [Conversion-Raten](/academy/fachbegriffe/conversion) erhöhen, indem sie den Benutzern ermöglicht, schnell auf relevante Inhalte und Optionen zuzugreifen.
{% endhint %}


# Storefront

Im E-Commerce-Bereich bezieht sich die Storefront auf die visuelle Gestaltung und das Layout eines Online Shops. Es umfasst das Design der Homepage, [Kategorieseiten](/academy/fachbegriffe/kategorieseite), [Produkt Detailseiten](/academy/fachbegriffe/produkt-detailseite), [Warenkorb](/academy/fachbegriffe/warenkorb) und [Checkout](/enthaltene-erweiterungen/checkout). Eine ansprechende und benutzerfreundliche Storefront ist entscheidend, um das Vertrauen der Kunden zu gewinnen, die [Conversionsrate](/academy/fachbegriffe/conversion) zu steigern und den Erfolg des Online-Shops sicherzustellen.


# Top Bar

Eine Top-Bar in einem Online-Shop ist ein horizontales Balkenelement, das normalerweise über dem [Header](/academy/fachbegriffe/header) angezeigt wird, aber auch über dem [Footer](/academy/fachbegriffe/footer) platziert werden kann. Die Top-Bar bietet zusätzlichen Platz für Informationen, Funktionen oder Navigationsmöglichkeiten, die prominent und leicht zugänglich sein sollen.

<figure><img src="/files/Gt52wSKTr4XrZILD3cgD" alt=""><figcaption><p>Top Bar unseres Kunden <a href="https://safe-t.ch/">https://safe-t.ch/</a></p></figcaption></figure>

Die Inhalte und Funktionen, die in einer Top-Bar platziert werden können, variieren je nach den spezifischen Anforderungen des Shops. Hier sind einige gängige Verwendungen der Top-Bar:

1. Versandinformationen: Eine Top-Bar kann verwendet werden, um wichtige Informationen zum Versand zu kommunizieren. Dies können Hinweise über Mindestbestellwert, Lieferland oder ab welchem Bestellwert ein kostenloser Versand möglich ist, sein.
2. Bewertungen: Das Vertrauen deiner Kunden zu gewinnen ist heutzutage wichtiger denn je. Positive Rezensionen sind ein Aushängeschild und können deinem Shop den nötigen [Conversion](/academy/fachbegriffe/conversion) Schub geben. Lerne wie du deine [Google Bewertungen](/theme-konfiguration/allgemein/google-bewertungen) über das Theme in deinen Shop einbindest.&#x20;
3. Kontaktdaten: Eine Top-Bar kann auch genutzt werden, um Kontaktdaten des Online-Shops anzuzeigen, wie z. B. eine Telefonnummer oder eine E-Mail-Adresse. Dies ermöglicht es den Besuchern, schnell Kontakt aufzunehmen, falls sie Fragen oder Anliegen haben.
4. Schnelle Navigation: Eine Top-Bar kann als Navigationsleiste dienen, um den Benutzern den Zugriff auf wichtige Seiten des Online-Shops zu ermöglichen. Hier können Links zur Kontaktaufnahme, Standort eines Ladengeschäfts oder deinem Blog platziert werden.

{% hint style="info" %}
Die Top-Bar dient als effektiver Bereich, um wichtige Informationen und Funktionen hervorzuheben und die Benutzerfreundlichkeit des Online-Shops zu verbessern.
{% endhint %}


# Variable

Du wirst in der [Theme Konfiguration](/theme-konfiguration) hin und wieder auf Farb-Variablen stoßen. Damit du eine jeweilige Farbe nur einmal verwalten musst, hast du über die entsprechende Variable die Möglichkeit diese an unterschiedlichen Farb-Feldern in der Theme Konfiguration wieder zu verwenden. So musst du bei Änderung einer Farbe nicht alle Farb-Felder mit derselben Konfiguration erneut aufsuchen.

<figure><img src="/files/32b7FDGmnBOFU4qRrS46" alt="" width="375"><figcaption><p>Primärfarbe im Feld "Hintergrund"</p></figcaption></figure>


# Warenkorb

Der Warenkorb (auch als Einkaufswagen, Shopping Cart oder Cart bezeichnet) ist ein virtueller Behälter in einem Online-Shop, in dem Besucher Produkte sammeln können, die sie kaufen möchten. Er stellt eine temporäre Sammlung von ausgewählten Artikeln dar, die der Kunde während des Einkaufens zusammenstellen kann, bevor er den Kauf abschließt.

<figure><img src="/files/2L7x0PwAzKsTb51QgtxB" alt=""><figcaption><p>Warenkorb unseres Kunden <a href="https://wisy-water.com/de">https://wisy-water.com/</a></p></figcaption></figure>

Der Warenkorb ermöglicht es den Besuchern, ihre Einkäufe zu verwalten, die Anzahl der gewünschten Artikel anzupassen, Preise zu überprüfen und sich einen Überblick über den Gesamtbetrag ihres Einkaufs zu verschaffen. Die Funktion des Warenkorbs ist in der Regel in den meisten Online-Shops vorhanden und bietet den Benutzern eine komfortable Möglichkeit, ihre Einkäufe zu organisieren und den Bestellvorgang zu vereinfachen.

Typischerweise enthält der Warenkorb folgende Elemente:

1. Produktliste: Der Warenkorb zeigt eine Liste der ausgewählten Produkte an, normalerweise mit Produktbildern, Namen, Preisen, Mengen und gegebenenfalls Variationen wie Größe oder Farbe.
2. Mengenanpassung: Der Benutzer kann die Anzahl der einzelnen Produkte im Warenkorb erhöhen oder verringern, um die gewünschte Menge festzulegen.
3. Gesamtsumme: Der Warenkorb zeigt die Gesamtsumme aller ausgewählten Produkte an, einschließlich etwaiger Rabatte oder Versandkosten. Dies gibt dem Benutzer eine Übersicht über den finanziellen Aspekt seines Einkaufs.
4. Entfernen von Produkten: Der Benutzer kann Produkte aus dem Warenkorb entfernen, falls er seine Auswahl ändern oder Artikel löschen möchte.
5. Weiter zur Kasse: Der Warenkorb bietet eine Schaltfläche oder einen Link, um den Benutzer zum [Checkout-Prozess](/academy/fachbegriffe/checkout) weiterzuleiten, um den Kauf abzuschließen.

{% hint style="info" %}
Der Warenkorb ist ein wichtiges Instrument, um die Benutzererfahrung zu verbessern und den Kaufprozess in einem Online-Shop zu erleichtern. Er ermöglicht den Benutzern, ihre Einkäufe zu organisieren, Preise zu überprüfen und vor dem endgültigen Abschluss des Kaufs Änderungen vorzunehmen. Insgesamt bietet er den Benutzern die Möglichkeit, ihre Einkäufe zu überblicken und den Einkaufsprozess reibungslos abzuschließen.
{% endhint %}


# Widget

Widgets beziehen sich in deinem Shopware Shop bspw. auf "Sprachschalter", "Währungsschalter" und "Service Menü". Diese bieten verschiedene Funktionen oder Elemente in deinem Shop, die dazu dienen, die Benutzerfreundlichkeit und die Anpassungsmöglichkeiten für die Nutzer zu verbessern. Hier ist eine Erklärung für jeden Begriff:

<figure><img src="/files/61l3Gt0k8wiVhkX3qjfW" alt=""><figcaption><p>Sprach Schalter und Service Menü Widget unseres Kunden <a href="https://army-shop.ch/">https://army-shop.ch/</a></p></figcaption></figure>

1. Sprachschalter: Ein Sprachschalter ist eine Funktion in einem Online Shop, die es den Nutzern ermöglicht, die Anzeigesprache der Website zu ändern. Dies ist besonders wichtig für Shops, die international ausgerichtet sind und Kunden aus verschiedenen Ländern ansprechen möchten. Durch den Sprachschalter können Benutzer die Website in ihrer bevorzugten Sprache anzeigen lassen, was die Benutzererfahrung verbessert und die Kommunikation erleichtert.
2. Währungsschalter: Ein Währungsschalter ist eine Funktion, die es den Nutzern ermöglicht, die angezeigte Währung im Online Shop zu ändern. Dies ist hilfreich für internationale Kunden, die die Preise in ihrer eigenen Währung sehen möchten. Der Währungsschalter aktualisiert die Preise und zeigt sie in der ausgewählten Währung an, wodurch potenzielle Missverständnisse oder Unannehmlichkeiten vermieden werden.
3. Service Menü: Das Service Menü ist ein Navigations- oder Dropdown-Menü in einem Online Shop, das verschiedene Links und zusätzliche Funktionen enthält, die über den eigentlichen Produktverkauf hinausgehen. In diesem Menü können Nutzer auf verschiedene Kundendienstoptionen zugreifen, wie zum Beispiel Rückgabe- und Umtauschrichtlinien, Kontaktinformationen des Kundenservice, FAQs, Versandinformationen und mehr. Das Service Menü trägt dazu bei, dass Kunden leichter Informationen finden und Unterstützung erhalten können.

{% hint style="info" %}
Widgets sind Teil der Bemühungen von Online Shops, die Benutzerfreundlichkeit zu erhöhen, die Kundenzufriedenheit zu steigern und eine nahtlose Erfahrung für Kunden aus verschiedenen Ländern und mit unterschiedlichen Präferenzen zu bieten.
{% endhint %}


# Unterstützung

Die Einrichtung von Shopware Erweiterungen kann sehr komplex und zeitaufwändig werden. Wenn du Hilfe bei der Konfiguration benötigst, stehen wir dir gerne zur Verfügung. Wir wissen, dass es schwierig sein kann, alle Funktionen und Einstellungen zu verstehen und anzupassen.

Daher möchten wir sicherstellen, dass du die bestmögliche Unterstützung erhältst. Gerne unterstützen wir dich bei der Einrichtung deines Shopware Shops.

{% hint style="success" %}
E-Mail: <hello@atloss.de>
{% endhint %}


# Fehlermitteilung

Wir möchten sicherstellen, dass unsere Erweiterungen so gut wie möglich funktionieren und deinen Online-Shop reibungslos betrieben werden kann. Wir arbeiten hart daran, unsere Themes und Apps zu optimieren und zu verbessern, um sicherzustellen, dass es deinen Bedürfnissen entspricht.

Allerdings wissen wir auch, dass keine Erweiterung perfekt ist und es manchmal zu Fehlern oder Problemen kommen kann. Wenn du also auf einen Fehler stößt oder Probleme bei der Verwendung hast, zögere bitte nicht, uns zu kontaktieren.

{% hint style="success" %}
E-Mail: <hello@atloss.de>
{% endhint %}


# Featurewunsch

Kontinuierliche Verbesserung ist uns sehr wichtig. Solltest du einen Feature-Wunsch haben, so kannst du dich gerne bei uns melden. Wir freuen uns auf jede Anregung und diskutieren die gewünschten Features intern für zukünftige Updates. Vielleicht findet sich dein Vorschlag schon bald in unserer Roadmap!

{% hint style="success" %}
E-Mail: <hello@atloss.de>
{% endhint %}




---

[Next Page](/llms-full.txt/1)