Add a cookie banner & accessibility to Shopify
About five minutes in your theme code, from Shopify admin. One file, layout/theme.liquid, covers every page of your store.
Installation steps
Open your theme code
In Shopify admin open Online Store › Themes, then ⋯ › Edit code on your live theme.
Paste the snippet first in <head>
Open layout/theme.liquid and paste the snippet on the line right after <head>. Save.
Hold your Google and Meta tags
Required if theme.liquid has Google Analytics or Meta Pixel tags: in the same file, change each one to type="text/plain" with data-cookieconsent="analytics" (Google) or "marketing" (Meta), as in the example under "Hold them until consent". Without it the browser still downloads them before the visitor agrees.
Turn off Shopify's own cookie banner
If Shopify's own cookie banner is on (Settings › Customer privacy › Cookie banner), open its ⋯ menu and choose Remove cookie banner, so visitors don't see two banners.
Copy your snippet from Install in your dashboard (Home, or a site's Widget tab) and put it first in the <head>, before any analytics tag.
Hold them until consent
Google Analytics or Meta Pixel tags pasted into theme.liquid: in the same file, change each one to type="text/plain" with data-cookieconsent="analytics" (Google) or "marketing" (Meta). The widget runs them after the visitor agrees, and nothing reaches Google or Meta before that.
Tags added through Shopify apps or Customer events (the Google & YouTube or Facebook & Instagram apps) are not in theme.liquid. Auto-block holds the ones that load on your storefront pages; check each app's own consent setting too.
<!-- Google Analytics: waits for "analytics" consent -->
<script type="text/plain" data-cookieconsent="analytics" async
src="https://www.googletagmanager.com/gtag/js?id=G-XXXX"></script>
<script type="text/plain" data-cookieconsent="analytics">
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date()); gtag('config', 'G-XXXX');
</script>
<!-- Meta Pixel: waits for "marketing" consent -->
<script type="text/plain" data-cookieconsent="marketing">
/* your Meta Pixel base code, unchanged */
</script>
