How can I display discount percentage on product collection page?

[Wadmin]

Hello everyone.

Have a great day.

In my Shopify Website, we show discount % under product’s price of each product’s detail page in the following way.

But product’s collection page, discount % doesn’t appear in the following way.

But I want to appear like the below photo.

Suggest me pls.

[Angel95]

Hello,

are you using the some app for the discounts or it is from the shopify default discount?

[Wadmin]

I am using Shopify default discount. If I want to discount a product, I change product’s original price to Compare price and in original price I fill discounted price.

And then u can check my website via " https://yangoods.com/ "

You can check the discount item by searching “YGEtest001” in search icon.

[Kani]

Hi @Wadmin

Please share your ‘product-item.liquid’

or paste this code at where you want.

{{product.compare_at_price | minus: product.price | times: 100 | divided_by:  product.compare_at_price }}% off

[Wadmin]

Hey @Kani This is my liquid-grid-item.liquid file

{% comment %}

This snippet is used to showcase each product during the loop,
‘for product in collection.products’ in collection.liquid.

A liquid variable (grid_item_width) is set just before the this
snippet is included to change the size of the container.
Once the variable is set on a page, all future instances of this
snippet will use that width. Overwrite the variable to adjust this.

Example

• assign grid_item_width = ‘large–one-third medium–one-half’

{% endcomment %}

{% unless grid_item_width %}
{% assign grid_item_width = ‘large–one-third medium–one-half’ %}
{% endunless %}

{% unless width %}
{%- assign width = 310 -%}
{% endunless %}
{% unless height %}
{%- assign height = 415 -%}
{% endunless %}

{% assign on_sale = false %}
{% if product.compare_at_price > product.price %}
{% assign on_sale = true %}
{% endif %}

{% assign sold_out = true %}
{% if product.available %}
{% assign sold_out = false %}
{% endif %}

{%- assign variant = product.selected_or_first_available_variant -%}

{% capture img_id_class %}ProductImage-{{ product.featured_image.id }}{% endcapture %}
{% capture img_wrapper_id %}ProductImageWrapper-{{ product.featured_image.id }}{% endcapture %}
{%- assign img_url = product.featured_image | img_url: ‘1x1’ | replace: ‘1x1.', '{width}x.’ -%}

{% if product.featured_image.src== blank %} {% else %} {% include 'image-style' with image: product.featured_image, small_style: true, width: width, height: height, wrapper_id: img_wrapper_id, img_id_class: img_id_class %}

{% endif %} {% if sold_out %}

{{ 'products.product.sold_out_html' | t }}

{% elsif on_sale %}

{% capture saved_amount %}{{ product.compare_at_price | minus: product.price | money_without_trailing_zeros }}{% endcapture %}

{{ 'products.general.save_html' | t: saved_amount: saved_amount }}

{% endif %}

Quick View

{{ product.title }}

{% if on_sale %} {{ product.compare_at_price | money_without_trailing_zeros }} {{ 'products.general.sale_price' | t }} {% else %} {{ 'products.general.regular_price' | t }} {% endif %} {% if product.price_varies %} {{ product.price_min | money_without_trailing_zeros }} + {% else %} {{ product.price | money_without_trailing_zeros }} {% endif %}

{% if section.settings.product_vendor_enable %}

{{ product.vendor }}

{% endif %}

[Kani]

I have checked your liquid file

and I found your ‘product-item’ already have this function. so you may need to check your price settings