If you sell to customers in the EU, UK, or Australia, you need a cookie consent banner. Most Shopify cookie apps charge $5-15/month for what is fundamentally a simple UI component with a localStorage check.

This snippet gives you a clean, animated banner with Accept and Decline buttons. It remembers the customer's choice so it only shows once, and it's fully customisable to match your brand. No app, no external scripts, no page speed impact.

What You'll Build

The Code

Here's the complete snippet. Copy it, paste it into a new file in your Shopify theme, and you're done.

snippets/plynthr-cookie-consent.liquid 
{% comment %}
  Plynthr — Cookie Consent Banner
  https://plynthr.com/snippets/cookie-consent-banner/

  INSTALL:
  1. Create snippets/plynthr-cookie-consent.liquid
  2. Paste this code
  3. Add {%- render 'plynthr-cookie-consent' -%} before </body> in theme.liquid

  CUSTOMIZE:
  - --pcc-bg for background color
  - Edit the text/link below
{% endcomment %}

<style>
  :root {
    --pcc-bg: #1a1a1a;
    --pcc-color: #ffffff;
    --pcc-btn-accept-bg: #10b981;
    --pcc-btn-accept-color: #fff;
    --pcc-btn-decline-bg: transparent;
    --pcc-btn-decline-color: #999;
    --pcc-link-color: #6366f1;
    --pcc-radius: 12px;
    --pcc-max-width: 420px;
    --pcc-bottom: 20px;
    --pcc-left: 20px;
  }

  .plynthr-cookie-banner {
    position: fixed;
    bottom: var(--pcc-bottom);
    left: var(--pcc-left);
    max-width: var(--pcc-max-width);
    background: var(--pcc-bg);
    color: var(--pcc-color);
    padding: 20px 24px;
    border-radius: var(--pcc-radius);
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    z-index: 10000;
    font-size: 13px;
    line-height: 1.6;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
  }

  .plynthr-cookie-banner.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .plynthr-cookie-banner p { margin: 0 0 14px; }

  .plynthr-cookie-banner a {
    color: var(--pcc-link-color);
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .plynthr-cookie-banner__buttons {
    display: flex;
    gap: 8px;
  }

  .plynthr-cookie-banner__buttons button {
    padding: 8px 18px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
  }

  .plynthr-cookie-banner__buttons button:hover { opacity: 0.85; }

  .pcc-accept {
    background: var(--pcc-btn-accept-bg);
    color: var(--pcc-btn-accept-color);
    border-color: transparent;
  }

  .pcc-decline {
    background: var(--pcc-btn-decline-bg);
    color: var(--pcc-btn-decline-color);
  }

  @media (max-width: 480px) {
    .plynthr-cookie-banner {
      left: 10px;
      right: 10px;
      max-width: none;
      bottom: 10px;
    }
  }
</style>

<div class="plynthr-cookie-banner" id="plynthr-cookie-banner">
  <p>We use cookies to improve your experience. By continuing, you agree to our
    <a href="/policies/privacy-policy">Privacy Policy</a>.</p>
  <div class="plynthr-cookie-banner__buttons">
    <button class="pcc-accept" data-cookie-accept>Accept</button>
    <button class="pcc-decline" data-cookie-decline>Decline</button>
  </div>
</div>

<script>
  (() => {
    const banner = document.getElementById('plynthr-cookie-banner');
    const KEY = 'plynthr_cookie_consent';
    if (!banner || localStorage.getItem(KEY)) return;

    setTimeout(() => banner.classList.add('is-visible'), 1000);

    banner.querySelector('[data-cookie-accept]')?.addEventListener('click', () => {
      localStorage.setItem(KEY, 'accepted');
      banner.classList.remove('is-visible');
    });

    banner.querySelector('[data-cookie-decline]')?.addEventListener('click', () => {
      localStorage.setItem(KEY, 'declined');
      banner.classList.remove('is-visible');
    });
  })();
</script>

You can also grab this from the snippet page on Plynthr.

Installation

  1. In your Shopify admin, go to Online Store → Themes → Edit Code
  2. Under Snippets, click "Add a new snippet" and name it plynthr-cookie-consent
  3. Paste the code above and hit Save
  4. Open layout/theme.liquid
  5. Find the closing </body> tag and add {%- render 'plynthr-cookie-consent' -%} just above it
  6. Update the privacy policy link to match your store's policy page URL
  7. Save and preview your store — the banner will slide up after 1 second

Customisation

All the visual properties are controlled by CSS custom properties (variables) in the :root block. Here's what you can change:

Troubleshooting

Banner never disappears: Check that JavaScript is enabled and there are no console errors. The snippet uses localStorage — if you're testing in incognito mode, the preference won't persist between sessions.

Banner keeps reappearing: Open your browser's DevTools, go to Application → Local Storage, and check if plynthr_cookie_consent is being set. If not, there may be a JavaScript conflict with another snippet or app.

Want a full-width bar instead: Change the positioning to bottom: 0; left: 0; right: 0; max-width: none; border-radius: 0; for a full-width bottom bar.

Need to actually block cookies: This banner is a consent UI — it records the preference but doesn't automatically block tracking scripts. For full GDPR compliance, you'll need to conditionally load analytics scripts based on the stored consent value. Check localStorage.getItem('plynthr_cookie_consent') before injecting any tracking code.

Want this done for you?

I'll install this on your Shopify store, test it across devices, and make sure it's working perfectly. Done within 24 hours.

Install for Me — $29