Klaviyo Integraties

Hoe installeer je de Back in Stock functie voor Shopify

Uitleg van de installatie van de Back in Stock functie voor Shopify

Installatie van de Back in Stock-functie wordt niet standaard ondersteund voor Shopify-shops die aangepaste thema's gebruiken. Voor een lijst met ondersteunde thema's, kijk hier. Op dit moment kan Klaviyo niet helpen met het implementeren van Back in Stock voor winkels met aangepaste thema's. Hiervoor heb je de hulp van een Shopify developer en een Klaviyo expert nodig. Polaris Growth kan hierbij helpen.

Overzicht

Klaviyo's Back in Stock-functie voor Shopify-shops heeft twee hoofdcomponenten:

  1. Back in Stock Flow: wanneer iemand zich abonneert op een back-in-stock reminder, wordt er een "Subscribed to Back in Stock" event bijgehouden in zijn/haar Klaviyo-profiel. Dit is het event dat je gebruikt om je Back in Stock Flow te activeren. Klanten belanden in de flow wanneer ze zich abonneren op een back-in-stock reminder en wachten bij een "Back in Stock Delay" totdat het betreffende product is aangevuld.
  2. Website-knop: Je moet een code aan je Shopify-thema toevoegen die automatisch een knop "Waarschuw mij wanneer beschikbaar" laat zien wanneer artikelen niet op voorraad zijn. Wanneer shoppers op deze knop klikken, vullen ze een formulier in en abonneren ze zich op een back-in-stock reminder.

Deze handleiding richt zich op het toevoegen van de Back in Stock-code van Klaviyo aan je Shopify theme.liquid-bestand, zodat jouw klanten zich kunnen abonneren op de back in stock wachtlijst waarmee ze een melding kunnen ontvangen zodra het product weer beschikbaar is. Houd er rekening mee dat je al een flow in je account wilt hebben om deze abonnees vast te leggen en vervolgens het proces voor herbevoorrading te automatiseren.

Om de Klaviyo Back in Stock code te laten werken, moet de knop Toevoegen aan Winkelmandje of het formulier Toevoegen aan Winkelmandje aanwezig zijn op de productpagina. Sommige Shopify-thema's kunnen de knop Toevoegen aan Winkelmandje verwijderen als er geen voorraad is. Zorg er in dit geval voor dat wanneer er geen voorraad is, je Shopify-thema een knop Uitverkocht toont. Dit zorgt ervoor dat de Klaviyo code werkt. Om dit wel werkbaar te krijgen heb je de hulp van een Shopify developer en een Klaviyo expert nodig. Polaris Growth kan helpen.

Wat gebeurt er als ik deze code installeer?

Zodra je de onderstaande code installeert, gebeurt het volgende:

  • Wanneer een klant langs een product komt en het product niet op voorraad is, verschijnt er direct naast de knop "Uitverkocht" een knop "Laat me weten wanneer dit weer beschikbaar is" .
  • Wanneer iemand op de knop "Laat me weten wanneer..." klikt, verschijnt er een formulier waarmee de klant zich kan aanmelden om op de hoogte te worden gesteld wanneer het artikel weer op voorraad is.
  • Zodra het formulier is verzonden, wordt een "Subscribed to Back In Stock" event bijgehouden in het profiel van die klant in Klaviyo.

Je wilt eerst een Back in Stock Flow binnen Klaviyo opzetten die wordt geactiveerd wanneer iemand zich abonneert om op de hoogte te worden gesteld wanneer een item wordt aangevuld. Deze flow zal klanten waarschuwen wanneer het artikel waarop ze zich hebben geabonneerd weer op voorraad is. Lees hier hoe je deze flow instelt.

Klaviyo monitort je voorraad op een zeer gedetailleerd niveau, wat betekent dat shoppers zich kunnen abonneren om reminders over specifieke productvarianten te ontvangen. Als een klant bijvoorbeeld ontdekt dat zijn favoriete roze T-shirt in maat M niet meer beschikbaar is, kan hij zich abonneren op deze specifieke variant en Klaviyo zorgt ervoor dat hij/zij pas op de hoogte wordt gesteld als je deze maat en kleur hebt aangevuld.

2018-03-21_18-43-24-1.gif

Installeer de code

