1. Accounts and billing
  3. Pages and forms
  4. SMS
  5. Transactional email
  6. Ecommerce
  7. Integrations
  8. Chat
  1. dotdigital Engagement Cloud Help Centre
  2. Integrations
  3. Shopify and Shopify Plus

Set up abandoned cart with Shopify

Learn to set up an abandoned cart campaign for your Shopify store using Engagement Cloud.

Engagement Cloud for Magento/Magento 2 user, or Engagement Cloud platform-only user?

If so, abandoned cart functionality is configured and implemented differently - and the information below does not apply. Please instead read the Engagement Cloud for Magento 2/Magento or platform-only (abandoned carts module) articles.

Overview

The Shopify abandoned cart module combines some of the platform's most powerful features to help you convert your uncompleted orders and drive up your revenue.  These features include:

  • Web Behavior Tracking
  • CartInsight
  • Program builder 

An abandoned cart is an event that is triggered when:

  • Subscribers who click through from an Engagement Cloud email campaign add items to their cart, and then leave the store without completing an order.
  • Visitors submits their email address in the footer, add items to their cart, and then leave the store without completing the order.
  • Logged-in customers or new account creators add items to their cart, and then leave the store without completing an order.

When an abandoned cart is triggered, the details of the cart are stored as a record in the contact's CartInsight data collection in Engagement Cloud. This CartInsight data includes items such as the URL of the cart, the products in the cart, and the total price of the cart. All of these items are included in the abandoned cart block, which is used to create an abandoned cart email.

Implementing the Abandoned Cart module to your Shopify store requires scripts to be inserted into the theme.  We suggest having your Agency or Development team insert these scripts.  If you do not have these resources available or not familiar with HTML or Javascript we recommend using the abandoned checkout functionality that comes standard with the connector.

Need abandoned checkout instead?

An abandoned cart is not the same as an abandoned checkout. An abandoned checkout is an event that is triggered when customers add items to their cart, and abandon your site from the checkout page. Abandoned carts are triggered when customers abandon your site from any page, including the checkout page. 

Creating an abandoned cart email

Abandoned cart functionality uses a series of triggered campaigns that are added to a program. The email should contain the latest contents of a visitors cart. This is done by using the abandoned cart building block.

To create and build triggered campaigns:

  1. Choose Automation > Triggered Campaign Content > Add New.
  2. Follow the creation wizard.  Select a template, enter a campaign name, and add campaign details.
  3. Use EasyEditor to starting customising the content and building the campaign.
  4. Drag and drop the abandoned cart block into the desired area. You will see placeholder text in this block. This is normal behaviour, on send the contact’s CartInsight data is inserted. When done, click Save.

ac_drop_2.png

Existing Cartinsight data is required for the Abandoned Cart building block to display. If the block is missing we suggest mapping a 'test' program in a deactivated state and allow some cartinsight data to sync through. If you are unsure how to do this please reach out to support.

If you need additional help with campaign building, view our Get Started section.

Creating an abandoned cart program

Contacts are enrolled into an abandoned cart program when they (as visitors on your store) abandon a cart while browsing your site. Enrollment begins when cartDelay is met. For example, to enrol contacts into this program 1 hour after the cart is abandoned cartDelay would be 60. 

When building your abandoned cart program, we suggest that you use a Decision node to check two items:

  1. If the contact has completed the order before sending the abandoned cart email.  This is determined by looking at the cartPhase. If cartPhase is equal to ORDER_COMPLETE the contact placed the order.
  2. If the contact has removed all items from the cart.  This is determined by looking at the subTotal.  If subTotalis equal to 0 then the contents of the cart has been emptied.

You can create a program from scratch or use the prebuilt Abandoned Cart program by going to Automation > My programs > New program.  Select either the 'Blank' template or 'Abandoned Cart' template under E-commerce.

Below is an example of a simple program that can be used to send your Abandoned Cart emails:

Start node

Set the Start node to ‘No scheduled enrolment’

start_node_2.png

Decision node

Attach a Decision node to the Start node. In the Decision node, create a condition that includes only contacts who have a cartPhase value of ORDER_COMPLETE and ModifiedDate occurs today OR contacts who have a subTotal value equal to 0 and ModifiedDate occurs today.  cartPhase and subTotal are found under the CartInsight block when building the segment. 

insight_data_modified_date.png

  • 'NO' path - Attach a Campaign node to the 'NO' path of the Decision node. In the Campaign node, select your abandoned cart email.
  • 'YES' path - Attach an End node to the 'YES' path of the Decision node. Contacts will exit the program if they completed their order.

The entire program will look similar to this:

cart_insight_logic.png

Additional campaigns

If you want to send more than one abandoned cart email, repeat the process from above by adding a delay node and campaign node for each additional email you wish to send. 

The condition of the Decision node should follow the same logic used previously but should look for items created after the first Delay node.

For example, if your second email will be sent 3 days after the first was sent then includes only contacts who have a cartPhase value of ORDER_COMPLETE and ModifiedDate occurs in the last 3 days OR contacts who have a subTotal equal to 0 and ModifitedDate occurs in the last last 3 days.

remaining_program.png

Adding scripts to your store's theme

Web Behavior Tracking

The Web Behavior Tracking (WBT) script is essential to allow Engagement Cloud to track whenever your customers leave any page of your site with items left in their cart. 

Before adding the script to your store

  • Get the unique ID for your WBT profile. This ID is in account settings cog_3.png  > Access > Web behavior profiles. We recommend that you ignore the scripts that are created on this page, and instead use the scripts 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.
  • Clear the default abandoned checkout enrolment in the Shopify Plus connector to avoid any potential enrolment conflicts or duplicate enrolments.

    Shopify_connector_enrol_abandoned_checkouts_to.png

In order to track your customers' carts as soon as they're identified on your store, please follow these steps:

  1. Log in to your Shopify Admin
  2. Go to SALES CHANNELS > Online Store > Themes
  3. Click on Actions > Edit Code > theme.liquid
    shopify_cartinsight_edit_theme_code.png
  4. If you haven't done this before, insert the following script before the </head> tag, and replace the %uniqueID% placeholder with the unique ID for your web behavior tracking profile.  The implementation code given 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');

CartInsight

You have the option to send the abandoned cart email to your customers. Only send abandoned cart emails to contacts that have subscribed to your email campaigns.

  1. Before the </body> tag, copy and paste the following script:
    <script>
    // <<< Engagement Cloud 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="#contact_form";
    !function(t){function e(e,n,i){var r=new Date;r.setTime(r.getTime()+24*i*60*60*1e3);var u="expires="+r.toUTCString();t.cookie=e+"="+n+";"+u+";path=/"}function n(e){for(var n=e+"=",i=t.cookie.split(";"),r=0;r<i.length;r++){for(var u=i[r];" "==u.charAt(0);)u=u.substring(1);if(0==u.indexOf(n))return u.substring(n.length,u.length)}return""}function i(e){return t.querySelector(e)}function r(t,e){return(e=i(t))&&e.value?e.value:null}dmPt.enableGuestAbandonedCart&&(function(t,e,n){(n=i(t))&&n.addEventListener("submit",e,!1)}(dmPt.newsletter_form_id,function(){dmPt&&r("input[type=email]")&&(dmPt.emailSubmitted=r("input[type=email]"),e("dm-subscriber",dmPt.emailSubmitted,{expires:1}))}),dmPt.emailSubmitted=n("dm-subscriber")),dmPt&&(dmPt.cartId=n("cart"),e("dm-cart",dmPt.cartId,{expires:1}))}(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, //This value is retrieved from a Shopify cookie
    "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>
  2. 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 Engagement Cloud to wait after a customer exits your store before enrolling them on the program
  3. Save theme.liquid

    Sending to Non-Subscribers?

    The following adjustments need to be made to the script:

    • 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;

Order success

A similar script needs to be implemented on the Order Processing page to prevent abandoned cart emails from being sent if the contact completes the purchase.  

  1. Navigate to Settings > Checkout > Order processing 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');

// <<< Engagement Cloud 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>
  2. Replace the following placeholders:
    • The %uniqueID% placeholder with the unique ID for your Web Behavior tracking profile
    • The  %programID% placeholder with the ID of the program you want to enrol your contacts in
    • The %cartDelay% placeholder with the number of minutes that you want Engagement Cloud to wait after a customer exits your store before enrolling them on the program.  
  3. When finished, click 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;

Testing the abandoned cart process

We recommend thoroughly testing the abandoned cart process on your development store before finalising your changes.

  1. In your abandoned cart program, attach a Decision node to the Start node. This Decision node will remove contacts from the program if their 'Email' contact data field doesn't match your test email addresses.
    • 'YES' path -Contacts will continue through the rest of the program if their 'Email' contact data field is equal to the email address that you're testing with
    • 'NO' path - Contacts will exit the program if they do not have this email address

    Program_builder_Shopify_abandoned_cart_test.png

  2. After adding the scripts to your store, log in to your store, start adding some items in the cart, and log out
  3. Wait a few minutes, then in Engagement Cloud, go to the 'Manage contact' page of the contact, click the Insight data tab and check that the CartInsight record has been added
  4. Wait a few more minutes, depending on the cartDelay field that you set in the WBT script, and check that your contact has successfully been enrolled on the program

After testing, remember to remove the extra Decision node from the program.

Did you find this article helpful?

Can we help?

Thanks for using Engagement Cloud. If you need more help or support, then contact our support team.