Run sales in your store

The UI in this lesson may seem different if you've enables the Style Panel Beta! This content will be updated soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
Run sales in your store

Running sales, promotions, and discounts is a huge part of running an online store. The compare-at price field in the products collection allows you to display an “original” price that is more expensive than the price you’re selling the product at (in effect, marking that the product is on sale). With the power of conditional visibility, you can create inventive sales and merchandising designs on your store.

In this lesson
  1. Update product details with sale prices
  2. Display sales banners for products on sale
  3. Display a strikethrough "compare-at" price
  4. ‍Display more info about the “original price”

Update product details with sale prices

When you decide to sell products, or variants, at a discounted price, open the product details in the Designer or Editor and update the price fields as follows:

  1. Set the “original price” in the compare-at price field
  2. Set the “sale price” in the price field
Add the original price of a product in the compare-at price field
Specify the current price (price) and the original price (compare-at price) of the product before the sale.

Display sales banners for products on sale

You can add a small banner, callout, or a label to point out products on sale in your products list. Create the callout element you have in mind, then set it to only display if the product in question has a compare-at price set.

‍Only display the sales callout element if the product has a compare-at price set.
Only display the sales callout element if the product has a compare-at price set.

Display a strikethrough compare-at price

Let’s say you want to show the compare-at price — the original price — on your product page, styled in a different color and struck through to indicate the price has been reduced. Add a new text element to the page and connect it to the compare-at price field. Then, style and decorate that element however you’d like.

‍Connect a text element on your product page to the compare-at price, then style as needed.
Connect a text element on your product page to the compare-at price, then style as needed.

Display more info about the “original price”

If you want to take things to the next level, you can create a parent element that has multiple elements and additional information on the original price — then use conditional visibility to only display that parent element if the product has a compare-at price set.

Only display the element with information about the original price if that product has a compare-at price set.
Only display the element with information about the original price if that product has a compare-at price set.

Browser support

Can I Use ? Data on support for the feature across the major browsers from caniuse.com.

Was this helpful?
OR

Thanks for the feedback! If you can, please add additional feedback below.

Oops! Something went wrong while submitting the form

Thank you! Your feedback has been received!

Oops! Something went wrong while submitting the form