Eine Kollektionsseite erstellen

Eine Vorlage für Kollektionsseiten ist in wenigen Minuten eingerichtet. Du gibst ihr einen Namen und wählst die Kollektionen, die sie neu gestalten soll, und sie startet im Design der Suche deines Shops. Danach feilst du im Editor daran, selbst oder mit Barry.

Vorlage erstellen

Geh unter Live on your store zu Collection pages und klick auf New template. Noch nicht in der Seitenleiste? Ein Modul steht dort erst, wenn es live ist oder einen Entwurf hat. Klick auf + Add a module und dann bei Collection pages auf Add, und Barry richtet es mit dir ein.
Gib einen Name ein, zum Beispiel „Skincare-Edit“. Den siehst nur du.
Hak unter Apply to collections mindestens eine Kollektion an. Mit Search collections... findest du sie über Name oder Handle. Jede Zeile zeigt, wie viele Produkte die Kollektion hat.
Klick auf Create page for 1 collection (die Zahl richtet sich nach deiner Auswahl).

bluebarry legt die Seite mit einem Collection Hero, dem Produktraster und einem SEO-Text an, alles in den Farben, Ecken und der Schrift der Suche deines Shops, und öffnet den Editor.

Der Dialog New collection page mit ausgefülltem Namen und drei angehakten Kollektionen

In der Kollektionsliste fällt dir vielleicht Folgendes auf:

Smart kennzeichnet eine automatisierte Kollektion, in die Shopify Produkte nach Regeln aufnimmt. Sie funktioniert mit Vorlagen wie jede andere Kollektion.
„Used by“ heißt, dass die Kollektion schon zu einer anderen Vorlage gehört. Eine Kollektion nutzt immer nur eine Vorlage. Wählst du sie hier aus, wechselt sie zu dieser.

Zeigt der Dialog Connect Shopify first oder Sync your collections, ist dein Shop noch nicht bereit. Mehr dazu unter Probleme mit Kollektionsseiten lösen.

Dich im Editor zurechtfinden

Oben im Editor gibt es drei Tabs: Design, Assign und Launch. Hier geht es um Design. Änderungen werden automatisch gespeichert. Der Status neben den Tabs zeigt Saving..., Saved oder Save failed. Klick oben links auf den Namen der Vorlage, um sie umzubenennen.

Previewing: Wähl über der Arbeitsfläche, welche zugewiesene Kollektion du ansiehst. Die Arbeitsfläche zeigt dann ihren echten Titel, ihre Beschreibung, Produkte und Filter.
Desktop und Smartphone: Mit den beiden Geräte-Buttons oben rechts wechselst du die Größe der Arbeitsfläche. Der Editor startet in der Smartphone-Ansicht.
Barry: das Chat-Panel rechts. Du blendest es mit dem Barry-Button oder ⌘J (Strg+J unter Windows) ein und aus.
Custom CSS: der Code-Button oben rechts.

Der Editor für Kollektionsseiten im Tab Design, mit ausgewähltem Hero, geöffneter Werkzeugleiste und Barrys Panel rechts

Abschnitte hinzufügen, verschieben und bearbeiten

Klick auf einen Abschnitt in der Arbeitsfläche, um ihn auszuwählen. Eine Werkzeugleiste mit seinen Einstellungen erscheint, links neben der Arbeitsfläche außerdem ein paar Buttons:

Die Pfeile schieben den Abschnitt nach oben oder unten.
Add section fügt einen neuen hinzu, per Add above darüber oder Add below darunter. Zur Wahl stehen Collection hero, Quiz banner und SEO text. Neue Abschnitte werden passend zum Rest der Seite gestaltet, das kann einen Moment dauern.
Der Papierkorb löscht den Abschnitt. Das Produktraster lässt sich nicht löschen: Jede Vorlage hat genau eins.

Texte wie Überschriften oder Button-Beschriftungen bearbeitest du direkt per Klick.

Hero, Quiz-Banner und SEO-Text starten mit Colors auf Match search: Sie übernehmen Farben, Ecken und Schrift deiner Suchergebnisse und ändern sich mit, wenn sich dein Suchdesign ändert. Änderst du eine Farbe, springt der Abschnitt auf Own colors. Zurück zu Match search geht jederzeit.

Collection hero

Der Hero zeigt Titel und Beschreibung jeder Kollektion aus Shopify. Die änderst du also in Shopify, nicht hier. In der Werkzeugleiste stellst du den Background ein, blendest den Product count ein oder aus, wählst ein Hero image und legst einen Button link samt Farben fest. Der Button erscheint nur, wenn er eine Beschriftung und einen Link hat.

Standardmäßig nutzt der Hero das Bild der Kollektion aus Shopify. Ein Hero-Bild, das du hier auswählst, ersetzt es auf allen Kollektionen mit dieser Vorlage.

Quiz banner

Eine Einladung zu einem Quiz über die volle Breite. Überschrift, Unterzeile und Button-Text bearbeitest du direkt in der Arbeitsfläche. Klick auf den Button, um das Quiz auszuwählen, das er öffnet. Ein Quiz-Banner ohne Quiz bleibt in deinem Shop unsichtbar.

SEO text

Zeigt die Beschreibung der Kollektion aus Shopify als gut lesbaren Textblock. So haben Suchmaschinen sinnvollen Text zum Indexieren. Den Wortlaut änderst du in Shopify in der Beschreibung der Kollektion. Hier legst du Background und Text color fest. Hat eine Kollektion keine Beschreibung, bleibt diese Stelle leer.

Product grid

Das Raster ist deine Suchergebnisseite und übernimmt den Look deines Suchdesigns. Es hat ein eigenes Einstellungspanel für dieses Design, Personalisierung, Banner und Layout. Siehe Das Produktraster einrichten.

Mit Barry gestalten

Wenn du eine Vorlage zum ersten Mal öffnest, erscheint Barry rechts unter „Design this collection page“. Beschreib in eigenen Worten, was du möchtest, zum Beispiel:

„Gestalte diese Seite passend zu meiner Marke“
„Füg nach Reihe 3 des Produktrasters ein Quiz-Banner ein“
„Mach das Produktraster auf dem Smartphone kompakter“

Barry kann Inhalte und Gestaltung von Abschnitten ändern, Abschnitte hinzufügen, verschieben und entfernen und Custom CSS schreiben. Jede Änderung siehst du sofort in der Arbeitsfläche. Wie deine eigenen Änderungen landet sie erst im Shop, wenn du veröffentlichst. Du kannst auch einen Screenshot einer Seite, die dir gefällt, als Vorlage mitschicken.

Custom CSS

Für Details, die die Einstellungen nicht abdecken, klick auf den Code-Button und ergänze CSS. Es greift nach den Styles von bluebarry und richtet sich an die Klassen bb-cp- der Seite, zum Beispiel .bb-cp-hero, und an die Suchklassen des Rasters, etwa .sb-product-card. Es gilt nur für diese Vorlage, hier gestaltest du also eine Seite, die anders aussehen soll als deine Suche. Die Arbeitsfläche aktualisiert sich beim Tippen. Wenn du kein CSS schreibst, bitte Barry darum.

Gut zu wissen

Im Shop nutzt die Seite die Schriften und Grundstyles deines Themes. Sie kann daher etwas anders aussehen als in der Arbeitsfläche. Mit Preview im Tab Launch prüfst du das echte Ergebnis.
Duplicate in der Liste kopiert das Design, aber nicht die Kollektionen. Weise der Kopie Kollektionen zu, bevor du sie veröffentlichst.
Bereit für den Livegang? Weiter geht es mit Eine Kollektionsseite zuweisen und veröffentlichen.