Shopify Customization

📘

Customize your Shopify integration

This page serves as a guide on how to customize your Shopify integration with a Custom App and/or Web Integration. The Shopify Setup page shows an out-of-the-box solution. However, you can also use the options on this page when integrating Bloomreach and Shopify.

Custom App

To connect your project with Shopify, there are two ways to authenticate with Shopify and allow the data to flow successfully.

📘

The next section is about connecting your project with Shopify using a Custom App. For a guide how to connect your project using Official App click here.

1. Log in to your Shopify account and click on the > symbol next to Apps.

2. Click on App and sales channel settings.

3. Click on Develop apps.

4. Click on Allow custom app development and re-confirm in the next window by clicking on Allow custom app development again.

5. Now go and click Create an app.

6. Complete the field App name with a descriptive name (we recommend Bloomreach Engagement). Choose a responsible technical person as the App developer and insert their email address. Then click on Create app.

7. Go to API credentials and click on Configure Admin API scopes.

8. In Admin API access scopes, select the required user permissions. Then in Event version under Webhook subscriptions, choose 2024-01.

📘

Required user permissions

Required user permissions are: read_customer_events, write_customers,read_customers, read_orders, and read_products.

9. Now, click on Install app. Make sure to keep your tab with Shopify open to complete the following steps.

10. Now, go back to your Shopify tab and copy & paste the Admin API access token, API key, and API secret key from your Shopify account to the matching fields in Bloomreach Engagement under the section Connect project with Shopify.

Custom Web Integration

The next section is about tracking frontend events (such as view_item, view_category, etc.) using a Custom Web Integration. For a guide on tracking frontend events using Shopify Web Pixel, click here.

📘

Main changes between Custom Web Integration and Shopify Web Pixel

1. Attributes not tracked by webpixel:

• view_category: browser, device, location and os

• view_item: browser, device, location and os

• search: browser, device, location and os

• checkout: browser, device, location and os

2. Checkout event is triggered when any of the checkout steps is changed: checkout_started, checkout_contact_info_submitted, checkout_address_info_submitted, checkout_shipping_info_submitted, checkout_completed

3. In the checkout event the step_title attribute is changed to be representative of the checkout state, so for example step_title thankyou becomes checkout_completed.
   We take these step_title attributes from checkout event names.

4. Checkout tracking is supported only by the Shopify Web Pixel due to changes on Shopify's side.

You will need a technical person to complete the integration by making a few front-end modifications, which will take less than a few hours.

📘

Shopify Front-end integration for Bloomreach Engagement

This repository contains .liquid snippets that can enable standardized front-end tracking of e-commerce events on your Shopify Plus website.

🚧

Using Shopify instead of Shopify Plus

Using the non-Plus version of Shopify does not allow you to customize your checkout page, thus not allowing you to add checkout tracking. This means that Bloomreach Engagement cannot track the checkout steps.
Bloomreach Engagement script runs only on the final checkout step; therefore, Bloomreach Engagement cannot personalize the previous checkout process steps.

How to switch from the Custom Web Integration to Shopify Web Pixel

Remove the Exponea scripts inserted into Shopify liquids during the Custom Web Integration installation to switch to Web Pixel tracking. Find the Custom Web Integration installation guide here. These are the files that might contain some tracking snippets, depending on your custom configuration:

• product.liquid
• collection.liquid
• search.liquid
• theme.liquid
• checkout.liquid

1. To find them, go to the Themes tab of your Shopify store.

2. Click Edit Code. Then, navigate to theme.liquid and paste the new Bloomreach Web Integration snippets. For more details on how to do this, please check the instructions in the section above.

3. When the theme.liquid file is updated, navigate to the Bloomreach App and accept new scopes by pressing the upgrade button. Now you can enable the Web Pixel Integration on your Shopify integration page. Don't forget to save the changes at the end. This is related to existing integrations created via the official app.

4. If your integration was created via a Custom App, you need to reauthorize and install the official Bloomreach Email&SMS marketing app.

   1. To do so, navigate to your existing Shopify integration page and click the Reauthorize button.
   
   2. Navigate to your Shopify store, install the Official Bloomreach Email&SMS marketing app (Shopify App Store), paste the revealed token into the Encrypted credentials field in Bloomreach Engagement, and at the end, save integration.