Skip to main content

Getting Started

Chapter 2:

How to Add Cookie Banner on Shopify Website

Welcome to CookieYes! This guide will walk you through how you can install a cookie banner on your Shopify website. A cookie banner will help your website stay compliant with privacy laws like the GDPR and ePrivacy Directive. 

Steps to add cookie consent banner on Shopify

There are two ways to install the CookieYes code on your Shopify website. You can follow any of the methods.

  • Using Shopify App
  • By editing Shopify theme manually 

Integrate CookieYes using Shopify Cookie Banner App

To add and configure a cookie consent banner to your Shopify website, follow these steps:

  1. Install CookieYes 
  2. Initial Setup
  3. Activation
  4. Enable Shopify Customer Privacy Settings

Step 1: Install CookieYes

To add CookieYes App from the Shopify store, follow the below steps:

  1. Navigate to the Shopify Admin > Apps.
  2. Click the “Apps” tab.

    Shopify apps
  3. Type CookieYes in the search box and hit enter.
  4. Once you’ve found the app, click on CookieYes GDPR Cookie Banner.
  5. Click the Install button on the app store page.

    shopify cookie banner app page
  6. Click the Install app button on the oauth page.

    shopify cookie banner app installation

Once you complete these steps, you should have successfully installed CookieYes in your Shopify store.

Step 2: Initial Setup 

Upon successful installation, you will have one of the following scenarios:

  • New Account Creation: After installation, you will be taken to the Sign Up page, where you can effortlessly create a new account.
cookieyes shopify app sign up page
  • Existing CookieYes Account: If you already have a CookieYes account, log in using your existing credentials. After installing, you will be automatically redirected to the CookieYes Sign Up page. Click the Log In button and provide your credentials to proceed.

Note

If you have an existing CookieYes account for your Shopify site, logging in to your existing account will automatically redirect you to the CookieYes dashboard.

Step 3: Activation

After creating an account, to activate CookieYes, follow the below instructions:

  1. Choose your banner template and click the Next step >> button.
  2. Copy the Cookieyes Script by clicking the Copy Code button.
  3. To integrate CookieYes Script to your Shopify website, follow the below steps:
    • From your Shopify Dashboard, navigate to Online Store under Sales channels and click Themes.
    • In the Theme section, click on the Three dot menu icon and select Edit Code from the dropdown.
    • Choose the file theme.liquid under the Layout section.
    • Paste the copied code inside the head tag immediately after opening of <head> tag and click the Save button in the top-right corner.
  4. Head back to the Setup screen to verify the installation by clicking the Verify installation button.
cookieyes setup screen

Step 4: Enable Shopify Customer Privacy Settings

  1. Navigate to Settings of your Shopify Admin Dashboard.


  2. Select Customer Privacy from the left sidebar and click Cookie Banner. Ensure ‘CookieYes GDPR Cookie Banner’ is present in Installed privacy apps.


  3. On the Cookie Banner page, click on More actions and select Use custom cookie banner.


  4. From the Use Custom Cookie Banner modal, choose the regions in which you want the marketing and analytics data to be collected for customers by Shopify and click Confirm.


Note

Shopify will collect marketing and analytics data solely upon obtaining consent within the specified regions.

Now, your cookie consent banner is live on your Shopify website! You can also explore more options and features from the CookieYes Dashboard by clicking Go to Dashboard on the Setup screen.

Make sure you have verified the email and completed cookie scanning.

For further configuration and customisation, refer our guide.

Video tutorial: How to add cookie consent to Shopify using app?

Video tutorial of Integrating CookieYes using Shopify Cookie Banner App

Integrate CookieYes by editing theme manually

In case you have already signed up on CookieYes, without taking any action on the initial setup screens, head to the CookieYes Dashboard. 

  • To customize the cookie banner, select the Cookie Banner from the top navigation panel.
  • To get the banner installation code, head to Advanced Settings and click on the Get Installation Code button on the right side of the URL. 
  • Now click on Copy code button to get the CookieYes installation code.
cookieyes copy installation code

Note

You can share the code with a developer or your team by clicking on Send code to Developer link. Enter the email address and then click on Send Instructions. The recipient will get the code and instructions via email.

You can also follow the step-by-step instructions given below to easily implement a cookie banner on your Shopify website.

Steps to add cookie consent banner on Shopify

Step 1. Head to your Shopify Dashboard, select Online Store under ‘Sales Channels’ and click on Themes.

shopify themes settings

Step 2. You will see your layout theme. Now, click on the three dots menu and choose Edit Code from the dropdown menu.

shopify themes edit

Step 3. Under ‘Layout’ section, select {/} theme.liquid.

Step 4. Paste the copied code between the <head> and </head> tags and click Save on the top-right corner.

Step 5. To integrate with Shopify’s consent settings, insert the provided code snippet just above the CookieYes script within the head tags.

<script src="https://cdn-cookieyes.com/common/shopify.js"></script>
shopify cookie banner code

Note

If you add the CookieYes installation code after other custom scripts, the auto-blocking function may not work as intended.

Step 6. Head back to the setup screen and click on the Verify button. You will see a success message that your banner is active. 

Verify shopify cookie banner

The cookie consent banner will be live on your Shopify website! Now, you can complete your website scanning from the CookieYes Dashboard and explore further customizations and features.

Still have questions or facing issues? Contact technical support

Next chapter:

Complete website scanning