Variant Price
Displays the selected variant's current price and compare-at price in PDP or Card mode, with market-aware pricing.
What it does
Variant Price displays the selected variant's current price and/or compare-at price. It supports two modes:
- PDP mode – Reads pricing from the currently selected variant in the PDP variant store.
- Card mode – Fetches pricing independently using a Product ID, ideal for product cards in catalog or listing views.
The component is market-aware and automatically uses the active market's currency symbol and code. It can show both price and compare-at price, or only one of them, and supports row or column layouts.
How to set it up
PDP usage
- Place AP_VariantPrice on the product detail page.
- Leave Product ID empty to enable PDP mode.
- The component will automatically read from the selected variant in the PDP variant store.
Product card usage
- Place AP_VariantPrice on a product card in a catalog or collection grid.
- Set Product ID to the product you want to display.
- In Card mode, the component fetches the first available-for-sale variant's price on mount (configurable via Prefer Available).
Canvas preview
- Use Preview Price and Preview Compare At to control what you see in the design canvas when live data is not available.
Key behaviours
- Display modes
- Both – Shows price and compare-at price together.
- Price Only – Shows only the current price.
- Compare At Only – Shows only the compare-at price.
- Layout options
- Row – Price and compare-at price are displayed side by side.
- Stack (column) – Price and compare-at price are stacked vertically.
- Market-aware pricing
- Re-fetches prices using @inContext whenever the active market changes.
- Automatically uses the active market's currency symbol and currency code.
- Compare-at handling
- Compare-at price can be shown or hidden.