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 voreingestellt 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 unter:
Kategorie 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 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 unter:
Kategorie HeaderHero 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:
Hero 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 Filteroptionen 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 (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.
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 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 Button
Da 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 Button
Da 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:
Quickview
Grundeinstellungen
Beispiel:
Last updated