Konfiguration

Basiskonfiguration

---

Darstellungsart

Feldtyp: Auswahlfeld

Verfügbare Werte: • Rahmenfarbe (Standard) • Schlagschatten

Beispiel Wert: Rahmenfarbe (Standard)

Pfad zur Einstellung: Tab "Kategorieseiten" => Bereich "Produkt-Box" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-product-box-layout-type

---

Hover-Effekt

Feldtyp: Auswahlfeld

Verfügbare Werte: • Standard • Vergrößern • Nach oben gleiten

Beispiel Wert: Standard

Pfad zur Einstellung: Tab "Kategorieseiten" => Bereich "Produkt-Box" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-product-box-hover-type

---

Hover-Effekt auf Slider anwenden

Feldtyp: Auswahlfeld

Verfügbare Werte: • nein • ja

Beispiel Wert: nein

Pfad zur Einstellung: Tab "Kategorieseiten" => Bereich "Produkt-Box" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-product-box-hover-apply

---

Textausrichtung

Feldtyp: Auswahlfeld

Verfügbare Werte: • links ausrichten • zentriert ausrichten • rechts ausrichten

Beispiel Wert: zentriert ausrichten

Pfad zur Einstellung: Tab "Kategorieseiten" => Bereich "Produkt-Box" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-product-box-text-align

---

Variantenmerkmale anzeigen

Feldtyp: Auswahlfeld

Verfügbare Werte: • nicht anzeigen • anzeigen (Standard)

Beispiel Wert: anzeigen (Standard)

Pfad zur Einstellung: Tab "Kategorieseiten" => Bereich "Produkt-Box" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-product-box-variant-characteristics-show

---

Produktnummer anzeigen

Feldtyp: Auswahlfeld

Verfügbare Werte: • nicht anzeigen • anzeigen • je Layout-Typ

Beispiel Wert: nicht anzeigen

Pfad zur Einstellung: Tab "Kategorieseiten" => Bereich "Produkt-Box" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-product-box-ordernumber-show

Produktnummer (bzw. Bestellnummer) in der Produkt-Box anzeigen.

Um das Label zu bearbeiten oder übersetzten, nutze bitte den Textbaustein: twt.listing.ordernumberLabel.

je Layout-Typ: Nutze separate Konfigurationsfelder für alle 3 Layout-Typen in den Bereichen "Produkt-Box (Layout-Typ ...)".

---

Hersteller anzeigen

Feldtyp: Auswahlfeld

Verfügbare Werte: • nicht anzeigen • anzeigen • je Layout-Typ

Beispiel Wert: nicht anzeigen

Pfad zur Einstellung: Tab "Kategorieseiten" => Bereich "Produkt-Box" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-product-box-manufacturer-show

Hersteller (-Name) in der Produkt-Box anzeigen.

Um das Label zu bearbeiten oder übersetzten, nutze bitte den Textbaustein: twt.listing.manufacturerLabel.

je Layout-Typ: Nutze separate Konfigurationsfelder für alle 3 Layout-Typen in den Bereichen "Produkt-Box (Layout-Typ ...)".

---

Preiseinheit anzeigen

Feldtyp: Auswahlfeld

Verfügbare Werte: • nicht anzeigen • anzeigen (Standard)

Beispiel Wert: anzeigen (Standard)

Pfad zur Einstellung: Tab "Kategorieseiten" => Bereich "Produkt-Box" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-product-box-price-unit-show

Mit dieser Konfiguration kannst du die Preis pro Einheit (Grundpreis) ausblenden, sofern dieser für deinem Shop nicht relevant ist.

Hinweis: Mehr Informationen zur Grundpreisberechnung findest du in der Shopware-Dokumentation.

---

Günstigsten Preis anzeigen

Feldtyp: Auswahlfeld

Verfügbare Werte: • nicht anzeigen • anzeigen (Standard)

Beispiel Wert: anzeigen (Standard)

Pfad zur Einstellung: Tab "Kategorieseiten" => Bereich "Produkt-Box" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-product-box-cheapest-price-show

---

Listenpreis anzeigen

Feldtyp: Auswahlfeld

Verfügbare Werte: • nicht anzeigen • anzeigen (Standard)

Beispiel Wert: anzeigen (Standard)

Pfad zur Einstellung: Tab "Kategorieseiten" => Bereich "Produkt-Box" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-product-box-list-price-price-show

---

Listenpreis in Prozent anzeigen

