Produkt-Boxen
Cards sind die Artikel-Boxen oder auch Produktboxen des Shops.
Farben
Lege hier die Hintergrundfarbe der Produkt-Boxen fest.
Produkte pro Zeile
Für das Listing kannst Du nun für jeden einzelnen Viewport definieren, wieviele Produkte in einer Zeile dargestellt werden sollen.
Was ist ein Layout-Raster
Ein Layout wird in einem sogenannten Grid aufgebaut. Man kann sich das vorstellen wie eine Tabelle mit 12 Spalten und beliebigen Zeilen.
Viewport / Displaygrößen erklärt
Die Definitionen Smartphones, Tablet, Laptops und Desktop sind vereinfachte Begriffe die für eine Mindestbreite in Pixeln stehen.
Die Darstellung von 2 Artikeln pro Zeile auf kleinen Smartphones bezieht sich auf Endgeräte mit einer Mindestbreite im Viewport von 374px und sind angelehnt an die Viewport-Größen des integrierten Frameworks Bootstrap (https://getbootstrap.com/docs/4.6/layout/grid/).
Bei allen Geräten mit einer geringeren Viewport-Breite (also unter 374 Pixeln Breite) wird nur ein Artikel pro Zeile dargestellt
[≡] Abweichende Einstellungen pro Kategorie kannst Du im Bereich Zusatzfelder > Produkte pro Zeile der Kategorie hinterlegen.
Produkte pro Zeile (Layouts mit Sidebar)
Bei aktiver Sidebar kannst Du gesonderte Einstellungen tätigen, da hier die zur Verfügung stehende Breite um die Breite der Sidebar geringer ist.
[≡] Abweichende Einstellungen pro Kategorie kannst Du im Bereich Zusatzfelder > Produkte pro Zeile der Kategorie hinterlegen.
Produkte pro Zeile (Produkt-Slider)
Die Konfiguration der Anzahl Produkte pro Zeile für Produkt-Slider findest Du in den Einstellungen (1) des Produkt-Slider Elementes in der Erlebniswelt. Der Wert für die Minimale Weite (2) gibt dabei die Mindestbreite der Produktkachel an - per Javascript wird dann errechnet, wie viele Elemente in eine Zeile passen.
Beträgt die Breite des Inhaltes z.B. 1340px können 4 Produktkacheln in einer Reihe dargestellt werden, weil 1340px / 4 = 335px und damit die Mindestbreite von 300px nicht unterschreitet. Bei 5 Kacheln pro Zeile wäre die maximal mögliche Breite einer Produktkachel 1340px / 5 = 268px und damit zu gering.
Grundeinstellungen
Die Kurzbeschreibung im Listing wird über den Layout-Typ der Erlebniswelt gesteuert. Standard, Großes Bild, Minimaler Inhalt.
Über die Option Rahmen (1) bekommt die gesamte Produktbox einen Rahmen in der angegebenen Farbe. Schatten (2) und Schatten:hover (3) heben die Produktbox mit einem Schlagschatten in der gewählten Farbe vom Hintergrund ab. Über den Abstand (4) bestimmst Du den Abstand zwischen den einzelnen Produktboxen im Listing-Raster. Die Einstellung kann für mobile Geräte abweichend eingestellt werden. Die Option Ersparnis in % (5) stellt die prozentuale Ersparnis bei reduzierten Artikel im Badge an. Die Aufmerksamkeits-Animation (6) bewegt die Produkt-Box bei Mouseover um wenige Pixel nach oben. Wenn Ausverkaufte Produkte kennzeichnen (7) aktiv ist, werden ausverkaufte Produkte (Lagerbestand 0 + Abverkauf) mit einem Badge markiert.
Beispiele:
Bild
Über Mouseover Bildwechsel (1) legst Du fest, ob beim Überfahren mit der Maus ein alternatives Artikelbild dargestellt wird. Dabei sucht das Theme sich automatisch das nächstliegende zugewiesene Artikelbild aus der Konfiguration des Artikel heraus. quo
Die Checkbox Hintergrundfarbe (2) bietet die Möglichkeit, die unter Allgemein > Produktbilder > Hintergrundfarbe hinterlegte Farbe für Produktboxen anzuwenden. So kannst Du gezielter Steuern, wann die Hintergrundfarbe angewendet werden soll. Im Bereich der Detailseite gibt es ebenfalls eine solche Checkbox für die Galerie.
Neben der Produkt-Box selbst kann auch das Produktbild einen Rahmen (3) mit der gewählten Rahmenfarbe (4) erhalten.
Die Einstellung Layout-Typ Großes Bild - maximale Höhe (5) gibt Dir die Möglichkeit diesem speziellen Produktlayout eine individuelle Höhe zu geben. Das Produktlayout "Großes Bild" orientiert sich anders als die anderen Produktboxen Layouts nicht am Seitenverhältnis der Bilder und verwendet die Darstellung von eingepassten Artikelbildern mit einer fixen Höhe.
Beispiel:
Bildgrößen
Für die Darstellung des optimalen Produktbild Thumbnails in den Produkt Boxen für die verschiedenen Endgeräte und Bildschirmgrößen spielen viele Faktoren eine Rolle. Dazu gehören z.B. die einstellbare Anzahl der Artikel pro Zeile, die einstellbare maximale Layoutbreite wie auch der Abstand zwischen den Produktboxen. Eben Einstellungen welche die Größe der Boxen und damit auch der dargestellten Bilder beeinflussen.
Grundsätzlich errechnet das Theme anhand der verschiedenen Parameter, die zu ladende Bildgröße der verschiedenen Thumbnails im Listing automatisch. Eine manuelle Einstellung fixer Bildgrößen ist nur in wenigen Ausnahmefällen ratsam.
Hintergrundwissen:
Die Einstellung Produktbild Größen definiert die festgelegten Bildgrößen der Produktbilder für die unterschiedlichen Anzeigegrößen / Viewportbreiten. Das img-srcset entscheidet anhand der im sizes-Attribut hinterlegten Rahmenbedingungen, welches Bild geladen werden soll. Jede Rahmenbedingung besteht dabei aus einem optionalen Media Query der die Viewport-Breite beschreibt, und der Breite des Bildes.
Sobald die Einstellung Verwende eigene srcset-Größen (1) aktiviert wurde, greifen die festgelegten Bildgrößen für die einzelnen Viewports in den Einstellungsfelder darunter.
Bewertungen
Wähle mit der Konfiguration Bewertungen Position (1) zwischen verschiedenen Positionen der Bewertungssterne und lege fest, ob ausgegraute Sterne als Platzhalter angezeigt werden sollen, wenn zu einem Produkt noch keine Bewertungen vorliegen.
Sterne (Standard) – zeigt die klassische Stern-Darstellung. Sterne werden nur angezeigt, wenn bereits Bewertungen vorhanden sind.
Sterne und Platzhalter – zeigt graue Platzhalter-Sterne, wenn noch keine Bewertungen vorhanden sind.
Bewertungswert – zeigt einen Stern sowie den durchschnittlichen Bewertungswert als Zahl.
Bewertungswert mit gefüllter Anzeige – zeigt einen Stern, der proportional zum durchschnittlichen Bewertungswert gefüllt ist, sowie den durchschnittlichen Bewertungswert als Zahl.
Beispiel:
Name
Neben den allgemeinen Einstellungen zu Farbe und Typografie (1-6) kann mit der Option Zeilen (9) die Anzahl der Zeilen der Produktbezeichnung im Listing verändert werden. Dies kann bei besonders kurzen oder besonders langen Produktbezeichnungen sinnvoll sein, da für ein einheitliches Erscheinungsbild im Listing die Länge der Produktbezeichnungen durch die Anzahl der dargestellten Zeilen begrenzt ist.
Die Option zum Trimmen der Zeilen lässt sich deaktivieren indem die Option Produktnamen begrenzen (8) deaktiviert wird.
Beschreibung
Die Produktbeschreibung ist nur beim Standard Artikel-Layout vorhanden. Der Layout-Typ (1) kann in jeder Kategorie und Erlebniswelt eingestellt werden.
Du kannst die Typografie deiner Produktbeschreibung (1–4) konfigurieren. Die Option Kurzbeschreibung statt gekürzte Produkt-Beschreibung (5) lässt Dich die angerissene Produkt-Beschreibung, durch das Zusatzfeld "Kurzbeschreibung" des Produktes austauschen. Ist das Zusatzfeld nicht gefüllt, wird stattdessen die Meta-Beschreibung des Produktes genutzt. Ist auch diese leer, wird als Fallback wieder die Produkt-Beschreibung verwendet.
Artikelnummer
Stelle die Artikelnummer bereits im Listing dar. Durch das Deaktivieren der Anzeige derArtikelnummer kannst Du die Darstellung der Produktboxen in der Höhe verkleinern, da kein Platz für diese Information reserviert wird.
Varianten Merkmale
Durch das Deaktivieren der Anzeige der Varianten Merkmale kannst Du die Darstellung der Produktboxen in der Höhe verkleinern, da kein Platz für diese Information reserviert wird.
Varianten-Auswahl
Über die Konfiguration Position (1-2) legst Du fest ob und wo die Variantenauswahl in der Produktbox angezeigt wird. Du kannst das Design der Varianten-Auswahl konfigurieren. Dazu zählen die Ausrichtung (3), die Hintergrundfarbe (4–5), die Textfarbe (6–7) sowie die Rahmenfarbe (8–9). Mit Titel anzeigen (10) legst Du fest, ob der Titel der Varianten-Ausprägung mit angezeigt wird (z.B. "Größe" oder "Farbe"). Nicht kombinierbare Eigenschaften durchstreichen (11) streicht die Eigenschaften/Varianten entsprechend, wenn sie nicht verfügbar sind. Du kannst Tooltips anzeigen (12) lassen, wenn der Nutzer mit der Maus über die Varianten-Ausprägungen fährt. Du kannst einen Varianten-Gruppen Schwellenwert (13) festlegen, wenn nicht alle Varianten-Gruppen angezeigt werden sollen. Beispielsweise haben deine Produkte die Eigenschaften "Farbe" und "Größe" aber Du möchtest nur die Farbe in den Produkt-Boxen zur Auswahl stellen.
Ebenso kann der Varianten-Optionen Schwellenwert (14) festgelegt werden um zu begrenzen, wie viele der einzelnen Optionen angezeigt werden. Das ist nützlich, wenn deine Produkte sehr viele unterschiedliche Varianten haben. Überschüssige Varianten-Optionen werden getrimmt und zum Beispiel als "+10" dargestellt.
Die Schwellenwerte sind besonders sinnvoll um Performance einzusparen. Bei mehreren Artikeln auf einer Listing-Seite mit vielen Varianten-Optionen kann die Ladezeit beeinträchtigt werden.
Beispiele:
Varianten günstigster Preis
Durch das Deaktivieren der Anzeige des günstigsten Variantenpreises kannst Du die Darstellung der Produktboxen in der Höhe verkleinern, da kein Platz für diese Information reserviert wird.
Grundpreis
Durch das Deaktivieren der Anzeige des Grundpreises kannst Du die Darstellung der Produktboxen in der Höhe verkleinern, da kein Platz für diese Information reserviert wird.
Prüfe bitte vorher die Anzeige von Pflichtangaben!
"Wer Produkte nach Länge, Volumen, Gewicht oder Fläche anbietet, ist zur Nennung eines Grundpreises verpflichtet." Quelle: Shopware Blog zum Thema Preisangaben
Solltest Du also zur Darstellung eines Grundpreises verpflichtet sein, schalte diesen nicht aus - verkaufst Du hingegen aussschließlich z.B. Bekleidung kannst Du womöglich den unnötigen Leerraum der Grundpreisberechnung einsparen.
Preis
Du kannst die Typografie des Produktpreises (1–4) konfigurieren.
Lieferzeit
Aktiviere die Lieferzeit (1) in Listings, um Lieferinformationen in der Produktkarte in einem minimalen Aussehen (2) oder Standardmodus anzuzeigen. Passe die Schriftausrichtung an die Ausrichtung der anderen Elemente an.
Beispiele:
Produktaktionen
Ein Produkt kann Aktionen haben, wie das Hinzufügen des Artikels in den Warenkorb, der Details Button bei Varianten uvm.
Die Darstellung von Kaufen-Buttons in Produktlistings ist eine Standardfunktion in Shopware und kann unter Einstellungen > Shop > Produkte aktiviert werden. Mehr Informationen unter:
Hintergrund (1): Gib dem Bereich der Produktaktionen eine eigene Hintergrundfarbe. Alternativ setze hier die Farbe der Product-Card - das kann auch mit einer Variable wie $zen-product-listing-card-bg angegeben werden.
Aussehen (2): Produktaktionen können bei Mouseover das Produktbild überlagern, die Produktinformationen nach oben schieben oder den Produktpreis überlagern. Im Standard sind die Aktionen unterhalb des Preises immer sichtbar.
Aussehen (mobile) (3): Werden Produktaktionen erst bei Mouseover sichtbar, interpretieren mobile Geräte den Mouseover mit der ersten Touch-Geste. Der erste "klick" wird daher für die Darstellung der Produktaktionen genutzt - das Öffnen des Produktes wird also erst beim zweiten "Klick" möglich. Du kannst deshalb eine abweichende Einstellung für mobile Geräte treffen.
Merkzettel (4): Aktiviert die Merkzettel Produktaktion, sofern in den Shopware Grundeinstellungen die Merklistenfunktion aktiv ist.
Bestellmengenfeld (5): Zusätzlich zum Warenkorb-Button kann direkt im Listing auch eine Mengenauswahl angezeigt werden.
Die Darstellung des Bestellmengenfeldes setzt die aktive Option Kaufen-Buttons in Produktlistings anzeigen in den Shopware Grundeinstellungen voraus.
Produktaktion Button anzeigen (6): Wenn aktiv, wird ein Produktaktion Button in Listings angezeigt, wenn erweiterte Preise oder Varianten die direkte Anzeige des Kaufen-Buttons nicht ermöglichen. Im Folgenden kannst Du für diese Fälle einstellen, was angezeigt werden soll.
Produktaktion für Varianten - Hauptprodukt (7): Produktaktion der in der Storefront-Darstellung als Hauptprodukt dargestellten Variante.Details Button | Optionen wählen Button
Für 'Optionen wählen Button' muss Quickview aktiv sein.
Produktaktion für Varianten - Einzelprodukt (8): Produktaktion der in der Storefront-Darstellung nach Eigenschaften aufgefächerten Varianten oder als Einzelprodukt mit vorausgewählter Variante. Details Button | Optionen wählen Button | Warenkorb ButtonDa bei Einzelprodukten klar ist, welche Variante im Warenkorb landet, kann hier ebenfalls ein Warenkorb Button angezeigt werden.
Für 'Optionen wählen Button' muss Quickview aktiv sein.
Produktaktion für Produkt mit erweiterten Preisen (9): Produktaktion von Produkten mit erweiterten Preisen. Details Button | Optionen wählen ButtonDa bei erweiterten Preisen in der Regel der günstigste Preis im Listing angezeigt wird, kann es hier keinen Warenkorb Button geben. (Keine Rechtsberatung)
Für 'Optionen wählen Button' muss Quickview aktiv sein.
Beispiel:
Last updated