Sale prices

Customers love discounts and deals. Putting a product on sale or showing that this very price is less than a customer will find elsewhere is a great way to get more orders. And this is how the Sale price feature works.

Setting up a Sale price

To show that a product is on sale, set the "Compare to" price for it. In the storefront, this price will be struck out to demonstrate the discount and the ON SALE label will appear on the product. Here is how it looks on a category page:

Sale price in your store

And here how it looks on the product page:

Sale price in the product page

To set up a sale price:

  1. Go to Ecwid Control Panel → Catalog → Products.
  2. Open the product you want to edit.
  3. Click the arrow next to the price:

Click the arrow to set the Sale price

  1. Add the "Compare to" price. This price must be higher than the actual price you sell for:

Add the Compare to price

  1. Save the changes.

Customizing sale prices

You can set the display options and wording of the sale prices in your Ecwid Control Panel → Settings → General → Cart & Checkout, "Compare to" price section. There you can set:

  • where to display "Compare to" prices: product details pages only or both product listing and product details pages,
  • what text to show at "Compare to" prices, e.g. "was", "List price",
  • how to display discount values: in percents or absolute values:

Sale price settings

To change the "On sale" text:

  1. Go to the Ecwid Control Panel → Settings → Edit Store Labels.
  2. Type "On sale" in the search field.
  3. In the found labels, type the text that you want to show instead of "On sale". Changes are saved automatically:


Changing the color of the "On sale" tag

You can change the color of the ON SALE tag:

  1. Go to Ecwid Control Panel → Settings → Design → CSS themes.
  2. Add the code below to your custom theme if you have one. If you do not have it, add it as described in our CSS instructions.
/* change on sale label color */

.ec-size .ec-store .label--notice { 
   background-color: RED; 

  1. Change RED in the background-color to the color you want.
  2. Save the changes.

Here is how it looks in your store:


Was this article helpful?

Awesome! Thanks for your feedback!

Sorry about that! We are here to assist you by email or chat.

Contact support