Kategorie
Die Kategorie oder auch Listing genannt, listet Deine Produkte auf.
Kategorie-Header
Überlagernder Header
Der Header kann andere Elemente überlagern. Die globalen Einstellungen können in der Theme-Konfiguration vor eingestellt und optional in den Kategorien für jede Kategorie abweichend gesetzt werden.
[ ≡ ] Einstellung pro Kategorie möglich
Soll dieser Effekt auf den überwiegenden Kategorieseiten genutzt werden, können in der Theme-Konfiguration die globalen Einstellungen getätigt werden.
Soll dieser Effekt gezielt auf nur wenigen Kategorieseiten genutzt werden, sollte die Konfiguration in der jeweiligen Kategorie eingestellt werden.
Eine ausführliche Dokumentation findest Du in unseren Tutorials, folge einfach dem folgenden Link:
pageÜberlagernder HeaderHeader Kontrast
Diese Einstellung ist besonders sinnvoll, wenn der Header überlagernd eingestellt wurde und die Hintergrundfarben des Headers in ihrer Deckkraft auf 0% gestellt wurden.
[ ≡ ] Einstellung pro Kategorie möglich
Soll dieser Effekt gezielt auf nur bestimmten Kategorieseiten genutzt werden, kannst Du die Konfiguration in der jeweiligen Kategorie einstellen.
Wird der Header so eingestellt, dass dieser die Elemente der Erlebniswelt überlagert, kann es auf Grund der gewählten Vordergrundfarbe der Elemente des Header zu Kontrastproblemen kommen. Daher bietet das Theme nun die Möglichkeit den über die Einstellung Header Kontrast (1) die Farben des Headers zu ändern. Dabei stehen verschiedene Auswahlmöglichkeiten bereit:
Standard Header: Der Header bleibt farblich, wie in der Theme-Konfiguration definiert.
Heller Header - dunkler Text: Die Vordergrundfarben werden dunkel. Verbessert den Kontrast, wenn helle Bilder / Elemente der Erlebniswelt überlagert werden sollen.
Dunkler Header - heller Text: Die Vordergrundfarben werden hell. Verbessert den Kontrast, wenn dunkle Bilder / Elemente der Erlebniswelt überlagert werden sollen.
Invertierter Header: Vordergrundfarben und Hintergrundfarben werden getauscht. Das Ergebnis hängt stark von den eingestellten Farben der Header Konfiguration ab. Abhängig von Deinen eingestellten Farben variiert das Ergebnis stark. Ob der Kontrast sich bei hellen oder dunklen Bildern / Elementen der Erlebniswelt verbessert, hängt ebenfalls von Deiner Header Konfiguration ab.
Für die verschiedenen Kontrast Header lassen sich zusätzliche Logos im Tab Logos hinterlegen. So kannst Du auch eine invertierte Version Deines Logos anzeigen.
Beispiele:
Hero Sektion
Das Kategoriebild kann automatisiert in die erste Sektion der Erlebniswelt als Hintergrund eingelesen werden. Dadurch wird es möglich die Erlebniswelten Blöcke auf dem Hintergrundbild zu platzieren.
Die globalen Einstellungen können in der Theme-Konfiguration vor eingestellt und optional in den Kategorien für jede Kategorie abweichend gesetzt werden.
[ ≡ ] Einstellung pro Kategorie möglich
Soll dieser Effekt auf den überwiegenden Kategorieseiten genutzt werden, können in der Theme-Konfiguration die globalen Einstellungen getätigt werden.
Soll dieser Effekt gezielt auf nur wenigen Kategorieseiten genutzt werden, sollte die Konfiguration in der jeweiligen Kategorie eingestellt werden.
Eine ausführliche Dokumentation findest Du in unseren Tutorials, folge einfach dem folgenden Link:
pageHero SektionFilter
Filter können über die Erlebniswelt horizontal im Hauptinhaltsbereich der Seite oder aber in der Sidebar als vertikales Element dargestellt werden.
Farben
Beispiel:
Grundeinstellungen
In den Grundeinstellungen der Filter können neben allgemeinen Einstellungen zum Schriftbild (1, 2, 3, 4) ein Auf- / Einklappen Icon (5) zum Aufklappen der Filter wie auch eine Trennlinie (6) zwischen den Filter-Optionen gewählt werden.
Die Option Filteroptionen ohne Ergebnisse ausblenden (7) verstärkt die im Standard von Shopware bereits enthaltene Funktion "Filteroptionen ohne Ergebnisse deaktivieren". Wenn aktiv, werden die Filteroptionen ohne Ergebnisse ausgeblendet.
Diese Einstellung greift nur, wenn unter Einstellungen > Produkte die Option "Filteroptionen ohne Ergebnisse deaktivieren" aktiv ist.
Beispiel:
Sidebar Filter
Die Filter in der Sidebar können mit Hilfe des Themes auch geöffnet dargestellt werden. Dadurch sind die Filter ersichtlicher und die Filterung fällt dem Kunden leichter. Dabei kannst Du beschränken, wie viele Filter geöffnet dargestellt werden sollen.
Hast Du sehr viele Filter, kannst von Vorteil sein zu beschränken, wie viele Filter direkt ausgeklappt werden sollen.
Beispiel:
Listing Actions
Der Listing Actions Zeile kann ein Rahmen oben und unten vergeben werden. Dabei werden automatisch Abstände hinzugefügt, sodass die Rahmen nicht an den Elementen kleben.
Beispiel:
Produkt-Boxen (Cards)
Cards sind die Artikel-Boxen oder auch Produktboxen des Shops.
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.
[≡] Abweichende Einstellungen pro Kategorie kannst Du im Bereich Zusatzfelder > Produkte pro Zeile der Kategorie hinterlegen.
Produkte pro Zeile (bei aktiver 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.
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.
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.
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.
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.
Produktpreis
Keine Besonderheiten
Produktaktionen
Ein Produkt kann Aktionen haben, wie das Hinzufügen des Artikels in den Warenkorb, der Details Button bei Varianten oder unsere Zusatzfunktion Quickview (Vorschau).
Aussehen (desktop) (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.
Quickview (3): Mit der Vorschau aktivierst Du die Quickview Funktion.
Bestellmengenfeld (4): Zusätzlich zum Warenkorb-Button kann direkt im Listing auch eine Mengenauswahl angezeigt werden.
Bewertungen Position (5): Produkt-Bewertungen können das Produktbild unten mittig oder oben rechts überlagern. Im Standard können diese auch über dem Produkttitel angezeigt werden.
Bewertungen Platzhalter (6): Zeigt inaktive Sterne als Platzhalter an, sollte das Produkt noch keine Bewertungen haben.
Detail Button immer anzeigen (7): Diese Option sorgt dafür, dass ein Detail-Button auch dann angezeigt werden kann, wenn die Option "Kaufenbutton in Produktlistings anzeigen" in den Einstellungen des Shops deaktiviert wurde. Die Option modifiziert die Funktionsweise der "Kaufen-Buttons in Produktlistings anzeigen" Option.
Detail Button bei Varianten anzeigen (8): Shopware 6 zeigt normalerweise auch bei der Hauptvariante im Listing einen Kaufenbutton an. Dieses Verhalten lässt sich mit dieser Option zu einem Detail Button ändern.\
Mehr Informationen zum Kaufenbutton: https://docs.shopware.com/de/shopware-6-de/einstellungen/produktliste#kaufen-buttons-2
Beispiele:
Last updated
