HI I’m trying to find code to allow my text in announcement bar to scroll or do i have to hide announcement bar and add a marquee scroll bar? Thanks
Please share your store URL
HI my store is www.micaloco.com.au I just needed it to scroll to the left and keep scrolling.
Thank you
Hey @Litegreeneyes ,
Refer to the video in the attached link, is that what you require?
I sent request to accesss your store, please accept so I can help you
HI thats thats exactly what i need thank you
Hey @Litegreeneyes ,
It’s gonna be a little tough, but you should be able to follow through!
Go to your theme’s “Edit Code” Option, then in the search bar type “announcement-bar.liquid”
Now scroll down until about line 302 and look for “type”: “text”, two lines below it should be “default”:“Welcome to our store”,
change the “type”: “text” to “type”: “textarea” and hit save.
Screenshot for reference
Next, in the search bar type “theme.liquid”
Below the tag “” tag paste the following. Screenshot attached for reference.
The value below that says “animation: marquee 20s linear infinite !important;”, the 20s means 20 seconds per cycle, increase this to like 50s or 120s, etc… if the scroll is too fast
Screenshot is for reference only, the correct code to paste is the one shown above.
Now go into your Theme’s Customizer and you’ll see that the textbox for announcement bar is a Text Area now.
Add the Free Shipping message multiple times in it. Make sure it’s very lengthy. Then hit save. I usually seperate it with " | ", you can do " - ".
Just make sure it follows this format.
"FREE SHIPPING*<space>*|*<space>*" or "FREE SHIPPING*<space>*-*<space>*"
Another screenshot for reference.
Hey @Litegreeneyes ,
Sorry, for the CSS I missed out something. Copy it from here. The rest is as per normal.
Is there a way to make the bar slimmer? I want my header from the top to not be impacted but the scroll bar has made it shorted on the top.
Is there a way to add this at the bottom the image banner?
Easy! Go here and download the free code:
https://hotboxsolutions.com/shopify-tutorial/free-text-scroller-section
Go to your theme and edit code
Now create a new section
Call it ticker-scroller-lyt and then paste the code into there!
Done!