Hi,
I’m trying to change the behavior of my Shopify announcement bar.
Right now, the messages slide horizontally (left/right), but my goal is to make them slide vertically (from bottom to top).
I want:
One message visible at a time
Smooth vertical transition
Auto-play every few seconds
Infinite loop
Basically, a vertical sliding effect instead of the default horizontal one.
What’s the best way to achieve this in Shopify?
Thanks!
Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.
Best regards,
Devcoder 
dubeup1212121212
I’ve attached a video for your review. Kindly confirm if this matches your requirement.
Best regards,
Devcoder
The majority of announcement bars utilize a horizontal slider script. The simplest method is to swap it out for a vertical slider. Wrap each message in a stacked container, set the wrapper to overflow hidden with a fixed height, and animate the inner container with transform translateY at a timed interval. This makes for smooth vertical autoplay and endless looping.
Hi @agoraeaserio .
Your announcement bar moves sideways because of how its animation is coded. To make it slide up and down, you need to change the movement direction to vertical and set a fixed height on the container so it hides the other messages until they slide into view.
If your theme uses a built in slider script like Flickity, it usually has a quick vertical setting that handles both the direction and the auto looping for you, meaning your current auto play timing will keep working perfectly.
