# 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="https://3272904207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpapLvT9HTe34BQRCbfyY%2Fuploads%2FdhShXWhx7qS0T81YwVkT%2Fprodukt-detailseite-galerie.webp?alt=media&#x26;token=8d179b2a-ed1d-44f2-9fb5-fcd473993157" 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="https://3272904207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpapLvT9HTe34BQRCbfyY%2Fuploads%2Fk3xJ9a3G8WY9LzBawhbG%2Fprodukt-detailseite-galerie-grundeinstellungen.webp?alt=media&#x26;token=a4040be9-4c8c-4e5e-bcc5-f77b5b038d5b" 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](https://docs.atloss.de/theme-konfiguration/header), kann sich die Höhe deines [Headers](https://docs.atloss.de/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](https://docs.atloss.de/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="https://3272904207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpapLvT9HTe34BQRCbfyY%2Fuploads%2F2Fdbnr68TSqgrujANonK%2Fprodukt-detailseite-galerie-linke-vorschau-navigation.webp?alt=media&#x26;token=8bdd1f96-ffd2-4edb-bba7-6356f5d427f1" 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="https://3272904207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpapLvT9HTe34BQRCbfyY%2Fuploads%2FZ4JVWbaDnytZhhwGPJVP%2Fprodukt-detailseite-galerie-darunterliegende-thumbnail-navigation.webp?alt=media&#x26;token=5058a321-aa6a-47ed-8a92-4ec2b5bf2af0" 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>