Så installerar du Klaviyo Reviews på Shopify (vintage-teman och headless)

Du kommer att lära dig

Lär dig hur du installerar Klaviyo Reviews med ett vintage Shopify-tema eller en headless-arkitektur. Den här processen innebär att du kopierar flera kodsnippet och klistrar in dem i webbplatsens kod.

Om du använder ett Shopify 2.0-tema kan du installera Klaviyo Reviews utan att använda kod. Gå till vår artikel om hur du kommer igång med Klaviyo Reviews för ytterligare information. Om du använder WooCommerce kan du läsa om hur du installerar Klaviyo Reviews för WooCommerce.

Innan du börjar

Innan du klistrar in dessa kodsnuttar i webbplatsens kod ska du lägga till appen Klaviyo Reviews i din Shopify-butik. För vintage-teman, aktivera Klaviyos spårning på webbplatsen.

Installera med headless-arkitektur på Shopify

För att integrera Klaviyo Reviews med en headless Shopify-butik lägger du till Klaviyos JavaScript-spårnings-snippet, även kallad Klaviyo.js, på alla sidor där du vill lägga till recensions-widgetar (t.ex. produktsidor). Du kanske redan har installerat den här snippetten om du har konfigurerat Klaviyos spårning på webbplatsen eller registreringsformulär.

Lär dig hur du installerar Klaviyo.js för Shopify-butiker.

När du har lagt till det här skriptet på din webbplats fortsätter du genom att kopiera kodsnippets i stegen nedan till din webbplats kod.

Lägg till kodsnippet

Kodsnippen nedan gör att vissa recensionswidgetar kan visas i olika områden i din butik.

• Widgeten för stjärnbetyg visar det aktuella stjärnbetyget för en viss produkt och installeras oftast under produktens namn.
• Widgeten för granskningssammanfattning visar ett diagram som bryter ned alla betyg som valts för en produkt, användarbilder som skickats in med recensioner och den vanligaste feedbacken som produkten har fått. Den installeras vanligtvis nära nederkanten av en produktsida.
• Widgeten för produktrecensioner är en kombination av widgetarna recensionssammanfattning och recensionslista. Om du lägger till widgeten för produktrecensioner på din webbplats behöver du inte lägga till widgetarna recensionslista och sammanfattning av recensioner separat.
• Widgeten för granskningslista visar en lista över alla publicerade recensioner och kundfrågor, tillsammans med en sökfält, filter, en knapp för Skriv en recension och en knapp för Ställ en fråga. Den installeras vanligtvis direkt under widgeten för granskningssammanfattning.
• Widgeten featured review carousel visar utvalda recensioner från alla dina produkter. Detta kan visas på din startsida, på en fristående recensionssida eller någon annanstans på din webbplats. Du kan välja vilka recensioner som ska visas i den här widgeten. Om det finns visar kundinskickade bilder tillsammans med varje recension; dina produktbilder används om ingen bild skickades in tillsammans med recensionen.
• SEO/alla recensioner-widgeten visar alla dina recensioner för alla produkter på en enda sida. Använd den här widgeten för att förbättra din SEO och ge potentiella kunder en enda plats där de kan se vad dina nuvarande kunder gillar. Den här widgeten läggs oftast till på en separat Recensioner -sida på din webbplats.

Widget för stjärnbetyg

Använd widgeten för stjärnbetyg för att tydligt lyfta fram en produkts genomsnittliga betyg och antalet recensioner den har fått.

För att installera den här widgeten under produktens titel:

1. Öppna administratören för din Shopify-webbutik.
2. Under Försäljningskanaler klickar du på Onlinebutik.
3. Klicka på menyn med tre punkter bredvid ditt nuvarande tema > Duplicera för att skapa en klon av ditt nuvarande tema.
4. Klicka på Redigera kod i menyn med tre punkter.
   

