Så här visar du favoritknappar på din webbplats och i Klaviyo Customer Hub

Du kommer att lära dig

Lär dig hur du låter kunder spara sina favoritartiklar på din webbplats. Genom att lägga till favoritknappar intill dina produkter kan du visa kundernas sparade artiklar i Klaviyo Customer Hub-panelen och skicka uppföljningsflöden för att driva konvertering.

Innan du börjar

Den här guiden beskriver hur du aktiverar Favoriter i Klaviyo Customer Hub och lägger till favoritknappar på olika sidor på din webbplats. Innan du börjar ska du aktivera Klaviyo Customer Hub i Klaviyo. Favoriter kräver en betald Klaviyo Customer Hub-plan eller en Aktiv gratis provperiod.

Läs mer om Klaviyo Customer Hub.

Om favoriter

Favoritknappar gör att shoppare kan spara produkter de är intresserade av. En shoppers favoritmarkerade artiklar visas i Klaviyo Customer Hub-lådan och kan användas i flöden för att driva fler konverteringar.

När du aktiverar Favoriter i Klaviyo Customer Hub kan kunder som uppfyller dina synlighetsinställningar använda favoritknappar för att spara produkter. Sparade objekt visas i avsnittet Favoriter. Objekt som sparas av inloggade kunder synkroniseras till deras Klaviyo-profil.

För att öka synligheten och uppmuntra användning kan du även lägga till favoriter-knappar till:

• Produktdetaljsidor
• Kollektsidor (kallas även ”produktlistsidor”)

Artiklar som har favoritmarkerats från någon av dessa sidor visas också i avsnittet Favoriter i Klaviyo Customer Hub. Om du vill låta besökare spara produkter utan att logga in ställer du in synligheten för favoriter till Alla shoppare i både Hubben och inställningarna för favoriter på webbplatsen. Favoriter från besökare som Klaviyo inte känner igen sparas i deras webbläsare och synkas till deras Klaviyo-profil när de loggar in eller när Klaviyo känner igen dem om upplevelser för igenkända shoppare är aktiverade.

Aktivera favoriter så att de visas i Klaviyo Customer Hub

För att visa favoriter i Klaviyo Customer Hub-lådan måste du först aktivera inställningen Favoriter i Klaviyo.

1. I Klaviyos huvudsakliga navigering till vänster väljer du Webbplats > Klaviyo Customer Hub.
2. Klicka på Design > Redigera din hubb för att öppna redigeraren.
3. När Hub är inställd på Öppen väljer du Favoriter i rullgardinsmenyn Sida ovanför förhandsvisningen.

4. På fliken Innehåll ställer du in Synlighet på de shoppare som ska kunna se favoriter. Välj Alla shoppare så att besökare kan spara produkter utan att logga in.
5. Under Ikon väljer du ett hjärta eller ett plustecken för favoritknapparna i Klaviyo Customer Hub.
   • Använd förhandsgranskningen för att kontrollera hur ikonen ser ut. Du kan förhandsgranska dess markerade och omarkerade lägen i redigeraren för favoriter på webbplatsen som beskrivs nedan.
6. Klicka på Publicera.

Favoritknappar visas nu på produkter i Klaviyo Customer Hub för kunder som uppfyller dina synlighetsinställningar. Genom att klicka på en knapp läggs objektet till i deras avsnitt Favoriter.

Om du vill lägga till knappar utanför Klaviyo Customer Hub går du vidare till Lägg till favoritknappar på produktsidor.

Importera befintliga önskelistor till Klaviyo Customer Hub

Om du går över till Klaviyo Customer Hub från en annan önskelisteapp kan du importera dina kunders sparade artiklar så att de kan fortsätta hantera sina favoriter i Klaviyo Customer Hub.

Import av inbyggda appar

Klaviyo erbjuder inbyggt stöd direkt för att importera data från populära önskelisteappar, inklusive:

• Swym
• Wishlist King

Import via CSV

När du har aktiverat favoriter i Klaviyo Customer Hub öppnar du inställningarna för Klaviyo Customer Hub-favoriter. Din fil måste innehålla kunders e-postadresser och produkt-ID:n; variations-ID:n är valfria. Du behöver ingen specifik CSV-mall, men du måste granska fältmappningen innan du importerar.

