How can I display discount percentage on product collection page?

Wadmin
Excursionist
14 0 4

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. 

Screenshot (86).png

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

Screenshot (87).png

But I want to appear like the below photo.

Screenshot (88).png

Suggest me pls.

 

Replies 5 (5)

Angel95
Pathfinder
101 6 8

Hello,

 

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

banned
Wadmin
Excursionist
14 0 4

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
Shopify Partner
468 125 225

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

 

 

Hey!! ʕ ᵔᴥᵔ ʔ
Please click 'Like' and ' Accept as Solution' to encourage me to continue sharing my expertise. ♡
If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response. 🙂
Wadmin
Excursionist
14 0 4

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

<!-- /snippets/product-grid-item.liquid -->
{% 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.' -%}

<div class="grid__item grid-product {{ grid_item_width }}{% if sold_out %} is-sold-out{% endif %}" data-product-card>
<div class="grid-product__wrapper">
<div class="grid-product__image-wrapper">
<a class="grid-product__image-link{% unless product.featured_image.src== blank %} grid-product__image-link--loading{% endunless %}" href="{{ product.url | within: collection }}" data-image-link>
{% if product.featured_image.src== blank %}
<img class="grid-product__image" src="{{ product.featured_image.src | img_url: '1024x' }}" alt="{{ product.featured_image.alt | escape }}">
{% 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 %}
<div id="{{ img_wrapper_id }}" class="product--wrapper">
<div style="padding-top:{{ 1 | divided_by: product.featured_image.aspect_ratio | times: 100 }}%;">
<img class="product--image lazyload {{ img_id_class }}"
data-src="{{ img_url }}"
data-widths="[180, 370, 590, 740, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ product.featured_image.aspect_ratio }}"
data-sizes="auto"
alt="{{ product.featured_image.alt | escape }}"
data-image>
</div>

</div>

<noscript>
<img class="grid-product__image" src="{{ product.featured_image.src | img_url: '1024x' }}" alt="{{ product.featured_image.alt | escape }}">
</noscript>
{% endif %}

</a>
{% if sold_out %}
<div class="grid-product__sold-out">
<p>{{ 'products.product.sold_out_html' | t }}</p>
</div>
{% elsif on_sale %}
<div class="grid-product__on-sale">

{% capture saved_amount %}{{ product.compare_at_price | minus: product.price | money_without_trailing_zeros }}{% endcapture %}
<p>{{ 'products.general.save_html' | t: saved_amount: saved_amount }}</p>
</div>
{% endif %}

</div>
<div class="quick-view-button"><button class="quick-view" data-handle="{{ product.handle }}" href="javascript&colon;void(0);" style="font-weight: bold">Quick View</button></div>
<!-- <a href="{{ product.url | within: collection }}" class="grid-product__meta">
<span class="grid-product__title">{{ product.title }}</span>

<p style="margin-top: -25px;"> <span class="grid-product__price-wrap"><br/>
<span class="long-dash">—</span>
<span class="grid-product__price">
{% if on_sale %}
<span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
{% else %}
<span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
{% endif %}
{% if product.price_varies %}
<span class="money" data-product-id="{{ product.id }}">{{ product.price_min | money_without_trailing_zeros }}</span>
<span class="icon-fallback-text"><h1>YANGOLD</h1>
<span class="icon icon-plus grid-product__price-min" aria-hidden="true"></span>
<span class="fallback-text">+</span>
</span>
{% elsif template == "insider-rewards" %}
Yangold<span class="money" data-product-id="{{ product.id }}">{{ product.price | money_without_trailing_zeros }}</span>
{% else %}
<span class="money" data-product-id="{{ product.id }}">{{ product.price | money_without_trailing_zeros}}</span>
{% endif %}


</span>

{%- if variant.available and variant.unit_price_measurement -%}
{%- capture unit_price_separator -%}
<span aria-hidden="true">/</span><span class="visually-hidden">&nbsp;{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
{%- endcapture -%}

{%- capture unit_price_base_unit -%}
<span>
{%- if variant.unit_price_measurement.reference_value != 1 -%}
{{- variant.unit_price_measurement.reference_value -}}
{%- endif -%}
{{ variant.unit_price_measurement.reference_unit }}
</span>
{%- endcapture -%}
<span class="product-unit-price">
<span class="visually-hidden">{{ 'products.general.unit_price' | t }}</span>
<span>{{ variant.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
</span>
{%- endif -%}
</span>
</p>
{% if section.settings.product_vendor_enable %}
<p class="grid-product__vendor">{{ product.vendor }}</p>
{% endif %}
</a> -->

<a href="{{ product.url | within: collection }}" class="grid-product__meta">
<div class="grid-product__title">{{ product.title }}</div>
<div class="grid-product__price-wrap">
<span class="grid-product__price">
{% if on_sale %}
<span class="on-sale__regular-price"><s>{{ product.compare_at_price | money_without_trailing_zeros }}</s></span>
<span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
{% else %}
<span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
{% endif %}
{% if product.price_varies %}
<span{% if on_sale %} class="on-sale__price"{% endif %}>{{ product.price_min | money_without_trailing_zeros }}
<span class="icon-fallback-text">
<span class="icon icon-plus grid-product__price-min" aria-hidden="true"></span>
<span class="fallback-text">+</span>
</span></span>
{% else %}
<span{% if on_sale %} class="on-sale__price"{% endif %}>{{ product.price | money_without_trailing_zeros }}</span>
{% endif %}
</span>
</div>
{% if section.settings.product_vendor_enable %}
<p class="grid-product__vendor">{{ product.vendor }}</p>
{% endif %}
</a>

</div>
</div>

Kani
Shopify Partner
468 125 225

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

Kani_0-1659609536466.png

 

Hey!! ʕ ᵔᴥᵔ ʔ
Please click 'Like' and ' Accept as Solution' to encourage me to continue sharing my expertise. ♡
If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response. 🙂