Shopify Hydrogen

Overview

Launch dynamic programs like Refer A Friend and Drop a Hint with the Extole and Shopify integration. By following this guide, you can promote referrals at checkout, track customer activity in real-time, and reward customers using Shopify Discounts on your Hydrogen storefront(s).

Prerequisites

Step 1: Configure Extole Program Domain & Access Token

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: Enable Core Settings

Enable your Core Settings to add Extole's Core Javascript tag to your Shopify pages.

Step 3: Add CTA's via Extole's Javascript SDK

🚧

Since Hydrogen storefronts don't use Liquid templates, you'll need to add CTA's to your website and product detail pages using Extole's Javascript SDK.

Step 4: Configure Checkout Extension (Shopify Plus only)

📘

Checkout Extensibility Requirement

In order to use Extole's Checkout Extension on your Shopify store, you must migrate your Thank You and Order Status pages to Shopify Plus' Checkout Extensibility UI.

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

Configuration

1. First, add the Shopify Checkout Extension to your Extole campaign by selecting the Promotion Clicked event in Flow Builder. From there, select New Contentand click on the filter icon to select the Shopify Components option. From there, add the Shopify Checkout Extensionand apply changes to your campaign.

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

   
   

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

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

   

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

6. 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.

You can then edit the Checkout Extension image and styling in the Extole Flow Campaign Editor.

Conversion Pixel

By default, when you install the Extole app, a conversion pixel will be automatically added to your Thank You page to send Extole a conversion event. There is no action required to add the pixel to your page.

Step 5: 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.

Pixel

In the latest version of this integration, there is no configuration needed for Pixel. When you install the integration, Pixel is automatically added to the checkout page.

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 via a pixel and a webhook 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 Fulfilled Update Notification: This notification triggers an event whenever an offline order's shipping or fulfillment status is updated.
• 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.

Webhook Notifications

To send additional notification events, follow Shopify's documentation for creating webhooks

• Create an Access Token in Extole's Security Center. Copy the access token and save it in a secure place.
• Select JSON as the webhook format when creating your webhook in Shopify
• Enter https://api.extole.io/v5/events/{{event_name}}?access_token=XXXXXXXXXXXXXX
  • Replace {{event_name}} with the name of the event you want to create in the Extole platform when sending this webhook - e.g order_canceled or list_optin
  • Replace XXXXXXXXXXXXXX with the Access Token you created in the Extole Security Center

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.

Multiple Shopify Stores

We support multiple Shopify stores in a single Extole account. For example, if you have US Shopify and UK Shopify stores, you should take the following steps.

• On the partners page, install the Shopify partner integration and rename it "Shopify US". Then, install another Shopify partner integration and rename it "Shopify UK".
• On the programs page, create two programs. One program will be targeted to your US users, and the other will be targeted to your UK users. If you have existing programs, you can modify those instead.
• On the rewards page, set up two new reward suppliers. Click "+ New Reward", "Shopify Discounts", and complete the information on the following page. For the first reward supplier, select that it will be used with the "Shopify US" integration, and select "Shopify UK" for the other reward supplier.
• Finally, navigate to each specific campaign, and in the "Promotion Clicked" business event, select "+ New Content", and add "Shopify Checkout Extension". Fill out the required fields for the Shopify Checkout Extension, and those values will be sent to Shopify to create the post-purchase referral promotion.

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.