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

1. Install the CookieYes code on your Shopify website.

You can follow any of the methods.

• Using Shopify App
• By editing Shopify theme manually 

2. Enable Shopify Customer Privacy Settings.

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

1. Install CookieYes 
2. Launch App
3. Enable the CookieYes App

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.
   
   

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.
   
   
   
6. Click the Install app button.
   
   
   

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

Step 2: Launch the App

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

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

After installation, the CookieYes app will open automatically and take you through a Quick Setup to configure your cookie consent banner. Follow the steps below:

1. Select the default banner language from the dropdown menu.
2. Choose the banner type – either box-style or full-width.
3. Pick a colour theme:
   • Light: Light background with dark text
   • Dark: Dark background with light text
4. Preview the banner in real time to see how it will appear on your store.
5. Click Save & Next to proceed to the next step.

Once the Quick Setup is complete, you’ll be automatically redirected to the Pricing page to choose a subscription plan.

1. Select a plan based on your feature requirements and click the Upgrade button under your preferred plan.
   
   
2. A confirmation screen will appear with plan details and pricing. Click Approve to confirm and initiate the subscription.
3. Once payment is successful, you’ll see a Payment Successful message.

Once the upgrade is complete, click Go to Dashboard to proceed with advanced configuration.

Already a CookieYes User?

If you’re an existing CookieYes user, there’s no need to create a new account. After installing, you will be automatically redirected to the CookieYes Login page. Enter your credentials and click the Connect Account button to proceed.

Step 3: Enable the CookieYes App

After selecting your subscription plan, you will be redirected to the Dashboard. To make the cookie banner visible on your website:

1. Click the Enable App button on the dashboard under the Action Required notice. This will take you to the theme editor in Shopify.
   
   
2. In the App embeds panel, ensure that the CookieYes GDPR Cookie Banner toggle is turned on.
3. You will see a live preview of the cookie banner on your website.
   
   
4. Click Save in the top-right corner to apply the changes.

After saving the banner settings in the theme editor, go back to the Dashboard, where the banner status will now show as Active.

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

• To begin with, Sign up on CookieYes for free
• Then, complete the steps in How to create a cookie banner 

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.

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.

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

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="/api/flow.js?q=https%3A%2F%2Fcdn-cookieyes.com%2Fcommon%2Fshopify.js"></script>

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. 

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, locate and click the Remove cookie banner and then click Remove in the confirmation modal to delete the banner.
   
   
   
4. To set regions for cookie banner, follow the below steps:
   • Under the Cookie banner settings, locate and click the Edit button next to Regions.
   • In the Edit regions popup modal, choose the desired countries/regions by checking the boxes next to their flags and click the Done button.
   • After selecting your regions, click the Save button in the top right corner of the screen to confirm your changes.
     
     

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