This is code for an announcement bar theme section for Shopify

Shopify Announcement Bar - ABLS Article

{% if section.settings.announcement_visibility %}
<style>
    .announcement {
        font-size:{{ section.settings.announcement_text_size }}px; 
        background-color: {{ section.settings.announcement_bg_color }}; 
        border-bottom: {{ section.settings.announcement_border_size}}px solid {{ section.settings.announcement_border_color }};
        padding: {{ section.settings.announcement_padding}}px;
        text-align: {{ section.settings.announcement_text_align }};
    }
    .announcement p {color: {{ section.settings.announcement_text_color }};}
    .announcement a {text-decoration: underline;}
    .announcement a:hover {text-decoration: none;}
</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>richtext</em> <a href=\"https://example.com/\">content</a></p>"
        },
        {
            "type": "range",
            "id": "announcement_text_size",
            "min": 12,
            "max": 24,
            "step": 1,
            "unit": "px",
            "label": "Font size",
            "default": 16
        },
        {
            "type": "color",
            "id": "announcement_text_color",
            "label": "Text color",
            "default": "#000000"
        },
        {
            "type": "color",
            "id": "announcement_bg_color",
            "label": "Background color",
            "default": "#aaa"            
        },
        {
            "type": "range",
            "id": "announcement_border_size",
            "min": 0,
            "max": 10,
            "step": 1,
            "unit": "px",
            "label": "Border size",
            "default": 4
        },
        {
            "type": "color",
            "id": "announcement_border_color",
            "label": "Border color",
            "default": "#333333"
        },
        {
            "type": "range",
            "id": "announcement_padding",
            "min": 0,
            "max": 20,
            "step": 1,
            "unit": "px",
            "label": "Padding",
            "default": 5
        },
        {
            "type": "select",
            "id": "announcement_text_align",
            "label": "Text alignment",
            "options": [
                { "value": "left", "label": "left"},
                { "value": "center", "label": "center"},
                { "value": "right", "label": "right"}
            ],
            "default": "center"
        }
    ]
}
{% endschema %}

Hey thanks for reaching out, glad you found it useful. Yeah you could build that into the theme settings and make sure it's handled by a media query. TJ TJ Mapes

…

On Sun, Jul 11, 2021 at 3:41 AM, Montresdesign < ***@***.*** > wrote: ***@***.**** commented on this gist. Hi TJ, thanks a lot for this code, it's a great addition to the website. Just one question : is it possible to manage a smaller fontsize for mobile ? That would be awesome 👍🏻. Thanks — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub ( https://gist.github.com/3614e3805c8d9b3659573fd04fe921e7#gistcomment-3808884 ) , or unsubscribe ( https://github.com/notifications/unsubscribe-auth/AADFHGSQWHUPJK3FFQDF2Y3TXFKMHANCNFSM5AFCLGHA ).

good　code！👍🏻. Thanks

Thank you for the article and the code!
Can we have a "Rotating Announcement Bar”? And rotate 4 top bars every 7 seconds?

This looks really cool. I added all the code but not sure where to find the bar after. Please help

Your tutorial is great, and very easy to follow. I am having trouble adding code to theme.liquid file.

**Look for the opening tag and place it right underneath—like this:

{% section ‘announcement_bar’ %}**

My theme file doesnt have an opening tag. Which is confusing as there is a at the end of the code.

The first instance of the term body is:
<body class="{{ body_classes }}" {% if template contains 'customers' %}data-account-template="true"{% endif %}>
{% include 'icon-sprite.svg' %}__

If I paste under this I get a syntax error - See attached.

Any help would be much appreciated. And yes, I am a massive noob.