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:

Sie haben die Möglichkeit, für jede Kategorie ein extra Layout zu bestimmen. Weiter Informationen finden Sie in dem Abschnitt: Kategorie Einstellungen

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

In den Kategorie Einstellungen haben Sie die Möglichkeit die Darstellung des Inhalt zu verändern.

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)

Die Ausgabe der Lieferbarkeit, Produktnummer, Varianten Merkmale und/oder Herstellername aktivieren Sie unter: Produktbox > Einstellungen

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

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

Die Farbeinstellungen für alle Badges tätigen Sie unter: Typografie & Farben

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.

Die Schriftfarbe können Sie unter: Typografie & Farben > E-Commerce ändern

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.

Diese Einstellung gilt für alle Slider im gesamten Shop! Hierunter sind unter anderem auch die Slider auf den Detailseiten betroffen

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.

Diese Einstellung gilt für alle Slider im gesamten Shop! Hierunter sind unter anderem auch die Slider auf den Detailseiten betroffen.

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.

Die Schriftfarbe für die Preise können Sie unter: Typografie & Farben > E-Commerce ändern!

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.

Bleiben Sie im positiven Bereich (z.B 1.2), wird das Bild vergrößert. Verwenden Sie einen negativen Wert (z.B. -1.2) verkleinert sich das Bild um die Prozentzahl

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.

  • 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) Schriftfarbe hover: Geht der Cursor über einen Link, kann sich die Farbe des Links ändern, wenn hier eine Farbe hinterlegt wird

  • 5) Schriftfarbe aktiv: Befindet sich der Nutzer auf der Seite wird der Link 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.

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

Wie Sie einen Google Maps Link erzeugen finden Sie auf der Seite: Theme Einstellungen

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