Het productraster instellen

Het productraster is je zoekresultatenpagina, met de producten van de collectie. De kaarten, labels, reviewsterren, kleuren en CSS komen uit je zoekontwerp, dus het raster ziet er altijd uit als je zoekfunctie en verandert mee. Shopify blijft bepalen welke producten in de collectie zitten en levert de filters, sorteeropties en paginering. Jij bepaalt de banners tussen de rijen, de opmaak en wat terugkerende klanten te zien krijgen.

De rasterinstellingen openen

1. Open je template onder Live on your store → Collection pages, op het tabblad Design.
2. Klik in het canvas op het productraster om het te selecteren.
3. Klik in de werkbalk op Settings. Het paneel Product grid opent met vier tabbladen: Design, Personalize, Banners en Layout.

Wijzigingen zie je meteen in het canvas en worden automatisch opgeslagen.

Design: de look van je zoekfunctie

Onder Search design kies je van welk zoekontwerp het raster de look overneemt:

• Your store's search, de standaard, volgt het zoekontwerp waarop de zoekfunctie van je winkel draait. Zet je je winkel later op een ander zoekontwerp, dan gaat het raster mee.
• Elk ander zoekontwerp, op naam, om het raster net zo op te maken.

Kaarten, snel toevoegen, labels, reviewsterren, het hover-effect van afbeeldingen of kleuren aanpassen? Klik op Edit onder de keuzelijst. Dat opent het zoekontwerp zelf. Wat je daar wijzigt, staat meteen op je live collectiepagina's, zonder opnieuw te publiceren. Draait er nog geen zoekfunctie in je winkel, dan gebruikt het raster het standaardontwerp tot je er een kiest.

Moet één pagina er anders uitzien dan je zoekfunctie? Klik onder Only on this page op Edit page CSS. Die CSS komt bovenop het zoekontwerp, ook in het raster, en geldt alleen voor deze template. Wil je het raster op alle collectiepagina's aanpassen maar niet in je zoekfunctie, zet de CSS dan in je zoekontwerp en begin de regel met .sb-panel--collection.

Kaarten op deze pagina

Onder Cards on this page volgt elke kaartoptie je zoekontwerp tot je deze pagina een eigen waarde geeft: Quick add, Variant swatches, Image hover, Badges (verborgen op deze pagina) en Prices (met of zonder btw, als je zoekontwerp een btw-tarief heeft). De eerste keuze, “Same as search”, toont wat je zoekontwerp nu heeft en volgt het weer zodra je hem kiest. Er wordt niets gekopieerd, dus een pagina die je zoekfunctie volgt, gaat mee met elke wijziging die je daar maakt.

Labels alleen op deze pagina

Met Add badge onder Badges on this page only voeg je labels toe die alleen deze pagina toont. Ze werken zoals de labels in je zoekontwerp: een actielabel vanaf een minimale korting, een taglabel voor producten met bepaalde tags, of een uitverkocht-label. Ze staan na de labels van je zoekontwerp. Wil je alleen de labels van deze pagina tonen, zet Badges dan op Hidden on this page. Paginalabels staan in je webshop zodra je (opnieuw) publiceert.

Personalize

Op het tabblad Personalize staan de schakelaars voor terugkerende klanten: de rij “Voor jou” boven het raster, gepersonaliseerde labels, verdergaan waar ze gebleven waren en voorgestelde filters. Zie Collectiepagina's personaliseren.

Banners tussen de rijen

Banners zien eruit als de quizkaarten in je zoekresultaten en openen een quiz. Ze werken goed op de plek waar klanten door te veel opties beginnen te scrollen.

1. Klik op het tabblad Banners op Add banner. De banner begint met kant-en-klare tekst.
2. Pas de Heading, Subheading en Button text aan.
3. Kies de Linked quiz. De banner opent die quiz.
4. Kies een Placement. Full-width row neemt een hele rij van het raster in. Single card neemt de plek van één product in en schuift de rest door.
5. Stel Rows above in voor een banner over de volle breedte, of Products before voor een losse kaart.
6. Voeg eventueel een Background image toe en stel de Background en Text color in. Laat je ze leeg, dan krijgt de banner de accentkleur van je zoekontwerp.

Klik in het canvas op een banner om er direct naartoe te gaan. Banners staan alleen op de eerste pagina van de collectie. Heeft een collectie minder producten, dan schuift een banner op tot na het laatste product. Een banner zonder gekoppelde quiz blijft in het canvas zichtbaar, vervaagd, maar is verborgen in je winkel.

Heeft je winkel meer dan één taal of markt, dan bepaalt Where wie een banner ziet. De teksten van een banner voor elke taal vertaal je onder Translations. Ze staan in je winkel zodra je opnieuw publiceert. Zolang een banner niet in een taal is vertaald, zien klanten in die taal hem niet, en een banner verschijnt alleen waar ook zijn quiz is vertaald. Controleer dat met de taalkeuze in de stap Preview. Een banner voor één taal is in die taal geschreven en verschijnt in elke markt die die taal spreekt. De eigen banner van een markt verschijnt alleen in die markt.

Layout

• Products per page: hoeveel producten er staan voordat de pagina doorlinkt naar de volgende. Standaard is dat 24.
• Show filters: de filters die je in de Shopify-app Search & Discovery hebt ingesteld, in dezelfde zijbalk als je zoekresultaten. Op telefoons openen ze via een filterknop. Een collectie zonder filters in Search & Discovery toont er geen.
• Show sorting: laat klanten sorteren met de sorteeropties van Shopify, zoals prijs of best verkocht.

Smart order

Standaard houden de producten de volgorde die je in Shopify voor de collectie hebt ingesteld. Zet Smart order aan om bluebarry de collecties van deze pagina te laten ordenen op hoe hun producten het in je winkel doen:

• Producten die klanten bekijken, in hun winkelwagen leggen en kopen, komen eerst. Recente activiteit telt zwaarder dan oudere.
• Uitverkochte producten schuiven achter de beschikbare.
• Nieuwe producten krijgen een eerlijke plek in het midden tot ze zelf gegevens hebben, in plaats van onderaan te beginnen.

bluebarry zet de volgorde in Shopify zelf, dus elke pagina van de collectie volgt hem en klanten kunnen nog steeds zelf sorteren. Op een gepubliceerde pagina werkt het zodra je het aanzet, en de volgorde wordt dagelijks bijgewerkt. Zolang het aanstaat, sorteren de collecties handmatig in Shopify. Zet je het uit, depubliceer of verwijder je de pagina, of haal je een collectie eraf, dan krijgt de collectie haar eigen sortering terug, en een handmatig gesorteerde collectie haar eigen volgorde. Het paneel laat zien wanneer de volgorde voor het laatst is bijgewerkt, en per collectie een melding als Shopify hem weigerde.

Goed om te weten

• Snel toevoegen gebruikt dezelfde winkelwagenkoppeling als je quizzen en zoekfunctie, dus het winkelwagenaantal van je thema werkt bij zonder de pagina te herladen.
• De rasterinstellingen horen bij de template. Elke collectie die hem gebruikt, krijgt dezelfde opmaak, met haar eigen producten.
• Wijzigingen aan banners, opmaak en personalisatie staan in je winkel zodra je publiceert of opnieuw publiceert. Zie Een collectiepagina koppelen en publiceren.