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

Solved

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

SKLearn
Shopify Partner
5 0 0

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

Screenshot 2023-05-09 at 11.53.52 AM.png

 

This is what we want it to show. 

 

Screenshot 2023-05-09 at 11.50.35 AM.png

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

 

 

Accepted Solution (1)

PaulNewton
Shopify Partner
6464 588 1373

This is an 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.

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


View solution in original post

Replies 4 (4)

shreyhweb
Shopify Partner
633 111 115

@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 🙂

- If You Find Our Solution Helpful Please Like And Mark As Accepted!
- Sip, savor, and support – your Coffee Tip helps us keep coding.❤️
- If You Want To Further Discussion. Then Contact - info@shreyhsoftsolutions.com

PaulNewton
Shopify Partner
6464 588 1373

This is an 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.

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


lvalics
Visitor
3 0 0

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
Visitor
1 0 0

how can i get this service