Das Produktraster einrichten

Das Produktraster ist das Herzstück jeder Kollektionsseite. Shopify entscheidet weiterhin, welche Produkte in der Kollektion sind. Du entscheidest, wie sie aussehen, welche Filter Kunden bekommen und wo Banner die Reihen unterbrechen, um Unentschlossenen zu helfen.

Rastereinstellungen öffnen

1. Öffne deine Vorlage unter Merchandising → 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: Banners, Filters, Cards und Order.

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

Cards: Layout und Produktdetails

Im Tab Cards legst du fest, wie die Produkte angeordnet sind und was jede Karte zeigt.

• Columns (desktop): 3, 4 oder 5. Columns (mobile): 1 oder 2.
• Products per page: wie viele Produkte erscheinen, bevor es auf der nächsten Seite weitergeht. Standard sind 24. Der Seitenwechsel funktioniert wie auf deinen normalen Shopify-Kollektionsseiten.
• Image ratio: Portrait, Square oder Landscape. Wähl, was zu deinen Produktfotos passt.
• Emphasize sale prices: streicht den ursprünglichen Preis durch, hebt den Angebotspreis hervor und ergänzt ein Rabatt-Badge wie „-20%“.
• Quick add button: Kunden legen ein Produkt in den Warenkorb, ohne die Seite zu verlassen. Produkte mit mehreren Varianten bekommen stattdessen einen „Choose options“-Button, der die Produktseite öffnet. Ausverkaufte Produkte zeigen „Sold out“.
• Show vendor und Show description: ergänzen jede Karte um die Marke und eine kurze Beschreibung.
• Show sort dropdown: Kunden sortieren mit den Optionen, die Shopify anbietet, etwa nach Preis oder Bestsellern.

Filter

Filter und ihre Bezeichnungen kommen aus der Shopify-App Search & Discovery. Kunden bekommen also dieselben Filter wie im Rest deines Shops. Einen neuen Filter, etwa für Größe, Hauttyp oder Preis, richtest du in Search & Discovery ein. Er erscheint dann automatisch hier. Im Tab Filters steuerst du, wie sie angezeigt werden:

• Show filters: schaltet die Filter ein oder aus.
• Side: Left oder Right neben den Produkten.
• Collapsed by default: zeigt nur die Filternamen, bis ein Kunde einen aufklappt.
• Style: Sidebar zeigt die Filter auf größeren Bildschirmen neben den Produkten. Drawer versteckt sie hinter einem Filter-Button, der sie einblendet.

Auf Smartphones öffnen sich die Filter immer über einen Filter-Button, egal welchen Stil du wählst. Hat eine Kollektion in Search & Discovery keine Filter, gibt es einfach keine Filterspalte.

Banner zwischen den Reihen

Banner unterbrechen das Produktraster nach einer Reihe deiner Wahl. Ideal für eine Quiz-Einladung genau dort, wo Kunden anfangen, durch zu viele Optionen zu scrollen.

1. Klick im Tab Banners auf Add banner. Es startet mit fertigem Text: „Not sure what to pick?“.
2. Bearbeite Heading, Subheading und Button text.
3. Wähl das Linked quiz. Der Button öffnet dieses Quiz.
4. Wähl eine Placement. Full-width row geht über das ganze Raster. Single card nimmt den Platz eines Produkts ein und schiebt die übrigen weiter.
5. Leg After row fest. Ein Banner über die volle Breite erscheint nach so vielen Reihen, ein Banner als einzelne Karte nach so vielen Produkten.
6. Füg bei Bedarf eine Banner graphic hinzu und stell Background, Text color, Button background und Button text color ein.

Du kannst auch in der Arbeitsfläche auf ein Banner klicken und Edit banner… wählen, um direkt dorthin zu springen. Jedes Banner hat Buttons zum Duplizieren und Löschen.

Banner erscheinen nur auf der ersten Seite einer Kollektion. Hat eine Kollektion weniger Produkte, rückt ein Banner nach oben und steht nach dem letzten Produkt. Ein Banner ohne verknüpftes Quiz bleibt in der Arbeitsfläche sichtbar, ist in deinem Shop aber ausgeblendet. Der Tab Launch weist dich darauf hin.

Reihenfolge

Standardmäßig behalten die Produkte die Reihenfolge, die du in Shopify für die Kollektion festgelegt hast. Im Tab Order kannst du Personalize product order einschalten. Dann sieht jeder wiederkehrende Kunde zuerst die Produkte, die er am wahrscheinlichsten sucht. Wie das funktioniert, erfährst du unter Kollektionsseiten personalisieren.

Gut zu wissen

• Quick add nutzt dieselbe Warenkorb-Anbindung wie deine Quizze und die Suche. Der Warenkorbzähler deines Themes aktualisiert sich also ohne Neuladen.
• Die Rastereinstellungen gehören zur Vorlage. Jede Kollektion, die sie nutzt, bekommt dasselbe Layout mit ihren eigenen Produkten.
• Deine Änderungen landen im Shop, sobald du veröffentlichst oder neu veröffentlichst. Siehe Eine Kollektionsseite zuweisen und veröffentlichen.