Shopify integration

Tech Team
Tech Team
  • Updated

You have 2 options for integrating Axeptio into your Shopify store.

With these installations, you can configure:

- Your Axeptio project
- Google Consent Mode V2
- Interaction with Shopify's consent API

1 - Via the Shopify App (Recommended)
Axeptio offers a Shopify application that will simplify the process for you.

Install the Axeptio app for Shopify

The app installation involves several steps:

1. Connect to your Axeptio account using your login/password.
2. Create a new project or connect to an existing project (important step).
3. Activate the embed app in Shopify, which allows you to display our widget on your site.
4. You will then be on the control screen to customize the colors and information of your widget.

 

Configuration of Google Consent Mode V2

The Axeptio plugin is compatible with Google's Consent Mode V2. To activate Consent Mode V2, follow these steps:

  1. In the Axeptio back office, activate Consent Mode V2 to display Google's four consent purposes. You can customize the display. Publish the widget.
  2. In the back office of your Shopify store, activate the Consent Mode V2 option and set the default values you want to assign.

 

2 - Via direct integration into your Shopify Liquid template with the code provided by Axeptio in the "Integration on my site" section

Recommended if you have specific needs for the integration of Axeptio.

Retrieve the code from Axeptio.

<script type="text/javascript">
window.axeptioSettings = {
  clientId: "{{Your Project ID}}",
};
 
(function(d, s) {
  var t = d.getElementsByTagName(s)[0], e = d.createElement(s);
  e.async = true; e.src = "//static.axept.io/sdk.js";
  t.parentNode.insertBefore(e, t);
})(document, "script");
</script>

2 - Add the Specific Shopify Code

<script>
window.vendors_shopify = [
{
name: "shopify_preferences",
title: "Preferences",
shortDescription:
"Cookies that remember your preferences, such as country or language, to personalize your visits to our website",
policyUrl: "https://www.shopify.com/legal/terms",
domain: "shopify.com",
},
{
name: "shopify_analytics",
title: "Analytics",
shortDescription:
"Cookies to understand how you interact with our site",
policyUrl: "https://www.shopify.com/legal/terms",
domain: "shopify.com",
},
{
name: "shopify_marketing",
title: "Marketing",
shortDescription:
"Cookies to provide ads and marketing communications based on your interests",
policyUrl: "https://www.shopify.com/legal/terms",
domain: "shopify.com",
},
{
name: "shopify_sale_of_data",
title: "Sale of Data",
shortDescription:
"Opt in / out of data sharing / sales",
policyUrl: "https://www.shopify.com/legal/terms",
domain: "shopify.com",
},
];

(_axcb = window._axcb || []).push(function (sdk) {
sdk.on("ready", function () {

if (!sdk.cookiesConfig) {
return;
}

// Building Shopify Step in cookie widget
sdk.cookiesConfig.steps.splice(1, 0, {
hasVendors: true,
image: "cookie-bienvenue",
layout: "category",
message:
"Shopify uses several services and plugins, we can control them via their Privacy API",
name: "welcome",
onlyOnce: true,
title: "Shopify Cookies",
subTitle: "Shopify uses several services, is it OK for you ?",
vendors: window.vendors_shopify,
});

// Shopify Consent API
window.Shopify.loadFeatures([
{
name: "consent-tracking-api",
version: "0.1",
},
]);
});

// Update Shopify Consent API
sdk.on("consent:saved", function (payload) {
const choices = payload.consent.preferences.vendors;
window.Shopify.customerPrivacy.setTrackingConsent(
{
preferences: choices.shopify_preferences,
analytics: choices.shopify_analytics,
marketing: choices.shopify_marketing,
sale_of_data: choices.shopify_sale_of_data,
},
() => {}
);
});
});
</script>

3 - Log in to your Shopify admin.

  • In the left menu, go to Online Store > Themes.
  • Click on the actions menu and select "Edit Code."
  • Set the theme.liquid file as your theme.

Intégration-Shopify-axeptio-Developer-Hub.png

Copy the 2 blocks of code just before the </body> tag in this file.
In the top right, click Save.

4. Enable Consent Request on Shopify

Go to the "Preferences" section, then follow the steps in the video below.

Once this is done, consent will be required before any data collection by your Shopify applications, for all selected countries.

 

 

 

 

 

 

 

 

Was this article helpful?

4 out of 14 found this helpful