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. You can set the special “Compare to” price for your product and this price will be shown struck out to demonstrate how much the current price is better. For example, if you want to show that your prices are better if compared to your competitors, you can use this field to inform how much they charge for the same product. The other way is to represent your regular price when you want to put a product on sale or to show the suggested retail price (“MRP”, “List price”, etc.)

How to set a 'Compare to' / Sale price?

1. Log in to your UXi® Commerce control panel and open a product for editing.


2. Click the icon near the product price: 

3. Set the "Compare to" price and save: 


How to customize 'Compare to' prices?

Please find the layout/wording settings of the 'Compare to' prices at UXi® Commerce control panel → System settings → General → Cart → 'Compare to' prices. There, you can set:

  • where to display the 'Compare to' prices (Product details pages only or product listing and product details pages)
  • how to name 'Compare to' price (e.g. 'was', 'List price' etc.)
  • how to display discount values (in percent or absolute values)



Can I change the look of the sale price?

Sure you can. This feature was created to be very flexible and highly customizable using custom CSS themes. For example, you can implement something like this:In order to do it, please add the following CSS code to your custom CSS theme:div.ecwid-productBrowser-price-grid div.ecwid-productBrowser-price-compareAt-container { display: none;} div.ecwid-productBrowser-price-grid div.ecwid-productBrowser-price-save-container {

background-color: #F01010;

border-radius: 4px 4px 4px 4px;

color: #FFFFFF;

display: inline-block;

font-size: 0;

left: 43px;

padding: 2px 3px 3px 2px;

position: relative;

top: -251px;

} div.ecwid-productBrowser-price-grid div.ecwid-productBrowser-price-save { color: #FFFFFF; font-weight: bold;}

How can I change the 'Save' text label?

Please refer to this article: How can I change or translate texts in storefront?



Сan I show the sale price on the product list? 

Yes, you can. Just select the corresponding option in the feature settings:  System settings → General → Cart → 'Compare to' prices → Display “Compare to” price on (Product list & product details pages).