Shopify.dev Cookie Compliance Banner not showing

R_G
Tourist
5 0 4

Hey guys, 

I am using the Shopify Cookie Compliance Banner (https://shopify.dev/themes/trust-security/cookie-banner) and have followed the setup exactly. 

I've created the cookie-banner.liquid snippet in the snippets directory and have added the following code inside the body tags of the theme.liquid file as instructed:

{% render 'cookie-banner' %}

 Unfortunately, it's not showing up in my store. 

When removing the fist line of code from cookie-banner.liquid snippet (#cookies-banner { display: none; ...}), it does display, but doesn't remember the users preference and pops back up every time the page is refreshed or re-visited. 

Any idea of why this might be happening? I am located in Australia if that makes any difference. 

Thanks for your help!

Replies 9 (9)

KetanKumar
Shopify Partner
36839 3635 11972

@R_G 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
R_G
Tourist
5 0 4

Thanks @KetanKumar, the URL is www.rollagames.com.au

KetanKumar
Shopify Partner
36839 3635 11972

@R_G 

can you please check your main js file doesn't work 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
R_G
Tourist
5 0 4

Hey @KetanKumar - sorry, I don't quite know what you mean?

 

This is the code I have used in the cookie-banner.liquid snippet:

 

<style>
  #cookies-banner {
    display: none;
    justify-content: center;
    align-items: center;
    padding: 1em;
    position: fixed;
    bottom: 0px;
    width: 100%;
    background: #fff;
    border-top: 1px solid #dcdcdc;
  }
</style>

<div id="cookies-banner">
  <span>This website uses cookies to ensure you get the best experience on our website.</span>
  <button style="margin-left: 1em;" onclick="handleDecline()">Decline</button>
  <button style="margin-left: 1em;" onclick="handleAccept()">Accept</button>
</div>

<script>
  function getBannerEl() {
    return document.getElementById('cookies-banner');
  }

  function hideBanner(res) {
    getBannerEl().style.display = 'none';
  }

  function showBanner() {
   getBannerEl().style.display = 'block';
  }

  function handleAccept(e) {
    window.Shopify.customerPrivacy.setTrackingConsent(true, hideBanner);

    document.addEventListener('trackingConsentAccepted',function() {
      console.log('trackingConsentAccepted event fired');
    });
  }

  function handleDecline() {
    window.Shopify.customerPrivacy.setTrackingConsent(false,hideBanner);
  }

  function initCookieBanner() {
    const userCanBeTracked = window.Shopify.customerPrivacy.userCanBeTracked();
    const userTrackingConsent = window.Shopify.customerPrivacy.getTrackingConsent();

    if(!userCanBeTracked && userTrackingConsent === 'no_interaction') {
      showBanner();
    }
  }

  window.Shopify.loadFeatures([
    {
      name: 'consent-tracking-api',
      version: '0.1',
    }
  ],
  function(error) {
    if (error) {
      throw error;
    }

    initCookieBanner();
  });
</script>

 

And this is the JS in the theme.liquid:

  {% render 'cookie-banner' %}
  
</body>

 

KetanKumar
Shopify Partner
36839 3635 11972

@R_G 

add this script link before </head>

for example 

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
R_G
Tourist
5 0 4

Thanks @KetanKumar - I just tried this (before the </head> tag in theme.liquid) and it's still not showing up - any ideas?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
KetanKumar
Shopify Partner
36839 3635 11972

@R_G 

i  think something is wrong your theme or code 

It can be done by doing some code customization. please send me a personal message and we can discuss what you'd like

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
cornelle1
Excursionist
24 0 3

Hi R_G! Did you ever find a solution to this problem? I'm encountering the same exact issue you were having...

KetanKumar
Shopify Partner
36839 3635 11972

@cornelle1 

can you please share store url

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing