# Produkt Detail ## Allgemeine Einstellungen Grundlegend können Sie hier wählen, ob Sie verschiedene Elemente auf der Detailseite angezeigt haben möchten oder nicht. Hierzu zählen: ### Badges anzeigen Sie können bestimmen, ob die Shopware Standard Badges (Neu, Top und Sale) auf der Detailseite, in unmittelbarer Nähe des Preis, ausgegeben werden sollen.

Das **Badge Versandkostenfrei** kein Shopware Standard, sondern wird mit dem Theme mitgeliefert. Sie können es separat hinzufügen oder abschalten. ### Produktname Zur Hervorhebung des Produktnamens auf der Detailseite, können Sie die Schriftart, Schriftgröße, Schriftstärke (dünn, normal, fett) und Text Transform (nur Großbuchstaben oder nur Kleinbuchstaben) verwenden. Zusätzlich können Sie dem Namen eine spezielle Schriftfarbe geben. ### Kurzbeschreibung Sie haben die Möglichkeit, eine Kurzbeschreibung am Anfang der Seite (über dem Preis) auszugeben und diese weiter zur Beschreibung zu verlinken.

Beispiel für die Ausgabe der Kurzbeschreibung auf der Detailseite

Sie haben die Möglichkeit aus zwei Quellen zu wählen: #### Kurzbeschreibung aus der Meta-Beschreibung anzeigen Hier wird der Text verwendet, welchen Sie in den Einstellungen eines Produktes im Tap: [SEO > Meta-Beschreibung](/coolbax-docs/theme/produkt-einstellungen.md) hinterlegen. #### Kurzbeschreibung aus dem Zusatzfeld anzeigen Eine weitere Möglichkeit ist das mitgelieferte Zusatzfeld. Sie finden dieses in den Einstellungen für ein Produkte im Tap: [Spezifikationen > Kurzbeschreibung](broken://pages/NeCDJ2YjIn4KWWuZYxqt) {% hint style="warning" %} Achten Sie darauf, dass der Inhalt der Kurzbeschreibung eventuell auch für die [Kategorie Einstellungen: Produkt Box](/coolbax-docs/theme/theme-einstellungen/produkt-kategorie.md#kurzbeschreibung) genutzt wird {% endhint %} #### Zusätzliche Einstellungen: * **Headline anzeigen:** Eine Headline erscheint über der Kurzbeschreibung. Standardmäßig wird der Textbaustein "Info zu diesem Produkt" ausgegeben. * **Link anzeigen:** Sie können unterhalb der Kurzbeschreibung einen Link ausgeben, welcher den Nutzer direkt zu der Beschreibung des Artikels führt. Standardmäßig wird dieser Textbaustein mit "weitere Produktdetails" ausgegeben. {% hint style="info" %} Textbausteine können Sie unter: *System Einstellungen > Shop > Textbausteine* ändern. Suchen Sie nach den technischen Namen: für die Headline: *cbaxTheme.detail.shortDescriptionTitle* \ für den Link: *cbaxTheme.detail.shortDescriptionLink* {% endhint %} ### Produktpreis Wie auch den Produktnamen so kann auch der Produktpreis hervorgehoben werden. Hierfür stehen Ihnen die Schriftgröße und Schriftstärke (dünn, normal oder fett) zur Verfügung. {% hint style="info" %} Die Schriftfarbe können Sie unter: [Typografie & Farben > E-Commerce](/coolbax-docs/theme/theme-einstellungen/typografie-and-farben.md#e-commerce) ändern {% endhint %} ### Informationen unter dem Warenkorb Button Unter dem Warenkorb können Sie eventuell wichtige Informationen für ihren Kunden ausgeben lassen. Folgen Infos können erscheinen: * Produktnummer anzeigen * Hersteller anzeigen * Herstellernummer anzeigen (wenn vorhanden) * EAN anzeigen (wenn vorhanden) * Breite anzeigen (wenn vorhanden) * Höhe anzeigen (wenn vorhanden) * Länge anzeigen (wenn vorhanden) * Gewicht anzeigen (wenn vorhanden) {% hint style="info" %} Die entsprechenden Felder müssen in den Einstellungen für das Produkt befüllt sein. Sollte das nicht der Fall sein, wird der entsprechende Punkt im Frontend nicht ausgegeben. {% endhint %} ## Galerie Sie haben hier die Möglichkeit den Shopware Galerie Slider durch ein frei wählbares Raster Layout zu ersetzen. Dort werden alle Bilder direkt angezeigt. ### Einstellungen #### Galerie Layout {% hint style="info" %} Sie haben die Möglichkeit von den Theme Einstellungen abzuweichen und das Layout für spezielle Produkt individuell festlegen. Gehen Sie hierfür in das Produkt unter: [Spezifikationen > Zusatzfelder > Galerie Layout](/coolbax-docs/theme/produkt-einstellungen.md#galerie-layout) {% endhint %} * **Shopware Standard:** Alle Bilder werden in einem Slider zusammengefasst. Die Vorschaubilder können senkrecht oder waagerecht ausgegeben werden.

