Iubenda logo
Start generating

Documentation

Table of Contents

Privacy Controls and Cookie Solution for Shopify: how to display a cookie banner and collect cookie consent

If you’re here, you’ve probably set up your Shopify shop and need to manage cookies. Or are you considering setting up your Shopify shop but are wondering how to display your cookie notice? Let’s see how to do it 👉

Once you’ve integrated the Privacy Policy on your Shopify website (which also includes the cookie policy if you’ve activated it) you can complete the configuration by embedding our Privacy Controls and Cookie Solution to:

In fact, except for exempt cookies, the Cookie Law includes not only the obligation to set up and show the user a Cookie Policy, but also to display a brief notice (banner) at the user’s first visit and to block scripts which install (or could install) cookies, until the user has granted consent.

👉 In this guide, you’ll learn how to integrate our Privacy Controls and Cookie Solution in your Shopify store. (In minutes!)

Here is how to add a cookie banner to your Shopify store

The method shown below uses Shopify’s Customer Privacy API (which automatically blocks cookies and trackers installed either by Shopify directly or by any plugins that support it).

1. First, go to your iubenda Dashboard and click on [Your website] > Privacy and Cookie Policy > Edit. You’ll notice a Cookie Policy box in the right column.

Activate Cookie Policy

2. Click on Activate cookie policy and Save changes: your Cookie Policy will be generated automatically based on the configuration of your Privacy Policy.

💡 If you already have your own Cookie Policy, you can add the link in the Advanced View of the Privacy Controls and Cookie Solution configurator. Select Custom under Cookie and Privacy Policy > Cookie Policy URL. More info on the Privacy Controls and Cookie Solution advanced guide.

1. Click on Generate now under Dashboard > [Your website/app] > Privacy Controls and Cookie Solution.

Cookie Solution - Generate your cookie banner

2. This will take you directly to the configuration panel of your cookie banner.

3. Once customized as you like, Save and Copy your Privacy Controls and Cookie Solution snippet.

Cookie Solution - Embed the cookie banner

4. You’ll get a code similar to this:

<script type="text/javascript">
    var _iub = _iub || [];
    _iub.csConfiguration = {
        "countryDetection": true,
        "consentOnContinuedBrowsing": false,
        "perPurposeConsent": true,
        "lang": "en",
        "siteId": 11223344, //use your siteId
        "cookiePolicyId": 55667788, //use your cookiePolicyId
        "floatingPreferencesButtonDisplay": "bottom-right",
        "banner": {
            "acceptButtonDisplay": true,
            "customizeButtonDisplay": true,
            "rejectButtonDisplay": true,
            "position": "float-top-center"
        }
    };
</script>
<script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>

5. Before pasting it into your Shopify theme, you have to make some additions (note the two “code for Shopify” parts, with the onPreferenceFirstExpressedCallback, _iub.csConfiguration.callback and Tracking API lines):

<script type="text/javascript">
    var _iub = _iub || [];
    _iub.csConfiguration = {
        "countryDetection": true,
        "consentOnContinuedBrowsing": false,
        "perPurposeConsent": true,
        "lang": "en",
        "siteId": 11223344, //use your siteId
        "cookiePolicyId": 55667788, //use your cookiePolicyId
        "floatingPreferencesButtonDisplay": "bottom-right",
        "banner": {
            "acceptButtonDisplay": true,
            "customizeButtonDisplay": true,
            "rejectButtonDisplay": true,
            "position": "float-top-center"
        }
    };

    <!-- code for Shopify (1 of 2) -->
    var onPreferenceFirstExpressedCallback = function(consent) {
        var shopifyPurposes = {
          "analytics": [4, 's'],
          "marketing": [5, 'adv'],
          "preferences": [2, 3],
          "sale_of_data": ['s', 'sh'],
        }

        var expressedConsent = {};
        Object.keys(shopifyPurposes).forEach(function(purposeItem) {
          var purposeExpressed = null

          shopifyPurposes[purposeItem].forEach(item => {
            if (consent.purposes && typeof consent.purposes[item] === 'boolean') {
              purposeExpressed = consent.purposes[item];
            }

            if (consent.uspr && typeof consent.uspr[item] === 'boolean' && purposeExpressed !== false) {
              purposeExpressed = consent.uspr[item];
            }
          })
 
          if (typeof purposeExpressed === 'boolean') {
            expressedConsent[purposeItem] = purposeExpressed;
          }
        })

        window.Shopify.customerPrivacy.setTrackingConsent(expressedConsent, function() {});
    }
    if (typeof _iub.csConfiguration.callback === 'object') {
        _iub.csConfiguration.callback.onPreferenceFirstExpressed = onPreferenceFirstExpressedCallback;
    } else {
        _iub.csConfiguration.callback = {
            onPreferenceFirstExpressed: onPreferenceFirstExpressedCallback
        };
    }
</script>

<script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>

    <!-- code for Shopify (2 of 2) - Tracking API -->
<script type="text/javascript">
window.Shopify.loadFeatures(
  [
    {
      name: 'consent-tracking-api',
      version: '0.1',
    },
  ],
  function(error) {
    if (error) {
      throw error;
    }
  }
);
</script>

3. Add the Privacy Controls and Cookie Solution snippet to your Shopify store

Now you have two alternatives:

💡 Use a plugin

Use a plugin like this one to add the Privacy Controls and Cookie Solution snippet (complete with the two “code for Shopify” parts, see 2. Generate your cookie banner) to the <head> of your Shopify store.

1. Access your Shopify store’s admin panel and go to Online Store > Themes. Once there, click on Actions on the right, then Edit Code.

Shopify - Edit code

2. Create a new snippet in the Snippets folder and name it iub-cookie-banner.liquid

Shopify - Add a new snippet

3. Paste the Privacy Controls and Cookie Solution snippet (complete with the two “code for Shopify” parts) into the iub-cookie-banner.liquid template and save it.

Shopify - Cookie Solution snippet

4. Open the theme.liquid layout (inside the Layout folder) and add {% include 'iub-cookie-banner' %} between {{ content_for_header }} and </head>.

Shopify - theme.liquid

5. Repeat step #4 for the gift_card.liquid and password.liquid layouts.

Few categories of cookies are exempt from the consent requirement. Therefore, you’ll need to block scripts from running until you get valid user consent.

How to implement prior blocking via manual tagging on your Shopify store

Manual tagging is the method of prior-block we’ll be using for the tutorial below. You can view other methods here.

To set up prior blocking, you’ll need to make some minor changes to your site’s scripts. But it’s simple; just do the following:

  1. Identify the script/iframe for any additional services that are running on your website (e.g., Pinterest button)
  2. Add some simple text to the HTML code (we’ll show you how below!)
  3. Save!

In this tutorial, we are going to block a Pinterest “Pin It” Button.

💡 Not sure which services you need to block? If you’re using a Cookie Policy generated by iubenda, the services listed in your Cookie Policy are most likely the ones you need to modify now.

In your Shopify admin, click Online store, and then click Themes. In the theme drop-down, click Edit Code

Prior blocking checkbox - Flow page

Then, open your Snippets folder to find the script you need to modify (simply search for the service you want to block, in this case, it is Pinterest’s “Pin It” Button) You can do this using the search bar in the top left corner of the page

Prior blocking checkbox - Flow page
Now, we’re going to change the script. To do this, we will make 3 simple changes:
  • add this class: _iub_cs_activate to the script tags, and change the “type” attribute from text/javascripttext/plain
  • replace the src with data-suppressedsrc or suppressedsrc
  • specify the categories of the scripts/iframes with a special comma-separated data-iub-purposes attribute, e.g. data-iub-purposes="2" or data-iub-purposes="2, 3"

More about categories and purposes

Purposes are your legal reasons for processing the particular type of user data. Different scripts on your site will fall into different categories and serve different purposes. For example, Google Analytics may be used for Measurement, while the Pinterest button may be used for Experience (Purpose 3 below). Purposes are grouped into 5 categories each with an id (1, 2, 3, 4, and 5):

  • Necessary (id: 1)
  • Functionality (id: 2)
  • Experience (id: 3)
  • Measurement (id: 4)
  • Marketing (id: 5)

For even more detailed info on categories and purposes, see our guide here.

Let’s take the Pinterest “Pin It” Button as an example:

We need to 1. Add the class and change the “type” attribute, 2. replace the src and 3. specify the categories.

And the code structure should be like this:

Prior blocking checkbox - Flow page
<p>Pinterest "Pin It" Button:</p>

a  <a href="//pinterest.com/pin/create/button/?url={{ shop.url }}{{ product.url }}&amp;media=http:{{ product | img_url: '1024x1024' | split: '?' | first }}&amp;description={{ product.title | strip_html | truncate: 200, '' | url_param_escape }}{% for tag in product.tags limit: 3 %}{{ tag | replace: ' ', '-' | prepend: ' #' | url_param_escape }}{% endfor %}" data-pin-do="buttonPin" data-pin-config="none">
  <img src="//assets.pinterest.com/images/pidgets/pin_it_button.png" />
  </a>
  <script async type="text/plain" class="_iub_cs_activate" data-suppressedsrc="//assets.pinterest.com/js/pinit.js" data-iub-purposes="3" charset="utf-8"></script>
Now that you’ve made your changes, simply hit save, and you’re done.

Not sure if you’ve set up correctly? Check out the live example and FAQs below

Live example

This is an example that shows everything we have described above, you can use this code pen as a guide to see what happens before and after blocking scripts via manual tagging.

(see the example)

To demonstrate the cookie blocking feature, we’ve embedded a YouTube video, and a Twitter follow button:
Follow @iubenda

Both scripts are blocked through manual tagging. Since both the YouTube video widget and the Twitter follow button are part of the Experience purpose (id 3) we’ve added data-iub-purposes="3" to their scripts so that the Privacy Controls and Cookie Solution can properly identify them for release.

Click on the Accept button – or just activate the “Experience” toggle – to release these scripts (refresh the page to return to the starting point).

How can I tell if I’ve set prior blocking up properly?

As you can see in the code pen example, the Youtube and Twitter scripts do not load if you do not consent. (You can test this function again by opening this link (https://codepen.io/iubenda/pen/KKKxmVO/?editors=1000) in incognito mode in your browser)

After you have saved, open your site in an incognito mode and check if the scripts you have blocked via manual tagging stay blocked until you consent.

Please refer to this dedicated article if you’d like to know how to block cookies before consent using other options available. ➔ Take a look at Google Consent Mode as an alternative to prior blocking, Google Tag Manager to Simplify the Blocking of Cookies, or the IAB Transparency & Consent Framework and how to enable it.

Manage cookie consent for your Shopify store

Generate a cookie banner

See also