Price

Displays the product / selected variant's price in the customer's market currency.

Last updated

August 14, 2026

How to use

Place the component on the product page or card and connect ⛁ Butter Data to the product's Butter Data CMS field.
Choose Varying Prices — Min Price, Max Price, or Range — for how multi-variant products price before a selection is made. For Min Price or Max Price, set the Prefix text (default "from"); it's hidden for Range.
Configure Format — symbol, currency code, and a decimals rule (Always / Never / Hide when .00) — plus a preview currency for the canvas.
Style the Regular/↳ Color controls (for when the price is not discounted) and Sale/↳ Color (for when the price is discounted) separately.

Min, max, or range pricing before a variant is chosen

For multi-variant products, Varying Prices decides what shows before the customer finishes selecting:

`Varying Prices`	What it shows before selection
Min Price	The lowest variant price, with the `Prefix` text in front (e.g. "from $20").
Max Price	The highest variant price instead of the lowest, with the same `Prefix` text in front (e.g. "from $80").
Range	The full low–high price span across variants (e.g. "$20-$80"). No `Prefix` shown.

Once the customer completes their selection, the component switches to that exact variant's price.

Currency: always tied to the customer's market

Currency comes from the customer's active market via Markets — the Format group's Preview field is a canvas preview only, not a way to force a currency on the live site.

Regular and sale styling

Regular and sale prices are styled independently with Regular/↳ Color (default black) and Sale/↳ Color (default red) — the component switches between them automatically based on whether the selected variant has a compare-at price. Pair this with Price Compare and Price Discount for the full sale presentation.