* **Raster Layout 2:** Es werden immer 2 Bilder nebeneinander angezeigt.

* **Raster Layout 2-3:** In der erste Zeile werden 2 Bilder nebeneinander ausgegeben, alle weiteren Zeilen beinhalten 3 kleinere Bilder.

* **Raster Layout 1-2:** Die erste Zeile beinhaltet 1 Bild, die zweite und alle weiteren Zeile beinhalten 2 Bilder

* **Raster Layout 1-2-3:** Die erste Zeile beinhaltet 1 Bild, die zweite Zeile 2 Bilder, in allen anderen Zeilen werden 3 Bilder nebeneinander ausgegeben.

#### Anzahl Bilder Für die Raster Layouts können Sie die Anzahl der präsentierten Bilder auf eine bestimmte Menge einschränken. Diese Einstellung ist global und kann NICHT in den einzelnen Produkten geändert werden. ### Sticky Abhängig von der Länge der [Buybox ](#buybox)(Produktname, Preis usw.) kann der Bereich größer werden als der Bereich welches das Galerie Bild einnimmt. In diesem Fall kann die Sticky Funktion zu Einsatz kommen. Hat das Bild nach unten Platz, scrollt es mit, bis es das Ende des rechten [Buybox ](#buybox)erreicht hat.

#### Manueller Offset Mit dem manuellen Offset können Sie den Abstand zum oberen Browserrand selber bestimmen. Haben Sie andere Elemente, welche sich an den oberen Bildschirm hängen (z. B. Sticky Menü) können Sie den Abstand selber festlegen. ## Buybox Die Buybox befindet sich neben der [Galerie](#galerie) und beinhaltet alle wichtigen Informationen zum Produkt: unter anderem den Preis, Mengen und Warenkorbfeld. ### Einstellungen #### Abstände Sollten Sie der Buybox eine [Hintergrundfarbe ](#farben)geben, kann ein Innenabstand in allen Richtungen vergeben werden.

#### Variante Anzeige & Ausprägungsauswahl Sie haben mit der Einstellung: **Gewählte Variante anzeigen** die Möglichkeit die gewählte Variante per Wort neben der Überschrift der Variantenwahl ausgeben zu lassen.

Auswahl wird neben der Varianten Überschrift als Wort ausgegeben

Mit der **Variante Ausprägungsauswahl** können Sie bestimmen, ob es bei allen oder nur bestimmten Darstellungsoptionen (Bild, Text und oder Farbe) der Varianten gelten soll. Eine Mehrfachauswahl ist möglich. Wie Sie die Darstellungsoptionen bzw. Ausprägung ändern wird Ihnen im Handbuch von Shopware: Katalog - Eigenschaften erklärt: {% embed url="" %} Shopware Handbuch zur Ausprägung der Eigenschaften {% endembed %} ### Sticky Wie auch die Galerie so kann auch (andersherum) die Buybox mit dem Bild herunter fahren: Vorrausetzung hierfür ist, das die Galerie länger sein muss als die Buybox.

