In this tutorial we’ll learn how to create customizable announcement bar section in Shopify without any app. use Liquid to build a section of announcement bar in Shopify. Liquid section will allow to customizable announcement bar. We can show hide announcement bar on click on check box.
<main role="main">
{% section 'announcement' %}
{{ content_for_layout }}
</main>{% if section.settings.show_announcement == true %}
<div class="announcement-bar">
{{section.settings.msg}}
</div>
{% endif %}
{% schema %}
{
"name": "Announcement",
"settings": [
{
"type": "checkbox",
"id": "show_announcement",
"label": "Show announcement",
"default": true
},
{
"type":"text",
"id":"msg",
"label":"Announcement bar msg",
"default":"Sell is live..."
}
]
}
{% endschema %}.announcement-bar { background-color: #f6b707; text-align: center; padding:5px; }
