This code creates a customizable marquee announcement bar for Shopify stores. It allows you to set background color, text color, scroll duration, font size, font weight and most important you can customize Text!
To use this code, create a new section "marquee-announcement-bar.liquid" in your shopify theme code and copy and paste the code in there.
{% schema %}
{
"name": "Marquee Announcement Bar",
"tag": "section",
"class": "section marquee-announcement-bar",
"settings": [
{
"type": "color",
"id": "background_color",
"label": "Background color",
"default": "#000000"
},
{
"type": "color",
"id": "text_color",
"label": "Text color",
"default": "#ffffff"
},
{
"type": "number",
"id": "scroll_speed",
"label": "Scroll duration (seconds)",
"default": 15
},
{
"type": "range",
"id": "font_size",
"label": "Font size (px)",
"default": 16,
"min": 10,
"max": 30,
"step": 1
},
{
"type": "select",
"id": "font_weight",
"label": "Font weight",
"default": "normal",
"options": [
{ "value": "normal", "label": "Normal" },
{ "value": "bold", "label": "Bold" },
{ "value": "lighter", "label": "Lighter" },
{ "value": "bolder", "label": "Bolder" },
{ "value": "100", "label": "100" },
{ "value": "200", "label": "200" },
{ "value": "300", "label": "300" },
{ "value": "400", "label": "400" },
{ "value": "500", "label": "500" },
{ "value": "600", "label": "600" },
{ "value": "700", "label": "700" },
{ "value": "800", "label": "800" },
{ "value": "900", "label": "900" }
]
}
],
"blocks": [
{
"type": "message",
"name": "Message",
"settings": [
{
"type": "text",
"id": "text",
"label": "Announcement text",
"default": "Free shipping on all orders!"
}
]
}
],
"presets": [
{
"name": "Marquee Announcement Bar",
"category": "Custom"
}
]
}
{% endschema %}
<div class="marquee-wrapper" style="background-color: {{ section.settings.background_color }};">
<div class="marquee-content"
style="color: {{ section.settings.text_color }};
animation-duration: {{ section.settings.scroll_speed | default: 15 }}s;
font-size: {{ section.settings.font_size | default: 16 }}px;
font-weight: {{ section.settings.font_weight | default: 'normal' }};">
{% for block in section.blocks %}
<span class="marquee-message">{{ block.settings.text }}</span>
{% endfor %}
</div>
</div>
<style>
.marquee-wrapper {
width: 100%;
overflow: hidden;
white-space: nowrap;
padding: 10px 0;
position: relative;
}
.marquee-content {
display: inline-block;
white-space: nowrap;
animation: marquee-scroll linear infinite;
will-change: transform;
}
.marquee-message {
display: inline-block;
margin-right: 50px;
}
@keyframes marquee-scroll {
from {
transform: translateX(100%);
}
to {
transform: translateX(-100%);
}
}
</style>