Overzicht

Overzicht

Deze handleiding behandelt het synchroniseren van je Shopify aanmeldingsformulier met een lijst in je Klaviyo account. We gebruiken de 10 gratis thema's van Shopify als voorbeeld. Als je een abonnement neemt om deze methode te gebruiken om een formulier van een aangepast thema te synchroniseren, houd er dan rekening mee dat als je je aanmeldingsformulier hebt aangepast, je mogelijk enkele items in het hieronder gebruikte codefragment moet aanpassen.

Meer informatie

We hebben ook een handleiding voor het toevoegen van een Klaviyo formulier aan alle gratis Shopify thema's.

 


De snippet die je toevoegt aan je Shopify theme.liquid bestand is iets anders, afhankelijk van je thema. Kies je thema uit de onderstaande lijst en volg de bijbehorende instructies. Je kunt ook afrekenen met ons gedeelte over het gebruik van een aangepast thema als je jouw thema niet op de lijst hieronder ziet staan.

Thema's met jQuery 3.2.1 of hogerThema's met een jQuery-versie < 3.2.1
  • Brooklyn
  • Levering
  • Jumpstart
  • Pop
  • Eenvoudig
  • Minimaal
  • Verhalend
  • Debuut
  • Risico
  • Grenzeloos
Shopify Thema's die jQuery 3.2.1 of hoger bevatten

Shopify Thema's die jQuery 3.2.1 of hoger bevatten

Gebruik het volgende fragment om je Shopify aanmeldingsformulier te synchroniseren met een lijst in je Klaviyo account. Vergeet niet om update de lijst id in de snippet te gebruiken. Het basisproces gaat als volgt:

  1. Klik in je Shopify admin op Webshop en klik vervolgens in de vervolgkeuzelijst Acties op Code bewerken om je webeditor te openen.
  2. Open je theme.liquid bestand en plak het onderstaande codefragment erin. Plak het knipsel vóór de afsluitende </body>tag</body >.
    <script type="text/javascript"> 
     $("input[name='contactpersoon[e-mail]']").on('blur', functie(e) {
     e.preventDefault();
     var e-mail = $(this).val();
            var settings = {
     " async": true,
     " crossDomain": true,
     " url": "https://manage.kmail-lists.com/subscriptions/external/subscribe",
                "methode": "POST",
     " headers": {
                    "content-type": "application/x-www-form-urlencoded",
                    "cache-control": "no-cache"
                },
     " gegevens": {
                    "g": "LIST_ID",
                    "$fields": "$source",
                    "email": email,
                    "$source": "Shopify form"
                }
            };
     $.ajax(instellingen).done(functie (antwoord) {
                console.log(response);
            });
     });
    </script>
  3. Selecteer vanuit je Klaviyo account de lijst die je wilt synchroniseren en kopieer de lijst-id.
    lijstID.png
  4. Voeg vanuit je Shopify account de lijst-id toe aan het codefragment in je theme.liquid bestand. Bij deze stap kun je ook de $source van dit formulier aanpassen als je dat wilt.
    shopifyDefaultFormListid.png
  5. Sla je update theme.liquid bestand op.

Je kunt nu testen of je aanmeldingsformulier werkt. Voer eerst je e-mailadres in het formulier in. Controleer vervolgens je inbox en bevestig je inschrijving met de inschrijfmail. Zoek als laatste naar je e-mailadres in je Klaviyo account om te bevestigen dat je profiel is toegevoegd.

Als je nog steeds problemen ondervindt, neem dan contact op met ons supportteam.

Shopify Thema's met een jQuery versie lager dan 3.2.1 of geen jQuery

Shopify Thema's met een jQuery versie lager dan 3.2.1 of geen jQuery

Gebruik het volgende fragment om je Shopify aanmeldingsformulier te synchroniseren met een lijst in je Klaviyo account. Vergeet niet om update de lijst id in de snippet te gebruiken. Het basisproces gaat als volgt:

  1. Klik in je Shopify admin op Webshop en klik vervolgens in de vervolgkeuzelijst Acties op Code bewerken om je webeditor te openen.
  2. Open je theme.liquid bestand en plak het onderstaande codefragment erin. Plak het knipsel vóór de afsluitende </body>tag</body >.
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>var $KL = jQuery.noConflict(true);</script>
    < script type="text/javascript"> 
     $KL("input[name='contactpersoon[e-mail]']").on('blur', function(e) {
     e.preventDefault();
     var e-mail = $KL(this).val();
     var settings = {
     " async": true,
     " crossDomain": true,
     " url": "https://manage.kmail-lists.com/ subscriptions/external/subscribe",
     " methode": "POST",
     " headers": {
                    "content-type": "application/x-www-form-urlencoded",
                    "cache-control": "no-cache"
                },
     " gegevens": {
                    "g": "LIST_ID",
                    "$fields": "$source",
                    "email": email,
                    "$source": "Shopify form"
                }
            };
     $KL.ajax(settings).done(function (response) {
                console.log(response);
            });
     });
    </script>
  3. Selecteer vanuit je Klaviyo account de lijst die je wilt synchroniseren en kopieer de lijst-id.
    lijstID.png
  4. Voeg vanuit je Shopify account de lijst-id toe aan het codefragment in je theme.liquid bestand. Bij deze stap kun je ook de $source van dit formulier aanpassen als je dat wilt.
    shopifyDefaultFormListid.png
  5. Sla je update theme.liquid bestand op.

Je kunt nu testen of je aanmeldingsformulier werkt. Voer eerst je e-mailadres in het formulier in. Controleer vervolgens je inbox en bevestig je inschrijving met de inschrijfmail. Zoek als laatste naar je e-mailadres in je Klaviyo account om te bevestigen dat je profiel is toegevoegd.

Als je nog steeds problemen ondervindt, neem dan contact op met ons supportteam.

Een aangepast thema gebruiken

Een aangepast thema gebruiken

Als je een aangepast thema gebruikt, moet je eerst de versie van jQuery controleren die je thema gebruikt en vervolgens een codefragment kiezen. Als je thema het standaard aanmeldingsformulier Shopify heeft aangepast, moet je het knipsel ook aanpassen zodat het de e-mailingang element met de juiste id aanpast.

  1. Navigeer naar je site en open de console van je webbrowser (als je Chrome gebruikt op een Mac kun je op ⌥-⌘-Jdrukken).
  2. Het volgende commando geeft de huidige versie van jQuery op je site: $.fn
  3. Als je jQuery versie 3.2.1 of hoger is, kun je de instructies gebruiken in het gedeelte voor Shopify Thema's die jQuery 3.2.1 of hoger bevatten.
  4. Als je jQuery versie lager is dan 3.2.1, kun je de instructies gebruiken in het gedeelte voor Shopify Thema's met een jQuery versie lager dan 3.2.1.

Als je nog steeds problemen ondervindt, neem dan contact op met ons supportteam.

Wijzig de $source van uw formulier

Wijzig de $source van uw formulier

In de standaardknipsels op deze pagina kun je de regel met $source" : "Shopify formulier" aanpassen als je de $source eigenschap wilt wijzigen die wordt weergegeven op het profiel van je klant binnen Klaviyo. Verander alleen de waarde van deze uitdrukking. Bijvoorbeeld, update naar "$source": "Homepage-formulier" zal het profiel van een gebruiker $source op zijn profiel als volgt:

Wees voorzichtig bij het wijzigen van elementen van deze vorm. Als je merkt dat je formulier niet goed werkt, neem dan contact op metpersoon klant support of probeer het formulier helemaal opnieuw toe te voegen met behulp van het standaard codefragment in dit artikel.

Was dit artikel nuttig?
Gebruik dit formulier alleen voor feedback op artikelen. Meer informatie over hoe je contact opneemt met support.

Ontdek meer van Klaviyo

Community
Maak contact met collega's, partners en Klaviyo-experts om inspiratie op te doen, inzichten te delen en antwoorden te krijgen op al je vragen.
Live training
Neem deel aan een live sessie met Klaviyo-experts voor meer informatie over best practices, het instellen van belangrijke functies en andere onderwerpen.
Support

Krijg ondersteuning via je account.

E-mailsupport (gratis proefperiodes en betaalde accounts) 24/7 beschikbaar

Chat-/virtuele assistentie
Beschikbaarheid varieert per locatie en type abonnement