1. Under Importera favoriter från en annan app klickar du på Importera. Om du tidigare stängde kortet klickar du på Importera favoriter från en annan app för att öppna det igen.
2. Ladda upp eller dra din CSV-fil till uppladdningsområdet och klicka sedan på Nästa.
3. Granska de föreslagna fältmappningarna. Mappa kolumnerna som innehåller kundernas e-postadresser till E-post och produkt-ID:n till Produkt-ID. Om filen innehåller variations-ID:n ska du mappa den kolumnen till Variations-ID.
4. Klicka på Slutför för att skicka importen.

Importskärmen stängs och visar en bekräftelse efter att du har skickat in. Om du ser ett fel kontrollerar du filen och mappningarna innan du försöker igen.

Lägg till favoritknappar på produktdetaljsidor

Lägg till favoriter-knappar på dina produktsidor så att kunder kan spara en produkt medan de tittar på den.

1. Gå tillbaka till Design i Klaviyo Customer Hub och välj sedan kortet Favoriter under Block på webbplatsen. Klicka på Lägg till appblock för att öppna din Shopify-temaredigerare.
2. Detta öppnar din Shopify-temaredigerare i ett nytt fönster och visar en modal som anger att appblocket Klaviyo Favorites har lagts till i din standardmall för produktsidor. Klicka på Jag fattar.
   

3. Klicka och dra appen för att justera dess position på din sida med produktinformation efter behov.
4. När du är redo klickar du på Spara för att spara dina ändringar i Shopify. Knappen visas på den plats du valde när Klaviyo Customer Hub är live och favoriter på webbplatsen är synliga för kunden.
5. Gå tillbaka till redigeraren för onsite-favoriter i Klaviyo. På fliken Innehåll ställer du in Synlighet till de kunder som ska se dina onsite-knappar. Det här kan inte vara bredare än synligheten för Hub-favoriter.
6. Valfritt: I redigeraren för favoriter på webbplatsen väljer du fliken Stil för att anpassa knappens ikon, färger, teckensnitt, justering och visuella stil.
   • Under Teckensnitt väljer du Ärv från webbplats i Knappteckensnitt för att använda webbplatsens teckensnitt, eller väljer ett annat teckensnitt. Välj Konfigurera anpassat teckensnitt för att ange ett teckensnittsnamn och en vikt. Ditt anpassade teckensnitt måste redan vara installerat på din webbplats.
   • Under Färger justerar du Knappfyllning och Knapptext. Under Utseende anger du Justering och Visuell stil. Välj Endast ikon, Endast text eller Ikon och text.

• I förhandsgranskningen väljer du Produktsida eller Kollektionslista för att granska varje placering. Knappen börjar som omarkerad; klicka på den för att förhandsgranska det favoritsparade tillståndet.

7. Klicka på Publicera för att spara synligheten på webbplatsen och alla stiländringar i Klaviyo.

Gå tillbaka till din webbplats och öppna en produktdetaljsida för att kontrollera att favoritknappen visas på den plats du valde.

Gå sedan vidare till avsnittet Lägg till favoritknappar på dina samlingssidor.

Installera favoritknappar manuellt (vintage-teman eller anpassad konfiguration)

Om du använder ett vintage-tema i Shopify eller en anpassad konfiguration som inte stöder appblock lägger du manuellt till kodsnutten för favoriter-knappen på de sidor där du vill att kunder ska kunna spara produkter (t.ex. produktsidor).

Innan du redigerar ditt tema aktiverar du favoriter i hubben och ställer in synligheten för favoriter på webbplatsen i kortet Favoriter under Design > Block på webbplatsen. Klaviyo Customer Hub måste vara live för att knapparna ska visas i din webbutik.

Gör så här:

1. Öppna administratören för din Shopify-webbutik.
2. Under försäljningskanaler väljer du Onlinebutik.
3. Klicka på menyn med tre prickar i ditt nuvarande tema och välj sedan Redigera kod. Om du hellre vill testa det i ett utkasttema duplicerar du först ditt nuvarande tema och redigerar sedan koden i det duplicerade temat.
   

