Skip to content

  • Home
  • About Us
  • Add-ons
  • Services
    • Shopify Development Services
    • Shopify Maintenance services
    • Shopify PageSpeed Optimization
    • Shopify Training
    • Shopify App Development
    • Shopify App Integration Services
    • Shopify Email Marketing
    • Shopify Web Design Agency
  • Blog
  • Contact Us
  • Search button

Add A Cookie Consent Banner To Shopify Store

Aug 7, 2022Nov 16, 2022

Seems every other site has a cookie warning banner at the bottom of the page or showing somewhere informing you that by using the site you agree to their policies.

Editing your theme code to add this feature

  • In the Snippets directory, Create a new section with a name whatever you want but we named it cookie-banner.liquid and add the following code:
{% 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 = "/pages/terms-conditions" %}
{% assign button_text = "Accept" %}

<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>
  • In the Asset directory, open theme.scss.liquid and add the following code at the very bottom of the file:
@-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;
}
}
  • In the Layout directory, open theme.liquid and add the following code before the ending </body> tag:
{% include 'cookie-banner' %}
  • Congrats you’ve completed the coding part. Now save everything and check your online site, you’ll see a banner at the very bottom of your store.
  • Inside the cookie-banner.liquid file, you could change the privacy page link

Posted in Shopify Tutorials

Post navigation

Prev Add The Ability To Stop Purchase
Next Hide prices on some products on Shopify store

2 thoughts on “Add A Cookie Consent Banner To Shopify Store”

  1. RAM GLICK says:
    Aug 16, 2020 at 3:08 pm

    Great DIY info. Thank You! my only question is regarding to the last suggestion to change the privacy page link. I wasn’t able to figure it out. Thanks, Ram

    Reply
  2. RAM GLICK says:
    Aug 16, 2020 at 3:11 pm

    No worries. I figured it out! Thanks!

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Latest Posts

  • Shopify vs Squarespace: Which Is Best for Your Business in 2023?
    Shopify vs Squarespace: Which Is Best for Your Business in 2023?Jan 23, 2023
  • Shopify Hydrogen and Oxygen Supporting Shopify Storefront
    Discover Shopify Hydrogen and Shopify Oxygen: The Future of Shopify Storefront ShopifyJan 19, 2023
  • Magento To Shopify Migration – A Detailed Guide
    Magento To Shopify Migration – A Detailed GuideJan 16, 2023
  • How to use Shopify API Integrations with other tools or platforms?
    How To Use Shopify Api to Build Custom Integrations With Other Tools Or Platform?Jan 7, 2023

Subscribe Now

Follow Us

  • facebook
  • twitter
  • instagram
  • linkedin2

OriginateWeb.com is the realization of a dream. Our founder previously spent several years working for a large website development company.

Quick Links

  • Shopify Services
  • About Us
  • Shopify Theme Add-ons
  • Blog
  • Contact Us
  • Careers

Services

  • Shopify Theme Add-ons
  • Website Development
  • Page Speed Optimization
  • App Development
  • Maintenance
  • Training

Need Help?

  • Licensing Agreement
  • Terms and Conditions
  • Privacy Policy
  • Sitemap
  • facebook
  • twitter
  • instagram
  • linkedin2

© 2023 Originate Web. All Rights Reserved