Shopify

Overview

This guide describes how Shopify, the ever popular eCommerce platform, and Extole easily work directly together. With these easy steps, you’ll see how rapidly Extole tags can be embedded into Shopify pages and conversion tracking can be enabled. Following these instructions can take as little as one hour.

Prerequisites

Getting started with implementing Extole on a Shopify site begins with making sure the following prerequisites are satisfied.

Requirement	Description
Shopify Account	Access to and familiarity with the Shopify platform.
Shopify GitHub Access	Either your developer or Extole (if you’re taking advantage of our launch team) has access to your Shopify partner account and to the site’s GitHub repository.

With access to the materials detailed above, the following sections will describe how you’ll match your refer-a-friend marketing plan and the corresponding onsite CTAs by implementing Extole marketing zone tags that will deliver that CTA creative to your site. Then, you’ll also learn how to set up Extole conversion tracking so that Extole rewards all issue properly and analytics are working properly.

Integration

Edit the Current or Development Shopify Theme

Once logged into Shopify, you will need to choose the appropriate theme to edit the code.

The 'Current' theme is the theme that is currently being presented in the live site and the 'Development' theme is the theme where the tags should be tested first. You can get to the themes by clicking Online Store > Themes. Once you see all themes, click on Actions > Edit Code to edit the theme's code.

Add Extole core.js and Zone Tags Inside Liquid Themes

Liquid is an open-source template language created by Shopify and written in Ruby that allows anyone to edit the code directly in the liquid template or layout page.

You will first add Extole’s core.js to all of the Shopify pages by putting the reference to core.js in the master liquid theme called "theme.liquid" inside of the <head></head> tags. Note that refer.brand.com is a reference to your branded and CNAMEd Extole domain:

<!-- BRANDED -->
<script type="text/javascript" src="https://refer.brand.com/core.js" fetchpriority="high" async></script>
 
<!-- UNBRANDED UNTIL CNAME IS COMPLETE -->
<script type="text/javascript" src="https://brand.extole.io/core.js" fetchpriority="high" async></script>

Next, add Extole zone tags for each call-to-action in your marketing plan. Often, Extole clients will use our overlay call-to-action, which is used in this document as an example of how to implement that type of Extole tag:

<span id='extole_zone_overlay'></span>
<script type="text/javascript">
  /* Start Extole */  
  (function(c,e,k,l,a){c[e]=c[e]||{};for(c[e].q=c[e].q||[];a<l.length;)k(l[a++],c[e])})(window,"extole",function(c,e){e[c]=e[c]||function(){e.q.push([c,arguments])}},["createZone"],0);
  /* End Extole */
    extole.createZone({
        name: "overlay",
        element_id: "extole_zone_overlay",
        app_type: "shopify"
    });
</script>

Add Extole CTA Zone Tags

A call-to-action (CTA) zone represents a particular section of content real estate on your site pages that allows your team to engage your advocates with multiple campaigns/creatives/messages. A zone to the Extole platform is similar to a zone with an ad server, site analysis tool, or testing framework.

An Extole campaign includes the following set of standard zone names:

global_header
global_footer
confirmation
overlay

To add any CTA tag to all of the pages, you will need to look for the liquid template that you want to add the tag in. For example, global_footer can be added to the footer.liquid template just as is:

<span id="extole_zone_global_footer"></span>
<script type="text/javascript">
  /* Start Extole */
  (function(c,e,k,l,a){c[e]=c[e]||{};for(c[e].q=c[e].q||[];a<l.length;)k(l[a++],c[e])})(window,"extole",function(c,e){e[c]=e[c]||function(){e.q.push([c,arguments])}},["createZone"],0);
  /* End Extole */
   extole.createZone({
     name: 'global_footer',
     element_id: 'extole_zone_global_footer'
  });
</script>

Edit Settings Checkout page to add core.js, Confirmation CTA, and Conversion Tags to the Order Confirmation Page

Shopify allows javascript tags/pixels to fire on the order confirmation page under Settings > Checkout > Additional Scripts, which is a quick and easy to add the Extole confirmation CTA, which is a share experienced that automatically pops for every site purchasers, as well as the Extole conversion tag.

The conversion tag use data from the 'checkout' and 'customer' Shopify objects after an order is submitted, and you add it as depicted here:

<!-- Extole begin -->
<script src="https://refer.brand.com/core.js" async=""></script>
{% if first_time_accessed %}
<script type="text/javascript">
    (function(c,b,f,k,a){c[b]=c[b]||{};for(c[b].q=c[b].q||[];a<k.length;)f(k[a++],c[b])})(window,"extole",function (c,b){b[c]=b[c]||function (){b.q.push([c,arguments])}},["createZone"],0);
    extole.createZone({
        name: "confirmation"
    });
</script><script type="text/javascript">
var coupons = [];
{% for discount in checkout.discounts %}
coupons.push("{{ discount.code }}");
{% endfor %}
    (function(c,b,f,k,a){c[b]=c[b]||{};for(c[b].q=c[b].q||[];a<k.length;)f(k[a++],c[b])})(window,"extole",function (c,b){b[c]=b[c]||function (){b.q.push([c,arguments])}},["createZone"],0);
    extole.createZone({
        name: "conversion",
        data: {
            "first_name": "{{ checkout.customer.first_name }}",
            "last_name": "{{ checkout.customer.last_name }}",
            "email": "{{ checkout.email }}",
            "partner_conversion_id": "{{ checkout.order_number }}",
            "cart_value": "{{ checkout.subtotal_price | money_without_currency }}",
            "coupon_code": coupons.join()
        }
    });
</script> {% endif %}
<!-- Extole end -->

Preview and Publish Your Changes

To preview and test the Extole tags you’ve added, click on the Theme name's actions to whether you want to 'Preview' or 'Publish' . Once you click on ‘Publish’, all draft changes will be pushed. You will need to apply the same code change to the current (live) theme once QA of all tags and the referral flow have been approved in the Development theme.