Shopify and Shopify Plus

Overview

Launch dynamic programs like Refer A Friend and Drop a Hint with the Extole and Shopify Plus integration. By following this guide, you can place targeted CTAs and experiences throughout your storefront and checkout experiences, track customer activity in real-time, and reward customers using Shopify Discounts.

Prerequisites

Integration

Begin the integration from the Partners page in your Extole account or from the Shopify App Store by clicking "Install." Then, follow the steps below.

Step 1: Configure Extole Core Settings

First, configure your core settings to begin adding Extole tags to your Shopify storefront.

Branded Program Domain

Find your Branded Program Domain in the Tech Center of your Extole account under Program Domains. It's usually in the format of share.brand.com.

Extole Access Token

To generate your Extole Access Token, go to the Security Center and follow the instructions to create a new token. Copy and save the access token in a safe place, as you won’t be able to access it beyond this point.

Add Domain & Token to Shopify

Once you've gathered your Branded Program Domain and Extole Access Token, log in to your Shopify account and go to the Extole app. In Step 1 of the app configuration process, paste in your domain and token and hit Save.

Step 2: Configure Marketing Tags

After configuring your core settings, you can begin to add CTAs (calls to action) by integrating Extole's marketing tags into your Shopify store.

Enable Core Tag

In your Shopify account and within the Extole app, go to Step 2 of the app configuration process and make sure Core JS is turned on.

Enable Marketing Tags

Navigate back to Extole to begin enabling the Marketing tags for the CTAs that you would like to place throughout your store. These can be found in the Campaign Editor for your program in the Marketing tab.

Once you enable the Global Header, Global Footer, Overlay, and Product CTAs in your Extole account, you’ll then need to return to your Shopify account to begin placing the marketing tags throughout your store. Select the Marketing Tags wherever you'd like to market your program (Global Header, Global Footer, etc.)

Next, in order for Extole content like "Refer and get $20"—to display on your Shopify store, you'll need to name the zone in Shopify. To name the zone, navigate to the Extole CTA Tag from the Theme Editor menu.

Select the corresponding name in the drop-down. You can also modify the event data that’s passed through the tags at this point.

While the marketing tags will automatically display in the corresponding area of your storefront, they can be dragged and dropped anywhere and re-named accordingly using the drop-down and custom zone fields in Shopify’s App Embeds UI.

Custom Data in Marketing Tags

When configuring Extole's marketing tags, data such as email, first_name, last_name, partner_user_id, and locale is collected by default depending on the users logged in state. You also have the option to specify any custom data for additional tracking and segmentation capabilities.

To specify custom data in your marketing tags:

1. Go to your Shopify page builder and access the Extole CTA Tag from the Apps section.
2. Choose the zones where you want to add custom data.
3. Once you've selected the zone, add the data into the Custom Data field.

The custom data should be formatted as key-value pairs within a JSON object. You can include both static and dynamic data points.

Example of Custom Data Format:

{
  "static_variable": "foobar",
  "dynamic_product_url": "{{product.url}}"
}

In this example:

• static_variable is a static data point with a fixed value foobar.
• dynamic_product_url is a dynamic data point that retrieves the product URL from the Shopify platform using Shopify's Liquid syntax {{product.url}}.

Shopify's Liquid objects provide a range of dynamic data points that can be included in your custom data.

Use the Liquid syntax {{variable}} to represent dynamic substitution variables. The integration supports a subset of Liquid objects, and support may vary between platforms.

Customization - Create an Embedded Referral Page (Optional)

By default, when a user taps on a CTA in your Shopify store, Extole will load the sharing experience via a pop-up that overlays on top of the page.

If you prefer to land users on a separate referral page that has the sharing experience embedded onto the page, you can create a new page in Shopify and add a custom App Embed using the Shopify theme editor to embed the sharing experience.

First, configure the following in your Extole campaign:

• Enable the referral_page creative

• Enter the URL of the page you've created in Shopify as the promote_destination URL ("Destination for Clicks on Promotions")

• Update each of your Marketing Zone CTAs to Redirect CTA Clicks to the Promote Destination

• 

  
  

Then, create your page in Shopify and add an Extole CTA Tag app block to wherever you would like to embed the referral page experience. To load the Extole content, select Custom as the Zone in the Extole CTA Tag app block, and name the Custom Zone referral_page.

Step 3: Configure Checkout Extension (Shopify Plus only)

