# Horizon - Demo 2

## Einstellungen der Zusatzfelder

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

### Startseite

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

### Kategorien

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

![](https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2Fgit-blob-390495ca565b8c02c3ef40905d5803ed46afaf68%2Fdocs-de-custom-fields-category-image-horizon-demo-2-storefront.png?alt=media)

### Detailseite

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

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

![](https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2Fgit-blob-b1f3c235438dbf4feff07c596be45cc41f480912%2Fdocs-de-custom-fields-product-details-horizon-demo-2-config.png?alt=media)

Beispiel:

![Galerie Raster](https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2Fgit-blob-ab1a460e9f32cd6bc5dd4c0970637f0712d461d9%2Fdocs-de-custom-fields-produt-details-horizon-demo-2-storefront%20\(1\).png?alt=media)

## Abweichende Einstellungen

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

Die abweichenden Einstellungen haben wir hier aufgelistet:

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

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

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

## Erlebniswelt

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

### Sektion 1

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

![](https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2Fgit-blob-78cc91601f87eabba4ed016d39c91f6ef41b6d26%2Fdocs-de-storefront-horizon-demo-2-shopping-cms-1.png?alt=media)

*Sektion-Einstellungen:*

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

#### Bild Text Slider

*Elemente (Horizon) > Bild Text Slider*

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

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

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

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

![](https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2Fgit-blob-16e2c59852cea6eb9d05b4ea40753b10316b7217%2Fdocs-de-emotion-image-text-slider-horizon-demo-2-config.png?alt=media)
{% endtab %}

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

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

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

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

Beispiel:

![](https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2Fgit-blob-8bbc7809ec2ef49ec489259ce092e7dba880641a%2Fdocs-de-emotion-image-text-slider-horizon-demo-2-storefront.png?alt=media)

#### Drei Spalten 3/6/3

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

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

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

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

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

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

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

{% endtab %}

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

#### Teaser - Drei Spalten

*Elemente (Horizon) > Teaser - Drei Spalten*

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

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

{% tab title="Element Inhalt" %}

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

{% tab title="Element Text" %}

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

{% tab title="Element Bild" %}

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

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

### Sektion 2

![](https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2Fgit-blob-5a6479331f39833a322eca8c336733e30078bcc4%2Fdocs-de-storefront-horizon-demo-2-shopping-cms-2.png?alt=media)

*Sektion-Einstellungen:*

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

#### Teaser-Text

*Text > Teaser-Text*

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

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

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

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

{% endtab %}

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

#### Produkt-Slider

*Commerce > Produkt-Slider*

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

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

{% tab title="Element Inhalt" %}

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

{% tab title="Element Einstellungen" %}

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

#### Teaser-Text

Text > Teaser-Text

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

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

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

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

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

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

### Sektion 3

![](https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2Fgit-blob-f09271f1d77dcab7b05f1ccf4c2d819223fae96a%2Fdocs-de-storefront-horizon-demo-2-shopping-cms-3.png?alt=media)

*Sektion-Einstellungen:*

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

#### Teaser

*Elemente (Horizon) > Teaser*

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

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

{% tab title="Element Inhalt" %}

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

{% tab title="Element Text" %}

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

{% tab title="Element Bild" %}

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

#### Drei Spalten 3/6/3

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

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

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

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

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

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

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

{% endtab %}

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

#### Sechs Spalten

*Spalten (Horizon) > Sechs Spalten*

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

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

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

{% tab title="Element Bild" %}

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

Alle sechs Bild-Elemente haben identische Einstellungen

### Sektion 4

![](https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2Fgit-blob-51e567d157d95084bf419da7e9e5456d7e4dc750%2Fdocs-de-storefront-horizon-demo-2-shopping-cms-4.png?alt=media)

*Sektion-Einstellungen:*

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

#### Teaser-Text

*Text > Teaser-Text*

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

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

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

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

{% endtab %}

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

#### Produkt-Slider

*Commerce > Produkt-Slider*

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

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

{% tab title="Element Inhalt" %}

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

{% tab title="Element Einstellungen" %}

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

#### Teaser-Text

*Text > Teaser-Text*

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

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

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

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

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

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

### Sektion 5

![](https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2Fgit-blob-bb7e182129497fa2c190487e0dad0c8797bcba99%2Fdocs-de-storefront-horizon-demo-2-shopping-cms-5.png?alt=media)

*Sektion-Einstellungen:*

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

#### Zwei Spalten 8/4

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

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

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

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

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

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

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

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

*Einstellungen:*

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

#### Features

*Elemente (Horizon) > Features*

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

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

{% tab title="Element Einstellungen" %}

* Feature 1 - Icon: `package-closed`
* Feature 1 - Text: `Free Shipping <small>From 1€ minimum order value</small>`
* Feature 2 - Icon: `history`
* Feature 2 - Text: `Free returnals <small>Don’t love it? Send it back, on us.</small>`
* Feature 3 - Icon: `shield`
* Feature 3 - Text: `Safe shopping <small>Trusted Shopping with SSL/TLS.</small>`
  {% endtab %}
  {% endtabs %}
Styling	Wert
Allgemein > Grundlayout > Header (mobil)	Einzeiliger Header
Allgemein > Produktbilder > Breite Artikelbild	1890*
Allgemein > Produktbilder > Höhe Artikelbild	2400*
Header > Flyout Navigation > Grundeinstellungen > Icon bei externen Links	true
Kategorie > Produkt-Boxen > Grundeinstellungen > Varianten günstigster Preis	false
Produkt > Details > Produkt Details > alle Switch Felder	true
Allgemein > Scroll Animation > Grundeinstellungen > Produkt Listing animieren	true