This repository contains .liquid snippets that enable standardized front-end tracking of e-commerce events on your Shopify Plus website.
You need to copy each .liquid snippet to the respective .liquid file in your Shopify theme.
-
Go to your Shopify Admin Panel > Online Store > Themes > Actions > Edit Code
-
Find the respective files:
main-product.liquid,main-collection-product-grid.liquid, andmain-search.liquidand copy and paste the contents of each of the respective snippets from this repository to the top of the file. Make sure to maintain the valid syntax of HTML: paste the files inside the contents of<head>. If there are no<head>tags present in your liquid file, you can add them yourself at the top of the file. -
Copy and paste the contents of the
theme.liquidsnippet from this repository to the end of the<head>tag of thetheme.liquidfile in Shopify. Replace the placeholders<<PROJECT API_ENDPOINT>>,<<PROJECT TOKEN>>and<<CART_COOKIE_NAME>>- see below for more information on what these values should be.
Warning
checkout.liquid is deprecated. Use the checkout-pixel.js instructions outlined in step 4 and skip step 5. For stores which have not yet upgraded, skip to step 5. More information can be found here.
- To track your checkout flow, you need to create a Shopify pixel. To do this, go to Shopify Admin Panel > Settings > Customer events > Add custom pixel. Call it something descriptive, such as
bloomreach-checkout-pixel, then copy the contents ofcheckout-pixel.jsin this repository. You need to update the placeholder values<<PROJECT API_ENDPOINT>>,<<PROJECT TOKEN>>and<<SHOPIFY DOMAIN>>. Click Save and then Connect.
Caution
Only follow step 5 if you are using checkout.liquid in your Shopify theme.
-
Copy and paste the contents of the
checkout.liquidsnippet from this repository to the end of the<head>tag of thecheckout.liquidfile in Shopify. Replace the placeholders<<PROJECT API_ENDPOINT>>and<<PROJECT TOKEN>>. -
Save your theme.
Note on placeholder fields:
<<CART_COOKIE_NAME>>- this is the name of the cart cookie from Shopify, most commonly called "cart".<<PROJECT API_ENDPOINT>>- this can be found in your Exponea project settings, most commonly "https://api.exponea.com"<<PROJECT TOKEN>>- this can be found in your Exponea project settings<<SHOPIFY DOMAIN>>- this is your store's URL, such as650302-4.myshopify.com,guitar-store.cometc.
If you're unsure about any of the values above, please ask your Consultant / CSM for advice.
Once the theme changes are saved, Exponea will initialize and start tracking front-end events.
The following events are tracked:
session_startsession_endpage_visitview_itemview_categorysearchcheckout
These snippets have been developed, tested and validated for Shopify stores with no plugins. If your store is using any plugins, valid functionality is not guaranteed (e.g. if you are using a custom 3rd party checkout page, the checkout event tracking will not work).