5. Sök efter ”product” i filsökfältet och hitta filen som används för innehållet på din produktsida. Det kan vara product.liquid, product-template.liquid, eller något liknande. (Om du använder en anpassad mall för produktsidan väljer du den i stället.)
   

6. Välj filen och sök sedan efter {{ product.title }} för att hitta koden som visar produktens titel.
   

7. Lägg till en ny rad under den här koden.
8. På den nya raden klistrar du in det här kodsnippetet:
   <div class="klaviyo-star-rating-widget" data-id="{{product.id}}" data-product-title="{{product.title}}"      data-product-type="{{product.type}}"></div>
   

9. Klicka på Spara.
10. Klicka på Förhandsgranska butik.
11. Gå till en produktsida i förhandsgranskningen av din butik. Du ska se en widget med en stjärna under produktens titel.

Produktrecensionswidget

Använd widgeten för recensionssammanfattning och recensionslista (eller bara widgeten för produktrecensioner) för att lägga till en sammanfattning och en lista över alla publicerade recensioner för varje produkt på din webbplats.

För att installera den här widgeten:

1. Öppna administratören för din Shopify-webbutik.
2. Under Försäljningskanaler klickar du på Onlinebutik.
3. Klicka på Anpassa bredvid ditt nuvarande tema för att redigera det, eller klicka på menyn med tre punkter > Duplicera om du vill redigera ett utkasttema i stället för ditt aktiva tema.
4. Klicka på Redigera kod i menyn med tre punkter.
   

5. Sök efter ”product” i filsökfältet och hitta filen som används för innehållet på din produktsida. Det kan vara product.liquid, product-template.liquid, eller något liknande. (Om du använder en anpassad mall för produktsidan väljer du den i stället.)
   

6. Välj filen och gå sedan längst ned (eller dit du vill att widgeten för granskningssammanfattning och lista ska visas).
7. Lägg till en ny rad och klistra sedan in den här kodsnippet:
   <div id="klaviyo-reviews-all" data-id="{{product.id}}"></div>
   

8. Klicka på Spara.
9. Klicka på Förhandsgranska butik.
10. Navigera till en produktsida i din butiksförhandsgranskning för en produkt som har recensioner. Du bör se en widget för recensionssammanfattning och listvy nära sidans nederkant.

Separera widgetar för recensionssammanfattning och recensionslista

Om du hellre vill installera widgeten för recensionssammanfattning och widgeten för recensionslista separat (i stället för tillsammans, enligt beskrivningen i avsnittet ovan), använder du följande kodsnippet:

Widgeten granskningssammanfattning

<div id="klaviyo-reviews-summary" data-id="{{product.id}}"></div>

Widget för granskning av lista

<div id="klaviyo-reviews-list" data-id="{{product.id}}"></div>

Karusellwidget för utvalda recensioner (valfritt)

Karusellen med utvalda recensioner visar handplockade recensioner på valfri sida (t.ex. din startsida).

För att lägga till en karusell som visar alla dina utvalda recensioner måste du först välja recensioner att lyfta fram.

1. I Klaviyos huvudnavigering väljer du Recensioner.
2. Klicka på Alla recensioner.
3. Bredvid en recension som du vill lyfta fram klickar du på Funktioner.
   

När du har valt ut flera recensioner att lyfta fram på din webbplats kan du installera en widget för recensionskarusell på valfri sida. Gå till sidan där du vill att karusellen ska visas och klistra sedan in följande kodsnutt i sidans kod:

<div id="klaviyo-featured-reviews-carousel"></div>

SEO/Widgeten Alla recensioner (valfritt)

Widgeten SEO/Alla recensioner visar alla publicerade recensioner för alla produkter. Lägg till detta på en fristående Recensioner-sida eller på din Om-sida.

<div id="klaviyo-reviews-all" data-id="all"></div>

Utfall

När du har installerat de widgetar som beskrivs i den här artikeln och publicerat det nya temat kommer dina recensioner att visas på produktsidorna (samt på alla andra sidor på din webbplats där du har installerat dem).

Ytterligare resurser