Impulse Theme product-grid-item show best variant discount

Store Design
, , ,
1

Hi,

I have different discounts for each variant and I want to display the best one, but by default, Shopify displays the lowest regular price against the lowest variant’s price. In my case, I need to display the 50% discount on the grid page.

Variant 1: $7.79 vs $12.99 (40% Off)

Variant 2: $8.39 vs $13.99 (40% Off)

Variant 3: $7.49 vs $14.99 (50% Off)

But Shopify shows: $7.49 vs $12.99 ( Variant 3 special price vs Variant 1 regular price → 42% Off)

I think I will need to edit the code to compare and select the best variant discount.

My shopify: https://animalrepublic.cl/collections/50-black

1 Like
2

You’ll need to adjust the theme’s product grid code to calculate and display the highest discount percentage. Head into your theme files and look for the section where product prices are displayed (likely in the product-grid-item template). You’ll need to write a script or modify the existing one to loop through the variants, calculate each discount percentage, and then display the highest one. If you’re not comfortable with liquid code and JavaScript, consider hiring a developer.

3

Hi @Cruchaga , modify the Shopify theme code to display the best discount instead of the default lowest price comparison. Here are the steps–

In the theme Edit the code and in the file handling product grids and look for code below–

{% for variant in product.variants %}

We need to Modify the logic to find and display the highest discount percentage instead of just the lowest price.

Replace the price display code with this logic;

{% assign best_discount = 0 %}
{% assign best_variant = null %}

{% for variant in product.variants %}
{% if variant.compare_at_price and variant.price %}
{% assign discount = variant.compare_at_price | minus: variant.price | times: 100 | divided_by: variant.compare_at_price %}
{% if discount > best_discount %}
{% assign best_discount = discount %}
{% assign best_variant = variant %}
{% endif %}
{% endif %}
{% endfor %}

{% if best_variant %}

{{ best_variant.price | money }}


{{ best_variant.compare_at_price | money }}


({{ best_discount }}% Off)

{% endif %}

Let me know if this works for you.