> For the complete documentation index, see [llms.txt](https://themedocs.zenit.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://themedocs.zenit.design/styling/allgemein/produktbilder.md).

# Produktbilder

### Vorgegebene Seitenverhältnisse

Das Theme unterstützt die Ermittlung des Seitenverhältnisses Deiner Produktbilder. Die Ermittlung des Seitenverhältnisses erfolgt anhand einer Auswahl an Seitenverhältnissen über das Feld **Seitenverhältnisse Artikelbilder.** Im nachfolgenden Bereich "Berechnetes Seitenverhältnis" kannst Du das Seitenverhältnis auch vom Theme ermitteln lassen, sollten die vorgegebenen Seitenverhältnisse nicht zutreffen oder Du das Seitenverhältnis Deiner Produktbilder nicht kennen.

### Berechnetes Seitenverhältnis

Das Theme unterstützt die Ermittlung des Seitenverhältnisses Deiner Produktbilder. Die Ermittlung des Seitenverhältnisses erfolgt anhand einer Auswahl an Seitenverhältnissen über das Feld **Seitenverhältnisse Artikelbilder** oder durch die Angabe exakter Breiten und Höhen mit den Feldern **Breite Artikelbild (1)** und **Höhe Artikelbild (2)**.

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

<figure><img src="https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2F1QMEXEF62bBmkf0Tiz1N%2Fdocs-storefront-theme-general-aspect-ratio.webp?alt=media&amp;token=a7b216f5-9e24-4721-8659-92e35aef8204" alt=""><figcaption></figcaption></figure>

Durch die Angabe des korrekten Seitenverhältnisses lassen sich die Bilder optimal darstellen. Es empfiehlt sich daher einheitliche Produktbilder zu verwenden. Passt das Seitenverhältnis nicht zu den Produktbildern, können diese je nach Anzeigemodus unschön dargestellt werden:&#x20;

Im eingestellten Modus **"Zugeschnitten"** werden die Bilder oben und unten oder links und rechts angeschnitten.&#x20;

<figure><img src="https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2FNUwoDYXMB2otFRDtMJxh%2Fdocs-storefront-theme-general-aspect-ratio-cover.webp?alt=media&amp;token=26402968-66ec-4dd1-b733-05265fe9ea72" alt=""><figcaption></figcaption></figure>

Im Modus **"Original"** werden die Bilder eingepasst und es entstehen Lücken oben und unten oder links und rechts, je nach Seitenverhältnis des eigentlichen Bildes.

<figure><img src="https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2FRqgwEsSu0dj6f7c1Eryn%2Fdocs-storefront-theme-general-aspect-ratio-contain.webp?alt=media&amp;token=c723c715-ac32-41fc-b678-1c9850f84b72" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Der Anzeigemodus der Produktbilder wird in Shopware im jeweiligen CMS Element für das Listing oder Produkt-Slider eingestellt.
{% endhint %}

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

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

### Produktbild Hintergrund

Mit **Hintergrund** kannst du eine Hintergrundfarbe für Produktbilder festlegen.

Für nicht transparente Produktbilder, z. B. JPG-Dateien mit weißem Hintergrund, kannst du zusätzlich **Hintergrundfarbe überlagernd** aktivieren. Dabei wird die gewählte Hintergrundfarbe leicht über das Bild gelegt. Die Stärke der Überlagerung bestimmst du über **Stärke der Hintergrundüberlagerung** in Prozent.

So lassen sich Produktbilder optisch an einen farbigen Hintergrund anpassen, ohne die Bilddateien selbst bearbeiten zu müssen.

Mehr dazu findest du in der Dokumentation zu [Produktbild-Hintergründen](https://themedocs.zenit.design/content/produktbilder/produktbilder-hintergrund).

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