Feldtyp: Auswahlfeld

Verfügbare Werte: • nicht anzeigen • anzeigen (Standard)

Beispiel Wert: anzeigen (Standard)

Pfad zur Einstellung: Tab "Kategorieseiten" => Bereich "Produkt-Box" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-product-box-list-price-percentage-show

---

Aktionsschaltflächen anzeigen (Kaufen-Button / Details-Button)

Feldtyp: Auswahlfeld

Verfügbare Werte: • nicht anzeigen • anzeigen (Standard)

Beispiel Wert: anzeigen (Standard)

Pfad zur Einstellung: Tab "Kategorieseiten" => Bereich "Produkt-Box" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-product-box-action-buy-btn-show

---

Hover-Effekt (Kaufen-Button / Details-Button)

Feldtyp: Auswahlfeld

Verfügbare Werte: • kein Effekt (Standard) • slide up • slide up (NEU) • slide down • fade in

Beispiel Wert: kein Effekt (Standard)

Pfad zur Einstellung: Tab "Kategorieseiten" => Bereich "Produkt-Box" => Abschnitt "Basiskonfiguration"

Technischer Name: twt-product-box-action-buy-btn-hover

Farbkonfiguration

---

Rahmenfarbe

Feldtyp: Farbauswahl

Beispiel Wert: #cccccc

Pfad zur Einstellung: Tab "Kategorieseiten" => Bereich "Produkt-Box" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-product-box-border-color

---

Rahmenfarbe @hover

Feldtyp: Farbauswahl

Beispiel Wert: #008490

Pfad zur Einstellung: Tab "Kategorieseiten" => Bereich "Produkt-Box" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-product-box-border-color-hover

---

Hintergrundfarbe

Feldtyp: Farbauswahl

Beispiel Wert: #ffffff

Pfad zur Einstellung: Tab "Kategorieseiten" => Bereich "Produkt-Box" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-product-box-background-color

Hintergrundfarbe der Produkt-Box.

---

Hintergrundfarbe @hover

Feldtyp: Farbauswahl

Beispiel Wert: #f7f7f7

Pfad zur Einstellung: Tab "Kategorieseiten" => Bereich "Produkt-Box" => Abschnitt "Farbkonfiguration"

Technischer Name: twt-product-box-background-color-hover

Hintergrundfarbe der Produkt-Box beim Hover.

Schlagschatten

---

Schlagschatten

Feldtyp: Auswahlfeld

Verfügbare Werte: • kein Schatten (Standard) • individueller Schatten • Kleiner Schatten (Bootstrap) • Normaler Schatten (Bootstrap) • Größerer Schatten (Bootstrap) • Level 1 (ThemeWare®) • Level 2 (ThemeWare®) • Level 3 (ThemeWare®) • Level 4 (ThemeWare®) • Level 5 (ThemeWare®)

Beispiel Wert: Level 1 (ThemeWare®)

Pfad zur Einstellung: Tab "Kategorieseiten" => Bereich "Produkt-Box" => Abschnitt "Schlagschatten"

Technischer Name: twt-product-box-box-shadow-type

---

Schlagschatten (individuell)

Feldtyp: Textfeld

Beispiel Wert: 0 5px 10px

Pfad zur Einstellung: Tab "Kategorieseiten" => Bereich "Produkt-Box" => Abschnitt "Schlagschatten"

Technischer Name: twt-product-box-box-shadow

---

Schattenfarbe (individuell)

Feldtyp: Farbauswahl

Beispiel Wert: rgba(0, 0, 0, 0.075)

Pfad zur Einstellung: Tab "Kategorieseiten" => Bereich "Produkt-Box" => Abschnitt "Schlagschatten"

Technischer Name: twt-product-box-box-shadow-color

---

Schlagschatten @hover

Feldtyp: Auswahlfeld

Verfügbare Werte: • kein Schatten (Standard) • individueller Schatten • Kleiner Schatten (Bootstrap) • Normaler Schatten (Bootstrap) • Größerer Schatten (Bootstrap) • Level 1 (ThemeWare®) • Level 2 (ThemeWare®) • Level 3 (ThemeWare®) • Level 4 (ThemeWare®) • Level 5 (ThemeWare®)

Beispiel Wert: Level 3 (ThemeWare®)

Pfad zur Einstellung: Tab "Kategorieseiten" => Bereich "Produkt-Box" => Abschnitt "Schlagschatten"

Technischer Name: twt-product-box-box-shadow-type-hover

