---
title: "Discount sales Popup — Framer component · Best of Framer"
description: "$9.00 · Framer component · by Kai Studio · Interactive. Discount sale popup for Framer ecommerce"
canonical: "https://framer.elliotli.dev/component/discount-sales-popup"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/Discount sales Popup

# Discount sales Popup

Discount sale popup for Framer ecommerce

[View on Framer](https://framer.com/marketplace/components/discount-sales-popup/?via=elliot-li)

![Discount sales Popup preview image 1](https://framer.elliotli.dev/og/component/discount-sales-popup/6d6bd29405c4fd30/1600x1200.jpg)

## Summary

Discount sale popup for Framer ecommerce

## Description

**This component is Part of the  Essential Components plugin.** Browse and insert 30+ components directly in Framer. [Start for free](https://www.framer.com/marketplace/plugins/essential-components/preview/)

[![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-295wnzqx-sfCwCBsrgXao7GhZKTLo2lN0UDQcH0)](https://www.framer.com/marketplace/plugins/essential-components/)

A beautiful, conversion-focused popup that displays a promotional offer with a copy-to-clipboard coupon code. It includes both an Open and Closed state, so users can reveal the offer when they’re ready and dismiss it without disrupting their experience.

### How to Use in Framer

1.  Copy and paste the component into your Framer project.
    
2.  Add it to your Template page if you want it to appear across your site.
    
3.  Set the position to Fixed so it floats above your content.
    
4.  Choose where it sits on the screen (left, right, bottom, or center depending on your layout).
    

### Component Variants

This component includes two main variants:

**Closed Variant:** Displays a small floating button like “Get 10% Off” with an icon.This keeps the UI clean while still teasing the offer.

**Open Variant :** Reveals the full popup with:• Headline text (e.g. “Enjoy 10% OFF Today!”)• Optional image or graphic• Subtext like minimum order value• A large coupon code button with copy icon• Close button in the top corner

### Popup Behavior

When users click the closed button:• The popup opens with your full offer• They can click the coupon code to copy it instantly• Visual feedback confirms the code was copied

When users click the close icon:• The popup hides back into the floating button

### Customization

-   **Text & Content**: Main offer text, Conditions like “Minimum order of $25”
    
-   Coupon Code: Fully editable• Closed Button Text: Example “Get 10% Off”
    
    ![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-mwo1ecmu-gJyhyiSLEk0iPyQHMgx7oetJw9SoZg)
-   **Design**: Background colors for popup and button• Text colors• Font family and weight• Border radius• Icon size and color• Image slot for seasonal or campaign graphics
    

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-mwo1ecmu-Q1JW71YSteuOTBiOkGyvFEbTsPXbJy)

-   **Layout** : Control popup width and spacing• Position the closed button anywhere on screen• Adjust padding and alignment
    
-   **Final Step** : Once you’re done customizing:Set the component to the Closed variant before publishing so visitors first see the teaser button.
    

### Use Cases

-   **E-commerce:** Promote site-wide sales, seasonal discounts, or first-order coupons•
    
-   **Landing Pages:** Increase conversions with limited-time offers• SaaS: Offer promo codes for trials or upgrades
    
-   **Creators & Courses:** Give discounts on digital products• Events: Share exclusive attendee or launch codes
    

This popup is designed to feel lightweight, modern, and conversion-friendly while giving you full visual control inside Framer.

Live preview:[https://couponpopup.framer.website/](https://couponpopup.framer.website/)

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

-   All · #2761

## Details

- **Author**: Kai Studio
- **Price**: $9.00
- **Published**: 2026-01-29
- **Updated**: 2026-04-05
- **Added**: 2026-01-16
- **Categories**: Interactive

## More like this

-   [Velvet Curtain](/component/velvet-curtain) — Sarthak Prakash · $12 — Cinematic curtain reveal effect
-   [Image-Compare Slider](/component/image-compare-slider) — Studio Digital · Free — Reveal what changed, beautifully
-   [Lesson Packages](/component/lesson-packages) — Shelfless Studio · $9 — Lesson bundles with savings shown
-   [Deskbell AI Chatbot](/component/deskbell-ai-chatbot) — NS. Studio · Free — AI site chat, works with Chatbase