E - Announcement bar
A flexible e-commerce announcement bar. Highlight offers, updates, and launches with animation, CTA, and full design control.
Make it with Workshop
Build your own component with AI
A flexible e-commerce announcement bar. Highlight offers, updates, and launches with animation, CTA, and full design control.
Make it with Workshop
Build your own component with AI
A customizable e-commerce announcement bar , built to help online stores highlight offers, free shipping, or new product launches. It’s flexible, responsive, and optimized for conversions — the perfect promo banner for any e-commerce website or landing page.Features
Multi-mode animation: Slide, fade, bounce, shake, marquee, or carousel for any campaign style.
Promo-first design: Purpose-built announcement bar for e-commerce promos, discounts, and CTAs.
Looped messaging: Showcase multiple offers or updates with marquee or carousel modes.
Custom backgrounds: Use solid colors, gradients, or video backgrounds with opacity control.
Detailed control: Adjust emojis, buttons, colors, gaps, and links from the panel.
Dismissible option: Let users close the banner for a cleaner experience.
Framer-native settings: Control text, typography, spacing, and animation directly — no code required.
1. Animation
Define how your announcement bar enters and interacts with users:
Animations: Slide Down, Fade In, Zoom In, Bounce, Shake, Marquee, Carousel.
Advanced controls: animation duration, marquee scroll speed, and carousel timing.
Carousel Messages: Add multiple promo messages for rotating display.
Block Gap: Control spacing between marquee loops.
Use Slide Down for a smooth entrance or Shake/Marquee to grab attention during major e-commerce campaigns.
2. Text and Emoji
Craft engaging promotional copy:
Main Message: Example — “20% off storewide” or “Free Shipping Today!”
Typography Controls: text color, alignment, font, size, and weight.
Emoji Support: add emojis before or after text (🔥 🚚 💥).
Emoji Gap: control spacing for balanced layout.
Use emojis for high-energy campaigns and disable them for professional updates.
3. Button
Turn your announcement bar into a conversion tool:
Button Options: show/hide button, customize text, add URLs (open in a new tab).
Design Controls: button background, text color, border, and spacing.
Best Practice: keep CTAs short — “Shop Now,” “Claim Offer,” or “View Deal.”
4. Background
Three background modes for branding flexibility:
Solid Color — clean and minimal for everyday announcements.
Gradient — modern and vibrant, ideal for e-commerce brands.
Video Background — add visual depth for hero banners.
Extra Controls: video URL + adjustable opacity (0–1).
5. Close Button
Show Close Button: gives users control to dismiss the announcement.
Behavior: hides the bar for that session.
Perfect for temporary promotions or flash deals, improving UX by avoiding banner fatigue.
