How to remove odd space and add more space to marquee text in annoucement bar

Store Design

Topic summary

A user implemented marquee text in their announcement bar but encountered three issues:

Problems identified:

  • Unwanted space appearing when the marquee loops back to the beginning
  • Insufficient spacing between individual messages (text appears “squished”)
  • Animation speed too fast

Solutions offered:

Two community members provided CSS-based fixes:

  1. theycallmemakka suggested adding custom CSS to the theme.liquid file (above the </body> tag) to control animation speed and spacing

  2. Raj-webdesigner provided a complete replacement code snippet that duplicates the marquee content (creating two sets of the same five messages) to ensure seamless looping

Additional request:
The original poster asked for guidance on how to modify these settings independently in the future, suggesting they want to understand the underlying mechanics rather than just apply a fix.

Status: The discussion appears resolved with code solutions provided, though no confirmation from the original poster indicates whether either solution was successfully implemented.

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

So I added marquee text but now there is an odd space when the marquee text starts at the beginning again.

ZephyrShop_0-1711635473367.png

Also I want there to be a bigger space at the end and start of each separate message because it seems to be all squished.

And I want it to be slowed down a little bit.

Last thing can someone show me how to change what I have just said, on my own, just in case i don’t like the results.

MY STORE IS: https://zephyrshop.org/

Here is the code which someone gave me for the marquee text.

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

{%- if block.settings.message_one != blank -%} {%- if block.settings.link != blank -%} {%- endif -%}
  • {{ block.settings.message_one | escape }} {%- if block.settings.link != blank -%} {% render 'icon-arrow' %} {%- endif -%}
  • {{ block.settings.message_two | escape }} {%- if block.settings.link != blank -%} {% render 'icon-arrow' %} {%- endif -%}
  • {{ block.settings.message_three | escape }} {%- if block.settings.link != blank -%} {% render 'icon-arrow' %} {%- endif -%}
  • {{ block.settings.message_four | escape }} {%- if block.settings.link != blank -%} {% render 'icon-arrow' %} {%- endif -%}
  • {{ block.settings.message_five | escape }} {%- if block.settings.link != blank -%} {% render 'icon-arrow' %} {%- endif -%}
  • {{ block.settings.message_one | escape }} {%- if block.settings.link != blank -%} {% render 'icon-arrow' %} {%- endif -%}
  • {{ block.settings.message_two | escape }} {%- if block.settings.link != blank -%} {% render 'icon-arrow' %} {%- endif -%}
  • {{ block.settings.message_three| escape }} {%- if block.settings.link != blank -%} {% render 'icon-arrow' %} {%- endif -%}
  • {{ block.settings.message_four | escape }} {%- if block.settings.link != blank -%} {% render 'icon-arrow' %} {%- endif -%}
  • {{ block.settings.message_five | escape }} {%- if block.settings.link != blank -%} {% render 'icon-arrow' %} {%- endif -%}
{%- if block.settings.link != blank -%} {%- endif -%} {%- endif -%}
{%- endcase -%} {%- endfor -%}

{% 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”: “message_one”,
“default”: “Message one”,
“label”: “Announcement one”
},
{
“type”: “text”,
“id”: “message_two”,
“default”: “Message two”,
“label”: “Announcement two”
},
{
“type”: “text”,
“id”: “message_three”,
“default”: “Message three”,
“label”: “Announcement three”
},
{
“type”: “text”,
“id”: “message_four”,
“default”: “Message four”,
“label”: “Announcement four”
},
{
“type”: “text”,
“id”: “message_five”,
“default”: “Message five”,
“label”: “Announcement five”
},
{
“type”: “select”,
“id”: “text_alignment”,
“options”: [
{
“value”: “left”,
“label”: “t:sections.announcement-bar.blocks.announcement.settings.text_alignment.options__1.label”
},
{
“value”: “center”,
“label”: “t:sections.announcement-bar.blocks.announcement.settings.text_alignment.options__2.label”
},
{
“value”: “right”,
“label”: “t:sections.announcement-bar.blocks.announcement.settings.text_alignment.options__3.label”
}
],
“default”: “center”,
“label”: “t:sections.announcement-bar.blocks.announcement.settings.text_alignment.label”
},
{
“type”: “color_scheme”,
“id”: “color_scheme”,
“label”: “t:sections.all.colors.label”,
“default”: “accent-1”
},
{
“type”: “url”,
“id”: “link”,
“label”: “t:sections.announcement-bar.blocks.announcement.settings.link.label”
}
]
}
],
“default”: {
“blocks”: [
{
“type”: “announcement”
}
]
}
}
{% endschema %}

.marquee { --gap: 1rem; position: relative; display: flex; overflow: hidden; user-select: none; gap: var(--gap); } .marquee__content { flex-shrink: 0; display: flex; justify-content: space-around; gap: var(--gap); min-width: 100%; } @keyframes scroll { from { transform: translateX(0); } to { transform: translateX(calc(-100% - var(--gap))); } } @media (prefers-reduced-motion: reduce) { .marquee__content { animation-play-state: paused !important; } } /* Enable animation */ .enable-animation .marquee__content { animation: scroll 20s linear infinite; } /* Pause on hover */ .marquee--hover-pause:hover .marquee__content { animation-play-state: paused; } .marquee--fit-content { max-width: fit-content; } .marquee--pos-absolute .marquee__content:last-child { position: absolute; top: 0; left: 0; } .enable-animation .marquee--pos-absolute .marquee__content:last-child { animation-name: scroll-abs; } @keyframes scroll-abs { from { transform: translateX(calc(100% + var(--gap))); } to { transform: translateX(0); } } ul.marquee__content { margin: 0; }
2

Hi @ZephyrShop

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code just above tag

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka

3

Your Old Code On Add This New Full Code


{%- for block in section.blocks -%}
  {%- case block.type -%}
    {%- when 'announcement' -%}
      
        {%- if block.settings.message_one != blank -%}
          {%- if block.settings.link != blank -%}
            
          {%- endif -%}
          

            

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

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

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

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

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

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

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

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

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

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

          

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

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

{% 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": "message_one",
              "default": "Message one",
              "label": "Announcement one"
            },
            {
              "type": "text",
              "id": "message_two",
              "default": "Message two",
              "label": "Announcement two"
            },
            {
              "type": "text",
              "id": "message_three",
              "default": "Message three",
              "label": "Announcement three"
            },
            {
              "type": "text",
              "id": "message_four",
              "default": "Message four",
              "label": "Announcement four"
            },
            {
              "type": "text",
              "id": "message_five",
              "default": "Message five",
              "label": "Announcement five"
            },
            {
              "type": "select",
              "id": "text_alignment",
              "options": [
                  {
                  "value": "left",
                  "label": "t:sections.announcement-bar.blocks.announcement.settings.text_alignment.options__1.label"
                  },
                  {
                  "value": "center",
                  "label": "t:sections.announcement-bar.blocks.announcement.settings.text_alignment.options__2.label"
                  },
                  {
                  "value": "right",
                  "label": "t:sections.announcement-bar.blocks.announcement.settings.text_alignment.options__3.label"
                  }
                ],
              "default": "center",
              "label": "t:sections.announcement-bar.blocks.announcement.settings.text_alignment.label"
              },
            {
              "type": "color_scheme",
              "id": "color_scheme",
              "label": "t:sections.all.colors.label",
              "default": "accent-1"
            },
            {
              "type": "url",
              "id": "link",
              "label": "t:sections.announcement-bar.blocks.announcement.settings.link.label"
            }
          ]
        }
    ],
    "default": {
    "blocks": [
    {
      "type": "announcement"
      }
    ]
  }
}
{% endschema %}