Cookie Consent Banner

A GDPR-compliant cookie consent banner with granular control over cookie categories, featuring an elegant mobile-responsive design.

Features

• GDPR/CCPA Compliant — Full compliance with privacy regulations
• Granular Controls — Separate toggles for necessary, analytics, and marketing cookies
• 12-Month Persistence — localStorage with automatic expiry
• Analytics Integration — Blocks Google Analytics until consent given
• Luxury Design — Frosted glass, gold accents, smooth animations
• Mobile Responsive — Optimized for all screen sizes
• Keyboard Accessible — WCAG 2.1 compliant with focus states

Cookie Categories

Necessary Cookies (Always Enabled)

Session management, shopping cart, authentication, security.

Analytics Cookies (Optional)

Google Analytics, traffic analysis, performance monitoring.

Marketing Cookies (Optional)

Advertising pixels, retargeting, conversion tracking.

Setup

Step 1: Add to Theme Layout

The cookie consent snippet is included in layout/theme.liquid before </body>:

{%- render 'cookie-consent',
  policy_url: pages.cookie-policy.url,
  analytics_id: settings.google_analytics_id
-%}

Step 2: Create Cookie Policy Page (Optional)

1. In Shopify Admin, go to Online Store > Pages
2. Create a page with handle cookie-policy
3. Add your cookie policy content
4. The banner automatically links to this page

Customization

Colors

Edit CSS variables:

:root {
  --cookie-gold: #C9A961;
  --cookie-navy: #1A2332;
  --cookie-white: #FFFFFF;
  --cookie-text: #333333;
}

Translations

Edit keys in your locale file:

{
  "cookie_consent": {
    "banner": {
      "title": "Your custom title",
      "description": "Your custom description"
    }
  }
}

Privacy Settings Page

Add a “Manage Cookie Preferences” button to your privacy policy page:

<button
  type="button"
  class="button button--secondary"
  onclick="window.CookieConsent.openSettings()"
>
  {{ 'cookie_consent.manage_preferences' | t }}
</button>

Legal Compliance

GDPR (EU)

Explicit consent required, granular controls, opt-in before tracking, easy withdrawal.

CCPA (California)

Opt-out mechanism, clear disclosure, cookie policy link.

Disclaimer: This implementation provides technical features for compliance. Consult with legal counsel for your specific use case.

Testing

1. Open your site in incognito mode
2. Verify banner appears after short delay
3. Test Accept All, Reject All, and Customize buttons
4. Check localStorage: localStorage.getItem('cookieConsent')
5. Verify Google Analytics only loads after consent
6. Test keyboard navigation and screen reader accessibility

Troubleshooting

Banner not appearing: Check if consent already exists in localStorage. Clear with window.CookieConsent.revoke().

Analytics not loading: Verify analytics ID, check consent status, ensure analytics toggle is enabled.

Styling issues: Check CSS file is loaded, look for z-index conflicts (banner: 9998, modal: 9999).