How can I display a price range for product variants on the grid?

[SKLearn]

Hello, I need help adding a price range on the product grid with products that have variants. 

https://474sports.org/collections/event

This is what our collection page is showing now

This is what we want it to show. 

 Ideally, it would be nice to show "lowest price variant - the highest price variant" which in this case would be "$125 - $500" 

[shreyhweb]

@SKLearn 

Here, you see the lowest variant price. if you want to show price range of product then you need to done by some custom coding. we can't explain here the code because its logical. so if you want to do this task then please contact us for fast communication. we are always here for your help. 

Thankyou for reaching us 🙂

[PaulNewton · Accepted solution]

That's an advanced customization in the dawn theme you'd need to modify the price.liquid snippet to show min and max prices through the card-product snippet which is what makes up each product in the collections grid of products.

https://shopify.dev/docs/api/liquid/objects/product#product-price_min 

https://shopify.dev/docs/api/liquid/objects/product#product-price_max 

https://github.com/Shopify/dawn/blob/main/snippets/card-product.liquid#L201 

https://github.com/Shopify/dawn/blob/main/snippets/price.liquid#L52 

If DIY'ing there should be existing topics through search. 

If you need this customization you can contact me directly for services.
Please provide context, examples: store url, theme name, post url(s) , or any further detail.
Contact Info in signature.

Good Hunting.

[lvalics]

I have solved like this

<span class="price-item price-item--regular">
  {% for product in collection.products %}
    {{ 'products.product.volume_pricing.prices_from' | t }}
    
    {% assign min_price = product.variants | map: 'price' | sort | first %}
    {% assign max_price = product.variants | map: 'price' | sort | last %}
    
    {% if min_price != max_price %}
      {{ min_price | money }} - {{ max_price | money }}
    {% else %}
      {{ min_price | money }}
    {% endif %}
    
    {% if template.name != 'collection' %}
      {{ money_price }}
    {% endif %}
  {% endfor %}
</span>

[Ameeta]

how can i get this service