I would like to display the discount percentage on the top right corner of the images in the feature

Store Design
1

I would like to display the discount percentage on the top right corner of the images in the featured collection section.

2

Hello @Shivani3

To display the percentage off, you may need to include this code in your product card.

{% if product.compare_at_price > product.price %}
{% assign discount_percentage = product.compare_at_price | minus: product.price%}
{% assign discount_percentage = discount_percentage | times: 100 %}
{% assign discount_percentage = discount_percentage | divided_by: product.compare_at_price %}

{{ discount_percentage }}% off

{% endif %}

prakashVt_0-1709619256604.png
prakashVt_0-1709619256604.png3013×1529 217 KB

In the example above, I added the same code on the PDP page. You may need to apply CSS based on your needs. If you require any assistance, please let me know.

3

I would like to have it displayed on the homepage instead of the product page for the dawn theme.

4

Hi @Shivani3

Dan here from Ryviu: Product Reviews & QA app.

Please go to your Online store > Theme > Edit code > card-product.liquid file, find this line of code.

{{- 'products.product.on_sale' | t -}}

Replace this code below this and set the position of your sale badge to the top right.

{%- assign percent = card_product.compare_at_price | minus: card_product.price | times: 100 | divided_by: card_product.compare_at_price | round -%}
Save {{ percent }}%