How can i move " Sale " label badge to TOP Right and change Sale label to xx%

Store Design
1

Hi guys

pls help me move " Sale " label badge to TOP Right and change Sale label to xx%

i tried some code but it not work.

thank you for support me

2

pls support me.

3

Hi @mr_Lynk

Please share your store URL

1 Like
4

https://q6b8qsir9nm1dny6-85507440942.shopifypreview.com

here you are.

5

You can move label to top right from Online Store > Themes > Customize > Collections > Product grid > Theme settings > change option Position on cards

Screenshot 2024-02-20 at 10.34.02.png
Screenshot 2024-02-20 at 10.34.02.png1869×900 132 KB

Then go Online Store > Themes > Edit code > open card-product.liquid file, and find this line of code around line 135

{{- 'products.product.on_sale' | t -}}

Replace it with this code and save file

{{ card_product.compare_at_price_max | minus: card_product.price | times: 100.0 | divided_by: card_product.compare_at_price_max | money_without_currency | times: 100 | remove: '.0'}}%
1 Like
6

thank for support. i already change but i wanna add minus
Ex: -50%

and i want to change color is red or any color i choose

7
  • You can chang the color next option to chang position but I recommend you
    create a new color scheme so it wont affect other element.
  • Please a “-“ before the code I sent you.
8

can you change help me box size. i want it smaller

mr_Lynk_0-1708407333829.png

9

You can do that by adding this code to theme.liquid file after in Online Store > Themes > Edit code
1 Like
10

yes. It worked well

thank you so much

1 Like
11

You are most welcome.

1 Like
12

Hey,

I did this and it worked, except it shows -0%? (while the price is discounted, the original price is crossed out).

13

Could you share your store URL?

14

Please try to update the code to this and check again.

{{ card_product.compare_at_price_max | minus: card_product.price | times: 100.0 | divided_by: card_product.compare_at_price_max | money_without_currency | times: 100 }}%
15

Still shows 0%. the url is: rosa-elysian.com. I currently just renamed the sale badge to -30% at the theme content haha. But i need it to be automaticly

16

Hi @Rosa-Elysian

I used the code on my Dawn 15.2.0, and it worked well. Could you add the code and take a screenshot where did you add code so I can check?

Screenshot 2024-12-03 at 08.25.16.png
Screenshot 2024-12-03 at 08.25.16.png2156×1260 312 KB

17

I can’t upload the screenshot i took, it doesnt support .jpg. But i found the exact code you provided at line 140, deleted that and replaced it with your code. Maybe it’s because i use the radient theme? (shouldnt be a problem i guess since its dawn based)?

18

So please try to use this code instead

{{ product.compare_at_price_max | minus: product.price | times: 100.0 | divided_by: product.compare_at_price_max | money_without_currency | times: 100 | round }}%
19

still shows 0% if i add the new code..