How to create an Announcement Bar in Shopify?

An Announcement Bar is a short text shown at the top of your Shopify store. It contains a piece of important information for the customers. For creating an announcement bar you can install an app in your store or you can create it by using custom coding.y

In this blog post, we are creating an announcement bar by using shopify schema code. How to create an Announcement Bar in Shopify?

1. First, we need to log in to your Shopify Admin and go to Online Store > Themes.

wp-block-image

2. Click on the Action button and choose Edit Code from the dropdown.

3. Then you will see the Sections option and click on the “Add a new section” button.

4. Add a new section “announcement-bar.liquid”.

5. After creating the section, replace the code with the below code.

{% if section.settings.announcement_visibility %}
<style>
    .announcement {
        font-size:{{ section.settings.announcement_text_size }}px; 
        background-color: {{ section.settings.announcement_bg_color }}; 
        text-align: {{ section.settings.announcement_text_align }};
    }
    .announcement p {color: {{ section.settings.announcement_text_color }};}
    .announcement a {text-decoration: underline; color: #fff !important;}
    .announcement a:hover {text-decoration: none; color: #fff !important;}
</style>

<div class="announcement">{{ section.settings.announcement_text }}</div>

{% endif %}

{% schema %}
{
    "name": "Announcement Bar",
    "settings": [
        {
            "type": "checkbox",
            "id": "announcement_visibility",
            "label": "Visibility (On / Off)",
            "default": true
        },
        {
            "type": "richtext",
            "id": "announcement_text",
            "label": "Text",
            "default": "<p>Default <em>text</em> <a href=\"https://google.com/\">content</a></p>"
        },
        {
            "type": "range",
            "id": "announcement_text_size",
            "min": 12,
            "max": 24,           
            "unit": "px",
            "label": "Font size",
            "default": 18
        },
        {
            "type": "color",
            "id": "announcement_text_color",
            "label": "Text color",
            "default": "#fff"
        },
        {
            "type": "color",
            "id": "announcement_bg_color",
            "label": "Background color",
            "default": "#000"            
        },

        {
            "type": "select",
            "id": "announcement_text_align",
            "label": "Text alignment",
            "options": [
                { "value": "left", "label": "left"},
                { "value": "center", "label": "center"},
                { "value": "right", "label": "right"}
            ],
            "default": "left"
        }
    ]
}
{% endschema %}

6. Open the theme.liquid file and add {% section ‘announcement-bar’ %} below the <body> tag.

7. After following these steps, click on the “Customize theme” button.

New products are not showing on the frontend in Magento 2

8. You will see the Announcement Bar heading then change the text according to your requirements. How to create an Announcement Bar in Shopify?