Usercentrics Shopify Implementation Guide – Usercentrics Support - EN

Usercentrics CMP can be implemented on your Shopify website in just a few minutes. Simply add the Usercentrics script to your theme header, as well as any additional scripts for your tag manager that you use.

Please note

This guide is for CMP v3. If you currently still use an older version, please migrate to CMP v3 to continue. Contact our Support Team to assist you if you need help.

Part 1: Installing Usercentrics on Your Shopify Website

When it comes to integrating Usercentrics CMP on your Shopify website, you have two options: you can either implement the CMP directly onto your page or opt for integration via Google Tag Manager.

Direct Implementation:

If you choose to implement the CMP directly onto your page, follow these steps:

Access Your Script: In the Admin Interface of Usercentrics, locate your unique script under the 'Implementation' section.

Add the Script: Insert the following script within the <head> section of your HTML code on Shopify:

<script
  id="usercentrics-cmp"
  src="https://app.usercentrics.eu/browser-ui/latest/loader.js"
  async
></script>

Integrating Custom HTML Code:

To add custom HTML code to your Shopify store, follow these steps:

Access Theme Editor:
- Log in to your Shopify admin panel.
- Navigate to Online Store and then click on Themes.
Choose Theme:
- Select the theme you want to edit and click on Actions.
- From the dropdown menu, choose Edit code.
Locate the Appropriate File:
- In the left-hand sidebar, you'll see a list of files related to your theme.
- Choose the file where you want to add your custom HTML code.
Insert HTML Code:
- Once you've opened the file, find the appropriate place to insert your custom HTML code.
- Paste your HTML code into the desired location within the file.
Save Changes:
- After adding your custom HTML code, click on the Save button to save your changes.
Preview and Test:
- Before publishing your changes, it's a good idea to preview your store to ensure that the custom HTML code appears as expected.
- You can use the preview option in the theme editor to see how your changes will look on your live site.
Publish Changes:
- If you're satisfied with how the custom HTML code appears in the preview, you can click on the Publish button to make your changes live on your Shopify store.
Check Your Store:
- Once you've published your changes, visit your Shopify store to confirm that the custom HTML code is displaying correctly.

Part 2: Manually Blocking Your Third Party Services

If you have third party services, you will need to block each of them until a user gives consent. In order to block third party services and cookies until the user has given consent, you will need to do the following for each third party service:

Set the value of the script type attribute to “text/plain”. This prevents the service from executing.

To enable the service when consent is given you need to add an additional attribute: data-usercentrics. Its value must be the exact name of the Data Processing Services you added in your Settings dashboard under Data Processing Services.