CompareAt Price Display
Standalone compare-at price display with granular currency formatting, supporting PDP and product card modes.
AP_CompareAtPriceDisplay is a standalone component for showing a product’s original compare-at price. In PDP mode it reads from the shared variant store, updating as the selection changes. In Card mode (Outside PDP enabled) it fetches the compare-at price independently using a Product ID, making it suitable for product listing cards. Currency formatting is fully configurable — you choose the prefix and suffix independently, and for each you can display the locale symbol (e.g. $), the ISO code (e.g. USD), or a custom string. Strikethrough is optional. The component can be hidden entirely when no compare-at price is set on the product.
Property Controls
Outside PDP
false
Enable to use on product cards. Fetches the compare-at price by Product ID rather than reading from the variant store.
Product ID
—
Required when Outside PDP is on. The Shopify product ID used to fetch the compare-at price.
Prefer Available
true
In Card mode, prefer the first available-for-sale variant when fetching. Hidden when Outside PDP is off.
Hide When 0 / Missing
false
When on, renders nothing if the compare-at price is zero or not set on the product.
Formatting
—
Number formatting options: decimal places, strikethrough toggle, and prefix/suffix currency configuration (Symbol, ISO Code, or Custom text).
Typography
—
Font and text color for the compare-at price display.