Hello,
How to edit the announcement bar marquee to be long, continuous, and run the full length of the bar? I made the announcement bar on the refresh theme a marquee with a custom image background however the characters seem limited and it doesn’t run the full length of the bar with no gaps as I would like.
My store so far: https://jewelslaboratory.myshopify.com/?_ab=0&_fd=0&_sc=1&preview_theme_id=123976941631
The code:
{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when ‘announcement’ -%}
{{ block.settings.text | escape }} {%- if block.settings.link != blank -%} {% render 'icon-arrow' %} {%- endif -%}
{%- if block.settings.link != blank -%} {%- endif -%}{% style %}
.announcement-bar__message {
text-align: right !important;
}
@-webkit-keyframes scroll{
0% {
margin-right: 0%;
}
100% {
margin-right: 100%;
}
}
.scroll-box {
display: inline-flex;
justify-content: center;
white-space: nowrap;
font-size: 1.1em;
overflow: hidden;
width: 100%;
background: var(–gradient-background);
background-attachment: fixed;
background-image: url(https://cdn.shopify.com/s/files/1/0160/5333/8176/files/Untitled_design-21.png?v=1705741995) !important;
background-position: fit !important;
background-size: auto !important;
}
@media screen and (min-width: 768px) {
.scroll-container {
width: 100%;
direction: rtl;
margin-left: 120px;
overflow: hidden;
}
}
@media screen and (max-width: 767px) {
.scroll-container {
width: 100%;
direction: rtl;
margin-left: 24px;
overflow: hidden;
}
}
#scroll-element {
padding: 10px;
}
{% endstyle %}
{% schema %}
{
“name”: “t:sections.announcement-bar.name”,
“max_blocks”: 12,
“blocks”: [
{
“type”: “announcement”,
“name”: “t:sections.announcement-bar.blocks.announcement.name”,
“settings”: [
{
“type”: “text”,
“id”: “text”,
“default”: “Welcome to our store”,
“label”: “t:sections.announcement-bar.blocks.announcement.settings.text.label”
},
{
“type”: “select”,
“id”: “color_scheme”,
“options”: [
{
“value”: “accent-1”,
“label”: “t:sections.all.colors.accent_1.label”
},
{
“value”: “accent-2”,
“label”: “t:sections.all.colors.accent_2.label”
},
{
“value”: “background-1”,
“label”: “t:sections.all.colors.background_1.label”
},
{
“value”: “background-2”,
“label”: “t:sections.all.colors.background_2.label”
},
{
“value”: “inverse”,
“label”: “t:sections.all.colors.inverse.label”
}
],
“default”: “accent-1”,
“label”: “t:sections.all.colors.label”
},
{
“type”: “url”,
“id”: “link”,
“label”: “t:sections.announcement-bar.blocks.announcement.settings.link.label”
}
]
}
],
“default”: {
“blocks”: [
{
“type”: “announcement”
}
]
}
}
{% endschema %}