Scrolling Marquee Bar: When to Use It and How to Set It Up

A scrolling marquee bar - the kind where text glides across the top of the page - has a unique advantage over static bars: motion captures attention. In our merchant data, marquee bars consistently outperform static bars on click-through rate by 20–35%, with the biggest gains on mobile where banner blindness is most severe.

When marquee wins (and when it doesn't)

Marquee bars are most effective when you have multiple value props to communicate or when your single message is longer than 60 characters. They're less effective when you have one short, urgent message - a static bar with a bold color tends to convert better in that case because it doesn't make the shopper wait to read the full line.

Use marquee when:

• You want to combine free shipping + return policy + promo in one bar.
• Your message is naturally longer (e.g. "Free shipping on orders over $75. Returns free for 60 days.").
• You're running multi-language campaigns and want translations to flow seamlessly.
• Your store skews international - marquee feels universal across cultures.

Use static when:

• Your offer is short, urgent, and time-bound ("48-hour flash sale: 30% off").
• You're A/B testing and want a clean baseline.
• Your brand voice is minimal or premium and motion would feel cheap.

How to set it up in Flexibar

1. Create a new bar and choose Marquee as the bar type.
2. Enter your message(s). You can add multiple lines separated by a divider character (Flexibar uses ✦ by default).
3. Set the scroll speed. Slow (15–20px/sec) is the sweet spot - fast scrolling looks frantic and is harder to read.
4. Set the direction. Right-to-left is standard for LTR languages; Flexibar auto-flips for RTL languages like Arabic and Hebrew.
5. Optional: pause on hover so desktop users can read the full message.

Settings that matter most

• Scroll speed: stay between 15–25 pixels/second. Anything faster feels like a stock ticker.
• Gap between repeats: at least 4–6 spaces, ideally with a visible separator (✦, •, |). Without a gap, the message blurs into itself.
• Pause on hover: turn this on for desktop. Don't worry about it for mobile.
• Mobile font size: 13–14px works best. Smaller looks cramped, larger forces wrapping.

Common mistakes to avoid

• Too many messages. Three is the practical maximum. Beyond that, no one reads to the end.
• Speed too fast. If shoppers can't finish reading before the message exits, you've wasted the impression.
• Low contrast. Motion already taxes attention - add poor contrast and CTR drops 40%+.