How to add scrolling marquee text to my announcement bar on refresh theme
Topic summary
A user seeks to add scrolling marquee text to their announcement bar on Shopify’s Refresh theme.
Initial Responses:
- One contributor suggests this requires a custom section with new functionality, not achievable through minor code changes.
- Another provides detailed code to replace the existing
announcement-bar.liquidfile, allowing two messages in the announcement bar.
Implementation Issues:
- The original poster initially reports display problems but then confirms it works.
- They request reduced padding and the ability to add 5 messages instead of 2.
Alternative Solution:
- A third contributor shares a complete custom marquee section code with accompanying video tutorial.
- This solution creates a new standalone section (not modifying the existing announcement bar) with customizable options: background color, text color, link, marquee height, and font size.
- Supports up to 20 text blocks.
Current Status:
- A new user reports the marquee solution doesn’t work on Refresh theme v15.4.0—the marquee appears but remains static, and customization options (font size, color) are non-functional.
- The issue remains unresolved.
Hi @ZephyrShop
To achieve this - new section needed with custom functionality. It’s not possible with small code changes.
Hi @ZephyrShop
This is Richard from PageFly - Shopify Page Builder App
Please update this code to your announcement-bar.liquid to get this solved
Step 1: Online Stores > Themes > More Actions > Edit code
Step 2: announcement-bar.liquid and replace all code with this
{%- 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 %}
After that, you can add the message in the theme customizer
Hope this can help you solve the issue
Best regards,
Richard | PageFly
1 Like
oh no sorry its fine by the way can you reduce the padding and can you make it so i can put 5 messages?
Here is the new video you can follow:
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 %}
You can follow above post.
Hello. I have added this to the current refresh theme 15.4.0 and it does not work. The marquee shows up but it is just static and none of the options work i.e font size, colour etc please could you help with this thank you