How can I modify the marquee announcement bar to be continuous and full-length?

Technical Q&A
, ,

Topic summary

A Shopify store owner is trying to create a continuous, full-length marquee announcement bar on the Refresh theme with a custom background image. The current implementation has two main issues:

Current Problems:

  • Character limit prevents the marquee from running the full length of the bar
  • Text doesn’t scroll in smoothly from the right side, creating visible gaps
  • Added CSS (margin: 0 !important;) fixed left-side cutoff but introduced right-side scrolling issues

Solutions Offered:

Option 1 (ThePrimeWeb): Modify the existing announcement bar code with CSS keyframe animations and repeatedly paste text until it fills the bar. Includes custom background image styling and transform-based scrolling animation.

Option 2 (MRamzan): Create a dedicated marquee section from scratch using provided code that loops text blocks multiple times (9+ repetitions) to ensure continuous coverage. References a YouTube tutorial for implementation guidance.

Both solutions use CSS animations with translateX transforms to achieve seamless scrolling. The second approach offers more control through a custom section with adjustable font size, marquee height, and color settings.

Summarized with AI on November 9. AI used: claude-sonnet-4-5-20250929.
1

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.

I also added this to the theme.liquid code as directed which fixed the issue of it ending completely out the left but however now on the right, it doesn’t scroll in from the far end:

.scroll-container { margin: 0 !important; }

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’ -%}

{%- if block.settings.text != blank -%} {%- endif -%}
{%- endcase -%} {%- endfor -%}

{% 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 %}

2

Hey @JewelsLab ,

Try this and then you should be able to paste more text into the announcement bar. Paste the text repeatedly until it fills up the bar. It should be fine from there.

{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when 'announcement' -%}

{%- if block.settings.text != blank -%}

{%- if block.settings.link != blank -%}

{%- endif -%}

{{ block.settings.text | escape }}
{%- if block.settings.link != blank -%}
{% render 'icon-arrow' %}
{%- endif -%}

{%- if block.settings.link != blank -%}

{%- endif -%}

{%- endif -%}

{%- endcase -%}
{%- endfor -%}

{% style %}
.announcement-bar__message {
text-align: right !important;
}
@-webkit-keyframes scroll{
0% {
transform: translateX(0);
}
100% {
transform: translateX(calc(-100% - 1rem));
}
}
.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%;
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": "textarea",
"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 %}
3

Follow this video:

Create a new section marquee and paste below code.

You can add marquee section to any page.


  
      {%- if section.settings.link != blank -%}
        
      {%- endif -%}
          

            {%- for block in section.blocks -%}
            {{ block.settings.new_text | escape }}
            {%- endfor -%}
            {%- for block in section.blocks -%}
              {{ block.settings.new_text | escape }}
            {%- endfor -%}
            {%- for block in section.blocks -%}
              {{ block.settings.new_text | escape }}
            {%- endfor -%}
            {%- for block in section.blocks -%}
              {{ block.settings.new_text | escape }}
            {%- endfor -%}
            {%- for block in section.blocks -%}
              {{ block.settings.new_text | escape }}
            {%- endfor -%}
            {%- for block in section.blocks -%}
              {{ block.settings.new_text | escape }}
            {%- endfor -%}
            {%- for block in section.blocks -%}
              {{ block.settings.new_text | escape }}
            {%- endfor -%}
            {%- for block in section.blocks -%}
              {{ block.settings.new_text | escape }}
            {%- endfor -%}
            {%- for block in section.blocks -%}
              {{ block.settings.new_text | escape }}
            {%- endfor -%}
            {%- for block in section.blocks -%}
              {{ block.settings.new_text | escape }}
            {%- endfor -%}
            {%- if section.settings.link != blank -%}
              {% render 'icon-arrow' %}
            {%- endif -%}
          

          {%- if section.settings.link != blank -%}
        
    {%- endif -%}
  

{% 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 %}