---

Schlagschatten @hover (individuell)

Feldtyp: Textfeld

Beispiel Wert: 0 10px 20px

Pfad zur Einstellung: Tab "Kategorieseiten" => Bereich "Produkt-Box" => Abschnitt "Schlagschatten"

Technischer Name: twt-product-box-box-shadow-hover

---

Schattenfarbe @hover (individuell)

Feldtyp: Farbauswahl

Beispiel Wert: rgba(0, 0, 0, 0.15)

Pfad zur Einstellung: Tab "Kategorieseiten" => Bereich "Produkt-Box" => Abschnitt "Schlagschatten"

Technischer Name: twt-product-box-box-shadow-color-hover

Produktbild

---

Layout-Typ

Feldtyp: Auswahlfeld

Verfügbare Werte: • Standard • volle Breite

Beispiel Wert: Standard

Pfad zur Einstellung: Tab "Kategorieseiten" => Bereich "Produkt-Box" => Abschnitt "Produktbild"

Technischer Name: twt-product-box-image-layout-type

---

Hover-Effekt

Feldtyp: Auswahlfeld

Verfügbare Werte: • kein Effekt • Deckkraft reduzieren • Bild vergrößern • Bilder überblenden (Zusatzfeld)

Beispiel Wert: Bild vergrößern

Pfad zur Einstellung: Tab "Kategorieseiten" => Bereich "Produkt-Box" => Abschnitt "Produktbild"

Technischer Name: twt-product-box-image-hover-type

Bilder überblenden (Zusatzfeld) Wenn aktiv, wird das Cover-Bild beim Mouseover durch das ThemeWare® Zusatzfeld "Hover-Bild" ausgetauscht.

Hinweis: Erweiterungen welche ihrerseits das Produkbild modifizieren können die Option "Bilder überblenden" stören. Nutze in diesem Fall einfach einen anderen Hover-Effekt.

---

Höhe

Feldtyp: Textfeld

Beispiel Wert: 200

Pfad zur Einstellung: Tab "Kategorieseiten" => Bereich "Produkt-Box" => Abschnitt "Produktbild"

Technischer Name: twt-product-box-image-height

Ändert die Bildhöhe für CMS-Elemente mit dem Layout-Typ "Standard" und "Minimaler Inhalt".

Der Layout-Typ "Großes Bild" hat bereits eine größere Bildhöhe von 332px.

Standard: 200

---

Anzeigemodus

Feldtyp: Auswahlfeld

Verfügbare Werte: • Standard • Füllen (cover) • Strecken (contain)

Beispiel Wert: Standard

Pfad zur Einstellung: Tab "Kategorieseiten" => Bereich "Produkt-Box" => Abschnitt "Produktbild"

Technischer Name: twt-product-box-image-object-fit

none Das Bild wird nicht skaliert.

cover Die Größe des Bildes wird so angepasst, dass das Seitenverhältnis beibehalten wird und der gesamte Inhaltsrahmen des Elements ausgefüllt wird. Falls das Seitenverhältnis nicht übereinstimmt, wird die Grafik zugeschnitten.

contain Das Bild wird so skaliert, dass sein Seitenverhältnis beibehalten wird und es in den Inhaltsrahmen des Elements passt.

---

Bildausrichtung

Feldtyp: Auswahlfeld

Verfügbare Werte: • oben ausrichten • zentriert ausrichten • unten ausrichten

Beispiel Wert: zentriert ausrichten

Pfad zur Einstellung: Tab "Kategorieseiten" => Bereich "Produkt-Box" => Abschnitt "Produktbild"

Technischer Name: twt-product-box-image-align-items

Dieses Konfigurationsfeld hat derzeit keine Funktion mehr. Wir prüfen ob dies mit einem kommenden Update angepasst oder entfernt wird.

---

Hintergrundfarbe

Feldtyp: Farbauswahl

Beispiel Wert: rgba(0, 0, 0, 0)

Pfad zur Einstellung: Tab "Kategorieseiten" => Bereich "Produkt-Box" => Abschnitt "Produktbild"

Technischer Name: twt-product-box-image-background-color

Hintergrundfarbe der Produktbild in Produkt-Boxen von Listings.

Merkzettel-Button

---

Ausrichtung

Feldtyp: Auswahlfeld

Verfügbare Werte: • oben ausrichten • unten ausrichten (Standard)

Beispiel Wert: unten ausrichten (Standard)

Pfad zur Einstellung: Tab "Kategorieseiten" => Bereich "Produkt-Box" => Abschnitt "Merkzettel-Button"

Technischer Name: twt-product-box-wishlist-button-position

---

Iconfarbe

Feldtyp: Farbauswahl

Beispiel Wert: #4a545b

Pfad zur Einstellung: Tab "Kategorieseiten" => Bereich "Produkt-Box" => Abschnitt "Merkzettel-Button"

Technischer Name: twt-product-box-wishlist-button-color

Hier kannst du die Iconfarbe für den Merkzettel-Button konfigurieren.

---

Hintergrundfarbe

Feldtyp: Farbauswahl

Beispiel Wert: #f9f9f9

Pfad zur Einstellung: Tab "Kategorieseiten" => Bereich "Produkt-Box" => Abschnitt "Merkzettel-Button"

Technischer Name: twt-product-box-wishlist-button-background-color

Hier kannst du die Hintergrundfarbe für den Merkzettel-Button konfigurieren.

Produkt-Bewertung

---

Produkt-Bewertung anzeigen

Feldtyp: Auswahlfeld

Verfügbare Werte: • nicht anzeigen • anzeigen (Standard) • Produkt-Bewertung immer anzeigen

Beispiel Wert: anzeigen (Standard)

Pfad zur Einstellung: Tab "Kategorieseiten" => Bereich "Produkt-Box" => Abschnitt "Produkt-Bewertung"

Technischer Name: twt-product-box-product-review-rating-show

Hinweis: Diese Konfiguration bezieht sich auf die Darstellung in der Produkt-Box.

Die Produkt-Bewertung kann darüber hinaus in den Shopware-Einstellungen ("Einstellungen" > "Shop" > "Produkte" > "Bewertungen anzeigen") vollständig deaktiviert werden.

---

Ecken

Feldtyp: Auswahlfeld

Verfügbare Werte: • nicht abgerundet • abgerundete Ecken • runde Ecken (Pill)

Beispiel Wert: abgerundete Ecken

Pfad zur Einstellung: Tab "Kategorieseiten" => Bereich "Produkt-Box" => Abschnitt "Produkt-Bewertung"

Technischer Name: twt-product-box-product-review-rating-corner-type

abgerundete Ecken Verwendet die Konfiguration "Abgerundete Ecken". ("Layout" > "Layout" > "Abgerundete Ecken")

runde Ecken Verwendet einen vordefinierten Radius für runde Ecken.

---

Position

Feldtyp: Auswahlfeld

Verfügbare Werte: • unter Produktnamen • über Produktbild

Beispiel Wert: unter Produktnamen

Pfad zur Einstellung: Tab "Kategorieseiten" => Bereich "Produkt-Box" => Abschnitt "Produkt-Bewertung"

Technischer Name: twt-product-box-product-review-rating-position

Produktname

---

Anzahl der Zeilen

Feldtyp: Auswahlfeld

Verfügbare Werte: • 1 Zeile • 2 Zeilen (Standard) • 3 Zeilen • 4 Zeilen • je Layout-Typ

Beispiel Wert: 2 Zeilen (Standard)

Pfad zur Einstellung: Tab "Kategorieseiten" => Bereich "Produkt-Box" => Abschnitt "Produktname"

Technischer Name: twt-product-box-product-name-line-clamp

je Layout-Typ: Nutze separate Konfigurationsfelder für alle 3 Layout-Typen in den Bereichen "Produkt-Box (Layout-Typ ...)".

Kaufen-Button ("In den Warenkorb")

---

Darstellungsart

Feldtyp: Auswahlfeld

Verfügbare Werte: • Text (Standard) • Text & Icon

Beispiel Wert: Text (Standard)

Pfad zur Einstellung: Tab "Kategorieseiten" => Bereich "Produkt-Box" => Abschnitt "Kaufen-Button ("In den Warenkorb")"

Technischer Name: twt-product-box-btn-buy-layout

Um den Text zu bearbeiten oder übersetzten, nutze bitte den Textbaustein: listing.boxAddProduct

---

Position der Icons

Feldtyp: Auswahlfeld

Verfügbare Werte: • links • rechts

Beispiel Wert: links

Pfad zur Einstellung: Tab "Kategorieseiten" => Bereich "Produkt-Box" => Abschnitt "Kaufen-Button ("In den Warenkorb")"

Technischer Name: twt-product-box-btn-buy-icon-position