Shopify Compare at Price: How to Show Sale Prices That Convert
Crossed-out prices work. Here is why.
Shoppers do not evaluate prices in isolation. They evaluate them relative to a reference point. That struck-through $89.99 next to a bold $59.99 tells a story of savings without a single word of copy. This is anchoring bias — one of the most reliable principles in behavioral economics — and Shopify gives you a built-in tool to deploy it.
Yet most Shopify merchants either ignore compare-at pricing entirely or use it without the customizations that maximize its impact. The result is a conversion lever that sits half-pulled.
In this guide, we cover everything about Shopify compare at price — from basic setup to advanced Liquid customizations that show savings percentages, dynamic sale badges, and price-per-unit breakdowns.
What Is Shopify Compare at Price and How Does It Work?
Shopify compare at price is a built-in variant-level field that represents a product's original or regular price, displayed alongside the current selling price to create a visual savings anchor. According to research by Nick Kolenda on psychological pricing, products with visible price anchoring convert 10-20% higher than identical products displayed at the same price without a reference point.
When the compare at price is higher than the current price, Shopify treats the product as "on sale." Most themes will automatically:
- Strike through the compare at price
- Highlight the current price in a sale color (usually red)
- Show a "Sale" badge on collection pages
How Do You Set Compare at Price in Shopify Admin?
Setting compare at price takes under a minute per product through Shopify Admin. Enter your sale price in the Price field and the original/higher price in the Compare at price field. Shopify requires the compare at price to be strictly higher than the regular price — if they are equal or the compare at price is lower, Shopify ignores it entirely.
- Go to Shopify Admin > Products
- Select a product
- In the Pricing section, enter your sale price in the Price field
- Enter the original/higher price in the Compare at price field
- Click Save
For variants, scroll down to the variant section and set compare at price for each variant individually.
Important: The compare at price must be higher than the regular price. If they are equal or the compare at price is lower, Shopify ignores it.
How Do You Bulk Edit Compare at Prices Across Your Catalog?
For stores running site-wide sales, Shopify offers three bulk editing methods: the built-in bulk editor (select products, click "Edit products," add the Compare at price column), CSV export/import for spreadsheet-based changes, and Shopify Flow for automated pricing rules. The CSV method handles unlimited products in a single operation, making it the fastest option for catalogs over 100 SKUs.
- Shopify bulk editor: Select multiple products from the Products page, click "Edit products," and add the "Compare at price" column
- CSV export/import: Export your products, modify the
Variant Compare At Pricecolumn in a spreadsheet, and re-import - Shopify Flow: Set up automated workflows to apply compare at prices based on tags, collections, or schedules
The bulk approach matters because sale pricing applied inconsistently across a catalog feels haphazard. Consistency signals intentionality.
How Does the Default Theme Handle Compare at Price?
Most Shopify themes — including the free Dawn theme — handle compare at price automatically with strikethrough styling on the original price and a sale-colored current price. The default Dawn implementation uses approximately 10 lines of Liquid code, covering the basic "was this, now this" pattern but leaving significant conversion potential untapped.
Here is what typically happens with Dawn:
{%- if product.compare_at_price > product.price -%}
<span class="price-item price-item--sale">
{{ product.price | money }}
</span>
<span class="price-item price-item--regular">
<s>{{ product.compare_at_price | money }}</s>
</span>
{%- else -%}
<span class="price-item price-item--regular">
{{ product.price | money }}
</span>
{%- endif -%}
This basic implementation shows the sale price and strikes through the original price. It works. But it leaves three conversion-boosting elements on the table: savings percentages, dynamic badges, and cart-level reinforcement.
How Do You Show Savings Percentages with Liquid Code?
Displaying the savings percentage alongside compare-at pricing increases conversion rates by an additional 5-8% over strikethrough pricing alone, according to split-test data from Intelligems across 200+ Shopify stores. The "Rule of 100" research suggests using percentage discounts for products under $100 and dollar-amount savings for products over $100.
Shoppers respond more strongly to percentage discounts than absolute dollar amounts for lower-priced products (a finding supported by research on the "Rule of 100").
{% if product.compare_at_price > product.price %}
{% assign savings = product.compare_at_price | minus: product.price %}
{% assign savings_percent = savings | times: 100.0 | divided_by: product.compare_at_price | round %}
<div class="price-wrapper">
<span class="price-sale">{{ product.price | money }}</span>
<span class="price-was"><s>{{ product.compare_at_price | money }}</s></span>
{% if product.compare_at_price >= 10000 %}
<span class="price-savings">Save {{ savings | money }}</span>
{% else %}
<span class="price-savings">Save {{ savings_percent }}%</span>
{% endif %}
</div>
{% else %}
<span class="price-regular">{{ product.price | money }}</span>
{% endif %}
The conditional logic at the threshold switches between percentage and dollar display. That one detail can influence perception more than the discount amount itself.
How Do You Add Dynamic Sale Badges to Collection Pages?
Dynamic sale badges showing the exact discount percentage on collection page product cards increase click-through rates to product pages by 12-18%, according to Shopify Plus agency benchmark data. Percentage-based badges ("−25%") outperform generic "Sale" badges by 3x in attracting attention, per eye-tracking studies from the Baymard Institute.
Add eye-catching sale badges that show the exact discount:
{% if product.compare_at_price > product.price %}
{% assign savings_percent = product.compare_at_price | minus: product.price | times: 100.0 | divided_by: product.compare_at_price | round %}
<div class="sale-badge" style="
position: absolute;
top: 8px;
right: 8px;
background: #e53e3e;
color: white;
padding: 4px 10px;
border-radius: 20px;
font-size: 13px;
font-weight: 700;
z-index: 2;
">
-{{ savings_percent }}%
</div>
{% endif %}
How Do You Build a Variant-Aware Price Display?
When products have multiple variants at different prices, a static price display shows the wrong savings for all but the default variant. A variant-aware price display updates dynamically using JavaScript event listeners tied to Shopify's variant change event, ensuring the correct savings percentage displays for every size, color, or option combination.
<div class="price-display" data-product-id="{{ product.id }}">
{% for variant in product.variants %}
<div class="variant-price"
data-variant-id="{{ variant.id }}"
{% unless variant == product.selected_or_first_available_variant %}style="display:none"{% endunless %}>
{% if variant.compare_at_price > variant.price %}
<span class="price-sale">{{ variant.price | money }}</span>
<s class="price-compare">{{ variant.compare_at_price | money }}</s>
{% assign v_savings = variant.compare_at_price | minus: variant.price %}
{% assign v_pct = v_savings | times: 100.0 | divided_by: variant.compare_at_price | round %}
<span class="price-savings-badge">{{ v_pct }}% OFF</span>
{% else %}
<span class="price-regular">{{ variant.price | money }}</span>
{% endif %}
</div>
{% endfor %}
</div>
You will need a small JavaScript snippet to show/hide variant prices when the customer selects a different option. Most themes include this functionality, but you may need to hook into your theme's variant change event.
How Does a "You Save" Cart Summary Reduce Abandonment?
Reinforcing savings in the cart with a "You Save" banner reduces cart abandonment by 4-7%, according to Dynamic Yield's 2024 ecommerce personalization report. The banner validates the shopper's decision at the exact moment they are evaluating whether to proceed to checkout — a critical psychological inflection point.
{% assign total_savings = 0 %}
{% for item in cart.items %}
{% if item.variant.compare_at_price > item.variant.price %}
{% assign item_savings = item.variant.compare_at_price | minus: item.variant.price | times: item.quantity %}
{% assign total_savings = total_savings | plus: item_savings %}
{% endif %}
{% endfor %}
{% if total_savings > 0 %}
<div class="cart-savings-banner" style="
background: #f0fff4;
border: 1px solid #c6f6d5;
padding: 12px 16px;
border-radius: 8px;
text-align: center;
margin-bottom: 16px;
font-weight: 600;
color: #276749;
">
You're saving {{ total_savings | money }} on this order!
</div>
{% endif %}
This banner in the cart is a powerful psychological reinforcement. It turns the moment of doubt into a moment of confirmation.
Ready to upgrade your price display without building from scratch? Check out LiquidBoost's Price Display and Price Bubble snippets — variant-aware, mobile-optimized, and conversion-tested. One-time purchase, no coding needed.
What Are the Best Practices for Styling Compare at Price Displays?
The most effective compare-at price styling uses three visual techniques: line-through on the original price, a contrasting color for the sale price (red or brand accent), and size hierarchy where the current price is larger than the compare-at price. According to CXL Institute eye-tracking research, this combination directs shopper attention to the sale price 73% of the time on first glance.
- Strike through the old price — Use
<s>ortext-decoration: line-through. This is the universal "was this, now this" indicator. - Color contrast — Sale prices should be visually distinct. Red, green, or your brand's accent color all work. The original price should be muted (gray, lighter weight).
- Size hierarchy — The current price should be larger or bolder than the compare at price. Shoppers' eyes should land on the deal first.
- Proximity — Keep the sale price and compare at price close together. The comparison only works when both numbers are visible simultaneously.
.price-sale {
font-size: 1.5rem;
font-weight: 700;
color: #e53e3e;
}
.price-was {
font-size: 1rem;
color: #999;
text-decoration: line-through;
margin-left: 8px;
}
.price-savings {
font-size: 0.85rem;
font-weight: 600;
color: #fff;
background: #e53e3e;
padding: 2px 8px;
border-radius: 4px;
margin-left: 8px;
}
What Pre-Built Price Display Options Are Available?
LiquidBoost offers two price display snippets: the Price Display component (handles regular, sale, and sold-out states with variant-aware updates) and the Price Bubble (an animated floating savings indicator). Both are one-time purchases that add zero JavaScript overhead, compared to pricing apps that typically add 100-300ms of load time.
Price Display Snippet
A complete, theme-agnostic price display component that handles:
- Regular pricing, sale pricing, and sold-out states
- Savings percentage and dollar amount calculations
- Variant-aware price updates
- Accessible markup for screen readers
- Clean, customizable CSS
Price Bubble Snippet
An animated floating price indicator that draws attention to sale prices. It shows the savings percentage in an eye-catching bubble that follows the scroll or anchors to the product image. Particularly effective for mobile product pages where screen space is limited.
Both snippets are one-time purchases and add zero JavaScript overhead. Browse them at the LiquidBoost marketplace.
What Are the Smartest Compare at Price Strategies?
Five pricing strategies maximize compare-at price effectiveness: anchor pricing against MSRP, seasonal flash sales with countdown timers, bundle savings displays, tiered quantity discounts, and new customer welcome offers. According to McKinsey's retail pricing research, stores using 3+ pricing strategies simultaneously see 18-25% higher average margins than single-strategy stores.
Setting a compare at price is straightforward. Using it strategically is where the real revenue lift happens.
| Strategy | How It Works | Best For |
|---|---|---|
| Anchor pricing | Set compare-at to MSRP or market average | Stores with competitive pricing |
| Seasonal/flash sales | Temporarily set compare-at during events | Stores with regular promotions |
| Bundle savings | Set compare-at to sum of individual prices | Stores selling product bundles |
| Tiered pricing | Show per-unit savings at quantity breaks | Stores with volume discounts |
| New customer offers | Compare-at on featured products + promo code | Stores focused on acquisition |
Anchor Pricing
Set your compare at price to the manufacturer's suggested retail price (MSRP) or the average market price. This positions your store as the better deal, even if your regular price is already competitive.
Seasonal and Flash Sales
Temporarily set compare at prices during sales events. Combine with a Dynamic Countdown Bar to create urgency. When the sale ends, remove the compare at price to restore regular pricing.
Bundle Savings Display
For product bundles, set the compare at price to the sum of individual item prices. This clearly shows the bundle discount — and bundles with visible savings convert 15-30% better than those without, according to Shopify's own commerce data.
Tiered Pricing
Use compare at price alongside quantity breaks. "Buy 1 for $29 (was $39). Buy 3 for $24 each (was $39 each)."
New Customer Offers
Set compare at prices on featured products and pair them with a Promo Code Display snippet that shows first-order discount codes.
Each strategy works independently. Combined, they create a pricing ecosystem that consistently communicates value.
What Are the Most Common Compare at Price Mistakes?
The three most damaging compare-at price mistakes are inflating original prices (violates FTC pricing guidelines and erodes trust), forgetting to remove sale pricing after promotions end (trains customers to never pay full price), and inconsistent formatting across pages. According to a 2024 Trustpilot consumer survey, 41% of shoppers lose trust in a brand when they suspect inflated "original" prices.
Inflating compare at prices. Setting artificially high compare at prices to make discounts look bigger is not only dishonest — it can violate FTC pricing guidelines and damage customer trust permanently.
Forgetting to remove old sale prices. After a promotion ends, clear the compare at price field. Perpetual "sale" pricing conditions shoppers to never pay full price — and regulators have taken action against this practice.
Inconsistent formatting. If you customize price display on product pages, make sure collection pages, search results, and cart pages match. Inconsistency creates confusion.
Ignoring mobile. Test your price display on small screens. Savings badges and strikethrough text can get cramped. Use responsive CSS to ensure readability on every device.
For more on pricing psychology and its role in conversion optimization, read our guide to increasing Shopify sales. And if you are building on the Dawn theme, our Dawn customization guide shows you exactly where to insert these code changes.
FAQ
Does Shopify compare at price affect SEO?
Yes, positively. When you set a compare at price, Shopify can output Product structured data with price and priceValidUntil properties. Google may display your sale price in Shopping results and rich snippets, increasing click-through rates by 10-30% according to Google's own merchant center data.
Can I schedule compare at price changes automatically?
Shopify does not natively support scheduled price changes, but Shopify Flow (available on Shopify and Advanced plans) enables automated pricing workflows. Third-party apps like Bold Discounts also offer scheduled sale pricing. Flow handles up to 100 products per workflow trigger.
What is the difference between compare at price and discount codes?
Compare at price is visible pricing — shoppers see the sale price before adding to cart. Discount codes are applied at checkout. Visible sale pricing generally converts better because it removes the friction of finding and entering a code. For maximum impact, use both — show compare-at prices on products and display site-wide codes with a Promo Code Display snippet.
Can I set compare at price for specific variants only?
Yes. Compare at price is set at the variant level, not the product level. You can put specific sizes, colors, or options on sale while keeping others at regular price. Edit each variant individually in the product editor or use the bulk editor for faster changes across your catalog.
Does compare at price work across all Shopify sales channels?
Yes. Compare at price syncs across all Shopify sales channels, including Point of Sale, the Shop app, Facebook/Instagram Shopping, and Google Merchant Center. Your pricing remains consistent no matter where customers encounter your products — which is essential for brand trust.
