Klaviyo Reviews installeren op Shopify (vintage thema's en headless)

Wat je leert

Leer hoe je Klaviyo Reviews installeert met een vintage Shopify-thema of een headless-architectuur. Dit proces omvat het kopiëren van verschillende codefragmenten en het plakken ervan in de code van je site.

Als je een Shopify 2.0-thema gebruikt, kun je Klaviyo Reviews installeren zonder code te gebruiken. Ga naar ons artikel over Aan de slag met Klaviyo Reviews voor meer informatie. Als je WooCommerce gebruikt, lees dan hoe je Klaviyo Reviews installeert voor WooCommerce.

Voordat je van start gaat

Voordat je deze codefragmenten in de code van je site plakt, voeg je de Klaviyo Reviews-app toe aan je Shopify-winkel. Voor vintage-thema's schakel je de onsite tracking van Klaviyo in.

Installeren met headless-architectuur op Shopify

Om Klaviyo Reviews te integreren met een headless Shopify-store, voeg je Klaviyo's JavaScript-trackingfragment, ook wel Klaviyo.js genoemd, toe aan alle pagina's waar je reviewwidgets wilt toevoegen (bijv. productpagina's). Mogelijk heb je dit fragment al geïnstalleerd als je Klaviyo's onsite tracking of aanmeldingsformulieren hebt geconfigureerd.

Leer hoe je Klaviyo.js installeert voor Shopify-winkels.

Zodra je dit script aan je site hebt toegevoegd, ga je verder door de codefragmenten in de onderstaande stappen te kopiëren naar de code van je site.

Voeg de codefragmenten toe

Met de codefragmenten hieronder kunnen bepaalde beoordelingswidgets in verschillende delen van je winkel worden weergegeven.

• De widget voor sterrenbeoordeling toont de huidige sterrenbeoordeling voor een bepaald product en wordt meestal onder de naam van je product geïnstalleerd.
• De widget met beoordelingssamenvatting toont een grafiek met een uitsplitsing van alle beoordelingen die voor een product zijn geselecteerd, door gebruikers ingediende afbeeldingen bij reviews en de meest voorkomende feedback die het product heeft ontvangen. Meestal wordt deze onderaan een productpagina geïnstalleerd.
• De widget voor productbeoordelingen is een combinatie van de widgets voor beoordelingssamenvatting en beoordelingslijst. Als je de widget voor productbeoordelingen aan je site toevoegt, hoef je de widgets voor beoordelingslijst en beoordelingssamenvatting niet afzonderlijk toe te voegen.
• De widget met beoordelingslijst geeft een lijst weer met alle gepubliceerde beoordelingen en klantvragen, samen met een zoekbalk, filters, een knop Schrijf een beoordeling en een knop Stel een vraag. Deze wordt meestal direct onder de widget met beoordelingssamenvatting geïnstalleerd.
• De widget met carrousel met uitgelichte reviews toont uitgelichte reviews van al je producten. Deze kan worden uitgelicht op je homepage, op een aparte reviewspagina of ergens anders op je site. Je kunt de reviews selecteren die in deze widget worden uitgelicht. Als beschikbaar, worden door klanten ingezonden afbeeldingen bij elke review weergegeven; je productafbeeldingen worden gebruikt als er geen afbeelding bij de review is ingediend.
• De SEO-/widget Alle reviews toont al je reviews voor alle producten op één pagina. Gebruik deze widget om je SEO te verbeteren en potentiële klanten één plek te bieden om te zien wat je huidige klanten geweldig vinden. Deze widget wordt meestal toegevoegd aan een zelfstandige pagina Reviews op je site.

Widget voor sterrenwaarderingen

Gebruik de widget voor sterrenbeoordelingen om de gemiddelde beoordeling van een product en het aantal reviews dat het heeft ontvangen duidelijk uit te lichten.

Zo installeer je deze widget onder de titel van je product:

1. Open de beheeromgeving van je Shopify-webshop.
2. Klik onder Verkoopkanalen op Online winkel.
3. Klik op het menu met de drie puntjes naast je huidige thema > Dupliceren om een kloon van je huidige thema te maken.
4. Klik in het menu met de drie stippen op Code bewerken.
   

5. Zoek op "product" in de zoekbalk voor bestanden en zoek het bestand dat wordt gebruikt voor de content van je productpagina. Het kan product.liquid zijn, product-template.liquid, of iets soortgelijks. (Als je een aangepaste template voor productpagina's gebruikt, selecteer je die in plaats daarvan.)
   

6. Selecteer het bestand en zoek vervolgens naar {{ product.title }} om de code te vinden die de titel van je product weergeeft.
   

7. Voeg een nieuwe regel toe onder deze code.
8. Plak op de nieuwe regel dit codefragment:
   <div class="klaviyo-star-rating-widget" data-id="{{product.id}}" data-product-title="{{product.title}}"      data-product-type="{{product.type}}"></div>
   

9. Klik op Opslaan.
10. Klik op Voorbeeldwinkel.
11. Ga naar een productpagina in de voorbeeldweergave van je winkel. Je zou een widget met sterren onder de titel van het product moeten zien.

Widget voor productreviews

Gebruik de widget voor beoordelingssamenvatting en beoordelingslijst (of alleen de widget voor productbeoordelingen) om een samenvatting en lijst van alle gepubliceerde beoordelingen voor elk product op je site toe te voegen.

Zo installeer je deze widget:

1. Open de beheeromgeving van je Shopify-webshop.
2. Klik onder Verkoopkanalen op Online winkel.
3. Klik op Aanpassen naast je huidige thema om het te bewerken, of klik op het menu met de drie puntjes > Dupliceren als je liever een conceptthema bewerkt in plaats van je live thema.
4. Klik in het menu met de drie stippen op Code bewerken.
   

5. Zoek op "product" in de zoekbalk voor bestanden en zoek het bestand dat wordt gebruikt voor de content van je productpagina. Het kan product.liquid zijn, product-template.liquid, of iets soortgelijks. (Als je een aangepaste template voor productpagina's gebruikt, selecteer je die in plaats daarvan.)
   

6. Selecteer het bestand en ga dan helemaal naar beneden (of naar waar je de widget met de beoordelingssamenvatting en de lijst wilt laten verschijnen).
7. Voeg een nieuwe regel toe en plak vervolgens dit codefragment:
   <div id="klaviyo-reviews-all" data-id="{{product.id}}"></div>
   

8. Klik op Opslaan.
9. Klik op Voorbeeldwinkel.
10. Ga naar een productpagina in je winkelvoorbeeld voor een product dat reviews heeft. Je zou onderaan de pagina een reviewsoverzicht en een lijstweergave-widget moeten zien.

Aparte widgets voor beoordelingssamenvatting en beoordelingslijst

Als je de widget voor beoordelingssamenvatting en de widget voor beoordelingslijst liever apart installeert (in plaats van samen, zoals beschreven in het gedeelte hierboven), gebruik je de volgende codefragmenten:

Widget voor beoordelingssamenvatting

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

Widget voor lijst beoordelen

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

Carrousel-widget met uitgelichte reviews (optioneel)

De carrousel met uitgelichte reviews toont handmatig geselecteerde reviews op elke pagina die je kiest (bijv. je homepage).

Om een carrousel toe te voegen waarin al je uitgelichte beoordelingen worden weergegeven, moet je eerst beoordelingen selecteren om uit te lichten.

1. Selecteer in de hoofdnavigatie van Klaviyo Reviews.
2. Klik op Alle reviews.
3. Naast een review die je wilt uitlichten, klik je op functies.
   

Zodra je meerdere reviews hebt geselecteerd om op je site uit te lichten, kun je op elke pagina een reviewcarrouselwidget installeren. Navigeer naar de pagina waar je de carrousel wilt laten verschijnen en plak vervolgens het volgende fragment in de code van die pagina:

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

SEO/Widget voor alle reviews (optioneel)

De widget SEO / alle reviews toont alle gepubliceerde reviews voor elk product. Voeg dit toe aan een losse Reviews-pagina of aan je Over ons-pagina.

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

Resultaat

Zodra je de widgets uit dit artikel hebt geïnstalleerd en het nieuwe thema live hebt gezet, worden je reviews weergegeven op productpagina's (en op alle andere pagina's op je site waar je ze hebt geïnstalleerd).