The original price shown crossed out next to the price, such as $45 next to $32, set on each variant; Shopify charges the price, never the compare-at price.
Each variant has two price fields:
- the price, what the customer pays;
- the compare-at price, the “was” price shown crossed out next to it.
Putting a compare-at price above the price is how a store shows a sale on a product, without a discount code. Shopify does not check that it is higher: a compare-at price equal to or below the price is a mistake on the page, not a sale.
A compare-at price is not a discount: a discount lowers the price in the cart or at checkout, while the compare-at price only changes what the page shows.
In Webflow terms
Webflow Ecommerce has the same pair of fields. In a Smootify store they come from Shopify, per variant, and change with the variant the customer picks.
In Smootify
- Shows
- The lowest and the highest variant price.
- Here
- $29 (S) and $39 (XL).
- Shows
- The price of the cheapest variant that can be bought.
- Here
- $32: S is sold out, so M.
- Shows
- The lowest and the highest crossed-out price among the variants on sale. Hidden when none is on sale.
- Here
- $39 (S) and $45 (M).
- Shows
variable-price: only when the variants have different prices.fixed-price: only when they all cost the same.- Here
- The prices differ, so "From" shows.
smootify-price shows the price and, with data-prop="compareAtPrice", the crossed-out one. The product gets the class is-on-sale, and condition="on-sale" shows an element, only when the compare-at price is higher than the price. In the cart, cart="savings" shows what the whole cart saves.
More in Product cards and The cart.