Produkt-Boxen
Cards sind die Artikel-Boxen oder auch Produktboxen des Shops.
Last updated
Cards sind die Artikel-Boxen oder auch Produktboxen des Shops.
Last updated
Lege hier eine Hintergrundfarbe der Box fest.
Für das Listing kannst Du nun für jeden einzelnen Viewport definieren, wieviele Produkte in einer Zeile dargestellt werden sollen.
[≡] Abweichende Einstellungen pro Kategorie kannst Du im Bereich Zusatzfelder > Produkte pro Zeile der Kategorie hinterlegen.
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.
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.
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.
Meta-Beschreibung statt Produkt-Beschreibung (5) lässt Dich die angerissene Produkt-Beschreibung, welche im Layout-Typ Standard angezeigt wird, durch die Meta-Beschreibung des Produktes austauschen. Ist keine Meta-Beschreibung vorhanden wird als Fallback wieder die Produkt-Beschreibung verwendet.
Die Option Ersparnis in % (6) stellt die prozentuale Ersparnis bei reduzierten Artikel im Badge an.
Die Aufmerksamkeits-Animation (7) bewegt die Produkt-Box bei Mouseover um wenige Pixel nach oben.
Beispiele:
Ü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:
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.
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.
Beispiel:
Neben den allgemeinen Einstellungen zu Farbe und Typografie kann mit der Option Zeilen (8) 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 Produktbeschreibung ist nur beim Standard Artikel-Layout vorhanden. Der Layout-Typ (1) kann in jeder Kategorie und Erlebniswelt eingestellt werden.
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.
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.
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.
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.
Keine Besonderheiten
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:
Ein Produkt kann Aktionen haben, wie das Hinzufügen des Artikels in den Warenkorb, der Details Button bei Varianten uvm.
Aussehen (1): 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) (2): 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 (3): Aktiviert die Merkzettel Produktaktion, sofern in den Shopware Grundeinstellungen die Merklistenfunktion aktiv ist.
Bestellmengenfeld (4): Zusätzlich zum Warenkorb-Button kann direkt im Listing auch eine Mengenauswahl angezeigt werden.
Produktaktion Button anzeigen (5): 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 (6): 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 (7): 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 (8): 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:
