June 24, 2022

Shopify announcemnt bar

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; }

Leave a Reply

Your email address will not be published. Required fields are marked *