Display Price Range for Products with Variants with different prices.

Excursionist
34 0 9

I've got items with variants that are priced differently. Unfortunately, the default only shows the lowest priced option on the collection page. So if I have two items, 1) White $33.00 and 2) Bronze $50 3) Handpainted $58.00, and the handpainted one is displayed in the collection, it shows as $33 until you click on it and get surprised with the $58.00. Ideally, any items with variables would display the price range like this: $33 - $58.

Any help would be greatly appreciated! 

1 Like
Excursionist
34 0 9

Can anybody help with this?

0 Likes
Astronaut
1925 0 379

It looks like you're using the Supply theme.  If that's correct, you can try the following.

Edit HTML/CSS and open Snippets/product-grid-item.liquid.  Look for the following block of code.

      <span class="h1 medium--left">
        {% include 'price' with product.price %}
      </span>

Change that to:

      <span class="h1 medium--left">
        {% if product.price_max > product.price %}
        {% include 'price' with product.price_min %} - {% include 'price' with product.price_max %}
        {% else %}
        {% include 'price' with product.price %}
        {% endif %}
      </span> 

I hope this helps. 

1 Like
Excursionist
34 0 9

Hi Alex, Thank you for your help. Yes I'm using Supply theme. I just tried your idea, and unfortunately, it does not seem to be the solution. This is the test item I'm working with. Two variants that should display on this collection page as $33-58 instead of just the lower priced variant of $33 (which is awkward when it's actually showing the $58 version.) http://realcatholicstuff.com/search?type=product&q=holy+family+font  

Any other ideas?

0 Likes
Excursionist
34 0 9

Still hoping someone will be able to help with this. It doesn't seem like something that should be difficult or impossible. Anyone? 

0 Likes
Shopify Partner
1 0 0

Hello Stephanie!

Alex's code works. I placed this code into collection page and it shows me min-max amount. I have a product 2 variants. And this code shows perfect result. Please have a look this attachment.

By the way which link you provided that's search page. And search page is different. place this code into "snippet -> search-result-grid.liquid" page. find out this line of code

 {% include 'price' with item.price %}

and change it with

{% if item.price_max > item.price %}
          {% include 'price' with item.price_min %} - {% include 'price' with item.price_max %}
          {% else %}
          {% include 'price' with item.price %}
          {% endif %}

Have enjoy!

 

0 Likes
Excursionist
34 0 9

Imtiaz & Alex, thank you so very much for your help with this solution! Yes, Alex's code worked perfectly for the collection page and Imtiaz's code was the answer for the search results. Thank you for taking the time to help with this. Wishing you both a very blessed New Year!

0 Likes
Highlighted
Tourist
22 0 1

Hello,
if you want to show price range for each product with differents prices for variants, you can try this APP.
This app show price range for each product in all collections.
In app configuration, you can set also format for displaying price range, for example like From $5.00 to $9.99 or $5.00 - $9.99

0 Likes
New Member
1 0 0

hello,

 

i have same problem but i use minimal theme version. could you please help me with that?

0 Likes