Cookies & the cookie consent widget

ShopWired's cookie consent widget works independently of your theme, no theme changes are required to use the feature.

ShopWired's cookie consent widget enables you to add a cookie consent popup notification to your website to allow visitors to grant your website permission to place on their browser.

When you enable the cookie consent widget, the visitor will have to specifically grant permission to accept cookies from your website. The widget is available in two different designs, either a banner (shown at the bottom of the website) or a popup window (shown in the middle of the website).

The visitor will have three separate options:

Select "Accept" to accept all cookies on your website
Select "Decline" to decline all cookies on your website
Select "Manage" to select which cookies to accept

Once the visitor has made their selection, a Cookie Access icon will remain on your website so that the visitor can change their preferences at any time.

When the cookie consent widget is enabled, it controls when and how cookies are set on your website to comply with UK and EU cookie laws.

When a visitor first lands on your website:

Display – The widget appears in the style you’ve configured (banner at the bottom of the page or centred popup)
Blocking behaviour – No non-essential cookies (personalisation, marketing, analytics) are set until the visitor has made a choice. Only required cookies are allowed by default
Visitor options – The visitor can:
- Accept all – Immediately allow all categories of cookies
- Decline all – Block all non-essential cookies and allow only required cookies
- Manage – Open the preferences popup to make a category-by-category selection

If the visitor clicks Manage, the preferences popup displays four cookie categories:

Required – Always enabled, cannot be turned off
Personalisation – Allows features like saved preferences, recently viewed products, and live chat
Marketing – Allows cookies used for targeted advertising and marketing campaigns
Analytics – Allows cookies that measure website usage and performance

By default, none of the optional categories are pre-selected. The visitor must actively tick the ones they want to allow and click Save my choices to apply them. Selecting Accept all or Decline all in this popup works the same way as the banner buttons.

The banner or popup is replaced with a cookie access icon, positioned in the bottom left or right corner depending on your settings
This icon is always visible after the visitor has made a choice, allowing them to reopen the preferences popup at any time and change their selection
When preferences are changed, the new settings are applied immediately

Script control

The widget prevents non-essential cookies and scripts from running until the visitor has given the required consent
If you use tracking scripts through ShopWired’s script settings, these are automatically controlled based on the visitor’s preferences
If you have added tracking scripts into your ShopWired theme's code they are not automatically controlled and additional coding should be added (using the Twig variables described later in this guide) to control their placement on the visitor's browser

If your ShopWired account was created before 3rd September 2025 you'll need to select on for the Advanced cookie consent widget setting to activate the settings described below.

To enable the widget and configure its settings, navigate to Website settings > Cookie consent widget.

In the Cookie banner section select your settings for the following options:

Select banner to display a cookie banner along the bottom of your website
Select popup to display a popup in the middle of your website

Use this setting to determine the colours for the cookie banner/popup:

Select light to display the banner with light colours (a white background and black text)
Select dark to display the banner with dark colours (a dark background and white text)
Select custom to select your own colours for the banner:
Background defines the colour of the background of the banner
Text defines the colour of instruction text of the banner
Manage link defines the colour of the text link that allows the visitor to select the individual cookies they want to accept
Button backgrounds defines the background colour of the accept and decline buttons
Button text defines the text colour of the accept and decline buttons

Cookie consent laws require the accept and decline buttons on cookie consent widget to be of equal prominence. Therefore, using the standard configuration options it is not possible to adjust the colours of these two buttons individually (to do so, use the advanced configuration instructions described later in this help guide article).

Use the rich text editor to customise the text displayed within the cookie banner. To remain compliant with cookie consent laws you should include a link to either your privacy policy or a cookies policy so the user can read more information about cookies on your website.

In the Cookie preferences section select your settings for the following options:

This setting determines the appearance of the cookie access button, displayed to visitors once they have confirmed their cookie preferences. The cookie access button's colours are determined by the settings for the cookie banner.

Select left for the cookie access button to appear in the bottom left of your website
Select right for the cookie access button to appear in the bottom right of your website