### Farben Hier können Sie eine Hintergrundfarbe für die gesamte Buybox festlegen. {% hint style="info" %} Nutzen Sie die [Einstellung für die Abstände](#einstellungen-1) um einen Innabstand zu erzeugen {% endhint %} ## Detail USP-Leiste Mit dieser Einstellung haben Sie die Möglichkeit global die Vorteile bzw. Alleinstellungsmerkmale von ihren Artikeln (USP) anzeigen zu lassen.

In den Einstellungen für dieses Features legen Sie fest: * Die Position der USP-Leiste (über oder unter dem Warenkorb Button) * Die [Headline und Inhalte](#headline-und-inhalt) * Auswahl des [Icons](https://demo-6.coolbax.com/cbax/readicon/index) für die Aufzählung sowie die Iconfarbe * Farbeinstellungen: Hintergrundfarbe, Schriftfarbe sowie ob ein Rahmen + Rahmenfarbe um den Bereich genutzt werden soll. ### Headline und Inhalt Die USP-Leiste besteht aus einer Headline und aus einer Auflistung. Beide Textfelder können global in den Theme Einstellungen gepflegt werden bzw. über Textbausteine. Sie werden anschließend bei jedem Artikel im Frontend ausgegeben. {% hint style="info" %} Textbausteine können Sie unter: *System Einstellungen > Shop > Textbausteine* ändern. Suchen Sie nach die technischen Namen: für die Headline: *cbaxTheme.detail.usp.headline*\ für den Link: *cbaxTheme.detail.usp.text* {% endhint %} Die Listenpunkte werden hintereinander in einer Zeile geschrieben. Um diese zu trennen, nutzen Sie das Semikolon um einzelne Listenpunkte zu trennen. > Schnelle Lieferung**;** Kostenloser Versand**;** 30 Tage Geld zurück Garantie**;** Kunden Hotline: 0180 - 11 22 33**;** Sie können vom Standard im Theme abweichen und für jeden Artikel eigene Vorteile angeben #### Individuelle Inhalte Sie haben die Möglichkeit, für jeden Artikel individuelle USPs zu erstellen. Hierfür gehen Sie in das Produkt: [Spezifikationen > Zusatzfelder > Vorteile](/coolbax-docs/theme/produkt-einstellungen.md#vorteile). Die Schreibweise bleibt, wie in den Theme Einstellungen, gleich. {% hint style="warning" %} Einstellungen im Produkt werden immer vor den Theme Einstellungen vorgezogen. {% endhint %} ### Auswahl der Icons Für jedes USP können Sie in eigenes Icon wählen. Nutzen Sie folgenden Link um ein passendes Icon zu wählen: {% embed url="" %} Suchen Sie sich dort ein passendes Icon aus und kopieren Sie den Namen des Icons. Diesen fügen Sie anschließend in das Feld: *Icon 1-4* ein. ## Tabs Für die Tabs, welche standartmäßig die Beschreibung und Bewertungen unterteilen, können Sie ebenfalls farblich und in der Darstellung ändern. Für diese Möglichkeit stehen Ihnen 3 Optionen zur Verfügung. ### Einstellungen

* **1) Rahmen anzeigen und Rahmenfarbe:** Wenn diese Option aktiv ist, wird ein Rahmen um alle Reiter und den gesamten Inhalt des Reiters gelegt. Die Mittelline, welche die Reiter von den Content trennt, ist darin nicht enthalten. * **2) Hintergrundfarbe:** Hier ist der gesamte Bereich gemeint, indem sich alle Reiter befinden

### Tabs #### Taps Layout * **Shopware Standard:** Die Inhalte werden nebeneinander aufgelistet und haben einen geringen Abstand zueinander. Der aktive Inhalt erhält einen Unterstrich unter der Bezeichnung

