Das Produktraster einrichten

Das Produktraster ist deine Suchergebnisseite, mit den Produkten der Kollektion. Karten, Badges, Bewertungssterne, Farben und CSS kommen aus deinem Suchdesign. Das Raster sieht also immer aus wie deine Suche und ändert sich mit ihr. Shopify entscheidet weiterhin, welche Produkte in der Kollektion sind, und liefert Filter, Sortieroptionen und Seitenaufteilung. Du entscheidest über die Banner zwischen den Reihen, das Layout und das, was wiederkehrende Kunden sehen.

Rastereinstellungen öffnen

1. Öffne deine Vorlage unter Live on your store → Collection pages im Tab Design.
2. Klick in der Arbeitsfläche auf das Produktraster, um es auszuwählen.
3. Klick in der Werkzeugleiste auf Settings. Das Panel Product grid öffnet sich mit vier Tabs: Design, Personalize, Banners und Layout.

Änderungen erscheinen sofort in der Arbeitsfläche und werden automatisch gespeichert.

Design: der Look deiner Suche

Unter Search design wählst du, von welchem Suchdesign das Raster seinen Look übernimmt:

• Your store's search, die Voreinstellung, folgt dem Suchdesign, mit dem die Suche deines Shops läuft. Stellst du deinen Shop später auf ein anderes Suchdesign um, zieht das Raster mit.
• Jedes andere Suchdesign, nach Name, um das Raster genauso zu gestalten.

Karten, Schnellkauf, Badges, Bewertungssterne, Bild-Hover oder Farben ändern? Klick unter der Auswahl auf Edit. Das öffnet das Suchdesign selbst. Was du dort änderst, ist sofort auf deinen Live-Kollektionsseiten, ohne neu zu veröffentlichen. Läuft in deinem Shop noch keine Suche, nutzt das Raster das Standarddesign, bis du eines wählst.

Soll eine Seite anders aussehen als deine Suche? Klick unter Only on this page auf Edit page CSS. Dieses CSS kommt auf das Suchdesign obendrauf, auch im Raster, und gilt nur für diese Vorlage. Willst du das Raster auf allen Kollektionsseiten ändern, aber nicht in der Suche, schreib das CSS in dein Suchdesign und beginne die Regel mit .sb-panel--collection.

Karten auf dieser Seite

Unter Cards on this page folgt jede Kartenoption deinem Suchdesign, bis du dieser Seite einen eigenen Wert gibst: Quick add, Variant swatches, Image hover, Badges (auf dieser Seite ausgeblendet) und Prices (mit oder ohne MwSt., wenn dein Suchdesign einen MwSt.-Satz hat). Die erste Wahl, „Same as search“, zeigt, was dein Suchdesign gerade hat, und folgt ihm wieder, sobald du sie wählst. Nichts wird kopiert, eine Seite, die der Suche folgt, geht also jede Änderung dort mit.

Badges nur auf dieser Seite

Mit Add badge unter Badges on this page only fügst du Badges hinzu, die nur diese Seite zeigt. Sie funktionieren wie die Badges in deinem Suchdesign: ein Sale-Badge ab einem Mindestrabatt, ein Tag-Badge für Produkte mit bestimmten Tags oder ein Ausverkauft-Badge. Sie erscheinen nach den Badges deines Suchdesigns. Willst du nur die Badges dieser Seite zeigen, stell Badges auf Hidden on this page. Seiten-Badges sind im Shop, sobald du veröffentlichst oder neu veröffentlichst.

Personalize

Im Tab Personalize findest du die Schalter für wiederkehrende Kunden: die Reihe „Für dich“ über dem Raster, personalisierte Badges, das Weitermachen, wo sie aufgehört haben, und vorgeschlagene Filter. Siehe Kollektionsseiten personalisieren.

Banner zwischen den Reihen

Banner sehen aus wie die Quizkarten in deinen Suchergebnissen und öffnen ein Quiz. Sie wirken genau dort, wo Kunden anfangen, durch zu viele Optionen zu scrollen.