Voeg de volgende JavaScript-code toe aan je theme.liquid-bestand in je Shopify-winkel, direct boven de </body> tag. Houd er rekening mee dat deze code wordt ondersteund door alle gratis Shopify-thema's. Als je een aangepast thema hebt, is het mogelijk niet volledig compatibel.

Je moet je openbare API key handmatig invoeren voordat je de code aan je website toevoegt. Om dit te doen, kopieer je jouw openbare API key van 6 tekens uit het Accounts > Settings > API Keys tabblad in je Klaviyo account. Als je meerdere Klaviyo accounts gebruikt, controleer dan of de juiste public API key is toegevoegd aan het codeblok.

Je kunt de kleuren, lettertypen, tekst en andere elementen aanpassen aan jouw ontwerp voorkeuren.

De standaardwaarden in de bovenstaande code worden hieronder vermeld en uitgelegd. Als je updates aanbrengt, zorg er dan voor dat je de waarde bijwerkt en niet het label zelf.

Tip: Als je geïnteresseerd bent in het matchen van de stijl van je Shopify-thema, raadpleeg dan dit document.

Trigger Instellingen

De trigger is de knop die wordt ingevuld wanneer een artikel niet meer op voorraad is. Deze knop zegt standaard: "Notify me when available", maar kan worden geconfigureerd om te zeggen wat je maar wilt. De standaardcode voor de trigger is:

  • product_page_text: De tekst die in de knop wordt weergegeven wanneer een item niet meer op voorraad is
  • product_page_class: Deze “class” bepaalt hoe de knop eruit ziet; de standaardwaarde 'btn' zorgt ervoor dat deze knop overeenkomt met andere basisknoppen in uw thema
  • product_page_text_align: De uitlijning van de tekst in de knop Back in Stock (bijv. midden, rechts of links)
  • product_page_margin: De marge die is toegevoegd rond de knop, tussen de text en de knop
  • alternate_anchor: Als je Shopify-thema een ander element dan een "Toevoegen aan winkelwagentje"  knop gebruikt, vervang je deze tekst door het ID van het element.
  • replace_anchor: Als dit is ingesteld op false, zie je zowel een "Uitverkocht" als een "Waarschuw mij wanneer beschikbaar"  knop. Wanneer dit is ingesteld op true, vervangt de knop 'Waarschuw mij wanneer beschikbaar' de knop 'Uitverkocht'

Visibility instellingen activeren

Als je wilt bepalen welke producten de knop ‘Back in Stock’ op de productpagina weergeven, kan je de onderstaande parameters opnemen. Zorg ervoor dat je include_on_tags of exclude_on_tags opneemt, maar niet beide.

Tags zijn hoofdlettergevoelig. Als je tag parameters gebruikt, typ de tag dan precies zoals deze zou moeten verschijnen.


  • include_on_tags: deze tag zorgt ervoor dat de Back in Stock knop alleen wordt weergegeven bij items die de opgegeven tags bevatten. In het bovenstaande voorbeeld hebben alleen producten die zijn getagd met 'hond', 'kat' of beide een Back in Stock knop.
  • exclude_on_tags: Dit is het omgekeerde van het bovenstaande. Als je exclude_on_tags gebruikt, zorg je ervoor dat de Back in Stock knop wordt weergegeven bij alle producten, behalve bij de gespecificeerde.

Bovendien kan je het standaardgedrag van Klaviyo, waar de optie "Allow customers to purchase this product when it's out of stock" is geselecteerd, overschrijven door display_on_policy_continue te bewerken.

Opmerking: de volgende functie is alleen compatibel met Shopify stores die vóór 5 december 2017 zijn opgezet.


Klaviyo zal de Back in Stock knop niet standaard tonen bij artikelen waarvoor je de optie "Allow customers to purchase this product when it's out of stock" hebt geselecteerd. De waarde true toekennen aan display_on_policy_continue zorgt ervoor dat de Back in Stock knop altijd wordt weergegeven, ongeacht welke andere conditie dan ook. Als je deze optie hebt geselecteerd, zien klanten zowel een knop "Aan winkelwagen toevoegen" als een knop "Houd me op de hoogte wanneer dit weer op voorraad is".

Modal instellingen

