Wanting a rolling announcement bar in Spotlight theme

Wanting a rolling announcement bar in Spotlight theme

benhill97
Tourist
5 0 3

Hi all, want my announcement bar to be scrolling across.
I had it in my previous but updated the theme and lost it.

Is anyone able to help? 

Website is devilsandangels.com.au

Thank you, 

Replies 4 (4)

rajweb
Shopify Partner
238 17 16

Hey @benhill97 ,

To make your announcement bar scroll across your Shopify store, follow these steps:

1. Online Store > Themes  

2. Click Customize on the current theme.

3. On the customization page, click Theme settings (bottom left).

4. If there’s no built-in scrolling option for the announcement bar, proceed to edit the theme code.

 

Add Scrolling Effect in Code

1. Online Store > Themes > Edit Code.

2.  Find the announcement-bar.liquid or a similarly named file under Sections or Snippets.

 

Insert the Marquee Code

1. Inside the announcement bar code, wrap the announcement text in the following HTML:

<marquee behavior="scroll" direction="left" scrollamount="5">
  Your announcement message goes here!
</marquee>

2. Adjust the scrollamount value if you want to control the speed (lower value = slower).

 

This method should restore the scrolling effect! Let me know if you encounter any issues.

Best Regard,

Rajat Sharma

 

-Need a Shopify developer?
https://rajatweb.dev/
Email: rajat.shopify@gmail.com
benhill97
Tourist
5 0 3

HI thank you for this! I'm having trouble finding my announcement message in the code? 

rajweb
Shopify Partner
238 17 16
No problem! Let's ensure your announcement message appears as scrolling text in a simple, quick way. If you can't find the announcement bar code, we can still force the message directly into the header.
Add Marquee to Header
1. Go to Online Store > Themes > Actions > Edit Code.
2. Open Sections > header.liquid.
3. Look for the closing </header> tag (usually near the bottom of the file).
4. Directly above the </header> tag, paste this code:
 

 

<marquee behavior="scroll" direction="left" scrollamount="5" style="background-color: #000; color: #fff; padding: 10px;">
  🎉 Free shipping on orders over $100! | New arrivals – Shop now! 🎉
</marquee>

 

Let me know if this works or if you need more help finding the right spot!

 
-Need a Shopify developer?
https://rajatweb.dev/
Email: rajat.shopify@gmail.com

Made4uo-Ribe
Shopify Partner
8801 2106 2583

Hi @benhill97 

Are you referring like this design? 

Made4uoRibe_0-1728992458245.png

Automatic scrolling? 

This is doable, but it might require a developer.

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.