1. Klick im Tab Banners auf Add banner. Es startet mit fertigem Text.
2. Bearbeite Heading, Subheading und Button text.
3. Wähle das Linked quiz. Das Banner öffnet dieses Quiz.
4. Wähle ein Placement. Full-width row nimmt eine ganze Reihe des Rasters ein. Single card nimmt den Platz eines Produkts ein und schiebt die übrigen weiter.
5. Stell Rows above für ein Banner über die volle Breite ein, oder Products before für eine einzelne Karte.
6. Füg bei Bedarf ein Background image hinzu und stell Background und Text color ein. Leer gelassen, nutzt das Banner die Akzentfarbe deines Suchdesigns.

Klick in der Arbeitsfläche auf ein Banner, um direkt zu ihm zu springen. Banner erscheinen nur auf der ersten Seite der Kollektion. Hat eine Kollektion weniger Produkte, rückt ein Banner hinter das letzte Produkt. Ein Banner ohne verknüpftes Quiz bleibt in der Arbeitsfläche sichtbar, verblasst, ist in deinem Shop aber ausgeblendet.

Hat dein Shop mehr als eine Sprache oder einen Markt, legt Where fest, wer ein Banner sieht. Die Texte eines Banners für jede Sprache übersetzt du unter Translations. Sie erscheinen in deinem Shop, sobald du erneut veröffentlichst. Solange ein Banner nicht in eine Sprache übersetzt ist, sehen Kunden in dieser Sprache es nicht, und ein Banner erscheint nur dort, wo auch sein Quiz übersetzt ist. Prüf das mit der Sprachauswahl im Schritt Preview. Ein Banner für eine Sprache ist in dieser Sprache geschrieben und erscheint in jedem Markt, der sie spricht. Das eigene Banner eines Markts erscheint nur in diesem Markt.

Layout

• Products per page: wie viele Produkte erscheinen, bevor die Seite auf die nächste verlinkt. Standard sind 24.
• Show filters: die Filter, die du in der Shopify-App Search & Discovery eingerichtet hast, in derselben Seitenleiste wie deine Suchergebnisse. Auf dem Handy öffnen sie sich über einen Filter-Button. Eine Kollektion ohne Filter in Search & Discovery zeigt keine.
• Show sorting: Kunden können mit den Sortieroptionen von Shopify sortieren, etwa nach Preis oder Bestsellern.

Smart order

Standardmäßig behalten die Produkte die Reihenfolge, die du in Shopify für die Kollektion festgelegt hast. Schalte Smart order ein, damit bluebarry die Kollektionen dieser Seite danach ordnet, wie ihre Produkte in deinem Shop laufen:

• Produkte, die Kunden ansehen, in den Warenkorb legen und kaufen, kommen zuerst. Aktuelle Aktivität zählt mehr als ältere.
• Ausverkaufte Produkte rücken hinter die verfügbaren.
• Neue Produkte bekommen einen fairen Platz in der Mitte, bis sie eigene Daten haben, statt unten anzufangen.

bluebarry schreibt die Reihenfolge direkt in Shopify, also folgt ihr jede Seite der Kollektion, und Kunden können weiterhin selbst sortieren. Auf einer veröffentlichten Seite wirkt es, sobald du es einschaltest, und die Reihenfolge wird täglich aktualisiert. Solange es an ist, sortieren die Kollektionen in Shopify manuell. Schaltest du es aus, nimmst du die Veröffentlichung der Seite zurück oder löschst sie, oder entfernst du eine Kollektion von ihr, bekommt die Kollektion ihre eigene Sortierung zurück, und eine von Hand sortierte Kollektion ihre eigene Reihenfolge. Das Panel zeigt, wann die Reihenfolge zuletzt aktualisiert wurde, und pro Kollektion eine Meldung, falls Shopify sie abgelehnt hat.

Gut zu wissen

• Der Schnellkauf nutzt dieselbe Warenkorbverbindung wie deine Quizze und deine Suche, sodass der Warenkorbzähler deines Themes ohne Neuladen aktualisiert wird.
• Die Rastereinstellungen gehören zur Vorlage. Jede Kollektion, die sie nutzt, bekommt dasselbe Layout, mit ihren eigenen Produkten.
• Änderungen an Bannern, Layout und Personalisierung sind im Shop, sobald du veröffentlichst oder neu veröffentlichst. Siehe Eine Kollektionsseite zuweisen und veröffentlichen.