How to add an announcement bar in shopify?

What is Announcement bar?
An announcement bar is a one- or two-sentence announcement space at the very top of a website. It pops into the top. You can also remove or close  if you needed.

Use of Announcement.
Now these days eCommerce websites have many announcement. So they need to notify user about announcements. Like -

• Highlight a recently released product
• Link to your most recent blog post
• Advertise a special or promotion
• Let users know if you have a weather delay or holiday hours
• Share your current product/music/video obsession with followers
• Feature a recent portfolio or case study addition
• Promote an upcoming event or webinar
• Offer a free giveaway or download
• Share news about a recent award or certification
• Add follow links for your social media accounts

We are going to add a custom bar in shopify so you can made announcement whenever you  need. So let's start

Step 1 : Login your shopify and goto theme option

Step 2 : Open your theme code editor from Action drop-down and click edit code

Step 3 : From the section open header section add this code to header section schema
       
             {
             "type": "header",
             "content": "Announcement"
          },
          {
            "type": "checkbox",
            "id": "show_announcement",
            "label": "Show announcement",
            "default": false
          },
  {
            "type": "textarea",
            "id": "announcement_text",
            "label": "Announcement text",
            "default": "Announce something here"
    },
  {
          "type": "color",
          "id": "announcement_bg_color",
          "label": "Announcement Bar Background Color"
          },
  {
          "type": "text",
          "id": "announcement_margin",
          "label": "Margin"
          },


Step 4 : In header section add this code to the top of file

Step 5: To add close button in action add this script

            <script>

  window.onload = function(){
    document.getElementById('close').onclick = function(){
        this.parentNode.parentNode.parentNode
        .removeChild(this.parentNode.parentNode);
        return false;
    };
};

</script>

and click on save.

Now you can customize your announcement from the customize option in header section

Try Shopify for free, and explore all the tools and services you need to start, run, and grow your business.