---
title: "E - Announcement bar — Free Framer component · Best of Framer"
description: "Free Framer component · by Rumman Raihan · Interactive. A customizable e-commerce announcement bar, built to help online stores highlight offers, free shipping, or new product launches."
canonical: "https://framer.elliotli.dev/component/e-announcement-bar"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/E - Announcement bar

# E - Announcement bar

[View on Framer](https://framer.com/marketplace/components/e-announcement-bar/?via=elliot-li)

![E - Announcement bar preview image 1](https://framer.elliotli.dev/og/component/e-announcement-bar/c340174a102b1003/1600x1200.jpg)

## Summary

A customizable e-commerce announcement bar, built to help online stores highlight offers, free shipping, or new product launches.

## Description

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.
    
    ![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-nwhtsbgt-BHBEHzoVlo6mHizs2KkF8CXQWiViND)

## Rank history [How rankings work →](/terms#rankings)

-   All · #1812

## Details

- **Author**: Rumman Raihan
- **Published**: 2025-12-04
- **Updated**: 2025-12-04
- **Added**: 2025-11-26
- **Categories**: Interactive

## More like this

-   [Drawing component](/component/drawing-component) — Ariel Barrios · Free — Just a free drawing component
-   [Code Comparison](/component/code-comparison) — Syauqizaidan Khairan Khalaf · $5 — Before and after code side by side
-   [Voice Testimonials](/component/voice-testimonials) — valorsic studio · $15 — Voiceover & typewriter reviews
-   [Product Tour Pro](/component/product-tour-pro) — Oddframe · $10 — Showcase Products Step by Step