Price Compare

Shows the original compare-at price, struck through, next to the sale price; hides when there's no markdown.

Last updated

Price Compare icon

How to use

  1. Place the component beside the Price and connect ⛁ Butter Data to the product's Butter Data CMS field.

  2. Optionally set a Prefix (e.g. "was") — empty by default.

  3. Configure Format (symbol, currency code, decimals).

  4. Style the Font/Color and the Strike (on by default) — its size and color.

When the struck-through price shows — and when it hides

This component only renders when the selected variant actually has a compare-at price set in Shopify — with no compare-at price, nothing shows. It also stays hidden when multiple different compare-at prices exist before a full variant selection is made, so it never displays a value that could be misleading. Currency follows the customer's active market; the Format currency code is canvas preview only.

Questions? Join our Slack community