How to Add a Cookie Consent Banner to Your Website

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 tag or in the 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-category attribute 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 .

WordPress: Use a header/footer plugin like "Insert Headers and Footers" to add the script to your site's 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.