How to Add a Cookie Consent Banner to Your Website
Step-by-step guide to adding a cookie consent banner that actually works. Covers what it needs to do, where to put it, and common mistakes.
2026-02-18
Why You Need a Cookie Consent Banner
If your website uses cookies or tracking scripts — and almost every website does — privacy laws require you to inform visitors and, in many cases, get their consent before those cookies activate.
This isn't just a European (GDPR) thing anymore. 19 US states now have comprehensive privacy laws, and several require consent mechanisms for tracking technologies.
What a Cookie Banner Must Do
A compliant cookie consent banner needs to:
- Inform visitors that you use cookies and tracking technologies
- Explain the categories of cookies you use (essential, analytics, advertising)
- Allow visitors to accept or reject non-essential cookies
- Actually block tracking scripts until consent is given (this is where most banners fail)
- Remember the visitor's choice so the banner doesn't reappear on every page
- Provide a way to change preferences after the initial choice
Where to Put It
The cookie banner script should be placed just before the closing </body> tag or in the <head> of your HTML. Here's a typical setup:
`
`
The defer attribute ensures the banner loads after your page content, so it doesn't slow down your site.
How Script Blocking Works
The most important thing a consent banner does is actually block tracking scripts until the visitor consents. ClearConsent handles this with a simple attribute system. You add data-cc-category to each tracking script:
`
`
There are three categories:
analytics— Google Analytics, GTM, Hotjar, Clarity. Blocked until consent (or allowed by default in opt-out mode).advertising— Meta Pixel, TikTok Pixel, Google Ads. Always blocked until explicit consent.essential— Payment processors, chat widgets, auth. Never blocked.
When a visitor clicks "Accept" or "Reject" on the banner, the tagged scripts are loaded or remain blocked accordingly. The visitor's choice is remembered via a cookie so the banner doesn't reappear.
Common Mistakes
- Banner only — no blocking. Having a pretty banner that doesn't actually prevent cookies from loading defeats the entire purpose. Your tracking scripts need the
data-cc-categoryattribute so the banner can control them. - No reject option. A banner with only "Accept All" is not compliant under most laws. Visitors must be able to decline non-essential cookies.
- Pre-checked boxes. Consent must be opt-in, not opt-out. Don't pre-select analytics or advertising categories.
- Dark patterns. Making "Accept" a big green button and "Reject" a tiny gray link is increasingly scrutinized by regulators.
Platform-Specific Instructions
Shopify (app): Install ClearConsent from the Shopify App Store. The banner is automatically added to your storefront — no code to copy or paste. The app also bridges consent choices to Shopify's built-in Privacy API.
Shopify (manual): Go to Online Store > Themes > Edit Code, and paste the banner script in theme.liquid before </body>.
WordPress: Use a header/footer plugin like "Insert Headers and Footers" to add the script to your site's <head> or footer.
Squarespace: Settings > Advanced > Code Injection > Header or Footer.
Wix: Dashboard > Settings > Custom Code > Add to head or before body tag end.
Each paid plan includes a step-by-step setup guide tailored to your platform.
Test Your Setup
After adding your cookie banner, re-scan your site with ClearConsent. Your compliance score should improve once we detect an active consent mechanism.