How can I get a continuous scrolling marquee for my announcement bar?

Store Design
, ,

Topic summary

Goal: achieve a smooth, continuous scrolling “marquee” in the store’s announcement bar that cycles through multiple text items without pauses or flicker.

Updates/solutions shared:

  • A working demo was provided via CodePen (vahidseo/pen/vYKWQj) showing the marquee effect.
  • Basic implementation guidance: edit the theme (Online Store → Theme → Edit code) and modify the announcement-bar file. Screenshots were referenced; however, the actual code content in that post wasn’t included in the thread text. Images are central to following those steps.

Installation help requests:

  • The poster asked where to place the CodePen code and requested screenshots. Another participant said no installation is needed beyond editing theme files and offered free assistance via user access.

Detailed, actionable option:

  • A complete Liquid section (“Marquee Text”) was shared. It can be added as a new section to any page, includes settings for background/text colors, link, marquee height, and font size, and uses repeated loops over text blocks to create a seamless scroll of multiple messages. Two YouTube tutorials were linked for setup.

Status: no confirmation of success from the original poster; discussion appears open.

Summarized with AI on December 29. AI used: gpt-5.
1

Hi,

Ive been trying to get a marquee code for my announcement bar. I also want more than 1 pieces of text on it, and i want it to be scrolling continuously, without any pauses or flickers. Can someone help?

Thanks

2

Hey @monetstudios

Here you are https://codepen.io/vahidseo/pen/vYKWQj

Thanks

3

Hello @monetstudios ,

You can follow these steps:

  1. Go to Online Store->Theme->Edit code

GemPages_0-1677555292095.png
GemPages_0-1677555292095.png400×193 29.2 KB

  1. Open your “announcement-bar” or “announcement” file, and add code like this

GemPages_1-1677555391418.png
GemPages_1-1677555391418.png1842×880 60.3 KB

I hope the above is useful to you.

Kind & Best regards,
GemPages Support Team

4

Hi Roman how do i put this code into my website, im having a bit of trouble with it

thanks

5

Hi Roman Could you show me how to install this

Thankyou

6

No need to install anything… Just follow the above instructions and you are done with it.

If you still can not fix it …

do let me know i will fix it for you for free through user access.

7

hi i want to use this https://codepen.io/vahidseo/pen/vYKWQj but i dont know where to place this code, can you attach some screenshots of how to do it

8

You can try this code it will help:

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