Consentl

Consentl on BigCommerce

Install Consentl on BigCommerce with Script Manager or in the Stencil theme for strict prior blocking, keep checkout PCI-compliant, and use it on Catalyst storefronts.

Loader first in <head>
Depends on the method

There are two ways to install, depending on how strict prior blocking needs to be.

Method First in <head>? Effort
A. Script Manager No: it renders inside {{{head.scripts}}}, after the theme's CSS, fonts and head scripts No code
B. Theme file (base.html) Yes Theme edit; re-apply after theme updates

Before either method, decide what to do with BigCommerce's own cookie consent: Settings → Security & Privacy → Your customers' privacy → Cookie consent tracking.

  • Recommended: turn it off. Consentl shows the banner and holds back non-essential scripts itself; keeping both would show two banners.
  • If you keep it on, BigCommerce only renders Script Manager scripts of the categories Analytics, Functional or Targeting; Advertising after its own consent, and the two banners would need to be kept in sync, which this guide does not cover. Consentl itself must then be category Essential, or it would never load.

Your Consentl site key is on your site's Setup page in the dashboard. Add the store's hostname in the Domains field; www. and the bare domain count as the same site, so there is no need to add www. separately.

What your Consentl plan covers

  • Free: banner, consent log and manual blocking only.
  • Pro: adds Google Consent Mode v2.
  • Business: adds automatic blocking of known trackers and the blocking rules you add in the dashboard.

On Free and Pro, only tags you mark manually are held back.

A. Script Manager (Stencil storefronts)

  1. Control panel → Storefront → Script Manager → Create a Script.
  2. Fill in:
    • Name of script: Consentl
    • Location on page: Header
    • Select pages where script will be added: Store pages (storefront pages). Not All pages; see Checkout and My Account.
    • Script category: Essential
    • Script type: URL
    • Load method: Default. Never Async or Defer: the loader must run synchronously.
    • Script URL: https://api.consentl.com/v1/loader.js?k=SITE_KEY&l=en (add &gcm=ext if the store also uses the Consentl GTM template, so that only the template sends Consent Mode commands)
    • Integrity Hash: leave empty. The loader changes when you change settings in the Consentl dashboard, so a fixed hash would make the browser reject it.
  3. Save. Changes can take about 20 seconds to appear because of caching.
  4. Test in a private window (see Check that it works).

Script Manager limits script content to 64 KB. The loader is a one-line URL script.

Checkout and My Account

  • BigCommerce requires an SRI hash for every script on the checkout page: "All scripts on the checkout page need at least one SRI hash to meet PCI 4.0 - 6.4.3 requirements". BigCommerce's help extends this to the My Account page when stored cards are enabled.
  • The Consentl loader cannot carry a stable hash, so it must not be placed there. That is why Store pages is the default above, and why method B must keep the loader out of checkout.
  • As a result, checkout (and My Account when stored cards are on) show no banner and no Consentl runtime runs there.
  • The choice the visitor made on the storefront is kept in the first-party consentl cookie and is applied again on the next storefront page. Consentl does not hold anything on checkout itself: keep non-essential scripts off checkout (select Store pages for them too), and check what the Settings → Data Solutions integrations load there.
  • Scripts only render on checkout and order confirmation at all with Optimized One-Page Checkout.

B. Theme file (truly first)

  1. Storefront → Themes: on your current theme choose Advanced → Make a copy. BigCommerce only lets you edit theme files on a copy. Then open the copy's Advanced → Edit Theme Files, or use the Stencil CLI.

  2. Open templates/layout/base.html and paste the loader directly after <head>, before {{{head.scripts}}} and the theme's CSS:

    <head>
    <script src="https://api.consentl.com/v1/loader.js?k=SITE_KEY&l={{language_selector.active_language_code}}"></script>
    <title>{{ head.title }}</title>
    • {{language_selector.active_language_code}} is the documented language helper. Cornerstone also has {{locale_name}}, which works there but is not in the object reference. Use a fixed language such as en if neither returns the format you need.
    • If Enable Nonce-Based Script Security is on (Settings → Security & Privacy), add nonce="{{nonce}}" to the tag. Scripts that Consentl releases after consent then also need the nonce (give it to every tag you mark manually) or a policy with 'strict-dynamic'; otherwise the browser blocks them.

  3. Save and apply the copy. Do not also add Consentl through Script Manager.

  4. Theme updates replace base.html: add the line again after each update.

Do not add the loader to checkout templates (see Checkout and My Account). After applying the theme, open the checkout page and check with View Source that the loader is not there.

Hard-coded tags

A <script src>, <img> pixel or <iframe> written in theme files or a Script Manager script is fetched by the browser before any script can stop it, even when Consentl prevents it from running. Mark such tags manually and remove <noscript> pixels:

<script type="text/plain" data-consentl="marketing" src="https://ads.example.com/tag.js"></script>
<iframe data-consentl="marketing" data-src="https://www.youtube-nocookie.com/embed/ID" title="Video"></iframe>
<img data-consentl="marketing" data-src="https://tracker.example.com/pixel.gif" alt="" width="1" height="1">

Tags loaded by code (GTM, a pixel's JavaScript loader) are held without a request when automatic blocking is on (Business plan and higher).

  • Links whose URL ends in #consentl or #consentl-preferences, and any element with the attribute data-consentl-open, open the preferences. Add one to the footer ("Cookie settings").
  • The cookie declaration, privacy request and EU withdrawal embeds work as described in the web guide. The withdrawal form needs the Pro plan or higher and must be switched on in the dashboard; otherwise it stays empty.

Content Security Policy

If you added script-src restrictions (Settings → Security & Privacy → Content Security Policy), allow https://api.consentl.com for script-src and connect-src.

Catalyst (headless Next.js storefront)

Catalyst injects Script Manager scripts client-side and deferred, so they are never first. Follow the Next.js guide for the App Router, including its "first in <head>" guidance:

  • core/app/[locale]/layout.tsx has no explicit <head>. Add one, and put Consentl in it as the Next.js guide shows: a plain <script> as its first child.
  • app/not-found.tsx renders its own <html>; add Consentl there too.
  • React 19 hoists async scripts above a plain synchronous script, and next/script with afterInteractive makes the browser download the tag before consent. Add every other tag that must wait for consent with the guide's ConsentlScript component (type="text/plain" with its Consentl category), or manage it in Google Tag Manager.

Turn off BigCommerce cookie consent tracking. Catalyst 1.3 and later ships its own consent banner (c15t): remove or disable it to avoid two banners.

Check that it works

Open the storefront in a private window and view the source: with method B the loader is the first element in <head>. The banner appears. The Stencil CLI dev server does not render Script Manager scripts, but it does render theme code.

The visitor's region comes from their IP address: Consentl looks up the country in memory on each page view (nothing is stored) and applies your dashboard rule for it. US states are not told apart: US visitors get your rule for the whole US or, without one, your first US-state rule. An unknown country gets your rule for unknown regions (opt-in by default).

Limitations

  • Script Manager is not first. The theme's own head scripts and any Script Manager scripts that BigCommerce prints before Consentl run first; their order inside {{{head.scripts}}} is not documented. Use method B for strict prior blocking. Consentl holds back recognised trackers that load after it (Business plan and higher); on Free and Pro, only tags you mark manually are held.
  • No banner on checkout (and My Account with stored cards); see Checkout and My Account.
  • BigCommerce native analytics are not controlled by Consentl (for example the native GA4 or Meta integrations under Settings → Data Solutions). Configure them to follow Consent Mode, or replace them with tags loaded through GTM.

Stuck? Write to [email protected] — we answer in English on business days.