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.
- Log in to your Shopify account and click on the
>
symbol next to Apps.
![1 add apps.png 526](https://files.readme.io/d97ae43-1_add_apps.png)
- Click on
App and sales channel settings
.
![2 app and sales.png](https://files.readme.io/b0301dc-2_app_and_sales.png)
- Click on
Develop apps
.
![3 develop apps.png](https://files.readme.io/d2a11c4-3_develop_apps.png)
- Click on
Allow custom app development
and re-confirm in the next window by clicking onAllow custom app development
again.
![4 allow custom app development.png](https://files.readme.io/b55ae13-4_allow_custom_app_development.png)
![5 allow custom app development.png](https://files.readme.io/feed43c-5_allow_custom_app_development.png)
- Now go and click
Create an app
.
![6 app development.png](https://files.readme.io/20abcfc-6_app_development.png)
- 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 create app.jpg 1284](https://files.readme.io/1bed138-7_create_app.jpg)
- Go to
API credentials
and click onConfigure Admin API scopes
.
![8 configure admin api scopes.png 1194](https://files.readme.io/7fe3e20-8_configure_admin_api_scopes.png)
- 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
, andread_products
.
![](https://files.readme.io/f5dd73b-shopify_perm.png)
![](https://files.readme.io/1e406e6-shop_ver_api.png)
- Now, click on
Install app
. Make sure to keep your tab with Shopify open to complete the following steps.
![10 install app.png](https://files.readme.io/c89070c-10_install_app.png)
- Now, go back to your Shopify tab and copy & paste the
Admin API access token
,API key
, andAPI secret key
from your Shopify account to the matching fields in Bloomreach Engagement under the sectionConnect 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
- 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
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
In the checkout event the
step_title
attribute is changed to be representative of the checkout state, so for examplestep_title
thankyou
becomescheckout_completed
.
We take thesestep_title
attributes from checkout event names.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.
![13 web integration.jpg](https://files.readme.io/d2c894b-13_web_integration.jpg)
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
- To find them, go to the Themes tab of your Shopify store.
![](https://files.readme.io/40534da-Screenshot_2024-04-04_at_12.00.44.png)
- 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.
![](https://files.readme.io/1ad4bb3-Screenshot_2024-04-04_at_12.01.21.png)
- 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.
![](https://files.readme.io/8a29ac7-Screenshot_2024-04-04_at_12.01.55.png)
![](https://files.readme.io/850c47b-Screenshot_2024-04-04_at_12.02.19.png)
-
If your integration was created via a Custom App, you need to reauthorize and install the official Bloomreach Email&SMS marketing app.
- To do so, navigate to your existing Shopify integration page and click the Reauthorize button.
- 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.
Updated about 2 months ago