Setting up CookieOfficer on Shopify

On Shopify, you add the CookieOfficer code directly in the theme template, in the theme.liquid file. Besides pasting the code, you should do two more things: turn off Shopify's native banner and turn on synchronisation of the new banner with your store. Below you'll find the full instructions.

Before you start, you need to

• Copy the code from the Installation page in the CookieOfficer panel. In the “Deployment method” section, choose “Code on the site”, then in the “Paste the code at the top of <head>” card click “Copy” next to the “CookieOfficer script” block.
• Turn off Shopify's native banner. You'll find it under Settings > Customer privacy > Cookie banner. Two banners on one page mean two independent consents and two different records of a visitor's decision.
• Make a copy of the theme. Before editing the template, duplicate the theme so you can go back to the previous version.

How do I add the CookieOfficer code to the store theme?

1. In your Shopify admin, go to Online Store > Themes.
2. Next to the active theme, click the three-dot menu and choose Edit code.
3. In the Layout section, open the theme.liquid file.
4. Paste the CookieOfficer code right after the opening <head> tag, before the {{ content_for_header }} tag and before any other scripts.
5. Click Save.

The order matters. {{ content_for_header }} inserts Shopify and app scripts, so code placed after it won't be able to stop them in time.

Avoid adding the code as a Custom Pixel. Shopify itself points you there for tracking code, but pixels run in a sandbox, and our code won't be able to verify the store page from there.

Turn on synchronisation between CookieOfficer and your store

Shopify pixels and tools aren't blocked in the standard way. We have to pass the visitor's decision to the store through the API, and Shopify itself then enforces its tracking based on that decision.

Go to Settings in the CookieOfficer panel, find the “Shopify” section and turn on the “Sync consent with your Shopify store” switch. It's off by default, so without this step Shopify pixels won't learn the visitor's decision.

We map the categories like this:

Note the marketing category: it is tied to the sale_of_data parameter, which matters under California regulations.

How do I verify the CookieOfficer setup on my site?

Go back to the Installation page in the CookieOfficer panel and click “Verify now”. If it succeeds, you'll see the heading “Script detected and active”.

Also open the store in an incognito window and check whether the banner shows up. Finally, run a scan of your site in the panel and go to the Cookies page. There should be no message above the list of detected items about trackers running after a visitor has rejected consent.

If something in the store stops working after the setup, go to the Cookies page and, next to that provider's entry, switch “Block before consent” to “Not blocked”. Blocking of the other entries will keep working.

Who handles what in a Shopify store

CookieOfficer won't appear in the cart or at checkout, because Shopify blocks third-party provider code there. A visitor's decision collected in the store still applies, though, because we pass it on to the platform.

Common mistakes to avoid

• Don't leave the Shopify banner turned on. A visitor will see two banners.
• Don't add the code as a Custom Pixel. It runs in a sandbox and won't see the store page from there.
• Don't paste the CookieOfficer code after {{ content_for_header }}. Shopify and app scripts will then manage to start before our code.
• Don't skip the synchronisation switch in the CookieOfficer panel. Without it, Shopify pixels won't learn the visitor's decision.
• Don't edit the theme without a copy. A duplicate of the theme is the only quick way back if something goes wrong.
• Don't forget about other templates. Every layout that renders its own header needs the code separately.