Het productraster is het hart van elke collectiepagina. Shopify blijft bepalen welke producten in de collectie zitten. Jij bepaalt hoe ze eruitzien, welke filters klanten krijgen en waar banners de rijen onderbreken om twijfelaars op weg te helpen.
De rasterinstellingen openen
- Open je template onder Merchandising → Collection pages, op het tabblad Design.
- Klik in het canvas op het productraster om het te selecteren.
- Klik in de werkbalk op Settings. Het paneel Product grid opent met vier tabbladen: Banners, Filters, Cards en Order.
Wijzigingen zie je meteen in het canvas en worden automatisch opgeslagen.
Cards: opmaak en productdetails
Op het tabblad Cards stel je in hoe de producten worden geordend en wat elke kaart toont.
- Columns (desktop): 3, 4 of 5. Columns (mobile): 1 of 2.
- Products per page: hoeveel producten er staan voordat de pagina doorlinkt naar de volgende. Standaard is dat 24. De paginering werkt zoals op je gewone Shopify-collectiepagina's.
- Image ratio: Portrait, Square of Landscape. Kies wat bij je productfoto's past.
- Emphasize sale prices: streept de oorspronkelijke prijs door, laat de actieprijs opvallen en voegt een kortingslabel toe, zoals "-20%".
- Quick add button: klanten leggen een product in de winkelwagen zonder de pagina te verlaten. Producten met meerdere varianten krijgen in plaats daarvan een "Choose options"-knop die de productpagina opent, en uitverkochte producten tonen "Sold out".
- Show vendor en Show description: voegen het merk en een korte beschrijving toe aan elke kaart.
- Show sort dropdown: klanten sorteren met de opties die Shopify biedt, zoals op prijs of bestverkocht.
Filters
De filters en hun namen komen uit de Shopify-app Search & Discovery, dus klanten krijgen dezelfde filters als in de rest van je webshop. Een filter toevoegen, zoals maat, huidtype of prijs, doe je in Search & Discovery. Daarna verschijnt hij hier vanzelf. Op het tabblad Filters bepaal je hoe ze worden getoond:
- Show filters: zet de filters aan of uit.
- Side: Left of Right van de producten.
- Collapsed by default: toont alleen de filternamen tot een klant er een openklapt.
- Style: Sidebar houdt de filters op grotere schermen naast de producten. Drawer verbergt ze achter een Filter-knop die ze inschuift.
Op telefoons openen de filters altijd via een Filter-knop, welke stijl je ook kiest. Heeft een collectie in Search & Discovery geen filters, dan is er gewoon geen filterkolom.
Banners tussen de rijen
Banners onderbreken het productraster na een rij die jij kiest. Ideaal voor een quizuitnodiging precies waar klanten door te veel opties beginnen te scrollen.
- Klik op het tabblad Banners op Add banner. Hij begint met kant-en-klare tekst: "Not sure what to pick?".
- Bewerk de Heading, Subheading en Button text.
- Kies de Linked quiz. De knop opent deze quiz.
- Kies een Placement. Full-width row loopt over het hele raster. Single card neemt de plek van één product in en schuift de rest op.
- Stel After row in. Een banner over de volle breedte verschijnt na zoveel rijen, een banner als losse kaart na zoveel producten.
- Voeg eventueel een Banner graphic toe en stel Background, Text color, Button background en Button text color in.
Je kunt ook in het canvas op een banner klikken en Edit banner… kiezen om er direct naartoe te gaan. Elke banner heeft knoppen om hem te dupliceren of te verwijderen.
Banners verschijnen alleen op de eerste pagina van de collectie. Heeft een collectie minder producten, dan schuift een banner op naar de plek na het laatste product. Een banner zonder gekoppelde quiz blijft zichtbaar in het canvas, maar is verborgen in je webshop. Het tabblad Launch waarschuwt je daarvoor.
Volgorde
Standaard houden producten de volgorde die je in Shopify voor de collectie hebt ingesteld. Op het tabblad Order kun je Personalize product order aanzetten, zodat elke terugkerende klant eerst de producten ziet die hij waarschijnlijk zoekt. Hoe dat werkt, lees je in Collectiepagina's personaliseren.
Goed om te weten
- Quick add gebruikt dezelfde winkelwagenkoppeling als je quizzen en zoekfunctie, dus de winkelwagenteller van je thema werkt bij zonder dat de pagina herlaadt.
- Rasterinstellingen horen bij de template. Elke collectie die hem gebruikt, krijgt dezelfde opmaak met haar eigen producten.
- Je wijzigingen staan in je webshop zodra je (opnieuw) publiceert. Zie Een collectiepagina koppelen en publiceren.