About 'SALE' label and strikethrough price

In this article:

Introduction
'SALE' label and strikethrough price by compare at price
'SALE' label and strikethrough price by product level promotion
Remove the 'SALE' label which created by compare at price
Changing the size and color of 'SALE' label
Change the 'SALE' label position to right side
Remove % created by compare at price (For Candy, X-Force, Lucky & Wave theme only)
Change the color of strikethrough price
Remove percentage at product page
Remove discount percentage for collection page & featured products
Rename the word 'SALE' for label

1. Introduction

'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.

2. 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.

3. 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

4. Remove 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:

📌 Note: This step comes before Candy theme, example: X-force, Prisme, DOUX, & etc. For newer themes, may refer to the step in the next section.

Step 1 : Select settings_data.json file under config > Look for collections_show_sale_circle > Change value to 0 > Save



📌 Note: This step is for the newer themes, for example: Aroma, Kiddy, Vivid & etc. For older themes, may refer to the step above.

Step 1: Select product-cart.liquid under snippets > Remove lines 4 - 6 > Save



Result:

5. 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 > Channels > Online Store > Edit source > assets/theme.scss

5.1 Search for badge__text--small {

Font size: adjust the number beside font-size

5.2 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



5.3 Save and done.

6. Change the 'SALE' label position to right side**

By default, the 'SALE' label from compared at price would be displayed on the top left of your product image.

You can change the position to the top right side from EasyStore Admin > Channels > Online Store > Edit source > assets/theme.scss

Look for .badge--sale { around line 1156 and change the word left: 0px; to right: 0; > Save and you're done!

Result:

7. Remove % created by compare at price (For Candy, X-Force, Lucky & Wave theme only)

6.1 Go to EasyStore Admin > Channels > Online Store > Edit source > product-grid-item.liquid under snippets

6.2 Remove the code below



6.3 Save > Done

8. Change the color of strikethrough price

7.1 Go to EasyStore Admin > Channels > Online Store > Edit source > config > theme.scss

6.2 Add the code at the bottom of the theme.scss file and change the color code into your desired colour > Save > Done

s .money

{ color: #999999; }

📌 Remark : You may get the color code of your preferred color [here](https://www.rapidtables.com/web/color/html-color-codes.html)

9. Remove percentage at product page

8.1 Go to EasyStore Admin > Channels > Online Store > Edit source > product.liquid

8.2 Find the line <span id="ComparePricePercent" class="product-single__sale-percent"></span> and remove it



8.3 Save & done

10. Remove discount percentage for collection page & featured products

9.1 Go to EasyStore Admin > Channels > Online Store > Edit source > product-grid-item.liquid

9.2 Remove the code below around line 90 - 100

{% if product.price > 0 %} 
{% assign product_price = product.price | times: 100.0 %} 
{% assign product_compare_at_price = product.compare_at_price | times: 100.0 %} 
<span class="grid-link__sale_price-percent">-{{ product_compare_at_price | minus: product_price | divided_by: product_compare_at_price | times: 100.0 | round: 1 }}% 
{% endif %}

9.3 Save > Done

11. Rename the word 'SALE' for label

10.1 Go to EasyStore Admin > Channels > Online Store > Edit source > product-grid-item.liquid under snippets

10.2 Look for <span class="badge badge--sale"> and you may change the label text here



10.3 Save

Result :

Updated on: 22/09/2023