If you choose to install the abandoned cart module for Shopify manually, there are a number of scripts that will need to be placed on your site. This article will show you how.

Before you start

Things you need to know:

You must get the unique ID for your Web behaviour tracking profile. To find it, expand the User menu and go to Settings > Access > Web behavior profiles. You must be an account owner or have the Can manage account permission enabled to see the Access menu item.

Learn more in Restrict and grant user access permissions.

The Web behaviour profiles page provides some example scripts, however for Shopify we recommend you use the scripts provided in this article.
Make a note of the ID of your abandoned cart program. This ID is in the URL of the program page, for example https://r1-app.dotdigital.com/Program/Edit?``id=XXXXXX.
If you have one set, clear the default abandoned checkout enrolment in the Shopify Plus connector to avoid any potential enrolment conflicts or duplicate enrolments.

To do this go to Connect and select the Shopify tile in your Dotdigital account, and expand the Enrol abandoned checkouts to drop-down menu and select No program selected, then SAVE.

Install the Web behavior tracking script

The Web Behavior Tracking script is essential to allow Dotdigital to track when your customers leave any page of your site with items left in their cart.

In order to track your customers' carts as soon as they're identified on your store:

Log in to your Shopify Admin.
Go to SALES CHANNELS > Online Store > Themes
Select Actions > Edit Code > theme.liquid
Insert the following script before the </head> tag, and replace the %uniqueID% placeholder with the unique ID for your web behavior tracking profile. The code must be wrapped within <script></script> .

var dm_insight_id = 'uniqueID';

(function(w, d, u, t, o, c) {
    w['dmtrackingobjectname'] = o;
    c = d.createElement(t);
    c.async = 1;
    c.src = u;
    t = d.getElementsByTagName(t)[0];
    t.parentNode.insertBefore(c, t);
    w[o] = w[o] || function() {
        (w[o].q = w[o].q || []).push(arguments);
    };
    w[o]('track');
})(window, document, '//static.trackedweb.net/js/_dmptv4.js', 'script', 'dmPt');

Install the CartInsight script

This script sends the details of a customer’s cart to Dotdigital to allow this information to be used in your abandoned cart campaigns and programs.

Before the </body> tag, copy and paste the following script:

<script>
    // <<< Dotdigital Abandoned cart script >>>
    var dmPt = dmPt ? dmPt : {};
    // Change this value to true if you want to enable guest abandoned cart
    dmPt.enableGuestAbandonedCart = false;
    // Id or selector expression to return the newsletter sign up forms of your store
    dmPt.newsletter_form_id = "#ContactFooter";

    !function (u) {
        function e(t) {
            var e, n, r, i = (e = t.target, n = "input[type=email]", (r = e.querySelector(n)) && r.value ? r.value : null);
            i && a(i)
        }

        function a(t) {
            n("dm-subscriber", t, 365)
        }

        function n(t, e, n) {
            var r;
            e && ((r = new Date).setTime(r.getTime() + 24 * n * 60 * 60 * 1e3), u.cookie = t + "=" + e + "; expires=" + r.toGMTString() + "; path=/")
        }

        function t(t) {
            for (var e = t + "=", n = u.cookie.split(";"), r = 0; r < n.length; r++) {
                for (var i = n[r]; " " == i.charAt(0);) i = i.substring(1, i.length);
                if (0 == i.indexOf(e)) return i.substring(e.length, i.length)
            }
            return null
        }

        dmPt && (dmPt.enableGuestAbandonedCart && u.querySelectorAll(dmPt.newsletter_form_id).forEach(function (t) { t.addEventListener("submit", e, !1) }), dmPt.emailSubmitted = t("dm-subscriber"), a(dmPt.emailSubmitted), dmPt.cartId = t("cart"), n("dm-cart", dmPt.cartId, 15))
    }(document);

    {% if customer.email and customer.accepts_marketing %}
    dmPt("identify", "{{ customer.email }}");
    {% else %}
    if (dmPt.enableGuestAbandonedCart && dmPt.emailSubmitted && dmPt.emailSubmitted !== "") {
        dmPt("identify", dmPt.emailSubmitted);
    }
    {% endif %}
    if (dmPt.cartId && dmPt.cartId !== "") {
        dmPt("cartInsight", {
            "programID": %programID%,
            "cartDelay": %cartDelay%,
            "cartID": dmPt.cartId,
            "cartPhase": "CUSTOMER_LOGIN",
            "currency": "{{ shop.currency }}",
            "subtotal": {{ cart.total_price }}/100,
            "discountAmount": {{ cart.original_total_price | minus: cart.total_price }}/100,
            "taxAmount": 0,
            "grandTotal": {{ cart.total_price }}/100,
            "cartUrl": "{{ shop.url }}/cart/{% for item in cart.items %}{{item.variant_id}}:{{ item.quantity }}{% if forloop.last == false %},{% endif %}{% endfor %}",
            "lineItems": [
                {% for item in cart.items %}
                {
                    "sku": "{{ item.sku }}",
                    "name": "{{ item.title }}",
                    "description": "{{ item.product.description | strip_html | escape | strip_newlines }}",
                    "category": "{% for collection in item.product.collections %}{{ collection.title }} {% endfor %}",
                    "other": "{% for tag in product.tags %}{{ tag }} {% endfor %}",
                    "unitPrice": {{ item.original_price }}/100,
                    "salePrice": {{ item.price }}/100,
                    "quantity": {{ item.quantity }},
                    "totalPrice": {{ item.line_price }}/100,
                    "imageUrl": "{{ item.image | img_url: 'small' | prepend:'https:'}}",
                    "productUrl": "{{ shop.url }}{{ item.url}}",
                }
                {% if forloop.last == false %},
                {% endif %}
                {% endfor %}
            ]
        });
    }
