Adding a sitewide banner

Update: In our 2.0 theme version we've added the "announcement" banner in the default theme options ( example). To enable it, please open the Header settings in theme customizer - screenshot

If you wish to have a sitewide banner showing various promotions or announcements, you can do this easily.

  1. Go to the theme editor (read this article for more info)
  2. Choose /sections/header.liquid and locate the header's ending block (around line 74):


    Add the following code right before the line you've identified:

    <div class="header__announcement">
       <div class="content">Write here a short, important announcement.</div>

    Make sure that you write max 50 characters, so that the text will be visible on mobile devices as well.

  3. Choose  /assets/css_main.scss.liquid and at the very end of the file, paste this code:

    .header__announcement {
      width: 100%;
      padding: 9px 14px 8px;
      font-size: rem(12px);
      overflow: hidden;
      z-index: 9999;
      text-align: center; 
      pointer-events: all;
      position: absolute;
      height: 34px;
      top: -34px;
      left: 0;
      background-color: #d23232;
      color: #ffffff;
    .site-header {
      margin-top: 34px;
  4. Choose /assets/js_main.js and search for this code line (around line 1346)

    this.$body.css('paddingTop', this.$siteHeader.outerHeight());<br>

    Replace it with the following:

    this.$body.css('paddingTop', this.$siteHeader.outerHeight(true));<br>
  5. You can adjust the code after your own needs.
  6. Save the files and your done!
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.