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:
- Login to your Shopify account
- In the menu click on your Onlineshop > Themes and edit the current theme
- At the buttom click on Theme-Actions >Edit Code
- Open the file theme.liquid, search for <body ...> and insert the CMP-code right after it
- 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:
- In your Shopify admin, go to Online Store > Themes
- Click Customize.
- Click Theme settings.
- Click Custom CSS.
- Add a new CSS rule:
div#cmpwrapperdisplay: block;}
- Click Save.
