In this article you'll learn How to Create an Announcement Bar on Shopify step by step.
Step 1: Login
 |
| How to Create an Announcement Bar on Shopify |
Login into the admin dashboard of Shopify
Go to Online Store > Themes.
Click on Actions > Edit Code.
Step 2: Create Section
Go to Sections Folder.
Click on Add a new section and then Create a new section called “announcement-bar”.
Step 3: Liquid Coding
Add the following code in the section file “announcement-bar.liquid”
{% if section.settings.show_topbar %}
<div class="section-topbar" style="background: {{ section.settings.topbar_bg_color}}; color: {{ section.settings.topbar_text_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 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.
Final Step:
At last, Click on Save button. That’s it! Now you know how to boost sales with announcement bar in Shopify.
Thanks for reading this article.
0 Comments