How to Create an Announcement Bar / Hello Bar in Shopify to Boost Sales

Step 1: Create Section

Login into the admin panel. Go to Online Store > Themes. Click on Actions > Edit Code. Please check the following screenshot for reference:

Go to Sections. Click on Add a new section and then Create a new section called “announcement-bar”. Please check the following screenshot for reference:

Step 2: Add the following code in the section file “announcement-bar.liquid”

{% if section.settings.show_topbar %}
  <div class="section-topbar" style="color:{{ section.settings.topbar_text_color}}; background:{{ section.settings.topbar_bg_color}}">
    {% if section.settings.topbar_link %}
        <a href="{{ section.settings.topbar_link }}" style="color:{{ section.settings.topbar_text_color}}">{{ section.settings.topbar_text}}</a>
    {% else %}
    	{{ section.settings.topbar_text}}
    {% endif %}
  </div>
{% endif %}

{% if section.settings.show_topbar %}
<style>
.section-topbar {
    padding: 10px 0;
    text-align: center; 
}
</style>
{% endif %}

{% schema %}
  {
    "name": "Announcement Bar",
    "settings": [
  		{
          "type": "header",
          "content": "Top Bar"
        },
        {
          "type": "checkbox",
          "id": "show_topbar",
          "label": "Show Top Bar",
          "default": true
        },
        {
          "type": "text",
          "id": "topbar_text",
          "label": "Text"
        },
        {
          "type": "url",
          "id": "topbar_link",
          "label": "Top Bar Link"
        },
        {
          "type": "color",
          "id": "topbar_bg_color",
          "label": "Top Bar Color",
          "default": "#000"
        },
        {
          "type": "color",
          "id": "topbar_text_color",
          "label": "Text",
          "default": "#fff"
        } 
    ]
  }
{% endschema %}

Step 3: Include section in theme.liquid file. Please check the following screenshot for reference:

Step 4: Edit the Customize settings to show the Announcement Bar.

Go to Online Store > Themes > Customize. It will show you all the sections. You will see “Announcement Bar” section at the top. Please see the following screenshot for reference:

Click on the Announcement Bar section. It will show you the content settings and you can manage is easily. Please see the following screenshot for reference:

At last, Click on Save button. That’s it! Now you know how to boost sales with announcement bar in Shopify.