Shopify – How to add an EU cookies banner to your website without app
![Shopify – How to add an EU cookies banner to your website without app](https://cdn.shopify.com/s/files/1/0277/2870/7619/files/eu_cookies_banner_x500.png)
There are a lots of app which are able to add cookies banner to your Shopify store. But today I don’t mention about that apps, I would like to show you a simple way to archive this without app.
At first I would like to tell a little bit about Cookies Law.
In May 2014, The European Union implemented a new legislation that states that all websites that use cookies must ask site visitors for permission to hold on to their information before entering the site. So if you run a website in the European Union or if a portion of your traffic comes from the EU, you might want to consider notifying your site visitors about the use of cookies on your site.
![How to add an EU cookies banner to your website without app](https://cdn.shopify.com/s/files/1/0277/2870/7619/files/eu_cookies_banner.png)
How to add an EU cookies banner to your website without app
Step 1: Add a new theme snippet
The very first step adding new snippet to your theme. From Shopify Dashboard, navigate to your Theme editor
![Edit theme code in Shopify Debut Theme](https://cdn.shopify.com/s/files/1/0277/2870/7619/files/edit-code-in-shopify.png)
Add new snippet with name shopifyexplorer-cookies-banner
Like this screenshot bellow:
![Adding new snippets in Shopify Theme](https://cdn.shopify.com/s/files/1/0277/2870/7619/files/add-new-snippet.png)
After hit Create snippet, paste the following content into into it:
<!-- ShopifyExplorer - Add an EU cookies banner to your website without app -->
<!-- Details in: http://easycodeguide.com/shopify-add-eu-cookies-banner-website-without-app -->
{% comment %}Define variables{% endcomment %}
{% assign text = "We use cookies to ensure that we give you the best experience on our website. If you continue we'll assume that you are understand this." %}
{% assign more_info = "Learn more" %}
{% assign privacy_url = "https://yourdomain.com/privacy-policy" %}
{% assign button_text = "Accept" %}
<style type="text/css">
@-webkit-keyframes slideUp{
0%{
-webkit-transform:translateY(66px);
transform:translateY(66px)
}
100%{
-webkit-transform:translateY(0);
transform:translateY(0)
}
}
@keyframes slideUp{
0%{
-webkit-transform:translateY(66px);
-ms-transform:translateY(66px);
transform:translateY(66px)
}
100%{
-webkit-transform:translateY(0);
-ms-transform:translateY(0);
transform:translateY(0)
}
}
#se-cookies-message {
color: #000; /* Change text color here */
background-color: #fff; /* Change background color here */
padding: 10px;
text-align: center;
position: fixed;
bottom:0px;
left:0;
right:0;
z-index: 100000;
box-shadow: 0 0 5px rgba(0,0,0,0.4);
opacity: 0;
visibility: hidden;
font-size: 12px;
}
#se-cookies-message.se-cookies-message-open {
opacity: 1;
visibility: visible;
animation-duration:0.8s;
-webkit-animation-duration:0.8s;
-moz-animation-duration:0.8s;
-o-animation-duration:0.8s;
-webkit-animation-name:slideUp;
animation-name:slideUp;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
-o-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
-o-justify-content: space-between;
justify-content: space-between;
}
#se-accept-cookies-checkbox {
color: #000; /* Change button text color here */
background-color: #f1d600; /* Change button background color here */
transition: background 200ms ease-in-out,color 200ms ease-in-out,box-shadow 200ms ease-in-out;
-webkit-transition: background 200ms ease-in-out,color 200ms ease-in-out,box-shadow 200ms ease-in-out;
border-radius: 5px;
-webkit-border-radius: 5px;
text-decoration: none;
font-size: 12px;
padding: 8px 15px;
}
#se-accept-cookies-checkbox:hover {
opacity: 0.8;
}
.se-cookies-text {
padding-right: 15px;
}
@media screen and (min-width: 768px) {
#se-cookies-message {
padding: 15px 30px;
font-size: 17px;
}
#se-accept-cookies-checkbox {
font-size: 16px;
padding: 8px 30px;
}
.se-cookies-text {
padding-right: 0;
}
}
</style>
<div id="se-cookies-message-container">
<div id="se-cookies-message">
<div class="se-cookies-text">
{{text}} <a href="{{privacy_url}}">{{more_info}}</a>
</div>
<a href="javascript:SE_CloseCookiesWindow();" id="se-accept-cookies-checkbox">{{button_text}}</a>
</div>
</div>
<script>
function SE_setCookie (name, value, days) {
var expires = "";
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days*24*60*60*1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
function SE_getCookie (name) {
var pair = document.cookie.match(new RegExp(name + '=([^;]+)'));
return !!pair ? pair[1] : null;
}
var cookiesName = 'cookies_accepted';
function SE_CheckCookies () {
if(!SE_getCookie(cookiesName)) {
var cookies_message = document.getElementById("se-cookies-message");
cookies_message.className += " se-cookies-message-open";
}
}
function SE_CloseCookiesWindow () {
SE_setCookie(cookiesName, true, 9999);
document.getElementById("se-cookies-message-container").removeChild(document.getElementById("se-cookies-message"));
}
document.addEventListener('DOMContentLoaded', function () {
SE_CheckCookies();
});
</script>
Like this screenshot:
![Add new snippets](https://cdn.shopify.com/s/files/1/0277/2870/7619/files/Snip20180118_4.png)
Hit Save to save snippet data
Step 2: Include recently added snippet to **theme.liquid **file
Open your theme.liquid file, scroll down to bottom. add this code snippet just before close body tag
{%- render 'shopifyexplorer-cookies-banner' -%}
Like this screenshot bellow:
![Include recently added snippet](https://cdn.shopify.com/s/files/1/0277/2870/7619/files/Snip20180118_5.png)
Hit Save to save data and you all done.
Updates on Aug 28, 2018:
- Code was converted to a new version to use Cookies values instead of using Local Storage
Conclusion:
That’s all, you can see my live theme example here. Hope that my detail tut can help you a little in launching your shop. Please fell free to contact me if you have any issue in trying this.
Thank you all for reading my tutorial.