> ## Documentation Index
> Fetch the complete documentation index at: https://docs.framerfy.ae/llms.txt
> Use this file to discover all available pages before exploring further.

# Dynamic Product Price

![Product Price preview](https://raw.githubusercontent.com/thedesignmvp/framerfy-assets/refs/heads/main/docs/Dynamic%20Product%20Price.png)

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

| 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 `¥`, 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.