Make the header move instead of wrapping the text

Store Design

Topic summary

A store owner wants their announcement header to scroll horizontally instead of wrapping to multiple lines when displaying longer text. This ensures visitors can read the entire announcement as it moves across the screen.

Solution Provided:

  • Add <marquee> tags around the announcement text in the theme code
  • Navigate to: Online Store → Themes → Actions → Edit code
  • Locate the announcement-bar.liquid file
  • Find the “AnnouncementBar_Wrapper” div class
  • Wrap the <p> tag content with <marquee>...</marquee> tags
  • Save changes

Current Status:

  • Implementation successful on desktop
  • Issue remains on mobile where the scrolling animation is not smooth
  • User seeking help to fix the mobile display problem
Summarized with AI on November 11. AI used: claude-sonnet-4-5-20250929.
1

Hi, I would like the announcement header on my website not to wrap incase I put 2 sentences in it. Instead it should stay in one line and move automatically from left to right so the visitor can read the entire announcement.

Can you please help me do this?

My website is www.gemopticians.com

Thanks in advance!

2

Hello @Trivin ,

I understand you are looking to make your store’ announcement bar move from left to right.

This can be implemented by adding … in the code associated with this section of the announcement bar.

Please follow these steps-:

  1. Go to Online Store → Themes → Click on Three dots(Action) - Edit code.

  2. Next search for announcement-bar.liquid file and open it.

  3. Now, search for the "AnnouncementBar_Wrapper’’ div class and put tag before

    tag and close it after

    tag - as mentioned in the screenshot https://prnt.sc/z-ftKngvFmW7

DIWALI SALE IS LIVE, shop now! ? :sparkles:

  1. Save the changes

After the changes, announcement bar message will move from left to right https://prnt.sc/y4Fc9G25NaRx

I hope the solution helps you.

Please let me know if you need any assistance.

Thank you.

3

Dear Anshul,

Thank you so much for this.

I did as instructed and it works very well on desktop. However, on mobile, its not as smooth. How can we fix it?