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’scurrencyCodefield, 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
popstateevents 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
| Property | Type | Description |
|---|---|---|
| Product ID | String | The Shopify product ID for this product. Connect this to the Product ID variable from your Framer CMS. Used to scope the price to the correct product. |
Variants (CMS)
| Property | Type | Description |
|---|---|---|
| Variants | String (JSON) | A JSON array of all variant objects for this product, each containing id, price.amount, and price.currencyCode. Connect this to the Variants variable from your Framer CMS. |
Price Type
| Property | Type | Default | Description |
|---|---|---|---|
| Price Type | Enum | Card | Controls which price is displayed. Card shows the lowest price across all variants — use this on listing/collection pages. Product shows the price of the currently selected variant — use this on product detail pages alongside variant pickers. |
Format
Controls how the price value is displayed.| Property | Type | Default | Description |
|---|---|---|---|
| Show Symbol | Boolean | false | When enabled, displays the currency symbol before the price (e.g. ₹, $, €). The symbol is derived from the active variant’s currencyCode. |
| Show Code | Boolean | false | When enabled, displays the currency code after the price (e.g. INR, USD). The code is derived from the active variant’s currencyCode. |
| Show Decimal | Boolean | false | When enabled, formats the price to two decimal places (e.g. 600.00). When disabled, the price is shown as a whole number. |
Styles
Controls the visual appearance of the price text.| Property | Type | Description |
|---|---|---|
| Font | Font | Typography for the price text (family, size, weight, etc.). |
| Color | Color | Text color of the price. |
Notes
- The supported currencies and their symbols are: USD
$, EUR€, GBP£, INR₹, JPY¥, CNY¥, AUDA$, CADC$, CHFCHF, SEKkr, NZDNZ$, SGDS$, HKDHK$, KRW₩, ZARR, RUB₽, BRLR$, MXNMX$, 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
priceprop is passed, the price area may render empty in Product mode.