🦅 American Eagle Outfitters reserves space for its late-loading promo strip to avoid layout shift 🙌 You can achieve this with min-height styling or through the aspect-ratio CSS property

👀 Making your strip eye-catching means more eyeballs on your promo strip. I’ve seen this win in A/B tests first hand!

🎩 Magic Spoon’s promo strip magically shifts from pink through blue and purple. This definitely draws attention!

There are a few tools you can use to generate CSS for this effect: Animated Gradient Background Generator

Pure CSS Gradient by Manuel Pinto

Gradient Animator by Ian Forrest

(This GIF may take a sec to load - static shot below)… 🍳 Notorious Nooch uses its scroll bar to highlight the brand’s value propositions, rather than site promotions. This tactic is great for D2C brands that sell a single product line

🍳 Caraway flips through promo messages with different colored backgrounds to attract more attention than a static field (note, the GIF is sped up, the actual promos rotate more slowly!)

📿 Puravida’s animated “Get $10” sticky draws more attention than a static tab

👀 Most sites put their scrolling promo strip above the nav menu. ASOS moves it below, which may make it less prone to “banner blindness.” (Consider adding an “x” button to make it disappear, as it does eat screen real estate)

☕ Chamberlain Coffee places a scrolling text bar below it’s hero banner

Desktop view (static screenshot):

🍷 Drizly uses a “partially sticky” menu that hides and reveals the promo strip as users scroll. On desktop, this can draw more attention to the promo strip. Paired with the pop-of-red, this can bring more eyeballs to promotions and featured announcements

🚚 Jackie Smith calls out your location with their shipping message for extra contextual assurance

🏕️ Columbia shows a toggle marker indicating the promo strip offers can be expanded. This enables Columbia to show multiple offers and CTAs and leave it user-controlled

❣️ LovePop doubles up on promos with stacked promo strips

☠️ Death Wish Coffee’s strip sticks to the bottom of the page - consider A/B testing this against top alignment

🍵 David’s Tea pins an Offers bar to the bottom of the screen, with a red counter badge that draws more attention to it. This is less obtrusive than a pop-up, and puts the user in control. The downside is this persists sitewide and customers may find it annoying when it covers content

🍵 Opening the widget exposes a carousel of offer banners

🌊 Neverlandstore blends its banner background field color with its scrolling bar to create a mega-banner

🥜 Nuts.com gives visitors a second chance at their entry pop-up offer if they close or otherwise lose the modal without submitting their info. See the black sticky bar at the bottom of the screen

🍪 Top-sliding marquees cause Cumulative Layout Shift

🍸 Skinny Mixes auto-calculates how far you are from free shipping and injects it into the promo strip

Zoom:

💡Mally Beauty welcomes new visitors with a HUGE discount, valid for 15 minutes only

We say “time-limited” in air quotes because you can always extend it after the initial timer expires

⛺ Rumpl’s high-contrast pill pops with a Shop Now call-to-action

🔫 Bulletproof Coffee pops an orange CTA on its gray field to capture attention — it does compete with the logo a bit, so be mindful of too-similar elements

🪒 Manscaped uses a sale tag illustration to draw attention and communicate “this is a deal”

🔥 So long as they contrast with your background color, they can make your promo pop (especially when combined with scrolling animation)

More examples:

🔪 Dolls Kill uses scrolling text to link to featured collections (Best Sellers, top-clicked categories, thematic categories, Sale, etc). This provides a visible alternative to menu navigation and serves as a spacer between home page banners

Mobile view:

Save $X with in-store pickup

Get Free Shipping for a full year for just $XX. Find out how >

Free shipping on all orders!

Get FREE SHIPPING Claim Now

Same day shipping. Order by [X pm EST]

Shop now, pay later with [BNPL provider]

Buy Now, Pay Later. Pay in 4 interest-free payments with [BNPL provider]

Get a FREE [product] when you spend $XX or more! Shop Now

You’ve unlocked $XX over $XX 🔑 Use code [CODE123]

Up to XX% off Clearance Shop now

XX% off your first order with code [CODE123] > Shop now

Get XX% off your first order 📩 when you sign up today

UP TO 25% OFF Our Best Stuff Details

MIX & MATCH [Category]: 2/$XX | 3/$XX

X% OFF [Category]

UP TO XX% OFF SALE STYLES

XX% to XX% off Your Entire Purchase | Details

Last day! Save up to XX% off everything in store

FLASH SALE: STYLES STARTING AT $XX

NEW ARRIVALS - JUST DROPPED!

SAVE UP TO X% off [BRAND] (Ends XX/XX)

Get Free Shipping and Returns for a full year for just $XX. Find out how >

Get FREE SHIPPING and FREE RETURNS Claim Now

Enjoy FREE shipping + returns

Earn [X] points when you join [loyalty program]

Free shipping on $XX+ for Rewards Members 😍 Details

Earn $XX [Brand] Cash for every $XX spent 🤑 Details

Our Ongoing Commitments 🤲 X% Of All Purchases Benefit [charity] Learn more

100% Money-Back Guarantee + 365 Day Warranty

Invite friends & you’ll both get $XX off 🥰 Get it Now

Free shipping. Free returns. Shop new arrivals!

Sign in to unlock exclusive benefits. Sign In

Get early access on launches and offers. Sign Up For Texts