Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
Hello,
I'm having difficulty coding a marquee announcement bar. The static announcement bar code is below. When I've tried to add the marquee, both the background and the text scroll left. If possible, I'd like to have only the text scroll left.
URL: https://siriusnaturalpetfoods.com
(static) announcement-bar.liquid:
{% if section.settings.announcement_visibility %}
{% if section.settings.home_page_only == false or template.name == 'index' %}
<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 %}
{% endif %}
{% schema %}
{
"name": "Announcement Bar",
"settings": [
{
"type": "checkbox",
"id": "announcement_visibility",
"label": "Visibility (On / Off)",
"default": true
},
{
"type": "checkbox",
"id": "home_page_only",
"label": "Home page only",
"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": "#FFFFFF"
},
{
"type": "color",
"id": "announcement_bg_color",
"label": "Background color",
"default": "#094886"
},
{
"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": "#094886"
},
{
"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 %}
You can try this code it will help you:
Create a new section marquee and paste below code.
You can add marquee section to any page.
<style>
.section-{{ section.id }}.custom-marquee {
display: flex;
align-items: center;
height: {{section.settings.marquee_height}}px;
width: 100vw;
max-width: 100%;
overflow-x: hidden;
background:{{section.settings.colorBackground}};
color:{{section.settings.colorText}};
}
.section-{{ section.id }}.custom-marquee a {
color:{{section.settings.colorText}};
text-decoration: none;
}
.section-{{ section.id }}.custom-marquee .track {
display: flex;
align-items: center;
white-space: nowrap;
will-change: transform;
animation: marquee 12s linear infinite;
}
.section-{{ section.id }}.custom-marquee .content {
margin-left: 40px;
font-size: {{section.settings.font_size}}px;
}
@keyframes marquee {
from {
transform: translateX(0);
}
to {
transform: translateX(-20%);
}
}
</style>
<div class="section-{{ section.id }} custom-marquee " role="region" {{ block.shopify_attributes }}>
{%- if section.settings.link != blank -%}
<a href="{{ section.settings.link }}" class="">
{%- endif -%}
<div class="track ">
{%- for block in section.blocks -%}
<span class="content marquee-text">{{ block.settings.new_text | escape }}</span>
{%- endfor -%}
{%- for block in section.blocks -%}
<span class="content marquee-text">{{ block.settings.new_text | escape }}</span>
{%- endfor -%}
{%- for block in section.blocks -%}
<span class="content marquee-text">{{ block.settings.new_text | escape }}</span>
{%- endfor -%}
{%- for block in section.blocks -%}
<span class="content marquee-text">{{ block.settings.new_text | escape }}</span>
{%- endfor -%}
{%- for block in section.blocks -%}
<span class="content marquee-text">{{ block.settings.new_text | escape }}</span>
{%- endfor -%}
{%- for block in section.blocks -%}
<span class="content marquee-text">{{ block.settings.new_text | escape }}</span>
{%- endfor -%}
{%- for block in section.blocks -%}
<span class="content marquee-text">{{ block.settings.new_text | escape }}</span>
{%- endfor -%}
{%- for block in section.blocks -%}
<span class="content marquee-text">{{ block.settings.new_text | escape }}</span>
{%- endfor -%}
{%- for block in section.blocks -%}
<span class="content marquee-text">{{ block.settings.new_text | escape }}</span>
{%- endfor -%}
{%- for block in section.blocks -%}
<span class="content marquee-text">{{ block.settings.new_text | escape }}</span>
{%- endfor -%}
{%- if section.settings.link != blank -%}
{% render 'icon-arrow' %}
{%- endif -%}
</div>
{%- if section.settings.link != blank -%}
</a>
{%- endif -%}
</div>
{% schema %}
{
"name": "Marquee Text",
"settings": [
{
"type": "color",
"id": "colorBackground",
"label": "Background color",
"default": "#000"
},
{
"type": "color",
"id": "colorText",
"label": "Text color",
"default": "#fff"
},
{
"type": "url",
"id": "link",
"label": "Link"
},
{
"type": "range",
"id": "marquee_height",
"min": 24,
"max": 200,
"step": 2,
"default": 46,
"label": "Marquee height"
},
{
"type": "range",
"id": "font_size",
"min": 8,
"max": 100,
"step": 2,
"default": 24,
"label": "Font size"
}
],
"blocks": [
{
"type": "text",
"name": "Text",
"limit": 20,
"settings": [
{
"type": "text",
"id": "new_text",
"default": "Welcome to store",
"label": "Text"
}
]
}
],
"presets": [
{
"name": "Marquee",
"blocks": [
{
"type": "text"
},
{
"type": "text"
},
{
"type": "text"
}
]
}
]
}
{% endschema %}
Thank you! Is it possible to modify this code so the text scrolls in the announcement bar instead?
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025