Adding a sitewide banner

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):

    </header>
    	

    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>
    </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());
    	

    Replace it with the following:

    this.$body.css('paddingTop', this.$siteHeader.outerHeight(true));
    	
  5. You can adjust the code after your own needs.
  6. Save the files and your done!