Product Grid
Zeigen Sie einige Ihrer Produkte in einem Grid an.
Item-ID: 07-002
Beispielansicht Anleitung Verhalten
Beispielansicht
16:9 Verhältnis
Quadratisches Seitenverhältnis
Anleitung
Wichtige Vorab-Informationen:
Bevor Sie ein Product Grid anlegen können, benötigen Sie die einzelnen Produkt-Unterseiten, aus denen das Widget Product Grid seine Auswahl und Darstellung im Frontend speisen kann. Wie man Produktseiten anlegt, haben wir in diesen Tutorials für Sie aufbereitet:
Produktseiten anlegen Produktkategorien anlegen
Product Grid anlegen
- Klicken Sie auf den Button Inhalt, um eine automatisierte Produktübersicht anzulegen.
- Im Reiter Widgets wählen Sie Productgrid.
Produktauswahl I
- Im Dropdown-Menü Product Selection wählen Sie aus einer der drei Optionen manual, subpages of selected pages oder by category.
- By category: Hier wählen Sie ggf. die im Vorfeld vergebenen und zutreffenden Produkt-Kategorien, die der Zuordnung und Filterung automatisierter Produkt-Elemente dient.
Produktauswahl II
- Nach dem Klick auf Seite öffnet sich das Fenster der Datensatzauswahl.
- Manual: Wählen Sie einzelne Produktseiten mit einzelnen Klicks auf die gewünschte Seite aus. In unserem Beispiel steht eine Auswahl von »Produkt 1« bis »Produkt 8« zur Verfügung.
- Subpages of selected pages: Diese Option wählen Sie, wenn Sie Ihre Produkte unterhalb einer Landing Page oder z.B. eines Ordners (siehe Screenshot: Ordner Produkte) sortiert haben. Klicken Sie einzig auf diese übergeordnete Seite und die darunter befindlichen Produktseiten ordnen sich automatisch ein.
Format auswählen
- Klicken Sie auf den Reiter Settings.
- Unter Card settings wählen Sie das Format im Dropdown-Menü. Zur Auswahl stehen das Seitenverhätlnis 16:9 sowie das quadratische Format.
Verhalten
Das Product Grid verhält sich analog zu Image Cards, wenn bis zu vier Produkte und damit bis zu vier Schaltflächen nebeneinander im Frontend ausgespielt werden: jeweils einem Bild mit einem voreingestellten Seitenverhältnis von 16:9 – ein quadratisches Seitenverhältnis ist einstellbar – und einer Beschriftung. Der dazugehörige Link macht das gesamte Element jeweils zu einer Schaltfläche.
Besonderheit: Wenn Sie mehr als vier Produktseiten darstellen/verlinken, reihen sich alle weiteren Produkte in neuen Viererreihen ein. Bei einer Darstellung von zum Beispiel sieben Produkten, werden eine Viererreihe und darunter eine Dreierreihe ausgespielt.
Responsive: Auf kleiner werdenden Endgeräten werden die Viererreihen in zwei Zeilen dargestellt. Auf kleinen Darstellungsflächen werden alle Schaltflächen untereinander angezeigt.
Verknüpfte Themen
Tutorials, die mit diesem Element in Verbindung stehen.