# How to add a cookie consent banner to a BigCommerce store

> On a BigCommerce Stencil store, add the snippet in Storefront, then Script Manager, as a script placed in the Head on storefront pages, with the Essential category so nothing holds the banner itself. If you use BigCommerce's own Google or Meta integrations, keep its cookie consent tracking on and pass Cookiequiet's choice to it with the Storefront Consent API, so its scripts follow the visitor's decision.

Source: https://cookiequiet.com/platforms/bigcommerce
Published: 2026-10-21
Publisher: Cookiequiet

## Steps

1. **Copy your snippet** In the Cookiequiet dashboard, open your website and copy the install snippet: one script tag with your site key, data-consent-mode and data-auto-block set to 1, and defer.
2. **Open Script Manager** In the BigCommerce control panel, go to Storefront, then Script Manager, and click Create a Script. Multi-storefront stores find Script Manager in Channel Manager.
3. **Add the snippet in the Head** Name it Cookiequiet, set Placement to Head, Location to Storefront pages, Script category to Essential and Script type to Script. Paste the snippet, keep the default load method and save.
4. **Decide on BigCommerce's cookie consent tracking** In Settings, then Security & Privacy, Cookie Consent Tracking switches on BigCommerce's own banner and category gating. Keep it on if you use BigCommerce's Google or Meta integrations, off otherwise.
5. **Add the consent bridge** With cookie consent tracking on, create a second Essential script in the Footer with the bridge from this guide. It posts each Cookiequiet choice to /api/storefront/consent, then hide BigCommerce's own banner with CSS.
6. **Categorize or mark your scripts** Give every Script Manager script its real category (Analytics, Functional or Targeting; Advertising). Scripts pasted in theme files get type="text/plain" and a data-cq-category instead.
7. **Add the link and test** Add a link to #cq-preferences in the theme footer. In a private window, click Reject all and check that no _ga or _fbp cookie is set, then accept, reload and check the consent log.

## 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:

| Field | Value |
| --- | --- |
| Script name | Cookiequiet |
| Placement | Head |
| Location | Storefront pages |
| Script category | Essential |
| Script type | Script |
| Load method | Default (the snippet carries its own `defer`) |

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](/guides/block-scripts-until-consent). If you run Google tags through [Google Tag Manager](/platforms/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](/tools/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.

## Questions

### Which Script Manager category should the Cookiequiet snippet use?

Essential. Shoppers cannot opt out of Essential scripts, so the banner always loads. Every other script should carry its real category so that consent applies to it.

### Should I turn off BigCommerce's Cookie Consent Tracking?

Only if you use none of BigCommerce's built-in integrations. If you do use them, keep it on, send Cookiequiet's choice to the Storefront Consent API with the bridge, and hide BigCommerce's own banner with CSS.

### Does the banner need to run on the checkout pages?

No. Script Manager's checkout location has extra requirements for payment pages, and BigCommerce carries the consent set on the storefront into checkout when the bridge passes it to the Consent API.

### Does this work on a Catalyst headless storefront?

Catalyst has its own consent manager and is a Next.js app, so the snippet goes in the app's root layout instead. This guide covers Stencil storefronts.

## Sources

- [BigCommerce Help Center: Using Script Manager](https://support.bigcommerce.com/articles/en_US/Knowledge/Using-Script-Manager)
- [BigCommerce Dev Center: Set Cookie Consent Preferences (Storefront Consent API)](https://docs.bigcommerce.com/developer/api-reference/rest/storefront/consent/post-cookie-consent)
- [Google Analytics Help: Set up BigCommerce to obtain user consent](https://support.google.com/analytics/answer/14564088?hl=en)
- [BigCommerce Dev Center: Catalyst cookie consent](https://docs.bigcommerce.com/developer/docs/storefront/catalyst/features/cookie-consent)