Produkt-Boxen

Farben

Lege hier eine Hintergrundfarbe der Box 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.

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.

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

Ü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:

Produktbild

Ü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:

Produktbild Größ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.

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.

Produktbewertung

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:

Produktname

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.

Produktbeschreibung

Die Produktbeschreibung ist nur beim Standard Artikel-Layout vorhanden. Der Layout-Typ (1) kann in jeder Kategorie und Erlebniswelt eingestellt werden.

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 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.

Produktpreis

Keine Besonderheiten

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:

Shopware 6 - Einstellungen - Produkte

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: