---
title: "Pricing Slasher — Framer component · Best of Framer"
description: "$14.00 · Framer component · by Frames & Flow · Text. Pricing Slasher renders clean, professional price displays with automatic savings calculations."
canonical: "https://framer.elliotli.dev/component/pricing-slasher"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/Pricing Slasher

# Pricing Slasher

Auto-calculating discount toggle

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

![Pricing Slasher preview image 1](https://framer.elliotli.dev/og/component/pricing-slasher/0bd61ccbd869dfe7/1600x1200.jpg)

## Summary

Pricing Slasher renders clean, professional price displays with automatic savings calculations.

## Description

Pricing Slasher renders clean, professional price displays with automatic savings calculations. Say goodbye to manual updates: connect the component directly to your **Framer CMS** collections to dynamically calculate prices and savings across your entire store or pricing page. Choose from inline, below-line, or fully stacked layouts, style your savings as plain text or a padded badge, and easily adjust element spacing.

👉 _Try the live interactive demo_ [_here_](https://entire-jargon-762751.framer.app/)

### ✨ **Key Features**

-   **Auto-calculated savings** — Enter current + original price; percentage, absolute savings, or both display automatically
    
-   **3 layout modes** — Inline (horizontal), Below (prices row + savings row), or Stacked (all vertical)
    
-   **2 savings styles** — Plain text or padded badge with customizable (background color, radius, border, width)
    
-   **Easy Typograhy Customization** — Single extended font picker controls entire component settings
    
-   **Text scaler** — One dial bumps every text element up or down proportionally
    
-   **Smart decimal handling (Pricing)** — Hide .00 zeros, force 2 decimals, or round to whole numbers
    
-   **Percentage precision (Savings)** — Toggle between 0, 1, or 2 decimal places for percentage display
    
-   **Easily Customizable** — Independent colors for current price, original price, strike line, savings text, and badge background
    

### 🏥 **Suitable For**

-   E-commerce product pages and collection cards where CMS is connected
    
-   SaaS pricing tiers and plan comparisons
    
-   Course creators showing discount pricing
    
-   Coaches and consultants with package deals
    
-   Flash sale landing pages and promo banners
    
-   Any Framer site that displays original vs. sale pricing
    

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

-   All · #5429

## Details

- **Author**: Frames & Flow
- **Price**: $14.00
- **Published**: 2026-08-24
- **Updated**: 2026-08-24
- **Added**: 2026-08-24
- **Categories**: Text

## More like this

-   [Text Reveal Effect](/component/text-reveal-effect) — Lera · $4 — Text reveal effect over "ghost" layer.
-   [Soft Heading](/component/soft-heading) — Kaisa A · Free — Animated Soft Heading in 2 colors
-   [Curved Text Marquee](/component/curved-text-marquee) — Ahmet Loca · Free — Animated Bend
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing