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

Store Design

Topic summary

A user working with Shopify’s Refresh theme needs to expand their announcement bar from 2 to 5 rotating messages and reduce vertical padding. They’ve shared their current announcement-bar.liquid code but are unsure how to modify it.

Solution Provided:

A PageFly representative offered two approaches:

  • Default method: Add multiple announcement bar blocks through the theme customizer (shown in screenshot)
  • Custom code solution: Replace the existing liquid file with modified code that:
    • Adds three additional message fields (message_three, message_four, message_five)
    • Creates corresponding input fields in the theme settings
    • Maintains the marquee scrolling functionality across all five messages

Key modifications in the code:

  • Duplicated list items for messages 3-5 in both visible and aria-hidden marquee content sections
  • Extended the settings schema to include text input fields for the additional announcements
  • Preserved existing features like links, text alignment options, and color schemes

Padding adjustment: The response doesn’t explicitly address reducing padding, though this would typically require adding custom CSS to target .announcement-bar classes.

The discussion remains open regarding the padding modification.

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