How to show discount percentage on Colorblock theme product page?

Store Design
1

I want to show the percentage of the discount for the product price that is on sale. The theme is Colorblock. Spoke to Shopify Customer Care they gave me a code.

But They can’t help me with inserting the code. So if anyone can help me with where This code needs to go will be great.

The code should work for Product grid and on Product Page

Thank You.

2

Hi @Akshay_solanki go to theme editor and search for price.liquid file in snippets folder and replace the code highlighted in below screenshot with new code

Screenshot 2023-05-17 140118.png
Screenshot 2023-05-17 140118.png1248×593 39.9 KB

{% assign variant = product.selected_or_first_available_variant %}
    {% assign saving = variant.compare_at_price | minus: variant.price | times: 100 | divided_by: variant.compare_at_price | round %}
    
      {{ saving }}%
3

Hi @Ahsan_ANC

Thank you so much for the help. The code worked and the discount is appearing. The discount shows on the product page - Product Page

I want the discount to be shown in the product grid also.

Please refer to the links

4

Hi @Akshay_solanki go to theme editor and search for card-product file in snippets folder and replace the code highlighted in below screenshot with new code

Screenshot 2023-05-18 124131.png
Screenshot 2023-05-18 124131.png1062×535 32.2 KB

{% assign variant = card_product.selected_or_first_available_variant %}
    {% assign saving = variant.compare_at_price | minus: variant.price | times: 100 | divided_by: variant.compare_at_price | round %}
    
              
                {{ saving }}%
5

I applied that code nothing is seen now, even my sale badge disappeared