Select light to display the popup with light colours (a white background and black text)
Select dark to display the popup with dark colours (a dark background and white text)
Select custom to select your own colours for the popup:
Background defines the colour of the background of the popup
Title defines the colour of the title text
Close icon defines the colour of the close icon in the popup
Text defines the colour of other text in the popup
Button backgrounds defines the background colour of the buttons in the popup
Button text defines the colour of the text in the buttons in the popup

Cookie consent laws require the accept and decline buttons on cookie consent widget to be of equal prominence. Therefore, using the standard configuration options it is not possible to adjust the colours of the three buttons available in the popup individually (to do so, use the advanced configuration instructions described later in this help guide article).

Use the rich text editor to customise the title of the popup.

Text settings

Use the rich text editor to customise the title and main text shown for each available cookie type displayed in the consent widget. Each cookie type is described later in this help guide:

Required cookies
Personalisation cookies
Marketing cookies
Analytics cookies

In accordance with cookie consent laws, including , ShopWired defines the following types of cookies:

Required cookies

Required cookies are those that are essential for the basic operation of your website, such as enabling checkout, remembering privacy settings, and keeping visitors logged into accounts. These cookies are all set by ShopWired and visitors cannot disable required cookies. You can read more about ShopWired's cookies later in this help guide article.

Personalisation cookies

Personalisation cookies store visitors preferences and customise the shopping experience.

Marketing cookies

Marketing cookies track visitor behaviour across your website and others to deliver targeted ads and measure the effectiveness of marketing campaigns. Marketing cookies include the Facebook Tracking Pixel.

Analytics cookies

Collect anonymised data about how visitors use your website, helping you improve functionality, performance, and content. Analytics cookies include Google Analytics 4.

If you are using Google Analytics 4 (GA4) and want to implement Google Consent Mode V2 on your website, ShopWired strongly recommends:

Using ShopWired's built-in Google Analytics 4 feature to configure GA4 on your website
Activating the cookie widget to require cookie consent before GA4 is run on your website
Activating Google Consent Mode V2 on the Visitor monitoring page

For more information, read ShopWired's guidance on Google Consent Mode V2.

ShopWired's cookies

The ShopWired platform sets a number of cookies on visitors' browsers to provide the services of an ecommerce website. These cookies do not process personally identifiable information (including IP addresses) and therefore do not require the visitor's consent, including ShopWired's visitor statistics feature. They are always set on visitor devices, and cannot be disabled.

Cookie name	Description	Expiration time
`amazon_Login_accessToken`	Used by and contains the access token	The expiration time varies
`basket`	Used by ShopWired's shopping basket system and contains the basket token	Expires after 30 days
`login_token`	Used by the 'remember me' feature for website customer accounts and contains the login token	Expires after 7 days
`rated_questions`	Used by the product questions & answers feature and contains question IDs	Expires after 1 year
`wishlist`	Used by the wishlist system and contains product IDs	Expires after 400 days
`referrer`	Used by the referrer system	Expires after 60 days
`customer_referrer`	Used by the referral system	The expiration time is customisable within the app
`recently_viewed_products`	Stores the IDs of	Expires after 30 days
`_shopwired_theme_preview`	Used by the theme preview system when viewing a draft theme	Expires when the browser is closed
`__holding_page_token`	Used by the holding page feature	Expires after 24 hours
`_shopwired_visit`	Used by the visitor statistics feature on ShopWired to record a visit to your website, used in conjunction with `_shopwired_visitor` which tracks a visitor as they navigate across your website's pages	Both expire after 30 days
`PHPSESSID` is used to set the visitor's	Expires when the browser is closed

The following Twig variables return true if the visitor has consented to the type of cookies:

Returns true if the visitor has consented to analytics cookies (e.g. Google).

Returns true if the visitor has consented to personalisation cookies (e.g. live chat, Disqus).

Returns true if the visitor has consented to marketing cookies (e.g. Meta/Facebook, your “Marketing scripts” block).

Advanced design customisation

Customisation approaches

Override the platform view
Create partials/advanced_cookie_consent_widget.twig in your theme to replace the platform view in full
Use when layout or behaviour needs to diverge significantly from the default
Extend the platform view
Create shopwired/advanced_cookie_consent_widget.twig and override only the required blocks
Keeps the platform stylesheet and script in place and reduces maintenance

For small visual changes, extend the platform view and override targeted blocks. Use a full override only when necessary.

Shadow DOM and styles

The widget renders inside a shadow root (<template shadowrootmode="open">). CSS from your theme does not cascade into the widget. To style it:

Keep the platform stylesheet via the stylesheets block and pass colour values, or
Inject additional <style> rules inside the stylesheets block in your override

Do not move logic out of the shadow root. Keep all widget-specific CSS within the stylesheets block so it is applied reliably.

Blocks available to override

Block	Description
`stylesheets`	Default stylesheet and colour implementation
`banner`	The entire banner container
`banner_content`	Inner banner content and action buttons
`preferences`	The entire preferences modal, including close button
`preferences_content`	Inner modal content, category list, and modal buttons
`scripts`	Default script include

When extending, override the smallest block that achieves the result. This keeps you aligned with future platform changes.

Variables available in the view

stylesheet_url
banner_colors
Keys used by the platform CSS: background, text, border, link, button_text, button_background, button_border
preferences_colors
Keys used by the platform CSS: background, text, title, close_icon, button_text, button_background, checkbox
cookie_name
banner
modal, dark_color_mode, title, text
manage_button_position
manage_button_dark_color_mode
preferences_dark_color_mode
preferences_title
required_cookies_text
feature_groups
feature_id → object with text and accepted
script_url

Use only the keys shown above. Additional keys will be ignored by the platform CSS.

Hooks the default script relies on

Keep the following classes and attributes unchanged. You may change layout or wording around them.

Root container
<div class="container" data-cookie-name="{{ cookie_name }}"> must remain and include the data-cookie-name attribute
Manage buttons
.manage-button on the banner link and on the floating access button
Consent action buttons
.save-button for all consent actions
Decline in banner uses data-decline="1"
Accept in banner has no data-* attribute
Save custom in modal uses data-custom="1"
Decline all in modal uses data-decline="1"
Accept all in modal has no data-* attribute
Feature toggles
.feature-group-input on each checkbox with value="{{ feature_group_id }}"
Required cookies row
Remains disabled and checked and uses .feature-group-check-box--disabled

If you rename or remove these hooks, the default script will not bind events. Only change these if you are also replacing the script via the scripts block.

Typical customisations

Change banner copy or structure
Override banner_content and update the text and markup
Change button labels
Override banner_content and preferences_content and change button text only, leaving .save-button and data-* attributes in place
Add explanatory text or links to the modal
Override preferences_content and add content above the feature list or near the buttons
Adjust colours
Pass colour values via banner_colors and preferences_colors or inject a <style> in stylesheets
Reposition or restyle the floating access button
Keep .access-button and its positional modifier and update styles in stylesheets

The platform stylesheet already ensures equal prominence for action buttons. If you introduce visual asymmetry, review compliance requirements before deploying.

Colour keys reference

Banner colours (banner_colors)
background, text, border, link, button_text, button_background, button_border
Preferences modal colours (preferences_colors)
background, text, title, close_icon, button_text, button_background, checkbox

Structural constraints

Keep .save-button and its data-* attributes on action buttons
Keep .manage-button on both the banner link and the floating access button
Keep .feature-group-input with correct value per feature id
Keep the root data-cookie-name="{{ cookie_name }}" attribute
Preserve the disabled required row

The platform implementation depends on the default stylesheet and script and on the assumptions shown in the platform view. Respect these assumptions when overriding markup.

Minimal override examples

Change the banner body copy only

{# shopwired/advanced_cookie_consent_widget.twig #}
{% extends "shopwired/advanced_cookie_consent_widget.twig" %}
{% block banner_content %}
  <div class="banner__content">
    {% if banner.modal %}
      <div class="banner__title">
        {{ banner.title|raw }}
      </div>
    {% endif %}
    <p>This website uses cookies to provide essential features and optional analytics and marketing. Review preferences or accept all.</p>
  </div>
  <div class="banner__buttons">
    <div><a class="manage-button">Manage</a></div>
    <div><button type="button" class="save-button" data-decline="1">Decline</button></div>
    <div><button type="button" class="save-button">Accept</button></div>
  </div>
{% endblock %}

{% extends "shopwired/advanced_cookie_consent_widget.twig" %}
{% block preferences_content %}
  <div class="preferences__content">
    <div class="preferences__title">{{ preferences_title|raw }}</div>
    <div class="feature-group-check-box feature-group-check-box--disabled">
      <input type="checkbox" class="feature-group-input" checked disabled>
      {{ required_cookies_text|raw }}
    </div>
    {% for feature_group_id, feature_group in feature_groups %}
      <div class="feature-group-check-box">
        <input type="checkbox" value="{{ feature_group_id }}" class="feature-group-input"{% if feature_group.accepted %} checked{% endif %}>
        {{ feature_group.text|raw }}
      </div>
    {% endfor %}
  </div>
  <div class="preferences__buttons">
    <div><button type="button" class="save-button" data-custom="1">Save selected</button></div>
    <div><button type="button" class="save-button" data-decline="1">Decline all</button></div>
    <div><button type="button" class="save-button">Accept all</button></div>
  </div>
{% endblock %}

Inject custom colours via the `stylesheets` block

{% extends "shopwired/advanced_cookie_consent_widget.twig" %}
{% block stylesheets %}
  <link rel="stylesheet" href="{{ stylesheet_url }}">
  <style>
    {% if banner_colors %}
    .banner {
      color: {{ banner_colors.text }};
      background: {{ banner_colors.background }};
      border-color: {{ banner_colors.border }};
    }
    .banner__buttons a { color: {{ banner_colors.link }}; }
    .banner__buttons button, .banner--modal .banner__buttons button {
      color: {{ banner_colors.button_text }};
      background: {{ banner_colors.button_background }};
    }
    .banner--modal .banner__buttons button { border-color: {{ banner_colors.button_border }}; }
    .access-button { background: {{ banner_colors.background }}; border-color: {{ banner_colors.border }}; }
    .access-button svg { fill: {{ banner_colors.text }}; }
    {% endif %}
    {% if preferences_colors %}
    .preferences__inner { color: {{ preferences_colors.text }}; background: {{ preferences_colors.background }}; }
    .preferences__close-button { fill: {{ preferences_colors.close_icon }}; }
    .preferences__title { color: {{ preferences_colors.title }}; }
    .preferences__buttons button {
      color: {{ preferences_colors.button_text }};
      background: {{ preferences_colors.button_background }};
    }
    .preferences .feature-group-check-box { color: {{ preferences_colors.text }}; }
    .preferences .feature-group-check-box::before {
      background: {{ preferences_colors.background }};
      border-color: {{ preferences_colors.checkbox }};
    }
    .preferences .feature-group-check-box svg { fill: {{ preferences_colors.checkbox }}; }
    {% endif %}
  </style>
{% endblock %}

What not to change

Do not alter or remove the hooks listed above unless you are providing a replacement script via the scripts block
Do not pre-check optional categories in the template; rely on feature_groups[...].accepted if defaults are needed
Do not remove the disabled required row

If you need to replace the platform script, do so in the scripts block and document any changed hooks in your theme for future maintenance.

Cookies & the cookie consent widget

How the cookie consent widget works

Preferences popup

After consent is given

Script control

Configuring the cookie consent widget

Cookie banner

Cookie banner style

Cookie banner colours

Cookie banner text

Cookie popup preferences

Cookie access button position

Cookie preference popup colours

Cookie popup title