How to add a custom notification bar on Shopify theme

Based on my experience while working with Shopify theme, most of them has ability to show/hide Header bar / Top bar / Notification bar. This element is very necessary, it helps you display useful and relevant information to their online shoppers. Today, in this tutorial, I would like to show you how to add a simple one without any app.

How to add a custom notification bar on Shopify theme

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

Add new section with name shopifyexplorer-top-bar

Like this screenshot bellow:

After hit Create Section, paste the following content into into it:

{% if section.settings.enable %}
<div class="shopifyexplorer-top-bar">
  <div class="shopifyexplorer-top-bar__inner" style="background-color: {{ section.settings.background }};">
    <span class="shopifyexplorer-top-bar__text" style="color: {{ section.settings.color }};">{{ section.settings.text }}</span>
    <a href="#" class="shopifyexplorer-top-bar__close">Close</a>
  </div>
</div>
<style type="text/css">
  .shopifyexplorer-top-bar__close:before,
  .shopifyexplorer-top-bar__close:after {
    background-color: {{ section.settings.color }};
  }
</style>
{% endif %}

{% schema %}
  {
    "name": "Top Bar",
    "settings": [
      {
        "type": "checkbox",
        "id": "enable",
        "label": "Enable",
        "default": true
      },
      {
        "type": "textarea",
        "id": "text",
        "label": "Content",
        "default": "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
      },
      {
        "type": "color",
        "id": "background",
        "label": "Background",
        "default": "#fff"
      },
      {
        "type": "color",
        "id": "color",
        "label": "Text Color",
        "default": "#000"
      }
    ]
  }
{% endschema %}

{% stylesheet %}
.shopifyexplorer-top-bar {
  border-bottom: 1px solid #e8e9eb;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;

  opacity: 0;
  visibility: hidden;
  -webkit-transform: translate3d(0, -10px, 0);
  -moz-transform: translate3d(0, -10px, 0);
  -ms-transform: translate3d(0, -10px, 0);
  -o-transform: translate3d(0, -10px, 0);
  transform: translate3d(0, -10px, 0);

  -webkit-transition: all linear 0.3s;
  -moz-transition: all linear 0.3s;
  -ms-transition: all linear 0.3s;
  -o-transition: all linear 0.3s;
  transition: all linear 0.3s;
}
.shopifyexplorer-top-bar.active {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.shopifyexplorer-top-bar__inner {
  position: relative;
  text-align: center;
  padding: 10px 20px;
}
.shopifyexplorer-top-bar__text {
  font-size: 14px;
}
/* Close Icon */
.shopifyexplorer-top-bar__close {
  position: absolute;
  right: 20px;
  top: 50%;
  -webkit-transform: translate3d(0, -50%, 0);
  -moz-transform: translate3d(0, -50%, 0);
  -ms-transform: translate3d(0, -50%, 0);
  -o-transform: translate3d(0, -50%, 0);
  transform: translate3d(0, -50%, 0);
  width: 14px;
  height: 14px;
  opacity: 0.9;
  text-indent: -9999px;
}
.shopifyexplorer-top-bar__close:hover {
  opacity: 1;
}
.shopifyexplorer-top-bar__close:before,
.shopifyexplorer-top-bar__close:after {
  position: absolute;
  left: 15px;
  content: ' ';
  height: 15px;
  width: 1px;
}
.shopifyexplorer-top-bar__close:before {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
.shopifyexplorer-top-bar__close:after {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

{% endstylesheet %}

{% javascript %}
function Shopifyexplorer_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 Shopifyexplorer_getCookie (name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}

var cookiesName = 'Shopifyexplorer_topBar';

if (!Shopifyexplorer_getCookie(cookiesName)) {
  var topBarEl = document.querySelector('.shopifyexplorer-top-bar');
  if (topBarEl) {
    topBarEl.classList.add('active');
  }
}

var closeEl = document.querySelector('.shopifyexplorer-top-bar__close');
if (closeEl) {
  closeEl.addEventListener('click', function (e) {
    e.preventDefault();
    Shopifyexplorer_setCookie(cookiesName, true, 365);
    topBarEl.classList.remove('active');
  });
}
{% endjavascript %}

Like the screenshot bellow:

Hit Save to save section code

Step 2: Include recently added section to theme.liquid file

Open your theme.liquid file, scroll down to bottom. add this code just after open body tag <body>

{% section 'shopifyexplorer-top-bar' %}

Like this screenshot bellow

Hit Save to save theme file

Step 3: Config your Top Bar section

Now, open your theme customizer by hitting on Customize theme button at the very top right theme editor screen

Look for Top Bar section, click on it and change its settings, including: Enable, Text, Background and Text color

Edit to your own content

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. If you like it, share it to your friends and don’t forget to help me a bit by clicking ads to helps me maintain this site.


5 thoughts on “How to add a custom notification bar on Shopify theme

  1. Hello Luke
    Thanks. Code worked like a charm.
    Also used your tutorial on displaying related items and that works great too.
    Could you please do a tutorial on adding a floating “add to cart” to a collections page on shopify?
    Thanks

  2. This is amazing. Are you able to share how we can edit code to show announcements in rotation?
    That is, on the header, the announcement text would rotate every 10-15 seconds or so to show different messages.

    1. This requires you a little bit knowledge in using HTML + JS. Basically, you need to add carousel support for these text
      1. Create blocks settings for text
      2. Using for loop in liquid to print out that text messages
      3. Using any carousel libs in your theme (like Flickity, Slick, OwlCarousel,…) to init

  3. Hi Luke,

    This is great information, thanks. The thing is that my text is not center aligned, it is all left justified. Also, I would like to edit the font and bold/italics. Can you please tell me how to do this? Thanks.

Add Comment