How do I show sale badges and compare‑at prices in Shopify?

Show Sale Badges Using Compare-At Prices

In Shopify, sale badges and strikethrough prices appear when you set a Compare-at price higher than the regular Price. This method is different from discount codes. Most modern themes automatically display:

• Crossed-out original price
• New sale price
• Sale badge on product and collection pages

Method 1: Set Compare-At Price for a Simple Product (No Variants)

1. Go to Shopify Admin → Products.
2. Click the product you want to put on sale.
3. In the Pricing section:
   • Enter the sale price in the Price field.
   • Enter the original price in the Compare-at price field.
4. Ensure the Compare-at price is higher than the Price.
5. Click Save.

Example:
Price: $10
Compare-at price: $30
Storefront display: $30 $10 + Sale badge

Method 2: Set Compare-At Price for Individual Variants (Right Panel)

This method works best when you want different sale prices for specific sizes or colors.

1. Go to Shopify Admin → Products.
2. Select the product with variants.
3. Scroll to the Variants section.
4. Click a specific variant.
5. In the right-side panel:
   • Set the Price (sale price).
   • Enter the Compare-at price (original price).
6. Click Save.

Best for: Editing one or a few variants while viewing inventory and cost details.

Method 3: Bulk Edit Variants for One Product

Use this when applying the same sale to multiple variants.

1. Open the product in Products.
2. Select the variants you want to edit.
3. Click Bulk edit.
4. Add columns for Price and Compare-at price.
5. Update values and click Save.

Method 4: Bulk Edit Multiple Products

Ideal for store-wide or collection-wide sales.

1. Go to Shopify Admin → Products.
2. Select multiple products.
3. Click Bulk edit.
4. Add Price and Compare-at price columns.
5. Update values and save.

Important: Collection Page Sale Display Rules

For a product to show as “On Sale” on collection pages, variant pricing must be consistent.

Correct Setup

• All variants have Compare-at price higher than Price.
• OR only selected variants have Compare-at price, and others are completely blank.

Incorrect Setup (May Hide Sale on Collection Pages)

• Some variants have Compare-at price set to $0.00.
• Mixed blank, $0.00, and different compare-at values.
• Inconsistent compare-at pricing across variants.

Important: $0.00 is NOT the same as blank. Delete the value completely to remove it.

Where Sale Badges Appear

• Product pages: Shows strikethrough + sale badge.
• Collection pages: Shows badge if variant pricing is consistent.
• Checkout: Only shows the final sale price (no strikethrough).

Customize Sale Badge Appearance

1. Go to Online Store → Themes.
2. Click Customize.
3. Look for settings related to:
   • Sale badge text
   • Badge color
   • Position (top-left, top-right, etc.)
   • Sale price styling
4. Save changes.

Modern Online Store 2.0 themes include built-in badge controls. Older themes may require custom code.

Sale Prices vs Discount Codes

Troubleshooting

Sale Not Showing on Collection Page

• Ensure Compare-at price is higher than Price.
• Remove any $0.00 compare-at values.
• Keep variant pricing consistent.

Sale Badge Not Appearing

• Check theme settings.
• Update to latest theme version.
• Confirm compare-at price is properly set.

Wrong Price Showing

• Check international market pricing overrides.
• Review pricing apps or scripts.
• Clear cache and test again.

Best Practices

• Always set Compare-at price higher than the sale price.
• Keep variant pricing clean and consistent.
• Use bulk edit for large sales.
• Clear compare-at prices completely after a sale ends.
• Test both product and collection pages after updates.