Cookie consent banner

Grace_01
Excursionist
36 1 3

I have cookie consent banner which is hiding the sticky add to cart button at the bottom of the page. Is there any way that cookie banner can show above or below the sticky add to cart button without overlapping.

Here is the cookie code

 

 

{% comment %}Define variables{% endcomment %}
{% assign text = "By using this site, you agree to the use of cookies that we use to provide an optimized shopping experience." %}
{% assign more_info = "Learn more" %}
{% assign privacy_url = "Your_Store_Policy_URL" %}
{% 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&colon;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>

 

 

 

0 Likes
HardikDavra
Shopify Partner
2324 366 996

Hello, @Grace_01 

Welcome to the Shopify Community.
I read your problem and it seems that I need to analyze your website to provide the solution here.
Would you please share your website URL and if your website is password protected then also provide the password.

PageFly Landing Page Builder - #1 Choice For Responsive, SEO-friendly Landing, Product Page.

For fast Communication: Email: parambabla.soft@gmail.com | Whatsapp
0 Likes
Grace_01
Excursionist
36 1 3

Hello @HardikDavra  messaged you website

0 Likes
Grace_01
Excursionist
36 1 3

Hey @HardikDavra hope you are doing good.. did you got any solution?

0 Likes
HardikDavra
Shopify Partner
2324 366 996

I have replied to your email. PLease check

PageFly Landing Page Builder - #1 Choice For Responsive, SEO-friendly Landing, Product Page.

For fast Communication: Email: parambabla.soft@gmail.com | Whatsapp
0 Likes
Grace_01
Excursionist
36 1 3

Hi @HardikDavra Got your mail.. Yes please send collaborative request link

0 Likes