De modal is het berichtvenster dat verschijnt wanneer iemand op de knop klikt om een ​​melding te ontvangen zodra een item weer op voorraad is. Dit zijn de standaardinstellingen die je kunt aanpassen:

  • headline: de headline die bovenaan de pop-up verschijnt; Klaviyo vult de kop standaard dynamisch in met de productnaam met Shopify's variabele {product_name} 
  • body_content: de tekst die in het pop-upvenster verschijnt en de klant instrueert wat hij/zij moet doen
  • email_field_label: de aanduiding voor tekst in het email veld
  • button_label: de tekst in de "submit" knop
  • subscription_success_label: Het "success" bericht dat in het groen verschijnt wanneer iemand het pop-up formulier succesvol heeft verzonden
  • footer_content: (optioneel) Tekst die zal verschijnen in de footer, onder de verzendknop
  • close_label: De tekst van de knop ‘sluiten’; standaard is deze "Close"
  • background_color: De achtergrondkleur van het pop-up formulier; standaard is deze wit
  • text_color: de tekstkleur van het pop-up formulier; standaard is deze zwart
  • button_text_color: De tekstkleur van de knop op het pop-up formulier; standaard is deze wit
  • button_background_color: De achtergrondkleur van de verzendknop van het formulier; standaard is deze blauw
  • error_background_color: De achtergrondkleur van een foutvenster dat aangeeft wanneer er een fout is opgetreden bij het verzenden van het formulier; standaard is deze lichtrood
  • error_text_color: De tekstkleur van het foutbericht dat aangeeft wanneer er een fout is opgetreden bij het verzenden van het formulier; standaard is deze rood
  • success_background_color: de achtergrondkleur van het succes vak dat wordt weergegeven nadat iemand het formulier met succes heeft verzonden; standaard is deze lichtgroen
  • success_text_color: de tekstkleur van het succes bericht dat wordt weergegeven nadat iemand het formulier met succes heeft verzonden; standaard is deze groen
  • font_family: de naam van de lettertypefamilie waarin je tekst is opgemaakt. Times New Roman is een voorbeeld van een lettertypefamilie.
  • headers_font_family: de naam van de lettertypefamilie waarin je header is opgemaakt. Helvetica is een voorbeeld van een lettertypefamilie die wordt gebruikt voor headers.

Vraag klanten om zich aan te melden voor je nieuwsbrief

Wanneer iemand zich abonneert op een melding voor de herbevoorrading van een product, betekent dit niet noodzakelijkerwijs dat ze verwachten dat ze ook geabonneerd zijn op op je nieuwsbrief.

Als klanten vragen om te worden gewaarschuwd wanneer een artikel weer op voorraad is, maar vervolgens regelmatig marketing content van je ontvangen, zullen ze zich waarschijnlijk uitschrijven. In dit scenario mis je de mogelijkheid om van deze shoppers loyale klanten te maken, omdat ze zich al vroeg afmelden nadat ze e-mails hebben ontvangen waarvan ze nooit hebben aangegeven dat ze die wilden.

Om de klanten vast te leggen die zich willen aanmelden om marketing e-mails van je te ontvangen, kan je een selectievakje zoals hieronder toevoegen aan je Back in Stock-formulier:

Om dit te implementeren, moet je een toevoeging doen aan je code door je lijst-ID toe te voegen in de "klaviyo.init" sectie na je Account ID.

De "klaviyo.init" sectie zal er als volgt uitzien:

Vervang YOUR_LIST_ID door het ID van zes tekens voor de Klaviyo Lijst waaraan je deze abonnees wilt toevoegen. Dit zou normaal gesproken je belangrijkste nieuwsbrief lijst moeten zijn.

De code met deze toevoeging (zie regel 5) zal er als volgt uitzien:

Als je een aanpassing wilt doen ten aanzien van wat het selectievakje zegt, kan je de tekst die je wilt weergeven toevoegen aan het onderdeel "modal".

Het selectievakje zal standaard zeggen: “Add me to your email list.” Je moet ervoor zorgen dat deze tekst heel duidelijk is, zodat degenen die zich aanmelden weten dat ze marketing e-mails van je zullen ontvangen.

Als je wilt controleren of dit vakje is aangevinkt of niet, kan je "subscribe_checked" als parameter toevoegen aan de "modal" sectie. True zal het vakje standaard aanvinken, terwijl false deze uitgeschakeld laat en de gebruiker dit handmatig moet selecteren.

Probleemoplossingen

Het uiterlijk van de Back in Stock knop is afhankelijk van het specifieke Shopify thema dat je webwinkel gebruikt. Als je een aangepast thema gebruikt, moet je mogelijk je thema code aanpassen om ervoor te zorgen dat de Back in Stock functie correct werkt.

Retina Thema

Het Retina thema (van Out of the Sandbox) wordt geleverd met een "Notify Me"  formulier op de productpagina. Je moet de standaardknop die bij je thema wordt geleverd, uitschakelen om de Klaviyo code te laten werken.

De locatie van de knop "Houd mij op de hoogte" aanpassen

Als een Shopify-winkel aangepaste button classes gebruikt, moet je `'product_page_class: 'btn'` in de code aanpassen aan de button classes van je thema. Hierdoor kan de knop "Houd mij op de hoogte" automatisch dezelfde stijl aannemen als alle andere knoppen in je thema.

Als je niet tevreden bent met hoe de knop dynamisch wordt weergegeven, kan je een conditie toevoegen aan je liquid template:

Klaviyo zal detecteren of er al een knop op de pagina staat en zich met die knop verbinden.

Formulier Vereisten voor Toevoegen aan Winkelwagentje

Om ervoor te zorgen dat de Klaviyo Back in Stock code werkt, moet de knop Toevoegen aan Winkelwagentje of het formulier Toevoegen aan Winkelwagentje aanwezig zijn op de productpagina. Sommige Shopify-thema's kunnen de knop Toevoegen aan Winkelwagentje verwijderen als er geen voorraad is. Bevestig in dit geval dat wanneer er geen voorraad is, je Shopify-thema een knop Uitverkocht toont. Dit zorgt ervoor dat de Klaviyo-code werkt.  

Thema's die een product verbergen als alle varianten zijn uitverkocht

Als je Shopify-thema een product verbergt als alle varianten zijn uitverkocht, moet je dit gedeelte van de code in je product.liquid-bestand identificeren en het bewerken om alle producten weer te geven, ongeacht het voorraadniveau.

Alle handleidingen

Meer handleidingen

Hoe creëer je een 'Added to Cart' Event voor Shopify

Wat is een Added to Cart event en hoe voeg je deze toe?

Hoe integreer je Klaviyo met Typeform

Hoe je Klaviyo integreert met survey tool Typeform

Hoe installeer je de Back in Stock functie voor Shopify

Uitleg van de installatie van de Back in Stock functie voor Shopify

Unieke Coupon Codes voor Shopify

Unieke Coupon Codes in Klaviyo aanmaken en gebruiken voor Shopify

Hoe integreer je met WooCommerce

Hoe je de WooCommerce integratie in je Klaviyo account kunt inschakelen

Aan de slag met flows in Klaviyo

Een overzicht van de flows om mee te starten met Klaviyo

Data mogelijkheden Klaviyo

Een overzicht van de typen data die gesynchroniseerd kunnen worden tussen Klaviyo en third-party apps

Hoe informatie wordt uitgewisseld tussen Klaviyo en apps

Klaviyo kan met heel veel verschillende applicaties en platformen integreren. Lees hier hoe de informatie tussen Klaviyo en derde partijen wordt uitgewisseld.

Klaviyo Integreren met Shopify

Klaviyo heeft een native integratie met Shopify maar die dient wel geactiveerd worden. Zo integreer je Klaviyo met Shopify

Klaviyo Back in Stock Flows

Loop geen omzet meer mis als producten tijdelijk niet op voorraad zijn door deze handige Klaviyo functie

A/B testen Klaviyo

Hoe voer je succesvolle A/B tests uit in Klaviyo? Deze handleiding legt de 6 best practices uit van A/B testen!

Hoe je persona's opstelt voor een webwinkel

Een uitgebreide handleiding hoe je persona's opstelt in Klaviyo voor jouw webwinkel

Klaviyo verklarende woordenlijst

Een lijst met alle veel gebruikte Klaviyo en E-mail marketing woorden

Post purchase flow

Een gids voor het creëren van een post-aankoop flow

Handleiding voor het maken van een klaviyo aanmeld formulier / popup

Handleiding voor het maken van een Klaviyo aanmeld formulier / popup

Een handleiding voor het creëren van segmenten

Een gids voor het creëren van segmenten

E-mails opnieuw verzenden in Klaviyo

E-mails opnieuw verzenden in Klaviyo

De basis van Klaviyo

De basis van Klaviyo - een spoedcursus

Abandoned Cart - Verlaten Winkelwagen flow

Een handleiding voor het creëren van een Abandoned Cart flow

Winback Flow

Creëer een Winback Flow