</script>

Replace the %programID% placeholder with the ID of the program you want to enrol your contacts on, and replace the %cartDelay% placeholder with the number of minutes that you want Dotdigital to wait after a customer exits your store before enrolling them on the program
Save theme.liquid.

Sending to non-subscribers

You can choose to enrol non-subscribed contacts on your abandoned cart program from your store settings by going to Connect > Shopify in your Dotdigital account.

Under the heading Abandoned cart, set Allow abandoned cart for non-subscribed contacts to YES.

If you want to make this change to the script directly, you need to make the following adjustments:

Non-subscribed customers
Change this line {% if customer.email and customer.accepts_marketing %} to {% if customer.email %}
Guests
Change this line dmPt.enableGuestAbandonedCart = false; to dmPt.enableGuestAbandonedCart = true;

Install the order success script

This script is implemented on the Order Processing page to prevent abandoned cart emails from being sent if the contact completes the purchase.

In your Shopify store admin go to Settings > Checkout and paste the following script in Additional scripts:

<script>
    var dm_insight_id = 'uniqueID';
    (function(w, d, u, t, o, c) {
        w['dmtrackingobjectname'] = o;
        c = d.createElement(t);
        c.async = 1;
        c.src = u;
        t = d.getElementsByTagName(t)[0];
        t.parentNode.insertBefore(c, t);
        w[o] = w[o] || function() {
            (w[o].q = w[o].q || []).push(arguments);
        };
        w[o]('track');
    })(window, document, '//static.trackedweb.net/js/_dmptv4.js', 'script', 'dmPt');

    // <<< Dotdigital Abandoned cart script >>>
    var dmPt = dmPt ? dmPt : {};

    // Change this value to true if you want to enable guest abandoned cart
    dmPt.enableGuestAbandonedCart = false;

    !function(i) {
        function t(t) {
            for (var n = t + "=", r = i.cookie.split(";"), e = 0; e < r.length; e++) {
                for (var d = r[e]; " " == d.charAt(0);) d = d.substring(1);
                if (0 == d.indexOf(n)) return d.substring(n.length, d.length);
            }
            return "";
        }
        dmPt.enableGuestAbandonedCart && (dmPt.emailSubmitted = t("dm-subscriber")), dmPt.cartId = t("dm-cart");
    }(document);

    {% if customer.email and customer.accepts_marketing %}
        dmPt("identify", "##{{ customer.email }}");
    {% else %}
        if (dmPt.enableGuestAbandonedCart && dmPt.emailSubmitted && dmPt.emailSubmitted !== "") {
            dmPt("identify", dmPt.emailSubmitted);
        }
    {% endif %}
    if (dmPt.cartId && dmPt.cartId !== "") {
        dmPt("cartInsight", {
            "programID": %programID%,
            "cartDelay": %cartDelay%,
            "cartID": dmPt.cartId,
            "cartPhase": "ORDER_COMPLETE",
            "grandTotal": ##{{ total_price | money_without_currency }},
            "currency": "##{{ shop.currency }}",
            "subtotal": ##{{ total_price | money_without_currency }},
            "discountAmount": 0,
            "taxAmount": 0,
            "cartUrl": "##{{ shop.url }}",
            "lineItems": []
        });
    }
</script>

Replace the following placeholders:
1. The %uniqueID% placeholder with the unique ID for your Web behavior tracking profile
2. The %programID% placeholder with the ID of the program you want to enrol your contacts in
3. The %cartDelay% placeholder with the number of minutes that you want Dotdigital to wait after a customer exits your store before enrolling them on the program.
When finished, select Save.

Sending to non-subscribers

The following adjustments need to be made to the script:

Non-subscribed customers
{% if customer.email and customer.accepts_marketing %} to {% if customer.email %}
Guests
dmPt.enableGuestAbandonedCart = false; to dmPt.enableGuestAbandonedCart = true;

Set up abandoned carts

Abandoned cart JSON breakdown

Changes made to BigCommerce

Additional scripts for Shopify features

Set up abandoned cart with Shopify