* **Taps:** Die Inhalte sind durch einzelne Reiter abgeteilt und werden optisch durch einen Abstand voneinander getrennt. Die durchgezogene Linie wird beim aktiven Inhalt entfernt.

* **Pfeile:** Ähnlich wie beim den Taps werden die Inhalte optisch durch einen Abstand voneinander getrennt. Aktive Inhalte erhalten bei diesem Layout einen Pfeil am unteren Rand

#### Typografie Die Worte in den einzelnen Taps können Sie typografisch verändern. Nutzen Sie hierfür die Einstellung Schriftgröße und Schriftstärke (dünn, normal, fett). #### Farben

* **3) Hintergrundfarbe und Schriftfarbe (Badge):** Hier kann die Anzahl der Bewertungen farblich hervorgehoben werden * **4) Hintergrundfarbe und Schriftfarbe:** Bestimmen Sie die Schriftfarbe und Hintergrundfarbe von einen nicht aktiven Reiter. * **5) Hintergrundfarbe und Schriftfarbe (hover):** Bestimmen Sie die Schriftfarbe und Hintergrundfarbe von einem nicht Reiter auf dem der Cursor befindet. * **6) Hintergrundfarbe und Schriftfarbe (aktiv):** Bestimmen Sie die Schriftfarbe und Hintergrundfarbe von einen aktiven Reiter.

### Inhalt #### Headline Sie haben die Möglichkeit die Headline für Beschreibung, die Bewertungen und wenn aktiv auch für die Taps: Eigenschaften und Videos ausblenden. {% hint style="info" %} Die Taps Eigenschaften und Videos können Sie unter: [Taps > Weitere Taps](#weitere-tabs) aktivieren. {% endhint %} #### Headline Layout Die Headline kann nur den Produktnamen enthalten oder mit einem vorgesetzten Textbaustein beginnen: * **Produktname:** Play Station Console * **Textbaustein + Produktname:** Produktinformationen "Play Station Console" {% hint style="info" %} Den Textbaustein können Sie unter: *System Einstellungen > Shop > Textbausteine* ändern. Suchen Sie hierfür nach: *detail.descriptionTitle* {% endhint %} #### Farbeinstellungen

Farbeinstellungen für den Inhalt der Taps

* **1) Hintergrundfarbe:** Definieren Sie die Hintergrundfarbe des Contents * **2) Schriftfarbe:** Definieren Sie die Schriftfarbe des Contents

