How to add an announcement bar in shopify?

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

{% if section.settings.show_announcement %}
    <div class="container"  style="width: 100%;height:auto;text-decoration:none;background:{{section.settings.announcement_bg_color}};">
        <div class="row">
          <div class="col-md-12" style="margin:{{section.settings.announcement_margin}}"><span id="close" aria-hidden="true" style="float:right;display:inline-block;padding:2px 10px;cursor:pointer;">&times;</span><center>{{ section.settings.announcement_text | split: '|' | first }}</center></div>
        </div>
    </div>
 {%endif%}



Step 5: continue from the blog