How to integrate the CMP into a Shopify Shop?

Please note: The below description is only valid for the manual blocking code. If you want to use automatic code blocking, please ensure that the CMP-Code is inserted directly after the <head> element of your website code.

In order to integrate the CMP-Code into a Shopify Shop please follow these steps:

  1. Login to your Shopify account
  2. In the menu click on your Onlineshop > Themes and edit the current theme

  3. At the buttom click on Theme-Actions >Edit Code

  4. Open the file theme.liquid, search for <body ...> and insert the CMP-code right after it

  5. Press save


I integrated the CMP & activated it, but cannot see it? 

Some Shopify themes have added CSS style that hide empty DIV elements. If you have activated the WCAG option in your design (CMPs => Designs => Edit design => Box settings) then the CMP is placed in a shadow root, therefore the parent DIV seems to be empty and is hidden by the Shopify CSS. You would need to add a custom rule to not hide empty DIVs:

  1. In your Shopify admin, go to Online Store > Themes
  2. Click Customize.
  3. Click Theme settings.
  4. Click Custom CSS.
  5. Add a new CSS rule:
    div#cmpwrapper {display: block;}

  6. Click Save.

Activate/allow Shopify tracking

In order for the Shopify internal tracking to work, please do the following:

1. Additionally to your "s971 Shopify International Limited", also add these vendors (depending on your needs):

2. In your CMP settings => Integrations => Consent mode, activate the Shopify Consent

3. In your Shopify backend go to Sales channels => Online Store => Preferences => Customer Privacy => Choose "Collected after consent"

Back to top