# Buy Box

### Übersicht

Die Buy Box ist neben der [Galerie](https://docs.atloss.de/en/theme-configuration/product-detail-page/galery) der zweite Hauptbestandteil der [Produkt Detailseite](https://docs.atloss.de/en/academy/technical-terms/product-detail-page) und enthält alle Informationen zum Produkt. Hierunter fallen bspw. Preis- und Lieferzeitangaben, aber auch die Mengenauswahl und der Warenkorb [Button](https://docs.atloss.de/en/academy/technical-terms/button). Durch die nachstehenden Konfigurationsmöglichkeiten kannst du die Buy Box ganz auf deine Wünsche zuschneiden. Die Felder sind hierbei von oben nach unten sortiert und entsprechend der Reihenfolge innerhalb der Buy Box.

<figure><img src="https://content.gitbook.com/content/33GKvYy9I8ydtLM82CBS/blobs/zOMwGF5bvuTIaOOftkQN/produkt-detailseite-buy-box.webp" alt=""><figcaption><p>Buy Box unseres Kunden <a href="https://donari.de/">https://donari.de/</a></p></figcaption></figure>

### Produkttitel

<figure><img src="https://content.gitbook.com/content/33GKvYy9I8ydtLM82CBS/blobs/vph7cRwX6P107JvIC5YJ/produkt-detailseite-buy-box-produkttitel.webp" alt=""><figcaption></figcaption></figure>

<details>

<summary>Schriftgröße (in px)</summary>

Passe die Schriftgröße des Produkttitels an.

</details>

<details>

<summary>Schriftstärke</summary>

Definiert die Schriftstärke des Produkttitels. Je nach [Schriftart](https://docs.atloss.de/en/theme-configuration/general/typography) stehen dir hierbei 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

</details>

<details>

<summary>Zeichenabstand (in px)</summary>

Passe den Zeichenabstand des Produkttitels an.

</details>

<details>

<summary>Großbuchstaben</summary>

**Ja**\
Schreibt den Produkttitel automatisch in Großbuchstaben. Somit muss der Name im [Produkt Modul](https://docs.shopware.com/de/shopware-6-de/kataloge/produkte) nicht in Großbuchstaben verfasst werden.

**Nein**\
Zeigt den Produkttitel so an wie er im [Produkt Modul](https://docs.shopware.com/de/shopware-6-de/kataloge/produkte) angelegt wurde.

</details>

<details>

<summary>Unterer Abstand (in px)</summary>

Hinterlege den unteren Abstand des Produktitels zum [Preis](#preis).

</details>

<details>

<summary>Schriftfarbe</summary>

Lege die Schriftfarbe des Produkttitels fest. Standardmäßig wird hier die [Überschriftfarbe](https://docs.atloss.de/en/general/typography#ueberschriftfarbe) als [Variable](https://docs.atloss.de/en/academy/technical-terms/variable) eingebunden.

</details>

### Preis

<figure><img src="https://content.gitbook.com/content/33GKvYy9I8ydtLM82CBS/blobs/axiRYLW1Rrmy2iR7qDFw/produkt-detailseite-buy-box-preis.webp" alt=""><figcaption></figcaption></figure>

<details>

<summary>Preis Schriftgröße (in px)</summary>

Definiere die Schriftgröße des Preises.

</details>

<details>

<summary>Preis Schriftstärke</summary>

Definiert die Schriftstärke des Preises. Je nach [Schriftart](https://docs.atloss.de/en/theme-configuration/general/typography) stehen dir hierbei 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

</details>

<details>

<summary>Streichpreis Schriftgröße (in px)</summary>

Lege die Schriftgröße des Streichpreises fest.

</details>

<details>

<summary>Streichpreis Schriftstärke</summary>

Definiert die Schriftstärke des Streichpreises. Je nach [Schriftart](https://docs.atloss.de/en/theme-configuration/general/typography) stehen dir hierbei 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

</details>

<details>

<summary>Rechter Abstand des Preises (in px)</summary>

Hiermit kannst du mehr oder weniger Abstand zwischen Preis und Streichpreis schaffen.

</details>

<details>

<summary>Formulierung der erweiterten Preise</summary>

**Standard**\
Im Shopware Standard erfolgt eine "Bis-Ab-Formulierung" wie folgt:

<img src="https://content.gitbook.com/content/33GKvYy9I8ydtLM82CBS/blobs/N1QQa1TOsqAB57YtlW8I/produkt-detailseite-buy-box-preis-standard.webp" alt="" data-size="original">

**Ab-Formulierung**\
Die "Ab-Formulierung" kann helfen, dass Staffelpreise einfacher zu lesen sind:

<img src="https://content.gitbook.com/content/33GKvYy9I8ydtLM82CBS/blobs/uJD6OHnQEYv6OrVwIOQR/produkt-detailseite-buy-box-preis-ab-formulierung.webp" alt="" data-size="original">

</details>

<details>

<summary>Rabatt der erweiterten Preise anzeigen</summary>

**Ja**\
Die Staffelpreis Tabelle wird um die Spalte "Rabatt" erweitert, sodass die prozentuale Einsparung pro Stück mit höherer Anzahl für den Besucher besser ersichtlich wird:

<img src="https://content.gitbook.com/content/33GKvYy9I8ydtLM82CBS/blobs/kwTkWn1hkDsvbbzkuWrq/produkt-detailseite-buy-box-preis-rabatt.webp" alt="" data-size="original">

Der Spaltentitel "Rabatt" lässt sich hierbei über den [Textbaustein](https://docs.shopware.com/de/shopware-6-de/einstellungen/Textbausteine) `theme.detail.dataColumnDiscount` anpassen.

**Nein**\
Die Staffelpreis Tabelle wird nicht um die Spalte "Rabatt" erweitert.

</details>

### Grundpreisangabe

<figure><img src="https://content.gitbook.com/content/33GKvYy9I8ydtLM82CBS/blobs/7FQQPiJVkrK65TF2c6po/produkt-detailseite-buy-box-grundpreisangabe.webp" alt=""><figcaption></figcaption></figure>

<details>

<summary>Schriftgröße (in px)</summary>

Passe die Schriftgröße der Grundpreisangabe an. Diese kann im [Produkt Modul](https://docs.shopware.com/de/shopware-6-de/kataloge/produkte#spezifikationen) im Tab "Spezifikationen" unter dem Abschnitt "Maße & Verpackung" pro Produkt und Variante definiert werden.

</details>

### Steuer

<figure><img src="https://content.gitbook.com/content/33GKvYy9I8ydtLM82CBS/blobs/Iklfb0M4ScBGHWxGprr2/produkt-detailseite-buy-box-steuer.webp" alt=""><figcaption></figcaption></figure>

<details>

<summary>Schriftgröße (in px)</summary>

Passe die Schriftgröße des rechtlich notwendigen Steuerhinweises "Preise inkl. MwSt. zzgl. Versandkosten" an.

</details>

### Hersteller

<figure><img src="https://content.gitbook.com/content/33GKvYy9I8ydtLM82CBS/blobs/P00uA62nU2o98gnrWtQ8/produkt-detailseite-buy-box-hersteller.webp" alt=""><figcaption></figcaption></figure>

<details>

<summary>Position</summary>

**Standard**\
Blendet den Hersteller unterhalb des [Steuerhinweises](#steuer) ein.

**Überhalb des Produkttitels**\
Integriert den Hersteller über dem [Produkttitel](#produkttitel).

**Ausblenden**\
Blendet den Hersteller aus. Dies kann Sinn machen, wenn man selbst der Hersteller all seiner Produkt ist.

</details>

<details>

<summary>Logo anzeigen</summary>

**Ja**\
Das Hersteller-Logo wird immer angezeigt, sofern es gepflegt ist.

**Nein**\
Das Hersteller-Logo wird nie angezeigt, auch wenn es hinterlegt ist.

</details>

<details>

<summary>Schriftgröße (in px)</summary>

Definiert die Schriftgröße des Herstellernamens. Voraussetzung ist hierfür das [Layout](#layout) "Text".

</details>

<details>

<summary>Schriftstärke</summary>

Definiert die Schriftstärke des Herstellers. Je nach [Schriftart](https://docs.atloss.de/en/theme-configuration/general/typography) stehen dir hierbei 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

</details>

<details>

<summary>Unterstrichen</summary>

**Ja**\
Der Hersteller-Link wird unterstrichen dargestellt.

**Nein**\
Der Hersteller-Link wird nicht unterstrichen dargestellt.

</details>

<details>

<summary>Unterer Innenabstand (in px)</summary>

Definiert den Abstand zwischen Hersteller und dem Rahmen unterhalb des Herstellers.

</details>

<details>

<summary>Unterer Außenabstand (in px)</summary>

Definiert den Abstand zwischen dem Rahmen unterhalb des Herstellers und dem nächsten Element.

</details>

<details>

<summary>Rahmenfarbe unten</summary>

Legt die Farbe des Rahmens unterhalb des Herstellers fest. Standardmäßig wird hier die globale [Rahmenfarbe](https://docs.atloss.de/en/general/theme-colors#rahmen) als [Variable](https://docs.atloss.de/en/academy/technical-terms/variable) eingebunden. Wenn du die visuelle Trennlinie nicht anzeigen möchtest kannst du hier "transparent" in das Feld eintragen und den unteren Innenabstand entsprechend anpassen.

</details>

### Bewertungen

<figure><img src="https://content.gitbook.com/content/33GKvYy9I8ydtLM82CBS/blobs/EvdSwzAR6ttxwDtHHqBH/produkt-detailseite-buy-box-bewertungen.webp" alt=""><figcaption></figcaption></figure>

<details>

<summary>Position</summary>

**Unterhalb des Produkttitels**\
Zeigt die Sterne der Produktbewertungen direkt unter dem [Produkttitel](#produkttitel) an.

**Standard**\
Blendet die Sterne der Produktbewertungen standardmäßig unterhalb des [Herstellers](#hersteller) ein.

</details>

<details>

<summary>Schriftgröße (in px)</summary>

Legt die Schriftgröße für die Anzahl der Bewertungen hinter den Sternen fest.

</details>

<details>

<summary>Schriftfarbe</summary>

Definiert die Schriftfarbe für die Anzahl der Bewertungen hinter den Sternen. Standardmäßig wird hier die globale [Textfarbe](https://docs.atloss.de/en/general/typography#textfarbe) als [Variable](https://docs.atloss.de/en/academy/technical-terms/variable) eingebunden.

</details>

<details>

<summary>Unterer Abstand (in px)</summary>

Legt den unteren Abstand der Bewertungen fest.

</details>

### Features

{% hint style="info" %}
Bei den [Features](https://docs.atloss.de/en/included-extensions/features) handelt es sich um eine enthaltene Erweiterung des Themes. Diese können pro Produkt und Variante individuell angepasst und in diesem Abschnitt zusätzlich konfiguriert werden.
{% endhint %}

<figure><img src="https://content.gitbook.com/content/33GKvYy9I8ydtLM82CBS/blobs/UZtbYgfPJKfKWzmGWiZ7/produkt-detailseite-buy-box-features.webp" alt=""><figcaption></figcaption></figure>

<details>

<summary>Icon</summary>

Hinterlege ein individuelles [Icon](https://docs.atloss.de/en/academy/technical-terms/icon), das als Listenpunkt deiner Features dient. Als Bibliothek können wir dir [Flaticon](https://www.flaticon.com/) empfehlen.

</details>

<details>

<summary>Icon Größe (in px)</summary>

Definiere die Icon Größe.

</details>

<details>

<summary>Schriftgröße (in px)</summary>

Legt die Schriftgröße der einzelnen Features fest.

</details>

### Lieferzeit

<figure><img src="https://content.gitbook.com/content/33GKvYy9I8ydtLM82CBS/blobs/sUi27M9uWAOaxMFvuNly/produkt-detailseite-buy-box-lieferzeit.webp" alt=""><figcaption></figcaption></figure>

<details>

<summary>Rechter Icon Abstand (in px)</summary>

Definiere den rechten Abstand des Lieferzeit [Icons](https://docs.atloss.de/en/academy/technical-terms/icon).

</details>

<details>

<summary>Schriftgröße (in px)</summary>

Lege die Schriftgröße der Lieferzeit fest.

</details>

### Varianten

{% hint style="info" %}
Über jeder Variantenausprägung wird ein Titel wie bspw. "Farbe", "Größe", etc. angezeigt. Dieser wird nachfolgend als Gruppentitel bezeichnet.
{% endhint %}

<figure><img src="https://content.gitbook.com/content/33GKvYy9I8ydtLM82CBS/blobs/EJofzxXJ8gExnN2a8rs1/produkt-detailseite-buy-box-varianten.webp" alt=""><figcaption></figcaption></figure>

<details>

<summary>Gruppentitel Schriftgröße (in px)</summary>

Legt die Schriftgröße des Gruppentitels fest.

</details>

<details>

<summary>Gruppentitel Schriftstärke</summary>

Definiert die Schriftstärke des Gruppentitels. Je nach [Schriftart](https://docs.atloss.de/en/theme-configuration/general/typography) stehen dir hierbei 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

</details>

<details>

<summary>Gruppentitel Schriftfarbe</summary>

Passe die Schriftfarbe deiner Varianten Gruppentitel an. Standardmäßig wird hier die [Textfarbe](https://docs.atloss.de/en/general/typography#textfarbe) als [Variable](https://docs.atloss.de/en/academy/technical-terms/variable) verknüpft.

</details>

<details>

<summary>Gruppentitel in Großbuchstaben</summary>

**Ja**\
Schreibt den Gruppentitel automatisch in Großbuchstaben. Somit muss der Name im [Eigenschaften Modul](https://docs.shopware.com/de/shopware-6-de/produkte/eigenschaften) nicht in Großbuchstaben verfasst werden.

**Nein**\
Zeigt den Gruppentitel so an wie er im [Eigenschaften Modul](https://docs.shopware.com/de/shopware-6-de/produkte/eigenschaften) angelegt wurde.

</details>

<details>

<summary>Style</summary>

Gibt dir die Möglichkeit die Auswahlfelder der Varianten in unterschiedlichen Theme Styles darzustellen:

***

Umrandet:

<img src="https://content.gitbook.com/content/33GKvYy9I8ydtLM82CBS/blobs/h2E7uqOBtGBmOApWylgG/produkt-detailseite-buy-box-varianten-style-katana.webp" alt="" data-size="original">

Ausgefüllt:

<img src="https://content.gitbook.com/content/33GKvYy9I8ydtLM82CBS/blobs/Gs3y4Q2cwQHsX8ZrVPzK/produkt-detailseite-buy-box-varianten-style-bonsai.webp" alt="" data-size="original">

</details>

<details>

<summary>Unterer Abstand (in px)</summary>

Definiert den unteren Abstand der Varianten zur Mengenauswahl.

</details>

<details>

<summary>Nicht verfügbare Varianten</summary>

Gibt dir die Möglichkeit nicht verfügbare Varianten unterschiedlich darzustellen.

***

Grau hinterlegen:

<img src="https://content.gitbook.com/content/33GKvYy9I8ydtLM82CBS/blobs/1pVf7quKe6t0Fsv6zaZ4/produkt-detailseite-buy-box-varianten-grau-hinterlegen.webp" alt="" data-size="original">

Gestrichelt umranden:

<img src="https://content.gitbook.com/content/33GKvYy9I8ydtLM82CBS/blobs/GlhfznBpBpqbsmEYCnuD/produkt-detailseite-buy-box-varianten-gestrichelt-umranden.webp" alt="" data-size="original">

Durchstreichen:

<img src="https://content.gitbook.com/content/33GKvYy9I8ydtLM82CBS/blobs/wOauFDmWI1DLiGDF13d1/produkt-detailseite-buy-box-varianten-durchstreichen.webp" alt="" data-size="original">

</details>

### Mengenauswahl

<figure><img src="https://content.gitbook.com/content/33GKvYy9I8ydtLM82CBS/blobs/zJN3tj4WgRGu96onTy67/produkt-detailseite-buy-box-mengenauswahl.webp" alt=""><figcaption></figcaption></figure>

<details>

<summary>Position</summary>

**Oberhalb des Warenkorb Buttons**\
Stellt die Mengenauswahl über dem Warenkorb Button dar.

**Ausblenden**\
Deaktiviert die Mengenauswahl auf der Produkt Detailseite.

</details>

<details>

<summary>Eingabefeld Breite (in px)</summary>

Definiert die Breite des Eingabefeldes. Besonders bei Warenkörben mit hohen Mengen kann es Sinn ergeben das Feld breiter zu gestalten.

</details>

<details>

<summary>Unterer Abstand (in px)</summary>

Legt den unteren Abstand der Mengenauswahl zum Warenkorb Button fest.

</details>

### Warenkorb Button

<figure><img src="https://content.gitbook.com/content/33GKvYy9I8ydtLM82CBS/blobs/kVLp2eaSvP1l7ZpjWeCI/produkt-detailseite-buy-box-warenkorb-button.webp" alt=""><figcaption></figcaption></figure>

<details>

<summary>Schriftgröße (in px)</summary>

Lege die Schriftgröße des Textes innerhalb des Warenkorb Buttons fest.

</details>

<details>

<summary>Schriftstärke</summary>

Definiert die Schriftstärke des Textes innerhalb des Warenkorb Buttons. Je nach [Schriftart](https://docs.atloss.de/en/theme-configuration/general/typography) stehen dir hierbei 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

</details>

<details>

<summary>Großbuchstaben</summary>

**Ja**\
Schreibt den Text innerhalb des Warenkorb Buttons automatisch in Großbuchstaben. Somit muss der Name im [Textbaustein](https://docs.shopware.com/de/shopware-6-de/einstellungen/Textbausteine) `detail.addProduct` nicht in Großbuchstaben verfasst werden.

**Nein**\
Zeigt den Text innerhalb des Warenkorb Buttons so an wie er im [Textbaustein](https://docs.shopware.com/de/shopware-6-de/einstellungen/Textbausteine) `detail.addProduct` angelegt wurde.

</details>

<details>

<summary>Zeilenhöhe (in px)</summary>

Definiere die Zeilenhöhe des Textes innerhalb des Warenkorb Buttons.

</details>

<details>

<summary>Zeichenabstand (in px)</summary>

Lege den Zeichenabstand des Textes innerhalb des Warenkorb Buttons fest.

</details>

<details>

<summary>Innenabstand oben und unten (in px)</summary>

Hinterlege den oberen und unteren Innenabstand des Warenkorb Buttons.

</details>

<details>

<summary>Innenabstand links und rechts (in px)</summary>

Hinterlege den linken und rechten Innenabstand des Warenkorb Buttons.

</details>

<details>

<summary>Unterer Außenabstand (in px)</summary>

Definieren den unteren Abstand des Warenkorb Buttons zum Merkzettel.

</details>

### Merkzettel

{% hint style="info" %}
Der Merkzettel ist eine Shopware eigene Funktion, die im Standard deaktiviert ist. Vergewissere dich zunächst das [Feature zu aktivieren](https://docs.shopware.com/de/shopware-6-de/einstellungen/warenkorb#merkzettel).
{% endhint %}

<figure><img src="https://content.gitbook.com/content/33GKvYy9I8ydtLM82CBS/blobs/DxBKAuJSudO2w4npgUJb/produkt-detailseite-buy-box-merkzettel.webp" alt=""><figcaption></figcaption></figure>

<details>

<summary>Schriftgröße (in px)</summary>

Passe die Schriftgröße des "Zum Merkzettel hinzufügen" Textes an.

</details>

<details>

<summary>Zentrieren</summary>

**Ja**\
Zentriert den Text "Zum Merkzettel hinzufügen" unterhalb des Warenkorb Buttons.

**Nein**\
Richtet den Text "Zum Merkzettel hinzufügen" linksbündig aus.

</details>

<details>

<summary>Unterer Abstand (in px)</summary>

Definiert den unteren Abstand des Merkzettels zu den Spezifikationen.

</details>

### Spezifikationen

<figure><img src="https://content.gitbook.com/content/33GKvYy9I8ydtLM82CBS/blobs/E2EAitTYoWwyh4viqjNa/produkt-detailseite-buy-box-spezifikationen.webp" alt=""><figcaption></figcaption></figure>

<details>

<summary>Anzeigemodus</summary>

**Standard**\
Alle Spezifikationen werden linksbündig ausgerichtet.

**Tabelle**\
Alle Spezifikationen werden tabellarisch ausgerichtet.

</details>

<details>

<summary>Produktnummer anzeigen</summary>

**Ja**\
Zeigt die Produktnummer an.

**Nein**\
Blendet die Produktnummer aus.

</details>

<details>

<summary>GTIN/EAN anzeigen</summary>

**Ja**\
Zeigt die GTIN/EAN an.

**Nein**\
Blendet die GTIN/EAN aus.

</details>

<details>

<summary>Hersteller-Produktnummer anzeigen</summary>

**Ja**\
Zeigt die Hersteller-Produktnummer an.

**Nein**\
Blendet die Hersteller-Produktnummer aus.

</details>

<details>

<summary>Maße</summary>

**In mm**\
Zeigt die Maße des Produkts in mm an.

**In cm**\
Zeigt die Maße des Produkts in cm an.

**Ausblenden**\
Blendet die Maße des Produkts aus.

</details>

<details>

<summary>Maße Anzeigemodus</summary>

**Standard**\
Zeigt die Maße jeweils in einer einzelnen Zeile an.

**Einzeilig**\
Zeigt alle Maße in einer Zeile an (B×H×L) .

</details>

<details>

<summary>Gewicht anzeigen</summary>

**Ja**\
Zeigt das Gewicht des Produkts an.

**Nein**\
Blendet das Gewicht des Produkts aus.

</details>

<details>

<summary>Anzahl der Nachkommastellen beim Gewicht</summary>

Hinterlege die Anzahl der Nachkommastellen beim Gewicht.

</details>

<details>

<summary>Unterer Abstand (in px)</summary>

Definiert den unteren Abstand der Spezifikationen.

</details>

### Teilen

{% hint style="info" %}
Die "Teilen-Funktion" ist ein Feature des Themes, das dir ermöglicht zusätzliche Interaktion mit deinen Produkten auf Sozialen Medien zu schaffen. Hierbei handelt es sich um einfache Links zu den Plattformen und um keine sog. "Shariff Buttons", die von datenschutzrechtlicher Relevanz sind.
{% endhint %}

<figure><img src="https://content.gitbook.com/content/33GKvYy9I8ydtLM82CBS/blobs/ZiPKd9HY3RGrovMKVnp8/produkt-detailseite-buy-box-teilen.webp" alt=""><figcaption></figcaption></figure>

<details>

<summary>Position</summary>

**Ende der Buy Box**\
Blendet die "Teilen-Funktion" unterhalb der Spezifikationen ein.

**Ausblenden**\
Deaktiviert die "Teilen-Funktion".

</details>

<details>

<summary>Oberer Abstand (in px)</summary>

Definiert den oberen Abstand der "Teilen-Funktion".

</details>