Skip to main content

Menu

Choose a theme and configure high-contrast mode. Preferences are saved in your browser only.

User Preferences

Theme

Pick a palette or follow your system preference.

High Contrast

Sharper text and borders. System follows your OS setting.

Practical guides

How to add a cookie consent banner to Shopify (step by step)

Every Shopify consent tutorial funnels you toward the app store, where a banner becomes a monthly line item and a middleman between you and your storefront. The other route is one script in your theme’s head. The code editor exists on every plan, works with every theme, and leaves nothing to unsubscribe from.

Shopify documents the theme editor on their help center; that guide is worth a look if their admin has been rearranged since we wrote this.

What you need

  • Admin access to the store.
  • First, the snippet from the playground, configured the way you want it:
<script>
  window.ZestConfig = {
    position: "bottom",
    theme: "auto",
    policyUrl: "/privacy-policy"
  };
</script>
<script src="https://cdn.jsdelivr.net/npm/@freshjuice/zest/dist/zest.min.js"></script>

Edit the theme

  1. In the admin, open Online Store → Themes.
  2. On the live theme, click the menu, then Edit code.
  3. Under Layout, open theme.liquid.
  4. Find the <head> at the top of the file. Paste the snippet just after the opening tag, ahead of any tracking scripts, app snippets, or {{ content_for_header }} hooks.
  5. Save.
  6. Open the storefront in a private window.

One nuance Shopify merchants should know: apps inject their scripts through {{ content_for_header }}, and you cannot control that order from the editor. Zest’s script blocking holds known trackers until consent, so put the domains your store actually runs on (Meta Pixel, TikTok, Pinterest) into the blockedDomains array in window.ZestConfig (blocklist guide).

Shopify’s own privacy framework

Shopify.customerPrivacy is the platform’s consent system, and Shopify-native features respect it. Two clean setups:

  • No-app: Zest gates the third-party pixels, and you switch off any Shopify-native tracking you do not use. What most small stores want.
  • Hybrid: keep the customer privacy API for Shopify features, let Zest handle everything that arrives as a plain script tag. The two gate different things and do not fight.

Check the result

Private window on the storefront:

  • The banner appears before any marketing pixel fires.
  • Accepting the marketing category releases the blocked scripts (network tab confirms).
  • The banner shows on checkout too, since theme.liquid is the storefront layout. Checkout consent beyond that is Shopify’s own territory and outside this guide.

When it fights back

No banner on product pages. The layout edit covers every storefront page. Hard-refresh and clear cookies first; if a custom template skips the shared layout partials, move the snippet into the shared layout file rather than a template.

Pixels still fire early. App-injected scripts ignore your placement. Add each tracking domain to blockedDomains, or drop the app and load its snippet manually after Zest.

A theme update wiped the snippet. Edits belong to your copy of the theme; switching themes means pasting again. That is the one maintenance cost of the app-free route, and it takes a minute.

Why not an app

Consent apps run a few to a few dozen dollars every month, forever, and add their own script weight to every pageview. Zest is a 16KB open-source script with nothing flowing to anyone. For most stores the theme edit is the whole job.

Stores need a policy page too: the free policy generator drafts one from six questions.

Own your cookie banner.

Zest is free and MIT-licensed, and it doesn't phone home to anyone.
Drop the script in and you're done.