Produkt Kategorie
Die nachfolgenden Einstellungen haben Auswirkungen rund um die Darstellung der Kategorien, der Seite für die Suchergebnisse und teilweise für die Landingpage.
Produkt Listing
Hier bestimmen Sie allgemein die Farben, Rahmen + Rahmenfarbe und Schriftfarbe des Produkt Listing.
1) Rahmen + Rahmenfarbe: Hier haben Sie die Möglichkeit einen Rahmen um das gesamte Listing (mit Sortierung) zu legen
2) Hintergrundfarbe: Bestimmen Sie eine Hintergrundfarbe, welche das gesamte Listing einschließt. Die Farben für die Produktboxen und die Sortierfunktion werden an anderer Stelle festgelegt.
Produkt Box
In diesem Abschnitt legen Sie die grundlegende Darstellung der Produkte im Listing fest. Hierzu zählt unter anderem das Layout, die Einstellungen für Badges, Kurzbeschreibung, Aktion Buttons sowie die Farbeinstellungen.
Produkt Layout
Produkt Layout
Hier stellen Sie ein, wie viele Produkte in einer Zeile dargestellt werden sollen. Insgesamt 3 Optionen stehen Ihnen zu Auswahl:
3 Boxen: Hier werden die drei Produkte in einer Spalte dargestellt. Hierbei wird die Nutzung der Sidebar vorausgesetzt. Wird die Sidebar nicht genutzt, erscheinen 4 Produkte nebeneinander.
2 Boxen: Bei dieser Darstellung werden zwei Produkte nebeneinander dargestellt. Hierbei hat die Nutzung der Sidebar keinen Einfluss auf die Darstellung.
Liste: Bei dieser Option wird In einer Zeile ein Produkt ausgegeben. Die Produktbox erstreckt sich über die gesamte Zeile.
Ausrichtung des Inhalts
Hier können Sie einstellen, wie der Inhalt in den Produktboxen positioniert werden soll. Hierbei wird folgende Inhalte ausgerichtet:
Die Ausrichtung des Inhaltes greift nur bei dem Produkt Layout 3 Boxen
Produktname
Kurzbeschreibung
Preis & Pseudopreis
Angabe des Grundpreis (wenn vorhanden)
Lieferbarkeit (wenn Ausgabe aktiv)
Produktnummer (wenn Ausgabe aktiv)
Herstellername (wenn Ausgabe aktiv)
Varianten Merkmale (wenn Ausgabe aktiv)
Außenabstand und Innenabstand
Mit den Abständen können Sie die Entfernung zwischen den Produktboxen bzw. dem Rand der Produktbox und des Inhalts bestimmen. Beide sind unabhängig einstellbar und werden in Pixel angegeben.
1) Außenabstand: Hiermit definieren Sie den linken und rechten Außenabstand zu dem nächsten Objekt.
2) Innenabstand: Mit dieser Einstellung definieren Sie den Abstand zwischen Rand der Produktbox und den Inhalt. Sie ändern den oberen, unteren, linken und rechten Abstand.
Hover Effekt
Sie können optisch die Produktboxen hervorheben, über die sich der Nutzer mit dem Cursor befindet. Hierbei habe Sie die Auswahl zwischen: Rahmen, Schatten oder Rahmen und Schatten.
Einstellungen
Hier haben Sie die Möglichkeit den Inhalt einer Produktbox zu erweitern zudem können Sie entscheiden ob und wo Bewertungen angezeigt werden sollen. Diese Inhalte können Sie zusätzlich ausgeben:
1) Lieferstatus ausgeben (bzw. Erscheinungsdatum ausgeben)
2) Grundpreis anzeigen
3) Produktnummer anzeigen
4) Hersteller anzeigen
5) Varianten Merkmale anzeigen
6) Varianten günstigster Preis anzeigen
7) Bewertung anzeigen
7) Bewertung Position (über bzw. unter Produktbeschreibung)
Für die Ausgabe des Lieferstatus, der Produktnummer und des Hersteller muss in den Kategorie Einstellungen: Layout > Kategorie Listing > Layout-Typ der Wert der Wert Standard ausgewählt sein.
Einstellungen Badges
Position
Für die Positionierung stehen Ihnen jeweils 2 Optionen für den linken und 2 Optionen für den rechten Bereich der Produktbox zur Verfügung.
Sale bzw. Discount Badge
Hier haben Sie Einfluss auf die Badges im Listing. Vor allem auf das Sale bzw. Discount Badge können Sie Einfluss nehmen. Als Option stehen Ihnen drei Darstellungsmöglichkeiten zur Verfügung.
Sollten Sie sich für das prozentuale bzw. absolute Ergebnis entscheiden, können Sie das Ergebnis runden lassen um so eine optisch bessere Anzeige zu erhalten. In den angegebenen Beispielen wären es 33 % bzw. 150 €.
Badge Versandkostenfrei
Zusätzlich haben Sie die Möglichkeit ein neues Badge bei Artikeln, welche Sie als Versandkostenfrei markiert haben, erscheinen zu lassen. Aktivieren Sie hierzu die Einstellung: Badge Versandkostenfrei anzeigen
Produktname
Farben und Typografie
Für den Produktnamen haben Sie die Möglichkeit die Schriftart, die Schriftgröße und Schriftstärke, Schriftfarbe und Schriftfarbe bei Mouse Hover separat zu den anderen Texten in der Produktbox zu ändern und den Produktnamen somit hervorzuheben.
Zusätzlich haben Sie die Möglichkeit per Text Transform den gesamten Produktnamen mit Groß- oder Kleinbuchstaben ausgeben zu lassen.
Anzahl der Zeilen
Mittels Anzahl der Zeilen können Sie den Platz für den Produktnamen definieren. Haben Sie z. B. lange Artikelnamen können zusätzliche Zeilen Abhilfe schaffen. Die zusätzlich Höhe wird für alle Produktboxen verwendet, egal ob das Produkt diese benötigt oder nicht. Sie haben die Möglichkeit bis zu 4 Zeilen auszugeben.
Sollten Sie die zusätzlichen Zeilen nicht für den Produktnamen benötigen, können Sie diese verwenden um einen größeren Abstand zwischen Produktnamen und Kurzbeschreibung zu bekommen.
Kurzbeschreibung
Standardmäßig ermittelt Shopware die Kurzbeschreibung aus der Langbeschreibung. Hier werden die ersten Sätze der Langbeschreibung herangezogen und nach eine bestimmte Zeichenanzahl abgeschnitten. Sie haben allerdings auch die Möglichkeit zwei andere Quellen zu nutzen:
Kurzbeschreibung
aus der Meta-Beschreibung anzeigen: Hier wird der Text verwendet, welchen Sie in den Einstellungen eines Produktes im Tap: SEO > Meta-Beschreibung hinterlegen.
aus dem Zusatzfeld anzeigen: Eine weitere Möglichkeit ist das mitgelieferte Zusatzfeld. Sie finden dieses in den Einstellungen für ein Produkte im Tap: Spezifikationen > Kurzbeschreibung
Achten Sie darauf, dass der Inhalt der Kurzbeschreibung eventuell auch für die Detail Einstellungen: Allgemein > Kurzbeschreibung genutzt wird
Typografie
Für die Kurzbeschreibung im Listing haben Sie die Möglichkeit die Schriftgröße und die Schriftstärke zu verändern
Grundpreise
Die Grundpreise werden standardmäßig etwas kleiner als die restlichen Texte in der Produktbox angezeigt. Sie haben hier die Möglichkeit die Schriftgröße, Schriftstärke und Schriftfarbe für diese spezielle Information zu ändern.
Produktpreise
Um den Produktpreis speziell hervorzuheben, können Sie hier ebenfalls die Schriftgröße und Schriftstärke anpassen.
Aktion Buttons
Die Aktion Buttons können auf drei Anzeigemöglichkeiten dargestellt werden. Zu den Aktion Buttons gehören: In den Warenkorb bzw. Detail, Schnellansicht (wenn aktiv) und der Merkzettel (wenn aktiv).
Hover-Effekt
Shopware Standard: Hier werden die Buttons dauerhaft dargestellt. Sie sind zu jederzeit für den Benutzer sichtbar.
Aktion Buttons per Overlay einblenden (senkrecht oder waagerecht): Bei diesen Varianten werden die Buttons ausgeblendet und fahren erst ein, wenn der Benutzer mit dem Cursor über die Produktbox geht. Die Buttons werden je nach Auswahl senkreckt oder waagerecht eingeblendet. Sie verschwinden, wenn der Cursor sich nicht mehr auf der Produktbox befindet.
Auswahl der Button-Einblendung
Detail-Button immer anzeigen: Sie möchten, dass ihre Kunden immer den Button zur Detailseite sehen. Der Warenkorb Button soll nicht erscheinen, dann schalten Sie diese Option auf aktive.
Detail-Button bei Varianten anzeigen: Sie möchten bei Variantenartikel immer den Button zur Detailseite anzeigen, dann schalten Sie diese Option auf aktiv.
Wichtig bei beiden Optionen ist, dass die Grundeinstellung von Shopware: Einstellungen > Shop > Produkte > Kaufen-Buttons in Produktlistings anzeigen, deaktiviert ist
Schnellansicht-Button anzeigen: Dieser Button ermöglicht dem Kunden bereits auf der Detailseite alles wichtige über das Produkt zu sehen. in einem engeschwebten Fenster werden die wichtigsten Daten angezeigt. Sie können das Fenster in den Kategorie Einstellungen > Quickview (Schnellansicht) konfigurieren
Aktion Buttons im Produkt Slider
Kaufen-Button / Detail-Button anzeigen
Mit dieser Einstellung können Sie den Kauf bzw. Detail-Button in den Slider ausblenden.
Die System Einstellung: Kaufen-Button / Detail-Button anzeigen muss aktiviert sein!
Schnellansicht-Button anzeigen
Damit die Schnellansicht im Slider angezeigt wird, muss die Einstellung aktiviert werden.
Die Einstellung für das geöffnete Fenster der Schellansicht machen Sie bei: Quickview (Schnellansicht)
Merkzettel-Button anzeigen
Sollten Sie den Merkzettel-Button in den Slidern anzeigen, muss diese Funktion + die Einstellung in den System Einstellung: Shop > Warenkorb > Merkzettel gesetzt sein
Farben Produkt Box & Produktbild
Sie haben hier die Möglichkeit farbliche Akzente für die Produktboxen zu setzen. Hierbei sind die Einstellungen zum einen für die gesamte Produktbox und speziell für das Produktbild möglich.
Farben Produkt Box
1) Rahmen anzeigen und Rahmenfarbe: Mit dieser Einstellung setzen Sie einen Rahmen um die Produktbox und definieren die Rahmenfarbe.
2) Hintergrundfarbe: Hiermit können Sie der gesamte Produktbox eine Hintergrundfarbe hinterlegen.
3) Schriftfarbe: Diese Einstellung ändert die Schriftfarbe für alle Texte in der Produktbox.
Farben Produktbilder
4) Rahmen anzeigen und Rahmenfarbe: Mit dieser Einstellung setzen Sie einen Rahmen um den Bildbereich und definieren die Rahmenfarbe.
5) Hintergrundfarbe: Hiermit können Sie eine Hintergrundfarbe für den Bildbereich festlegen.
Produktbild Wechsel / Zoom
Fügen Sie einen Eyecatcher beim überfahren der Produktbox mit dem Cursor hinzu. Mit Hilfe dieser Funktion können Sie ihr Produktbild animieren. Hierfür stehen Ihnen zwei Optionen zur Verfügung: Bildzoom und Bildwechsel.
Bildzoom
Für den Bildzoom aktivieren Sie die Funktion und wählen unter: Effekt die Option: Bildzoom aus.
Zoom Faktor
Für die Option: Bildzoom bekommen Sie die Möglichkeit zu bestimmen, um wie viel Prozent das Produktbild vergrößert werden soll.
Bildwechsel
Wie beim Bildzoom muss die Funktion aktiv geschalten werden. Wählen Sie danach unter: Effekte die Option: Bildwechsel.
Dauer des Ãœbergangs
Hier bestimmen Sie, wie lange die Animation von Anfang bis Ende dauern soll. Sie können von Sofort bis 1 Sekunde auswählen
Geschwindigkeitskurve
Mit der Geschwindigkeitskurve bestimmen Sie, wie der Ablauf der Animation erfolgen soll. Die Unterschiede sind sehr dezent:
ease: Animation startet etwas langsamer > beschleunigt > klingt danach langsam ab
linear: Konstante Geschwindigkeit über die gesamte Animation
ease-in: Startet langsam und beschleunigt gegen Ende der Animation
ease-out: Startet schnell und bremst gegen Ende der Animation langsam aus
ease-in-out: Startet langsam > beschleunigt in der Mitte > und bremst gegen Ende der Animation (ähnlich wie ease, aber dramatischer)
Sidebar Navigation
Einstellungen
Nur gewählte Kategorie + Unterkategorien im linken Kategoriebaum anzeigen
Standardmäßig werden in Shopware alle Haupt- und Unterkategorien in der Sidebar ausgegeben. Mit dieser Einstellung wird nur die gewählte Hautkategorie mit deren Unterkategorien ausgegeben
Typographie
Hier haben Sie die Möglichkeit, die Navigationspunkte auf die unterschiedlichste Weise hervorzuheben
Schriftart: Wählen Sie zwischen ihrer eigestellten Schriftart Text oder Überschrift. Die Schriftarten definieren Sie unter: Typografie & Farben > Typografie. Diese Einstellung wird auf die Haupt- sowie die Unterkategorien angewendet.
Schriftgröße: Wählen Sie die Größe der Schrift aus. Die Angaben erfolgen in Pixel. Die Einstellung übernehmen die Unterkategorien. Die Hauptkategorie wird automatisch 2 Pixel größer dargestellt.
Schriftstärke (inaktiv & aktiv): Definieren Sie die Schriftstärke (dünn, normal oder fett) für aktive und deaktivierte Navigationspunkte. Beide können separat gewählt werden.
Text Transform: Sie können diese Navigationspunkte nur in Großbuchstaben bzw. nur in Kleinbuchstaben anzeigen lassen. Diese Einstellung wird auf die Haupt- sowie die Unterkategorien angewendet.
Farben
Die Sidebar können Sie ebenfalls farblich hervorheben. Ob Sie die Funktion: Nur gewählte Kategorie + Unterkategorien in Sidebar anzeigen aktiviert haben oder nicht ist hiervon unabhängig.
1) Rahmen anzeigen und Rahmenfarbe: Mit dieser Einstellung setzen Sie einen Rahmen um die Produktbox und definieren die Rahmenfarbe.
Die Linie zwischen Hauptkategorie und Unterkategorien wird nicht eingefärbt. Hier greift die Einstellung von: Typografie & Farben > Theme-Farben > Rahmen
2) Hintergrundfarbe: Hiermit können Sie eine Hintergrundfarbe für die Sidebar festlegen.
3) Schriftfarbe: Diese Einstellung ändert die Schriftfarbe für alle Texte in der Sidebar.
4) Schrift- und Hintergrundfarbe bei hover: Geht der Cursor über einen Link, kann sich die Farbe des Hintergrundes und der Schrift ändern.
5) Schrift- und Hintergrundfarbe bei aktiv: Befindet sich der Nutzer auf der Seite wird der Hintergrund und die Schrift in der Farbe ausgeben, welche hier hinterlegt wird. Zusätzlich wird die Schrift fett ausgegeben.
6) Trennlinie: Definieren Sie die Farbe der Trennline zwischen der Hauptkategorie und den aufgelisteten Unterkategorien.
Filter
Einstellungen
Standardmäßig sind die Filter bei Shopware geschlossen. Der Nutzer muss aktive draufklicken um, die Filtereigenschaften zu sehen. Mit der nachfolgenden Funktion können Sie das ändern
Filter immer offen
Genau das Gegenteil vom Shopware Standard macht diese Funktion. Wenn aktiv, werden alle Filter mit ihren Filtereigenschaften ausgeklappt und sichtbar dargestellt.
Die ersten x Filter öffnen
Hier können Sie ein Anzahl festlegen, wie viel Filter bereits ausgeklappt angezeigt werden sollen. Es werden immer die erste (x=Anzahl) Filter geöffnet.
Seitlicher Innenabstand
Sie können den Innenabstand von rechts und links bestimmen. Hierbei wird die Überschrift sowie die Auswahloptionen nach Innen gerückt. Der Innenabstand kann von 0 - 20 Pixel geändert werden
Die Trennlinien der einzelnen Filter zeigen Ihnen die Breiten der Container an.
Typographie
Die Einstellungen der Typografie wirken sich auf die Ãœberschrift sowie die Auswahloptionen aus.
Schriftgröße: Wählen Sie die Größe der Schrift aus. Die Angaben erfolgen in Pixel.
Schriftstärke: Definieren Sie die Schriftstärke (dünn, normal oder fett).
Text Transform: Sie können die Texte in den Filtern nur in Großbuchstaben bzw. nur in Kleinbuchstaben anzeigen lassen.
Farben
1) Rahmen + Rahmenfarbe: Hier ist der Rahmen um den gesamten Container der Filter gemeint
2) Hintergrundfarbe: Bestimmen Sie die Hintergrundfarbe des Containers der Filter
3) Schriftfarbe: Legen Sie die Schriftfarbe für alle Texte im Containers fest.
4) Trennlinien: Bestimmen Sie die Farbe der Linie, welche am Ende jedes Filters eingeblendet wird.
Pagination und Sortierung
Die Paginierung und die Sortierung befindet sich über der Auflistung der Produktboxen. Sie kann farblich angepasst werden. Hierbei ist es Möglich die Hintergrundfarbe, die Schriftfarbe und einen Rahmen mit Rahmenfarbe zu ändern.
Einstellung
1) Rahmen + Rahmenfarbe: Hier ist der Rahmen um den gesamten Container der Paginierung und Sortierung gemeint
2) Hintergrundfarbe: Bestimmen Sie die Hintergrundfarbe des Containers der Paginierung und Sortierung
Farben Buttons
1) Hintergrundfarbe: Bestimmen Sie die Hintergrundfarbe des Containers der Paginierung und Sortierung
2) Schriftfarbe: Diese Einstellung ändert die Schriftfarbe für alle Texte in der Sidebar.
3) Schrift- und Hintergrundfarbe bei hover: Geht der Cursor über eine Button der Paginierung , kann sich die Farbe des Hintergrundes und der Schrift ändern.
4) Schrift- und Hintergrundfarbe bei aktiv: Ist der Button aktive wird der Hintergrund und die Schrift in der Farbe ausgeben, welche hier hinterlegt wird.
5) Schrift- und Hintergrundfarbe bei disabled: Hierrunter sind alle Buttons gemeint, welche inaktiv gesetzt sind. Hintergrund- und Schriftfarbe können frei gewählt werden.
Sidebar Kontakt Box
Die Sidebar Kontakt Box ist ein Feature welches einerseits global in jeder Sidebar angezeigt werden kann oder Sie bestimmen selber über die Erlebniswelten, wo die Sidebar Kontakt Box angezeigt werden soll. Hierfür gibt es eine eigenes Blockelement für die Erlebniswelten.
In den Einstellungen für dieses Features legen Sie fest:
Auf welche Viewports die Funktion dargestellt werden soll
Wie die Headline lauten soll
Angabe der allgemeinen Kontaktdaten (die Angaben sind freiwillig) wie: Anschrift, Öffnungszeiten, Telefonnummer, Mobil, Fax, E-Mail. Sie können als globale Einstellung für das Blockelement in den Erlebniswelten genutzt werden
Möglichkeit Google Maps Link auszugeben
Quickview (Schnellansicht)
Das Quickview oder auch Schnellansicht genannt, erzeugt ein Fenster mit den wichtigsten Informationen zu dem gewählten Produkt. Man kann es ebenfalls als Vorschaufenster für die Detailseite ansehen.
In den Einstellungen für dieses Features legen Sie fest:
Auf welche Viewports die Funktion dargestellt werden soll
Option auswählen Quickview im Slidern anzeigen
Bestimmung des Button Style für das Listing und in der Schnellansicht
Hintergrundfarbe und Schriftfarbe für das Fenster der Schnellansicht
Möglichkeit zur Anzeige der Produktnummer und Produktbeschreibung
Button Style
Sie haben die Möglichkeit das Aussehen des Button im Produkt Listing und im Quickview unterschiedlich zu gestalten. Hierfür stehen Ihnen 15 vordefinierte Buttons zur Auswahl. Welche Auswahlmöglichkeiten Sie haben, finden Sie unter: Theme Einstellungen > Button Style auswählen.
Button Style in Produkt Listings: Hier definieren Sie das Aussehen des Button unter dem Warenkorb Button in der Produkt Box
Button Style in Quickview: Hier definieren Sie das Aussehen des Detail Buttons in dem Quickview Fenster
Last updated