# Buybox

### Farben

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

Du kannst die Gallerie und Buybox deiner Produkt-Detailseite gobal mit einer **Hintergrund**-Farbe versehen. Damit das funktioniert, müssen Gallerie und Buybox in einer andern Sektion liegen als die Produktbeschreibung

### Grundeinstellungen

{% hint style="info" %}
Diese Einstellungen wirken sich auch auf die Darstellung der Quickview Funktion aus.
{% endhint %}

<figure><img src="/files/3jVGFkUbQaMlotugeIFA" alt=""><figcaption></figcaption></figure>

**Kurzbeschreibung (1):** Das Theme unterstützt die Anzeige einer zusätzlichen Kurzbeschreibung, welche aus einem Zusatzfeld oder der Metabeschreibung des Produktes gezogen wird.

**Varianten Merkmale (2):** Die wesentlichen Merkmale einer Variante können unterhalb des Produkttitels angezeigt oder ausgeblendet werden.

**Bewertung Position (3):** Bewertungen können im Titelbereich oder unterhalb des Preises dargestellt werden.

**Bewertung Platzhalter (4):** Zeigt inaktive Sterne als Platzhalter an, sollte das Produkt noch keine Bewertungen haben.

**Merkzettel Position (5):** Positioniere den zum Merkzettel Hinzufügen-Link über der Galerie oder unter dem Warenkorb-Button.

**Hersteller Position (6):** Der Herstellername bzw. das Hersteller-Logo kann an verschiedenen Stellen dargestellt werden. Du kannst die Darstellung auch unterbinden.

**Bestellmengenfeld (7):** Die Mengenauswahl/-eingabe kann nach Bedarf ausgeblendet werden. Der Nutzer kann vorerst nur eine Abgabemenge in den Warenkorb legen. Im Checkout und Warenkorb kann die Menge weiterhin angepasst werden.

{% hint style="info" %}
**Im Listing** wird die Mengenauswahl/-eingabe unter *Kategorie > Produkt-Boxen > Produktaktionen* ein- oder ausgeschaltet werden.

**Im Quickview** wird die Einstellung der Detailseite übernommen.
{% endhint %}

**Lieferstatus Indikator Aussehen (8):** Verändert das Aussehen des Lieferstatus.

Beispiel:

<figure><img src="/files/dZu3sbvn1iFu4j0YRoba" alt=""><figcaption><p>Lieferstatus als Badge</p></figcaption></figure>

**Sticky (9):** Wenn aktiv, wird die Buybox beim Scrollen fixiert, solange die Inhalte nicht höher sind als der Viewport.

{% hint style="info" %}
Wenn die Option Sticky auch für die benachbarte Galerie aktiviert ist, wird immer das Element mit der geringeren Höhe sticky.
{% endhint %}

**Sticky erzwingen (10):** Die Sticky-Funktion funktioniert nur, wenn alle Eltern-Elemente nicht die CSS Eigenschaft "overflow:hidden" verwenden. Es gibt Erweiterungen, welche diese Eigenschaft setzen. Wenn aktiv, wird die Sticky-Funktion erzwungen und alle Eltern-Elemente mit "overflow: hidden", werden auf "overflow: visible" umgeschrieben.

### Produkttitel

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

Die **Text (1)**-Farbe des Produktitels kann global konfiguriert werden. Außerdem kannst Du die **Schriftgröße (2)**, **Schriftfamilie (3)** und **Schriftstärke (4)** einstellen. Optional kannst Du mit **Text Transform (5)** festlegen, dass deine Produkttitel nur aus Groß. oder Kleinbuchstaben bestehen.

### Produktpreis

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

Die **Text (1)**-Farbe des Preises kann global konfiguriert werden. Zusätzlich kannst Du die **Schriftgröße (2)**, **Schriftfamilie (3)** und **Schriftstärke (4)** bestimmen.

Die Option **Ersparnis (%) gerundet (5)** sorgt dafür, dass der prozentuale Rabatt bei Streichpreisen als gerundete Zahl angezeigt wird. Beispiel: Aus *-12,8 %* wird *-13 %*.

### Produkt Konfigurator Elemente

Die Einstellungen **1-6** steuern das Aussehen der Auswahl-Optionen.

Werden Medienauswahlen bereitgestellt, kann die Größe dieser Bilder über **Breite Medien (7)** und **Höhe Medien (8)** eingestellt werden.

Die Farben des Produkt Konfigurators (Variantenauswahl) können über die Einstellungen angepasst werden. Weiterhin lassen sich **nicht kombinierbare Eigenschaften** **durchstreichen (9)**, **gestrichelt (10)** darstellen und in ihrer **Deckkraft (11)** reduziert anzeigen. **Tooltips (12)** zeigen bei z.B. Farbauswahlen den hinterlegten Namen der Farbe an.

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

{% hint style="info" %}
**Tipp:** Die Reduzierung der Deckkraft verfälscht die Farben einer Farbauswahl, sodass es sinnvoll sein kann die Optionen zum Durchstreichen und/oder gestrichelter Darstellung zu verwenden.
{% endhint %}

Beispiel:

<figure><img src="/files/GG7XzNmyN0YR8mRnV9Sa" alt=""><figcaption><p>Reuzierung der Deckkraft verändert Blauton</p></figcaption></figure>

### Produkt Details

Über das Feld **Aussehen** kannst die grundlegende Optik der aufgelisteten Details bestimmen.

![](/files/gczDzUolrMF57eZt4xcu)

Beispiel:

![](/files/ByQbuo7buKGMM1aOCCrl)

### Produkt Features

Über die Produkt-Features lassen sich beliebig viele Vorteile eines Produktes auf der Detailseite darstellen. Neben dem globalen **Aktivieren (1)** stehen zwei verschieden **Anzeigemodi (2)** sowie die Auswahl eines **Icons (4)** bereit. Über die Position (3) kannst Du bestimmen, wo diese Features dargestellt werden. Die **Überschrift (5)** ist optional und kann ausgebendet werden.

![](/files/cdQTnGcWf3DaIzRQrfh9)

Die Inhalte werden direkt im Produkt im Bereich der Zusatzfelder im Tab **Zusatzinhalte (1)** hinterlegt. Im Feld **Produkt Features (2)** können beliebig viele Vorteile eingefügt und durch ein Semikolon getrennt werden.

![](/files/EfHavmUFzzwflOHMLrtL)

Beispiel:

![](/files/x0IOFIJSuGW2AqSPPn4g)


---

# 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://themedocs.zenit.design/styling/produkt/buybox.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.
