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  /assets/css_main.scss.liquid and at the very end of the file, paste this code:

    body:before {
        content: "Free shipping on all orders!";
        background: #ffaa00;
        color: #333333;
        height: 40px;
        width: 100vw;
        position: fixed;
        z-index: 9999;
        top: 0;
        line-height: 40px;
        text-align: center;
        font-weight: 500;
        font-size: 15px;
    body, .site-header.fix.animate  {
        margin-top: 40px;
  3. You can adjust the code after your own needs.
  4. Save the file and your done!

Note: If your text doesn't fit in the mobile screens, please adjust the text font size with this CSS code (also insert it in the same place at the end of the css_main.scss.liquid file):

@media all and (max-width: 640px) { 
  body:before {
   font-size: 10px !important;