About ‘SALE’ Label And Strikethrough Price

'SALE' label is an auto-generate label when any price deduction was made for a product. It displays at the top right corner of your product image with default theme color and always comes together with strikethrough price.

By compare at price

Compare at price is a price discount function that embed in Admin > Products, Pricing section.

Once Compare at price is filled, 'SALE' label and strikethrough price will be shown on product.

By product level promotion

Other than Compare at price, 'SALE' label and strikethrough price will also appear if you have created a product level promotion for this product.


To create this type of promotion, you may visit this page to know which of the tools are product level promotion tools ( for selected products ). Then, go to Admin > Promotions > Add promotion to create promotion.


Make sure the conditions below are fulfilled in order to show the 'SALE' label and strikethrough price.

  • Quantity = 1, quantity = 2 or above will not trigger

  • Voucher code = Not applicable

  • Target customers = Open to public



Disable the 'SALE' label which created by method 2 & 3

If you wish to have a different label for promotional products or you think the 'SALE' label blocks your product display, you can disable the label by following the steps below:

  • ? Be noted that this step will also disable the 'Sold out' label on product image.


Go to Admin > Online Store > Themes > Edit source > assets/theme.scss > search for $badgeSize:  > beside display: , replace table with none > Save

By product level promotion

Other than Compare at price, 'SALE' label and strikethrough price will also appear if you have created a product level promotion for this product.


To create this type of promotion, you may visit this page to know which of the tools are product level promotion tools ( for selected products ). Then, go to Admin > Promotions > Add promotion to create promotion.


Make sure the conditions below are fulfilled in order to show the 'SALE' label and strikethrough price.

  • Quantity = 1, quantity = 2 or above will not trigger

  • Voucher code = Not applicable

  • Target customers = Open to public



Disable the 'SALE' label which created by method 2 & 3

If you wish to have a different label for promotional products or you think the 'SALE' label blocks your product display, you can disable the label by following the steps below:

  • ? Be noted that this step will also disable the 'Sold out' label on product image.


Go to Admin > Online Store > Themes > Edit source > assets/theme.scss > search for $badgeSize:  > beside display: , replace table with none > Save


Result:


Changing the size and color of 'SALE' label

You can change the size and color for both the font and label of 'SALE' label. Go to EasyStore Admin > Online Store > Themes > Edit source > assets/theme.scss


  • Search for badge__text--small {

    • Font size: adjust the number beside font-size 


  • Search for $badgeSize:

    • Label size: adjust the number beside $badgeSize: 

    • Label color: beside background-color: , replace $colorPrimary with your preferred color code

    • Font color: beside color: , replace $colorBtnPrimaryText with your preferred color code


      Save and done.


Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.