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.