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

Store Design
,

Topic summary

Goal: display a price range (lowest–highest) for products with variants on the collection (grid) page.

Current state: collection grid shows a single price (typically the lowest). Screenshots provided to illustrate current vs. desired display.

Proposed approaches:

  • Dawn theme customization: edit snippets/card-product.liquid and snippets/price.liquid to surface product.price_min and product.price_max (Shopify Liquid objects). Links to Shopify docs and Dawn code lines were provided.
  • Alternative Liquid logic: derive min/max by mapping variant prices, sorting, and outputting “min – max” using the money filter; if both are equal, show a single price. Optional translation string (products.product.volume_pricing.prices_from) noted.

Notes:

  • Liquid is Shopify’s templating language; Dawn is Shopify’s default theme. This is not a built‑in setting and requires custom code.
  • Images are supportive for understanding the desired layout but not required to implement the change.

Status and next steps:

  • No final resolution; viable DIY directions and a sample snippet were shared.
  • Multiple offers for paid assistance; a participant asked how to obtain the service, indicating the thread remains open/ongoing.
Summarized with AI on January 2. AI used: gpt-5.
1

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
Screenshot 2023-05-09 at 11.53.52 AM.png1329×628 83 KB

This is what we want it to show.

Screenshot 2023-05-09 at 11.50.35 AM.png
Screenshot 2023-05-09 at 11.50.35 AM.png1436×759 114 KB

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

2

@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 :slightly_smiling_face:

3

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.

4

I have solved like this


  {% 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 %}
5

how can i get this service