Dynamic Product Price

A variant-aware price display component for Framer that shows either the lowest available price for a product card or the price of the currently selected variant on a product page.

---

​

What It Does

The Dynamic Product Price renders a single price value as a styled text element. It has two modes — Card for product listing pages and Product for product detail pages — and supports optional currency symbol, currency code, and decimal formatting. Key behaviors at a glance:

• Card mode — displays the lowest price across all variants. Useful on collection or listing pages where no specific variant is selected.
• Product mode — reads the ?variant= URL query parameter and displays the price of the currently selected variant. Updates automatically when the variant changes (e.g. when the user interacts with a variant picker).
• Currency symbol and code — optionally shows the currency symbol (e.g. ₹) and/or the currency code (e.g. INR) alongside the price. Both are derived from the variant’s currencyCode field, with a fallback to the Currency setting in Format.
• Decimal control — decimals can be shown or hidden independently of the symbol and code.
• Variant-aware — listens to popstate events so the displayed price stays in sync with the active variant across all picker components on the page.

---

​

Property Controls

All controls are accessible in Framer’s right panel when the component is selected. They are grouped into five sections: Product ID, Variants, Price Type, Format, and Styles.

​

Product ID

​

Variants (CMS)

​

Price Type

​

Format

Controls how the price value is displayed.

​

Styles

Controls the visual appearance of the price text.

​

Notes

• The supported currencies and their symbols are: USD $, EUR €, GBP £, INR ₹, JPY ¥, CNY ¥, AUD A$, CAD C$, CHF CHF, SEK kr, NZD NZ$, SGD S$, HKD HK$, KRW ₩, ZAR R, RUB ₽, BRL R$, MXN MX$, AED د.إ, SAR ﷼.
• In Card mode the price shown is always the lowest price across all variants, regardless of any active URL variant parameter.
• In Product mode the price updates automatically whenever the ?variant= URL parameter changes — no extra wiring needed as long as the variant pickers on the page are also writing to that parameter.
• If no variant is selected and no fallback price prop is passed, the price area may render empty in Product mode.