4. Hitta filen för din produktdetaljsida. Det här varierar beroende på tema, men innehåller vanligtvis ordet ”product” i namnet. Till exempel heter den här i Dawn-temat ”main-product.liquid”.
5. Klistra in följande kodsnippet där du vill att favoritknappen ska visas:
   <div class="klaviyo-wishlist-slot" data-product-id="{{ product.id }}"></div>
6. Klicka på Spara.
7. Klicka på Förhandsgranska butik.
8. Gå till en produktsida i förhandsgranskningen av din butik. Knappen för tillagda favoriter ska vara synlig på den angivna platsen.

Lägg till favoritknappar på dina kollektionssidor

Installera en liten kodsnutt på din Shopify-webbplats för att lägga till favoritknappar på dina kollektionssidor, så att kunder snabbt kan spara artiklar medan de bläddrar bland dina produkter. Det här är särskilt användbart för kunder på mobila enheter.

Innan du lägger till kodsnutten aktiverar du favoriter i Hub och ställer in synligheten för favoriter på webbplatsen i Design > Block på webbplatsen > Favoriter. Klaviyo Customer Hub måste vara live. Inställningarna för ikon och färg på webbplatsen gäller även för favoritknappar på samlingssidor.

Gör så här:

1. Öppna administratören för din Shopify-webbutik.
2. Under försäljningskanaler väljer du Onlinebutik.
3. Bredvid ditt nuvarande tema klickar du på menyn med tre punkter och väljer sedan Redigera kod.
   • Om du vill testa på ett utkasttema duplicerar du först ditt nuvarande tema och redigerar sedan koden i det duplicerade temat.
4. I sidofältet till vänster söker du efter och öppnar din collections-fil. Vi använder filen featured-collections.liquid i det här exemplet, men ditt tema kan använda en annan fil.
   

5. I collections-filen använder du sökgenvägen (Command+F på Mac eller Control+F på Windows) för att söka efter ordet ”render” i filen. Detta hjälper dig att identifiera namnet på kodavsnittet som innehåller ditt produktrutnät.
   • Snippetet visas troligen i ett format som liknar: {% render 'snippet-name'%}, där ”snippet-name” är namnet på den relevanta snippet-filen (t.ex. card-product).
     

6. I det vänstra sidofältet söker du efter och öppnar snippet-filen som identifierades i föregående steg (t.ex. card-product.liquid).
7. Längst upp i den här filen ska du notera objektvärdet som listas under ”Accepts” (t.ex. ”card_product”).
   

8. Kopiera följande kod och klistra in den i snippet-filen:
   • Tips: Leta upp den första instansen där priset renderas i filen och klistra in koden ovanför den.
     <div

    class="klaviyo-favorites-plp-slot"

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

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

   data-variant-id="{{OBJECT.selected_or_first_available_variant.id}}"

  ></div>
9. I koden du klistrade in ersätter du OBJECT med objektvärdet som du noterade tidigare.
   • Om objektvärdet i din fil till exempel är ”card_product” kommer koden att se ut så här när du klistrar in den i filen ovanför priset.
     

10. Klicka på Spara i Shopify.
11. Öppna samlingssidan på din webbplats och uppdatera. Om du redigerade ett dubbletttema öppnar du förhandsgranskningen för det temat och går till en samlingssida i stället.

Du bör nu se att favoritknapparna visas på varje produkt. Observera att de här kan ta några sekunder att läsa in. Som standard är de placerade i det övre högra hörnet. Om du vill ändra placeringen kan du be din utvecklare om hjälp med anpassad CSS.

Om favoritknapparna fortfarande inte har visats kan du prova de här felsökningsstegen:

• Bekräfta att du har ersatt OBJECT i kodsnippeten med objektvärdet för din fil.
• Försök att klistra in koden någon annanstans i filen.
• Verifiera att du har klistrat in koden i rätt snippet-fil.

Om de fortfarande inte visas kan du be om hjälp från en utvecklare. Klaviyo supportteam kan inte redigera dina temafiler direkt.

Kommande steg

Nu när du har lagt till favoritknappar på webbplatsen kan du konfigurera ett påminnelseflöde för favoriter för att påminna kunder om deras senast sparade artiklar.

Ytterligare resurser