Hoe toon je favoriete knoppen op je site en in Klaviyo Customer Hub

Wat je leert

Leer hoe je shoppers hun favoriete items kunt laten opslaan op je site. Door favoriete knoppen naast je producten toe te voegen, kun je de opgeslagen items van shoppers weergeven in de Klaviyo Customer Hub-lade en follow-up flow sturen om conversie te stimuleren.

Voordat je van start gaat

In deze handleiding wordt uitgelegd hoe je de instelling Favorieten inschakelt vanuit de Klaviyo Customer Hub instellingen in Klaviyo en hoe je favoriete knoppen toevoegt op verschillende pagina's van je website. Controleer voordat u verder gaat of de Klaviyo Customer Hub functies zijn ingeschakeld in Klaviyo.

Meer informatie over Klaviyo Customer Hub.

Over favorieten

Met favoriete knoppen kunnen shoppers producten opslaan waarin ze geïnteresseerd zijn. De favoriete items van een shopper worden weergegeven in de Klaviyo Customer Hub-lade en kunnen worden gebruikt in de flow om extra conversie te stimuleren.

Als je de Favorieten functies activeert in je Klaviyo Customer Hub instellingen, verschijnt er een favorieten knop bij alle producten die worden getoond in de Klaviyo Customer Hub interface. Als een shopper op deze knop klikt, wordt het item toegevoegd aan hun favorietensectie en opgeslagen in hun Klaviyo profiel.

Om hun zichtbaarheid te vergroten en het gebruik ervan aan te moedigen, kun je ook favorieten knoppen toevoegen:

• Pagina's met productdetails
• Verzamelpagina's (ook wel "productlijstpagina's" genoemd) 

Items die favoriet zijn op een van deze pagina's, worden ook opgeslagen in de sectie Favorieten van shoppers in de Klaviyo Customer Hub-lade. Merk op dat elke bezoeker producten aan zijn favorietenlijst kan toevoegen, ongeacht of hij is ingelogd bij een klant account. Als ze inloggen, worden alle favorieten die ze hebben opgeslagen gesynchroniseerd met hun Klaviyo profiel.

favorieten inschakelen om weer te geven in de Klaviyo Customer Hub-lade

Om favorieten weer te geven in de Klaviyo Customer Hub-lade, moet je eerst de instelling Favorieten inschakelen in Klaviyo. 

1. Selecteer in Klaviyo's hoofdnavigatie aan de linkerkant Klaviyo Customer Hub.
2. Klik op Instellingen.
3. Selecteer het tabblad Extensies.
4. Schakel onder Favorieten het selectievakje Favorieten inschakelen in.
   
5. Selecteer in de vervolgkeuzelijst Kies pictogram welk type favoriet pictogram je onder je producten wilt weergeven (bijvoorbeeld een hart of een plusteken). 
   • Standaard toont het voorbeeld de niet-geselecteerde (d.w.z. niet geprefereerde) versie van het pictogram. Klik op het pictogram in de preview om te zien hoe het verandert in de favoriete status.
6. Klik op Opslaan.

Er verschijnt nu een favoriete knop onder alle producten die worden getoond in de Klaviyo Customer Hub interface. Als je erop klikt, wordt het item toegevoegd aan de sectie Favorieten.

Ga verder naar het volgende gedeelte voor richtlijnen voor het toevoegen van favorietenknoppen aan pagina's met productdetails. 

Favorietenknoppen toevoegen aan productdetailpagina's

Geef shoppers de mogelijkheid om specifieke items die ze aan het bekijken zijn favoriet te maken door favoriete knoppen toe te voegen onder producten op productdetailpagina's. 

1. Selecteer in de instelling Favorieten in Klaviyo de optie App-blok toevoegen. 
2. Als je dit doet, wordt je Shopify thema-editor gestart in een nieuw venster en verschijnt er een modal die aangeeft dat het Klaviyo Favorites app blok is toegevoegd aan je standaard productpagina template. Klik op Hebbes.
   
3. Klik en versleep de app om de positionering op je productdetailpagina naar wens aan te passen. 
4. Als je klaar bent, klik je op Opslaan om je wijzigingen op te slaan in Shopify. Op dit moment worden de favoriete knoppen onder de producten op je productpagina's weergegeven. 
5. Optioneel: Navigeer voor extra styling terug naar Klaviyo. Met de App blok stijl dropdown kun je het uiterlijk van de favorieten knop op productpagina's aanpassen. Kies een van beide:
   • Erven om de knopstijlen van je site te synchroniseren (standaard).
   • Aangepast om een bepaald knoplettertype en tekstkleur te selecteren.
     
6. Sla eventuele wijzigingen op.

Navigeer terug naar je website. Je zou nu favorietenknoppen moeten zien verschijnen onder producten op je productdetailpagina's.

Ga vervolgens naar het gedeelte Favorietenknoppen toevoegen aan je verzamelpagina's. 

