Sale Banner code

black-friday-sale-banner

{% if template contains 'index' %}
{% assign balckfridayimage = 'blackfriday.png'%}
{% assign url = '/collections/sale' %}
<style>
  #bfsale{
    position:fixed;
    left:0px;
    bottom:0px;
    opacity:0;
    display: block;
    z-index:999;
  }
  #bfsale img{
    max-width:100%;
    display: block;
  }
  #bfclose{
    position: absolute;
    right: -8px;
    top: -8px;
    width: 20px;
    height: 20px;
    font-size: 15px;
    line-height: 20px;
    font-family: monospace;
    border-radius: 15px;
    background: #fff;
    border: 1px solid #999;
    color: #999;
    display: block;
    text-align: center;
    cursor:pointer;
  }
</style>
<div id="bfsale" >
  <span id="bfclose">X</span>
  <a href="{{url}}" target="_blank">
    <img src="{{ balckfridayimage | asset_url}}">
  </a>
</div>
<script>
  function fadeIn(element) {
    var op = 0.1;  // initial opacity
    var timer = setInterval(function () {
      if (op >= 1){
        clearInterval(timer);
      }
      element.style.opacity = op;
      element.style.filter = 'alpha(opacity=' + op * 100 + ")";
      op += op * 0.1;
    }, 50);
  }
  document.addEventListener("DOMContentLoaded", function(event) { 
    //do work
    setTimeout(function(){
      var  bfsale= document.getElementById('bfsale');
      fadeIn(bfsale);
    },1000);
  });

  document.getElementById("bfclose").addEventListener("click", function(){
    var  bfsale= document.getElementById('bfsale');
    bfsale.style.display = "none";
  });

</script>
{% endif %}

Theme

{% include 'black-friday-sale-banner' %}