Pricing Slasher

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

✨ 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