How to convert Shopify announcement bar slider from horizontal to vertical (bottom → top)?

Store Design
, , , ,
1

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!

1 Like
2

Hi @agoraeaserio

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 :laptop:

3

dubeup1212121212

1 Like
4

Hi @agoraeaserio

image
image1245×580 22.3 KB

5

Hi @agoraeaserio

I’ve attached a video for your review. Kindly confirm if this matches your requirement.

Video link

Best regards,
Devcoder :laptop:

6

Hi @agoraeaserio

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.