Shopify Announcement Bar

About this module

A top announcement bar with text, a link and a dismiss button that remembers the choice via localStorage.

Installation

1. 1

   Open Shopify Admin

   Go to Online Store → Themes.

2. 2

   Edit code

   Click the ellipsis (⋯) next to your theme and choose Edit Code.

3. 3

   Create the section

   In the Sections folder, click Add a new section, name it mh-announcement, and replace the contents with the Liquid source below.

4. 4

   Save

   Save the file. The section now appears in the Theme Customizer.

5. 5

   Add it to the page

   Open the Theme Customizer, click Add section, search for it and add it where you like.

Usage

1. 1

   Paste the section

   Create `mh-announcement` under Sections and paste the source.

   {{ 'styles.css' | asset_url | stylesheet_tag }}
   {% unless section.settings.hidden %}
     <div class="mh-announcement" style="background: {{ section.settings.background }}; color: {{ section.settings.text_color }}" data-mh-announcement>
       <div class="mh-announcement-inner">
         <span class="mh-announcement-text">{{ section.settings.text }}</span>
         {% if section.settings.link_text != blank %}
           <a class="mh-announcement-link" href="{{ section.settings.link | default: '#' }}" style="color: {{ section.settings.text_color }}">
             {{ section.settings.link_text }}
           </a>
         {% endif %}
       </div>
       <button class="mh-announcement-close" aria-label="Dismiss" type="button" data-mh-close>×</button>
     </div>
   {% endunless %}
   
   <script>
     (function () {
       var KEY = "mh_announcement_" + {{ section.id | json }};
       if (localStorage.getItem(KEY) === "1") return;
       var bar = document.querySelector('[data-mh-announcement]');
       if (!bar) return;
       bar.style.display = "";
       bar.querySelector('[data-mh-close]').addEventListener('click', function () {
         bar.style.display = 'none';
         localStorage.setItem(KEY, '1');
       });
     })();
   </script>
   
   {% schema %}
   {
     "name": "MH Announcement",
     "settings": [
       { "type": "text", "id": "text", "label": "Text", "default": "Free shipping on orders over $50" },
       { "type": "url", "id": "link", "label": "Link" },
       { "type": "text", "id": "link_text", "label": "Link text", "default": "Shop now" },
       { "type": "color", "id": "background", "label": "Background", "default": "#18181b" },
       { "type": "color", "id": "text_color", "label": "Text color", "default": "#ffffff" },
       { "type": "checkbox", "id": "hidden", "label": "Hide bar", "default": false }
     ],
     "presets": [{ "name": "MH Announcement", "category": "ModuleHarbor" }]
   }
   {% endschema %}

2. 2

   Configure in the customizer

   Adjust the settings that ship with the section schema.