# 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.md), kann sich die Höhe deines [Headers](/academy/fachbegriffe/header.md) 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.md) 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>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.atloss.de/theme-konfiguration/produkt-detailseite/galerie.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.