Use the Checkout Extension to add a Referral CTA to your Thank You and Order Status pages.

Configuration

1. Navigate to the Extole App admin in Shopify and enable the Checkout Extension.

   
   

2. Then, to place the Checkout Extension on your Thank You and Order Status pages, navigate to the Theme Editor.

3. From the dropdown menu in the Theme Editor, select the "Thank You" or "Order Status" section.

   

4. Click "+ Add app block" in the Sections area.

5. Select the "Extole Checkout Extension" from the list. Once selected, the extension will be added to the page.

Repeat these steps for both the Thank You and Order Status pages.

Step 4: Configure Rewards

Follow the instructions below to automatically create Shopify discount rewards for your various programs.

Create a Shopify Discount(s):

1. Go to the Discounts section in your Shopify admin panel.
2. Generate a random discount code as a placeholder for the rewards that will automatically dispensed by Extole. We recommend setting a minimum purchase amount and restricting the discount code to a single (1) use per customer.

📘

Important Note

If you are using these discount codes for your referral program, Extole recommends creating separate Discounts for advocates and friends.

Configure your Reward(s) in Extole:

1. Log into your Extole account to verify that the Shopify integration was successfully installed on the Partners page.
2. Navigate to the Rewards section.
3. Select the Shopify Coupons from the Reward Supplier and make sure to indicate a Name for the reward and the Price Rule ID for the Discount you created in Shopify. The Price Rule ID is the unique code that you can find in the discount code details on your Shopify admin panel or embedded within the URL when you edit a specific discount code.

4. Save the reward, add it to your Extole campaign, and you’re all set! The integration will automatically generate and issue a new random code each time a participant earns a reward on the configured campaign (see below for an example).

Advanced Configuration

After configuring your core settings, marketing tags, and rewards, you can optionally adjust the notification events that are sent to Extole every time an order is created, fulfilled, and canceled in Shopify. These events enable functionality like tracking, attribution, rewarding, reporting, and segmentation in the Extole platform, so its recommended to stay with the defaults and keep all notification events enabled.

Notification Events

Real-time notifications allow you to track key events in your program, such as when an order is created, fulfilled, or canceled.

• Enable Order Created Notification: This required notification triggers an event when a customer places an online order.
• Enable Order Fulfilled Notification: This notification triggers an event whenever an order has shipped. This is particularly useful if you want to trigger rewards in Extole once an order has actually shipped.
• Enable Order Canceled Notification: This notification triggers an event whenever an order is canceled. For example, in the Extole platform, you can use this event to create a rule that rewards customers 5 days after they have placed their order, as long as they haven’t canceled their order yet.

Data Parameters for Online Purchases

When an online purchase is completed, you can specify which data parameters are sent to Extole. These data parameters enable essential tracking and reporting in the Extole platform.

• partner_conversion_id: This parameter is essential for tracking. It's selected by default and cannot be deselected. It typically represents the order number or a unique identifier for the transaction.
• Additional data parameters are included by default, such as email, partner_user_id, first name, last name, locale, and coupon_code: These parameters provide more context about the customer and the transaction, which can be useful for segmenting and analyzing your data.

Custom Event Data

If you want to track additional data that is specific to your business, you can indicate custom key-value pairs. For example, you might want to track the product category of the purchased items or the marketing channel that led to the referral.

Preview and Publish Your Changes

Once you've configured the app, preview your Shopify site and your Extole campaign and publish your changes to apply them to your live site.

Existing Client Upgrade - FAQs

I only have one Branded Program Domain, can I use the app in my staging environment without it interfering with my production account?

We can work with you to get the app setup in your staging environment. Typically, this involves adding a test sandbox to the data we receive.

Do I have to replace the current callouts I have across my website?

No. Your existing CTAs will work with the app and do not need to be re-implemented.

Do I remove all custom tracking that I currently have in place, leaving ONLY the Extole app to track everything?

The app will track orders by default, but if you have set up a lot of custom tracking we can configure the app to work in conjunction with what you have done.

Will the app work with a custom cookie banner integration like OneTrust?

Cookie-based tracking in the app functions the same way as your existing Extole integration so if Extole is not currently being affected, the app won't change that.

I already sent a list of discount codes to Extole and some have been distributed. Do I need to create new discounts for the app?

We can continue to use the codes you have already given us. In addition, the app gives you the option to let Extole create codes on the fly for you—so there's no need to upload coupons to Extole once the new rewards are configured.