How do I set the discount badge color in my product card?

[weibincheng]

I want to set the discount badge color separately.
And the discount badge shows “on sale” on the home page instead of showing how much discount.

I would appreciate it if anyone could help me.

[weibincheng]

I changed the color On sale accent in the Settings, and the color of discount badge changed together with the product price. I want to modify the discount badge separately. And the discount badge of the product only shows “on sale” instead of “Save 15%” on the homepage.

This is my web: https://store.ulefone.com/

I would appreciate it if anyone could help me.

[weibincheng]

Most products have a discount badge that show"On Sale", I want all products to show a discount for example: “Save 15%”

[Guleria]

Hello @weibincheng ,

Please find the existing sale badge code and replace it with this one

{% if product.compare_at_price > product.price %}
  
    {{ product.compare_at_price | minus: product.price | divided_by: product.compare_at_price | times: 100 | round }}% OFF
  

{% endif %}

Regards
Guleria

[weibincheng]

Hello @Guleria , Thank you very much for your answer. I used the Impact theme, where do I modify it?

This code can change the discount badge to show “Save XX%”, right? Can the color alse be changed?

[Guleria]

Impact is a premium theme we don’t have access to until the store owner provides it.

btw you can check in main-product.liquid under sections

Yes the above code will show discount badge. Yes color will be changes but if you use code with the existing html then it will remain same.

e.g.

{% if product.compare_at_price > product.price %}

{% endif %}

[Amanda_Fordeer]

Hi @weibincheng ,

While someone may assist you with their code, I still highly recommend utilizing the Product Labels & Badges app for automatic processing. Simply follow these steps to create a campaign:

Goal: Show only the “On sale” text badge on the homepage and customize it separately.

Step 1. Install and enable the app.

Step 2. Create and customize a text label.

Step 3. In the Product settings, choose All products and utilize the Discount range to display the label exclusively on discounted items.

Step 4. In the General settings, specify the pages where you wish to showcase the label.

[Dan-From-Ryviu]

Hi @weibincheng

Related to color of badge, I recommend you create a new Color scheme when editing color of badge so it wont affect to your price.

And about save % instead of on sale, If you don’t mind, please give me collab request code of your store so I can send request to access your theme and help you to add the code