{% hint style="info" %} Die Schriftfarbe für die Überschriften wird von Einstellungen in: [Typografie & Farben > Typografie](/coolbax-docs/theme/theme-einstellungen/typografie-and-farben.md#typografie) übernommen. {% endhint %} ### Weitere Tabs Auf der Detailseite können Sie neben den bereits vorhandenen Taps (Beschreibung und Bewertung) 2 zusätzliche Taps ausgeben. Sie beinhalten Videos zum Produkt (wenn vorhanden) bzw. werden die Eigenschaften in einem extra Tap ausgegeben. #### Tap: Video Der Tap für die Videos erscheint vor dem Tap mit den Bewertungen. Die Videos stellen Sie direkt bei den Einstellungen für das Produkt, in den mitgelieferten [Zusatzfeld: Youtube IDs](/coolbax-docs/theme/produkt-einstellungen.md#youtube-id), ein.

Beispiel für ein Video-Tap mit zwei Videos

{% hint style="info" %} Sollte die Einstellung deaktiviert und trotzdem [Youtube IDs](/coolbax-docs/theme/produkt-einstellungen.md#youtube-id) im Zusatzfeld hinterlegt sein, werden diese unter der Produktbeschreibung angezeigt! {% endhint %} {% hint style="info" %} Einige Wörter können Sie über die Textbausteine anpassen. Gehen Sie hierfür in: *Einstellungen > Shop > Textbausteine* und suchen nach: * cbaxTheme.detail.tabsYoutubeVideos = Bezeichnung des Taps * cbaxTheme.detail.tabsYoutubeVideosPreviewText = Vorschautext für mobile Endgeräte {% endhint %} #### Tap: Eigenschaften Es gibt zwei Möglichkeiten die Eigenschaften auf der Detailseite zu präsentieren. Sie können diese, wie im Standard, unter der Beschreibung oder als extra Tap ausgeben lassen.

Beispiel: Eigenschaften unter Beschreibung

{% hint style="info" %} Einige Wörter können Sie über die Textbausteine anpassen. Gehen Sie hierfür in: *Einstellungen > Shop > Textbausteine* und suchen nach: * cbaxTheme.detail.tabsProperties = Bezeichnung des Taps * cbaxTheme.detail.tabsPropertiesPreviewText = Vorschautext für mobile Endgeräte {% endhint %} #### Tap: Hersteller Mit der Aktivierung können Sie ein zusätzlichen Tap mit Informationen des Herstellers einblenden. Der Text wird aus der Hersteller Beschreibung genommen. Sie hinterlegen eine Hersteller Beschreibung unter: *Katalog > Hersteller.*

{% hint style="info" %} Einige Wörter können Sie über die Textbausteine anpassen. Gehen Sie hierfür in: *Einstellungen > Shop > Textbausteine* und suchen nach: * cbaxTheme.detail.tabsManufacturer = Bezeichnung des Taps * cbaxTheme.detail.manufacturerTitle = Überschrift vor Herstellername * cbaxTheme.detail.manufacturerLink = Linkbezeichnung vor Herstellername {% endhint %} #### Tap: Benutzerdefiniert Sie haben die Möglichkeit, bei jedem Produkt einen eigenen spezifischen Tap zum Produkt ausgeben zu lassen. Hierzu muss die Einstellung: *Benutzerdefinierten Tab anzeigen* aktiv schalten und in den Produkten ([Katalog > Produkte > Spezifikationen > Zusatzfelder](/coolbax-docs/theme/produkt-einstellungen.md#benutzerdefinierter-tap) ) die Inhalte für den Tap einpflegen.

## Bewertungen neben der Produktbeschreibung Die erhaltenen und freigehaltenen Kundenbewertungen können neben der Beschreibung auf der rechten Seite eingeblendet werden.

Beispiel für Bewertungen neben Produktbeschreibung

In den Einstellungen für dieses Features legen Sie fest: * Anzahl der Bewertungen * [Innenabstand](#innenabstand) * [Button Style](#button-style) * Farbeinstellungen: Hintergrundfarbe, Schriftfarbe sowie ob ein Rahmen + Rahmenfarbe um den Bereich genutzt werden soll. ### Innenabstand Mit dem Innenabstand definieren Sie den Abstand zwischen Bewertung (mit Datum und Sterne) und den Außenrand.

### **Button Style** Hier definieren Sie das Aussehen des Button "Kundenbewertung schreiben". Wählen Sie hier zwischen ihrer gewählten Primärenfarbe (Primärer Button) oder ihrer gewählten Sekundärfarbe (Sekundärer Button). Die Farben definieren Sie unter: [Typografie & Farben > Theme-Farben](/coolbax-docs/theme/theme-einstellungen/typografie-and-farben.md#theme-farben). ## Warenkorb Button fixieren Mit dieser Einstellung wird der Warenkorb Button an dem unteren Rand des Browserfensters angehangen.

In den Einstellungen für dieses Features legen Sie fest: * Ob der fixierte Warenkorb Button auf den Viewport: Tablet und/oder Smartphone dargestellt werden soll * Bestimmung der Größe des Produktbild (in Pixel) * Farbeinstellungen: Hintergrundfarbe und Schriftfarbe --- # 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://coolbax.gitbook.io/coolbax-docs/theme/theme-einstellungen/produkt-detail.md?ask= ``` 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.