Shopify themes, liquid, logos, and UX
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!
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.
can you please check your main js file doesn't work
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>
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>
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>
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
Hi R_G! Did you ever find a solution to this problem? I'm encountering the same exact issue you were having...
can you please share store url
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024