How to Sync Shopify Account Registration Customers to a List

read
Last updated at:

Overview

If you are using Shopify’s account registration form to collect subscribers rather than a Klaviyo signup form, but still want to sync these customers to a Klaviyo list, follow the steps outlined in this article. There are two different methods you can use to achieve this goal. For both methods, you will need to enable an Accepts Marketing checkbox on your registration form. For the first method, you will need to add a hidden input to pass the newsletter customer tag to Shopify, and make sure you’ve chosen a list in your Shopify integration settings. For the second method, you will need to add a script to your registration form. 

Enabling Accepts Marketing on Your Shopify Registration Form

In order to have customers who register for an account on your Shopify site be added to a list within Klaviyo, you will first need to add some additional code to your registration form, which can be found in the registration.liquid file (or similar). 

Add the following code to your registration form to add an Accepts Marketing checkbox:

 <div id="accepts_marketing_checkbox">
  <input type="checkbox" name="customer[accepts_marketing]" checked="checked" value="true" id="marketing">
  <label for="marketing">Yes! Sign me up to receive emails about all the latest tots.</label>
  </div>

You will need to customize the label text with the label you would like to use on your form. 

Customers will have to check this box in order to be added to your list. 

Method 1: Adding the Newsletter Tag Line Code & Checking Integration Settings

First, add the newsletter tag line code to your registration.liquid file, specifically in your registration form’s input group. 

This code line, <input type="hidden" name="customer[tags]" value=" ">, might already be a part of your site, with the Newsletter tag missing. The full line of code should look like this: 

<input type="hidden" name="customer[tags]" value="newsletter">

Next, make sure that you have chosen a list for email subscribers to be added to in your Shopify integration settings.collectemail.png

When a profile is synced to Klaviyo, which happens when a customer fills out the registration form, Klaviyo will check for three things: 

  • Accepts Marketing is set to true
  • Newsletter is in their Shopify tags
  • A list was selected in the integration settings. 

If all three are true, the profile will be subscribed to the list. Note that if you have double opt-in enabled, the customer will first need to confirm their subscription via email before being added to the list. You can test this by filling out the registration form, checking Accepts Marketing, and then looking to see if your test profile has been added to your selected list.

Method 2: Adding the Script to Your Registration Form

This method involves linking your Shopify registration form with your Klaviyo list via a script. The following script should be added to your registration form code:

<script>  
  document.addEventListener("DOMContentLoaded", function() { 
    $(":submit").click(function(e) {
      if ($("#marketing").is(':checked')) { 
        e.preventDefault(); 
        // grab fields; var email = $('input#Email').val(); 
        var firstname = $('input#FirstName').val(); 
        var lastname = $('input#LastName').val(); 
        var settings = { 
          "async": true, 
          "crossDomain": true, 
          "url": "https://manage.kmail-lists.com/ajax/subscriptions/subscribe",
          "method": "POST", 
          "headers": { 
            "content-type": "application/x-www-form-urlencoded", 
            "cache-control": "no-cache" 
          }, 
         "data": {
           "g": "LIST_ID", 
           "email": email, 
            // pass in additional fields 
           "$fields": "$source, $first_name, $last_name",
           "$source": "Account Creation", 
           "$first_name": firstname,
           "$last_name": lastname 
          }
      }; 
      $.ajax(settings).done(function(response) { 
        console.log(response); 
        // select and submit form after subscribing 
        $("#create_customer").submit(); 
      })
    }  
  })
  });
</script>

Make a series of edits to the script in order to personalize it:

  • Replace LIST_ID with the ID of the list you wish to add subscribers to. You can find a list’s ID by navigating to the Lists & Segments tab, clicking on the list, and viewing the list’s settings. 
  • The selector ids in the script must align with those used in your form: 
    • #create_customer - The form the person is submitting
    • #marketing - The checkbox field for whether or not the customer wants to opt into marketing
    • input#Email - The input field for the customer's email address
    • input#FirstName - The input field for the customer's first name
    • input#LastName - The input field for the customer's last name
  • The source of the opt-in should be updated to your preferred text (eg. "Account Creation", "Customer Signup", etc.)
    • "$source": "Account Creation"

Once you’ve updated your form, you can test to make sure this method is working. Fill out the registration form, check Accepts Marketing, and then look to see if your test profile has been added to your selected list. Note that if you have double opt-in enabled, you will need to first confirm the subscription via email before being added to the list. 

Troubleshooting

If you are uncomfortable with editing and adding code and scripts, and require developer assistance, we recommend reaching out to a Klaviyo partner agency

Additional Resources

How to Integrate with Shopify

Sync Shopify Email Subscribers to a Klaviyo List

x
Was this article helpful?
5 out of 5 found this helpful