Handmatig favoriete knoppen installeren (vintage thema's of aangepaste instellingen)

Als je een vintage Shopify thema gebruikt, of een aangepaste setup die geen support app blok gebruikt, moet je de Klaviyo Wishlist app mogelijk handmatig installeren op de pagina's waar je favorietenacties wilt (bijv. productpagina's).

Om dit te doen:

1. Open je Shopify zaak admin.
2. Selecteer onder verkoopkanaal webshop.
3. Klik op het menu met de drie puntjes op je huidige thema en selecteer dan Code bewerken. Als je het liever wilt testen op een ontwerpthema, dupliceer dan eerst je huidige thema en bewerk vervolgens de code van het duplicaatthema.
   
4. Zoek het bestand voor je pagina met productdetails. Dit varieert per thema, maar heeft meestal het woord "product" in de naam. In het Dawn-thema heet dit bijvoorbeeld "main-product.liquid".
5. Plak het volgende codefragment op de plek waar je de knop Favorieten wilt hebben:
   <div class="klaviyo-wishlist-slot" data-product-id="{{ product.id }}" ></div>
6. Klik op Opslaan.
7. Klik op Voorbeeld zaak.
8. Navigeer naar een productpagina binnen je zaak preview. De toegevoegde favorieten knop zou zichtbaar moeten zijn op de aangegeven plek.

Voeg favoriete knoppen toe aan je verzamelpagina's

Installeer een klein stukje code op je Shopify site om favoriete knoppen toe te voegen aan je verzamelpagina's, zodat shoppers snel items kunnen opslaan terwijl ze door je producten bladeren. Dit is vooral handig voor shoppers op mobiele apparaten.

Om dit te doen:

1. Open je Shopify zaak admin.
2. Selecteer onder verkoopkanaal webshop.
3. Klik naast je huidige thema op het menu met de drie puntjes en selecteer dan Code bewerken. 
   • Als je wilt testen op een ontwerpthema, dupliceer dan eerst je huidige thema en bewerk vervolgens de code in het duplicaatthema.
4. Zoek en open in de linker zijbalk je collectiebestand. We gebruiken het bestand featured-collections.liquid voor dit voorbeeld, maar jouw thema kan een ander bestand gebruiken.
   
5. Gebruik binnen het collectiebestand de sneltoets Zoeken (Command+F op Mac of Control+F op Windows) om het woord "render" in het bestand te zoeken. Dit helpt je bij het identificeren van de knipselnaam die je productraster bevat.
   • Het knipsel zal waarschijnlijk verschijnen in een formaat dat lijkt op: {% render 'snippet-name'%}, waarbij 'snippet-naam' de naam is van het relevante snippetbestand (bijv. kaart-product).
     
6. Zoek en open in de linker zijbalk het knipselbestand dat je in de vorige stap hebt geïdentificeerd (bijvoorbeeld card-product.liquid).
7. Noteer bovenaan dit bestand de objectwaarde die onder "Accepteert" staat (bijvoorbeeld "card_product").
   
8. Kopieer de volgende code en plak deze in het knipselbestand:
   • Tip: Zoek het eerste geval van de prijsweergave in je bestand en plak de code erboven.
     <div

    class="Klaviyo-favorites-plp-slot"

   gegevens-product-id="{{ OBJECT.id }}"

   gegevens-product-url="{{ OBJECT.url }}"

   gegevens-variatie-id="{{OBJECT.selected_or_first_available_variant.id}}"

  ></div>
9. Vervang OBJECT in de code die je hebt geplakt door de objectwaarde die je eerder hebt genoteerd.
   • Als de objectwaarde van je bestand bijvoorbeeld "card_product" is, dan ziet de code er als volgt uit als deze in het bestand boven de prijs wordt geplakt.
     
10. Klik op Opslaan in Shopify.
11. Ga naar de verzamelingenpagina van je site en vernieuwen.

Je zou nu de favoriete knoppen op elk product moeten zien verschijnen. Let op: het laden kan een paar seconden duren. Standaard staan deze in de rechterbovenhoek. Als je de positionering wilt wijzigen, raadpleeg dan je ontwikkelaar voor hulp met aangepaste CSS. 

Als de favoriete knoppen nog steeds niet zijn verschenen, probeer dan deze stappen voor probleemoplossing:

• Controleer of je OBJECT in het codefragment hebt vervangen door de objectwaarde van je bestand.
• Probeer de code ergens anders in het bestand te plakken.
• Controleer of je de code in het juiste knipselbestand hebt geplakt.

Als ze nog steeds niet verschijnen, vraag dan een ontwikkelaar om hulp. KlaviyoHet supportteam kan je themabestanden niet rechtstreeks bewerken.

Volgende stappen

Nu je favoriete knoppen aan je site hebt toegevoegd, kun je een favorietenherinnering instellen flow om conversie te stimuleren door shoppers te herinneren aan hun recent opgeslagen items.

Extra hulpbronnen

• Aan de slag met Klaviyo Customer Hub
• Hoe je productaanbevelingen inschakelt in Klaviyo Customer Hub 
• Hoe je je Klaviyo Customer Hub kunt stylen