Nutzung von CSS Klassen:
Die Integration von CSS Klassen findet bei den Einkaufswelten Verwendung. Mit einem Klick auf das entsprechende Element, das man anpassen möchte, öffnet sich das Bearbeitungsfenster und man kann in das Feld CSS-Klasse eigen definierte Styling Klassen hinterlegt. Möchte man mehrere hinterlegen, werden diese mit Leerzeichen getrennt.
Das zugehörige CSS für die definierten Klassen können dann über das Theme mit einer Less-Datei oder im Code-Container einer Einkaufswelt abgelegt werden
Mithilfe von Einkaufswelten können Produkte besser präsentiert werden, Kunden beworben, Landingpages erzeugt werden. Der Vorteil ist, dass die Seiten auf verschiedene Endgeräte abgestimmt werden können. Erstellt werden können diese unter Marketing > Einkaufswelten
Nähere Informationen unter:
https://docs.shopware.com/de/shopware-5-de/marketing-und-einkaufswelten/einkaufswelten
Ab der Shopware Version 5.5 wird beim Layout zwischen 3 Optionen unterschieden:
- Fluid/Responsive: bei dieser Einstellung gibt es eine feste Zeilenhöhe
Die Breite der Elemente wird anhand des Endgeräts automatisch angepasst
Die Anordnung und Höhe der Elemente bleibt stets gleich
- Resize/Skalierung: auch hier gibt es eine feste Zeilenhöhe
Entscheidend ist hierbei, dass die Elemente auf den jeweiligen Endgeräten so dargestellt werden wie sie angelegt wurden
Das Format des Elements wird stetig beibehalten und entsprechend dem genutzten Endgerät größer bzw. kleiner skaliert
- Zeilen: bei dieser Option orientiert sich die Zeilenhöhe am längsten Element der Zeile
Alle Elemente werden immer vollständig ohne Beschnitt dargestellt
- Zellen-Abstand: Bei den Grid-Einstellungen können die Abstände zwischen den einzelnen Elementen festgelegt werden.
- Spalten: Durch die Anzahl der Spalten wird festgelegt wie viele Elemente nebeneinander platziert werden können
Um unnötige Ladezeiten zu vermeiden, bietet es sich an unsichtbare Elemente zu bereinigen. Für Google ist die Mobile Version des Shops entscheidend, sodass bei der mobilen Ansicht keine Elemente ausgeblendet werden sollten, denn anderenfalls werden diese für die Suchmaschine nicht gewertet.
Einbauen von Product-Streams:
Product-Streams lassen sich einfach in die Einkaufswelten integrieren. Dabei können für die Produkte verschiedenste Filter verwendet werden wie nur ein bestimmter Hersteller. Somit hat auch jede Änderung am Sortiment automatisch eine Auswirkung auf alle Einkaufswelten, in denen Product-Streams eingesetzt werden
Sofern Bilder mit integriert werden, ist eine Komprimierung dann sinnvoll, sofern diese direkt in den HTML Block eingebaut werden. Einstellungen zur Komprimierung können dabei in der Medienverwaltung im entsprechenden Ordner vorgenommen werden. Zu beachtet gilt, dass
Die Standardbildbreite von mindestens 1160px benötigt wird, damit die Bilder nicht unscharf wirken.
Hinzufügen von Elementen:
Die verschiedenen Elemente können ins Grid gezogen werden, um sie zu platzieren. Der Standard ist, dass ein neues Element größentechnisch immer einer Kachel entspricht. Beim Platzieren wird zwischen einem roten und einem blauen Kästchen entschieden:
- blau -> das Element kann platziert werden
- Rot-> das Element kann hier nicht platziert werden, aufgrund von Überlappungen mit anderen Elementen, zu breit
Über das Icon der Weltkugel lassen sich definierte Inhalte übersetzen. Um den Aufwand geringer zu halten, kann beispielsweise der Shop-Translator verwendet werden. Hierbei handelt es sich um eine vollautomatische künstliche Intelligenz: