Iubenda logo
Start generating

Documentation

Table of Contents

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

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 Cookie Solution to [1] display a fully customizable cookie banner, [2] collect cookie consent and [3] implement prior blocking, as required by the Cookie Law.

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 Cookie Solution in your Shopify store. Since 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), first you have to enable the Limit tracking to customers in Europe option inside your Online Store > Preferences.

Shopify - Limit tracking to customers in Europe

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

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 Cookie Solution configurator. Select Custom under Cookie and Privacy Policy > Cookie Policy URL. More info on the Cookie Solution advanced guide.

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

Cookie Solution - Generate your cookie banner

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

Cookie Solution - Cookie banner configurator

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

Cookie Solution - Embed the cookie banner

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>

Before pasting it into your Shopify theme, you have to make some additions (note the _iub.csConfiguration.perPurposeConsent, _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"
        }
    };

    _iub.csConfiguration.perPurposeConsent = false;
    _iub.csConfiguration.callback = {
        onPreferenceFirstExpressed: function(consent) {
            window.Shopify.customerPrivacy.setTrackingConsent(consent.consent, function() {});
        }
    };
</script>

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

<!-- 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 Cookie Solution snippet to your Shopify store

Now you have two alternatives:

Use a plugin

Use a plugin like this one to add the Cookie Solution snippet (complete with the _iub.csConfiguration.perPurposeConsent, _iub.csConfiguration.callback and Tracking API lines, 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 Cookie Solution snippet (complete with the _iub.csConfiguration.perPurposeConsent, _iub.csConfiguration.callback and Tracking API lines) 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, all the scripts that you’ve added to your pages and that install cookies must be preemptively blocked before consent is obtained.

To set up the prior blocking of cookies not installed directly by Shopify (or installed by plugins that don’t use their Customer Privacy API), see our guide on blocking via manual tagging or explore other methods outlined in our general introduction to prior blocking.

Manage cookie consent for your Shopify store

Generate a cookie banner

See also