How to Create a Customizable Announcement Bar Section

announcement-bar.liquid

<style>
  .announcement-bar {
    background-color: {{ section.settings.announcement_bar_color }};
    text-align: center;
    text-decoration: none;
  }
  .announcement-bar__message {
    font-size: large;
    padding: 10px;
    color: {{ section.settings.announcement_bar_text_color }};
  }
  
</style>  

{%- if section.settings.show_announcement -%}
  {%- if section.settings.home_page_only == false or template.name == 'index' -%}

    {%- if section.settings.link == blank -%}
      <div class="announcement-bar">
    {%- else -%}
      <a href="{{ section.settings.link }}" >
    {%- endif -%}

        <p class="announcement-bar__message">{{ section.settings.text | escape }}</p>

    {%- if section.settings.link == blank -%}
      </div>
    {%- else -%}
      </a>
    {%- endif -%}

  {%- endif -%}
{%- endif -%}

{% schema %}
{
  "name": "Announcement bar",
  "settings": [
    {
      "type": "checkbox",
      "id": "show_announcement",
      "label": "Show announcement",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "home_page_only",
      "label": "Home page only",
      "default": true
    },
    {
      "type": "color",
      "id": "announcement_bar_color",
      "label": "Background color",
      "default": "#000000"
    },
	{
      "type": "color",
      "id": "announcement_bar_text_color",
      "label": "Text color",
      "default": "#ffffff"
    },
    {
      "type": "text",
      "id": "text",
      "label": "Announcement text",
      "default": "Announce something here"
    },
    {
      "type": "url",
      "id": "link",
      "label": "Announcement link"
    }
  ]
}
{% endschema %}