Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
This is code for an announcement bar theme section for Shopify
{% 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 %}
@Montresdesign
Copy link

Montresdesign commented Jul 11, 2021

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

@tjmapes
Copy link
Author

tjmapes commented Jul 12, 2021

@yuwuwei
Copy link

yuwuwei commented Nov 1, 2021

good code!👍🏻. Thanks

@LuigiNicaPRO
Copy link

LuigiNicaPRO commented Nov 25, 2021

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

@rowenabennett
Copy link

rowenabennett commented Apr 11, 2022

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

@tsmalls22
Copy link

tsmalls22 commented Oct 2, 2022

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.

Screen Shot 2022-10-02 at 6 11 37 pm

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment