How to add more than 2 messages and decrease padding of marquee text annoucement bar

Store Design
, ,

Topic summary

A Shopify store owner using the Refresh theme needs help customizing their announcement bar marquee to display 5 messages instead of 2, reduce padding, and adjust spacing.

Initial Request:

  • Expand announcement bar from 2 to 5 messages
  • Decrease top/bottom padding
  • Learn how to modify these settings independently in the future

Solution Provided:
PageFly-Richard offered a modified code snippet that:

  • Adds three additional message fields (message_three, message_four, message_five)
  • Includes corresponding schema settings for all 5 announcement inputs
  • Maintains the existing marquee functionality

Follow-up Issue:
After implementing the code, the user encountered:

  • Unwanted gap when marquee text loops back to the beginning
  • Need for increased spacing between individual messages
  • Desire to slow down the marquee animation speed

Status: The discussion remains open with the spacing and animation speed issues unresolved. The user is awaiting further CSS guidance to fine-tune the marquee behavior and message separation.

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

zephyrshop.org is my website

So I have added this code to my annoucement-bar.liquid on the refresh theme.

But it only has 2 announcements I can type in.

I want 5 announcements because that’s how much I have on my website

And I want to decrease the top and bottom padding.

Last thing can somebody show me how I can change the amount of messages and padding for the future?

Here’s the 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_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 -%}
{%- 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”: “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); } }
2

Hi @ZephyrShop

This is Richard from PageFly - Shopify Page Builder App

By default you can increase the Annoucement bar block with the code above

PageFlyRichard_0-1711512158127.png
PageFlyRichard_0-1711512158127.png1919×389 38 KB

In case you want to have 5 separate message in one block and reduce the padding, you can replace the code from your announcementbar.liquid with this one

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

Hope this can help you solve the issue

Best regards,

Richard | PageFly

3

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

ZephyrShop_0-1711541074938.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 you show me how to change what I have just said, on my own, just in case i don’t like the results.

https://zephyrshop.org/

Thanks.