# Product Box

Übersicht

Produkt Boxen kommen in Shopware an unterschiedlichen Stellen zum Einsatz. Beispiele sind hierfür das [Listing](/en/theme-configuration/shopping-experiences/listing.md) auf [Kategorieseiten](/en/academy/technical-terms/category-page.md) oder ein Produkt Slider im [Cross Selling](/en/academy/technical-terms/cross-selling.md) auf der [Produkt Detailseite](/en/academy/technical-terms/product-detail-page.md). 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](/en/theme-configuration/general/layout.md#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](/en/academy/technical-terms/hover-effekt.md) 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](/en/theme-configuration/shopping-experiences/listing.md) 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.

**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](/en/academy/technical-terms/button.md) 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](/en/academy/technical-terms/button.md) wird wie im Shopware Standard am Ende der Produkt Box statisch eingebunden.

</details>

### Produktbild

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

<details>

<summary>Globaler Produktbild Hover</summary>

**Ja**\
Das zweite Bild der [Produktgalerie](/en/theme-configuration/product-detail-page/galery.md) wird als [Hover Effekt](/en/academy/technical-terms/hover-effekt.md) verwendet. Erfahre mehr über das [Produktbild Hover Feature](/en/included-extensions/product-picture-hover.md) des Themes.

**Nein**\
Es wird kein Produktbild [Hover Effekt](/en/academy/technical-terms/hover-effekt.md) 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](/en/academy/technical-terms/display-mode.md) 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](/en/theme-configuration/general/typography.md) 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](/en/theme-configuration/general/status-information.md#fehler) über eine [Variable](/en/academy/technical-terms/variable.md) 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](/en/theme-configuration/general/status-information.md#hinweis) über eine [Variable](/en/academy/technical-terms/variable.md) 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](/en/theme-configuration/general/status-information.md#erfolg) über eine [Variable](/en/academy/technical-terms/variable.md) 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](/en/theme-configuration/general/theme-colors.md#rahmen) über eine [Variable](/en/academy/technical-terms/variable.md) eingebunden.

</details>

<details>

<summary>Titel</summary>

Hinterlege die Schriftfarbe des Titels. Standardmäßig wird hier die globle [Textfarbe](/en/theme-configuration/general/typography.md#textfarbe) über eine [Variable](/en/academy/technical-terms/variable.md) integriert.

</details>

<details>

<summary>Streichpreis</summary>

Hinterlege die Schriftfarbe des Streichpreises. Standardmäßig wird hier die Farbe für [fehlerhafte Status-Ausgaben](/en/theme-configuration/general/status-information.md#fehler) über eine [Variable](/en/academy/technical-terms/variable.md) integriert.

</details>

<details>

<summary>Grundpreis</summary>

Hinterlege die Schriftfarbe des Grundpreises. Standardmäßig wird hier die Farbe für [Preise](/en/theme-configuration/general/e-commerce.md#preis) über eine [Variable](/en/academy/technical-terms/variable.md) integriert.

</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/en/theme-configuration/shopping-experiences/product-box.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.