Shopify
Cookie Consent Integration with Shopify
If you use Shopify to manage your website, you can use the OneTrust Shopify application to add the OneTrust CMP to Storefront and Checkout.
IMPORTANT
You must have both a OneTrust account and a Shopify account to utilize this integration.
Install the OneTrust Shopify app
- Install the OneTrust CMP from Shopify's app store.
- Under 'Activate OneTrust in Your Theme Editor', click 'Enable'.
- Under 'Set Up Your Domain ID', click 'Add Now'. You'll be redirected to the Settings section of the OneTrust app. Enter your OneTrust Domain ID and click 'Connect'.
- Head to 'Consent Mapping' and map OneTrust category IDs to Shopify's categories. This will allow us to map OneTrust consents to Shopify's Privacy API.
Add the OneTrust CMP to Checkout
To add OneTrust to your Checkout pages, head to Shopify's 'Settings' page.
- Select 'Checkout' in the sidebar menu.
- Under the 'Configurations' section, click 'Customize'.
- Click 'Add app block'.
- Select 'consent-management-checkout' from the available blocks.
- Click 'Save'.
Your OneTrust installation is complete. The CMP should now be available in both Storefront and Checkout.
Actioning Consent and Cookie Blocking
There are multiple ways to block cookies on your site depending on the method you used to install them. Here are our recommendations based on each installation method:
Shopify app store
For any libraries you install through the Shopify app store, the applications themselves will have the option to respect consent opt outs as set by the CMP. Consent written by OneTrust is mapped to Shopify’s Privacy API which can then be accessed by these apps. Ideally, the apps will take responsibility to action the consent and restrict processing if opted out. For example, if you're using the Google & YouTube library, Google events will fire/not fire based on consent given via the CMP without introducing any specific OneTrust blocking methods. Additionally, Shopify's own first party cookies remove themselves from the browser if consent is opted out.
If the apps are not actioning consent themselves and further blocking needs to be done, the recommendation is to use OneTrust AutoBlocking.
Liquid files
For any libraries added through liquid files like theme.liquid, we recommend using our Client-Side Cookie Management approaches like JavaScript Type Re-Writing or OneTrust AutoBlocking.
If you plan to use the OptanonWrapper function for consent handling, you'll have to add the function itself into your liquid files.
<script type="text/javascript"> function OptanonWrapper() {code here} </script>
Custom pixel
For any libraries added as a custom pixel (under Customer Events), we recommend retrieving consent status from the OptanonConsent cookie or the OnetrustActiveGroups data layer variable and write some custom logic to block the scripts/cookies from firing if opted out.
OneTrust blocking approaches like JavaScript Type Re-Writing or AutoBlocking can not be used as custom pixels are added as iFrames which prevent some OneTrust functions from working as expected. As such, we recommend using the two approaches above to load and block cookies before using the custom pixel approach if needed.
LEGACY
This section below is deprecated. Use the approach above for Shopify integration with OneTrust
(LEGACY) Shopify and the OneTrust Script
Last Updated: Oct 26, 2021
If you use Shopify to manage your website, you can add the script to your theme header, along with the scripts for tag managers your organization uses.
Integration Steps
-
Open your Shopify account.
-
On the main navigation menu, select Online Store > Themes.
-
On your current theme, hover over the Actions button. Then select Edit code. The code editor appears.
-
Under Layout, select theme.liquid.
-
In the
<head>section of the code, paste the script.
For the integration to work, you must have a published script. For information on how to publish a script, see Getting Started with Cookie Compliance.
- Click the Save button.
Blocking Shopify Server-side Cookies
Below is an example of how you can use the OneTrust OptanonWrapper() callback to pass through consent values to Shopify Privacy API. For more information, see Using the OptanonWrapper Callback Function.
You can rename the performanceCookieCategory variable and change the value based on cookie category IDs. When renaming, make sure the value is updated based on the consent you want to associate with the Shopify API.
If you rename the
performanceCookieCategoryvariable, you must rename the variable anywhere it's referenced.
<script>
const performanceCookieCategory = 'C0002,';
function waitForOneTrust() {
hasOneTrustLoaded();
let attempts = 0;
const interval = setInterval(function () {
if (hasOneTrustLoaded() || attempts > 100){
clearInterval(interval);
}
attempts++;
}, 100)
}
function hasOneTrustLoaded() {
if (typeof window.OnetrustActiveGroups === 'string') {
//check now
optanonWrapper()
// and wrap and trigger after cookie opt-in
window.OptanonWrapper = optanonWrapper;
return true;
}
return false;
}
function sendConsent(trackingConsent) {
window.Shopify.customerPrivacy.setTrackingConsent(trackingConsent, () => {
console.log('Happy Days')
});
}
function optanonWrapper() {
const trackingConsent = !!window.OnetrustActiveGroups.includes(performanceCookieCategory); window.Shopify.loadFeatures(
[
{
name: 'consent-tracking-api',
version: '0.1',
},
],
error => {
if (error) {
throw error;
}
sendConsent(trackingConsent)
},
);
}
(function () {
waitForOneTrust();
})();
</script>
Updated 10 days ago