How to show X% Off badge on Collection Product

Store Design
, ,
1

Hi, I have a new theme that I am developing. I am trying to show that a product in a collection has X% OFF. For example if a product is £95 but its compare at price is £100, then it is 5% off. But, I can not get the number to display only ‘% OFF’ can somebody help please!

2

@LewisSutton - what code are you using for this?

3

Hi,

We can customize the product card file to add the X% Off Badge on the collection page

4

@suyash1 Hi, I’m using this code. I have since got it to show 0% off but it should be more than 0% haha.


            {%- if card_product.available == false -%}
              
                {{- 'products.product.sold_out' | t -}}
              
            {%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
              
                {% comment %}{{- 'products.product.on_sale' | t -}} {% endcomment %}

                {{ product_card_product.compare_at_price | minus: product_card_product.price | times: 100.0 | divided_by: product_card_product.compare_at_price | money_without_currency | times: 100 | remove: '.0'}}% OFF
              
            {%- endif -%}
5

@LewisSutton - can you please delete

times: 100 |

which is just before that remove and check?

6

I get NaN now

LewisSutton_0-1687770635974.png

This is the new code now

{{ product_card_product.compare_at_price | minus: product_card_product.price | times: 100.0 | divided_by: product_card_product.compare_at_price | money_without_currency | remove: '.0'}}% OFF
7

@LewisSutton - ok we will need to debug to check what prices are these variables have in store… so before all this % code, can you simply display

{{ product_card_product.compare_at_price }} and

{{ product_card_product.price }}

this will let you know what prices are in store in these variables, so we can check if the values are fetched properly

8

This is not displaying anything, so I must be calling the values wrong. Just trying to figure out the correct syntax

LewisSutton_0-1687771129138.png

9

@suyash1 I have fixed it, I was not calling the object correctly. it now prints as it should! Thank you for your help!

LewisSutton_1-1687771230211.png

1 Like
10

@LewisSutton - try product.compare_at_price and product.price instead

may be variables above do not have values and hence you get 0, if they get correct values, it will work