How to add a cookie consent banner to a BigCommerce store

Where to paste the snippet in BigCommerce

Script Manager adds scripts to Stencil storefronts without editing theme files. Go to Storefront, then Script Manager (in Channel Manager on multi-storefront stores), click Create a Script and fill in:

Paste the snippet in the script contents and save:

html
<script src="https://cookiequiet.com/cq.js" data-site="YOUR_SITE_KEY" data-consent-mode="1" data-auto-block="1" defer></script>

Why Essential. BigCommerce lets shoppers opt out of every category except Essential, and uncategorized scripts default to it. The banner must load for everyone, so it belongs there. Why Storefront pages. The Checkout location only works with Optimized One-Page Checkout, and PCI DSS asks for an integrity hash on scripts that run on payment pages, which a script that updates over time cannot keep. With the bridge below, BigCommerce carries the consent given on the storefront into checkout.

How does BigCommerce's own consent setting fit in?

BigCommerce has a built-in banner: Settings, then Security & Privacy, then Cookie Consent Tracking under the customers' privacy section. When it is on, shoppers can opt out of the Analytics, Functional and Targeting; Advertising categories, and BigCommerce only runs Script Manager scripts and its built-in integrations whose category is allowed. Google's help center adds that Consent Mode is enabled automatically for BigCommerce's Google integration once the banner is on.

You have two clean setups:

1. You use no built-in BigCommerce integrations (all your tags are your own). Leave Cookie Consent Tracking off. Mark the scripts you add: Script Manager's Script type accepts <script type="text/plain" data-cq-category="analytics"> like any HTML, and Cookiequiet runs it after consent. Tags injected later with JavaScript are held by the auto-blocker.
2. You use BigCommerce's Google Analytics, Meta or other built-in integrations. Keep Cookie Consent Tracking on and pass each Cookiequiet choice to BigCommerce. Its Storefront Consent API accepts the categories as numbers: 2 for Functional, 3 for Analytics, 4 for Targeting; Advertising. BigCommerce documents that the endpoint works only while the cookie consent feature is enabled. Add this as a second Script Manager script (Footer, Storefront pages, Essential):

html
<script>
  window.addEventListener('cq:consent', function (e) {
    var c = e.detail.categories, allow = [], deny = [];
    [[2, 'functional'], [3, 'analytics'], [4, 'marketing']].forEach(function (p) {
      (c.indexOf(p[1]) >= 0 ? allow : deny).push(p[0]);
    });
    fetch('/api/storefront/consent', {
      method: 'POST',
      credentials: 'same-origin',
      headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' },
      body: JSON.stringify({ allow: allow, deny: deny })
    });
  });
</script>

BigCommerce's own banner still renders in this setup. Hide it with a CSS rule in your theme that targets its container, whose id you can read with the browser's inspector, so visitors see one banner. Logged-in customers keep their choice on their account, as BigCommerce saves consent to the customer record.

How to categorize the other scripts

Give every Script Manager script its true category: Analytics for Google Analytics or Hotjar, Targeting; Advertising for the Meta Pixel or TikTok, Functional for chat. That category is what BigCommerce checks in setup 2. Scripts pasted directly in theme files get type="text/plain" and a data-cq-category, as in the guide to blocking scripts until consent. If you run Google tags through Google Tag Manager, Cookiequiet's data-consent-mode="1" sets the defaults and its cq_consent dataLayer event can trigger the rest.

How to add the Cookie preferences link

In Storefront, then Themes, open Advanced, then Edit Theme Files on a copy of your theme, and add this line to the footer template (templates/components/common/footer.html in Cornerstone):

html
<a href="#cq-preferences" data-cq-show-preferences>Cookie preferences</a>

Cookiequiet opens the preferences centre from that link. If you prefer not to edit theme files, turn on the floating Cookie preferences button in the banner settings.

How to test

1. Open the store in a private window and click Reject all.
2. Check the cookies: cq_consent, BigCommerce's session and cart cookies, and no _ga or _fbp.
3. Clear the cookies, click Accept all and reload: the tags run.
4. Check the consent log in the Cookiequiet dashboard, and run the free cookie scanner to list what the store sets.

Cookiequiet is free for one store with geo-targeting included, and Starter is €3 per website per month with no pageview limit.