Sync a Shopify Signup Form to a List in Klaviyo

read

Overview

This guide covers syncing your Shopify signup form to a list in your Klaviyo account. We use Shopify's 10 free themes as an example. If you plan to use this method to sync a form from a customized theme, keep in mind that if you edited your signup form, you may need to edit some of the items in the code snippet used below.

Learn more

We also have a guide for adding a Klaviyo form to all of Shopify's free themes.

 


The snippet that you add to your Shopify theme.liquid file is slightly different depending on your theme. Choose your theme from the list below, and follow the respective instructions.

Themes with jQuery included Themes without jQuery included
  • Brooklyn
  • Supply
  • Jumpstart
  • Pop
  • Simple
  • Minimal
  • Narrative
  • Debut
  • Venture
  • Boundless

Shopify Themes That Include jQuery

Use the following snippet to sync your Shopify signup form to a list in your Klaviyo account. Remember to update the list id in the snippet. The basic process is as follows:

  1. From your Shopify admin click Online Store, and then from the Actions dropdown click Edit Code to open your web editor.
  2. Open your theme.liquid file and paste in the code snippet below. Paste the snippet before the closing </body> tag.
    <script type="text/javascript">
        $("input[name='contact[email]']").on('blur', function(e) {
            e.preventDefault();
            var email = $(this).val();
            var settings = {
                "async": true,
                "crossDomain": true,
                "url": "https://manage.kmail-lists.com/subscriptions/external/subscribe",
                "method": "POST",
                "headers": {
                    "content-type": "application/x-www-form-urlencoded",
                    "cache-control": "no-cache"
                },
                "data": {
                    "g": "LIST_ID",
                    "$fields": "$source",
                    "email": email,
                    "$source": "Shopify form"
                }
            };
            $.ajax(settings).done(function (response) {
                console.log(response);
            });
        });
    </script>
  3. From your Klaviyo account, select the list you want to sync and copy the list id.
    listID.png
  4. From your Shopify account, add the list id to the code snippet in your theme.liquid file. At this step, you can also modify the $source of this form if you'd like.
    shopifyDefaultFormListid.png
  5. Save your updated theme.liquid file.

You can now test your signup form to ensure that it is working.

Shopify Themes That Do Not Include jQuery

Use the following snippet to sync your Shopify signup form to a list in your Klaviyo account. Remember to update the list id in the snippet. The basic process is as follows:

  1. From your Shopify admin click Online Store, and then from the Actions dropdown click Edit Code to open your web editor.
  2. Open your theme.liquid file and paste in the code snippet below. Paste the snippet before the closing </body> tag.
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript">
        $("input[name='contact[email]']").on('blur', function(e) {
            e.preventDefault();
            var email = $(this).val();
            var settings = {
                "async": true,
                "crossDomain": true,
                "url": "https://manage.kmail-lists.com/subscriptions/external/subscribe",
                "method": "POST",
                "headers": {
                    "content-type": "application/x-www-form-urlencoded",
                    "cache-control": "no-cache"
                },
                "data": {
                    "g": "LIST_ID",
                    "$fields": "$source",
                    "email": email,
                    "$source": "Shopify form"
                }
            };
            $.ajax(settings).done(function (response) {
                console.log(response);
            });
        });
    </script>
  3. From your Klaviyo account, select the list you want to sync and copy the list id.
    listID.png
  4. From your Shopify account, add the list id to the code snippet in your theme.liquid file. At this step, you can also modify the $source of this form if you'd like.
    shopifyDefaultFormListid.png
  5. Save your updated theme.liquid file.

Modify the $source of Your Form

In the default snippets on this page, you can modify the line with $source": "Shopify form" if you'd like to change the $source property that appears on your customer's profiles within Klaviyo. Change only the value of this expression. For example, updating to “$source”: “Homepage form” will set a user's $source on their profile as follows:

Take care when modifying elements of this form. If you find your form is not working correctly, contact customer support or try adding the from from scratch using the default code snippets in this article.

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