Need to show highest priced variant in collections on Supply Theme

Topic summary

Core Issue:
Merchants using Shopify’s Supply theme (and others) face a pricing display problem: collection pages show the lowest variant price, but clicking through reveals higher-priced in-stock variants. This creates customer frustration and trust issues.

Requested Solutions:

  • Display “Starting at $X” text
  • Show the highest-priced variant instead
  • Display specific variant prices (e.g., second-lowest option)

Technical Solutions Provided:

For Supply/Dawn themes:

  • Replace product.price_min with product.price_max in product-grid-item.liquid
  • Modify price.liquid by changing t: price: money_price to t: price: money_price_max
  • Remove “From” prefix via theme language settings

Alternative approach:

  • Replace {% render 'price'... %} with {{ card_product.variants.first.price | money }} in card-product.liquid
  • Use product.variants[1].price to target specific variant positions

Ongoing Challenges:

  • Solutions break “sort by price” functionality (sorts by original min price despite displaying max)
  • Displaying out-of-stock variant prices when they’re the highest
  • Theme-specific code variations require customization

Status: Multiple working solutions confirmed across Dawn, Trade, and Turbo themes, though sorting issues remain unresolved.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.

We use the Supply theme from Shopify and we have different variants of products all with different prices. When customers are looking at the products prices on the collections page, each product shows the price for the lowest cost variant, however, when they click on the product it shows them the variant that is in stock and the price changes to that variant, which is usually higher. This is making us look bad and customers are getting upset because it looks like the price is changing for the same product. How can I change the price shown on the collections page to either say Starting at $$$$ or show the highest cost variant instead of the lowest cost. Either one of the options would work for me. Please help, thank you!

1 Like

I can solve this using a liquid code but need to see what it looks like now in your theme, Can I see your collection.liquid first code?

Thank you! Here it is:

{% comment %}
The contents of the collection.liquid template can be found in /sections/collection-template.liquid
{% endcomment %}

{% section ‘collection-template’ %}

I mean the actual code:
Go to section and click on collection-template.liquid

I need to see the code wrote there. I will be a lots of code

@KevinKarma ,I don’t want to take over this thread, but I’m looking to do the same thing. Been trying for hours to figure this out. Any help would be amazing.

Collection-template.liquid

{%- capture collection_header -%}

{{ collection.title }}

{%- unless collection.description == blank -%}

{{ collection.description }}

{%- endunless -%}
{%- endcapture -%}

{%- capture collection_sort -%}

sort {{ 'collections.sorting.title' | t }}

{%- assign sort_by = collection.sort_by | default: collection.default_sort_by -%}

{%- endcapture -%}

{%- if collection.handle == ‘all’ or collection.handle == ‘frontpage’ -%}
{{ collection_header }}
{%- else -%}
{%- unless settings.show_hero and collection.image -%}
{{ collection_header }}
{%- endunless -%}
{%- endif -%}

{%- if section.settings.collection_sort_enable and collection.products.size > 0 -%}
{%- assign show_collection_sort = true -%}
{%- else -%}
{%- assign show_collection_sort = false -%}
{%- endif -%}

{%- if content_for_header contains ‘debutify’ and settings.dbtfy_collection_filters and settings.dbtfy_collection_filters_button_title != blank -%}
{%- if collection.products.size > 0 -%}

{%- if settings.dbtfy_collection_filters_button_icon -%} {{ settings.dbtfy_collection_filters_button_icon }} {%- endif -%}

{{ settings.dbtfy_collection_filters_button_title }}

{%- if show_collection_sort -%}

{{ collection_sort }}
{%- endif -%}
{%- endif -%} {%- else -%} {%- if collection.all_tags.size > 0 or section.settings.collection_sort_enable -%}
{%- if collection.all_tags.size > 0 -%} {%- assign show_collection_tags = true -%}

{%- unless section.settings.collection_tags_enable -%}
{%- assign show_collection_tags = false -%}
{%- endunless -%}

{%- if section.settings.collection_multiple_tags_filtering_enable -%}
{%- assign tag_stack = true -%}
{%- assign tag_collection = collection -%}
{%- else %}
{%- assign tag_stack = false -%}
{%- assign tag_collection = collections[collection.handle] -%}
{%- endif -%}

{%- if section.settings.collection_tags_count -%}
{%- assign tag_count = true -%}
{%- else -%}
{%- assign tag_count = false -%}
{%- endif -%}

{%- if show_collection_tags -%}

{%- if section.settings.tag_selector == 'button' -%}
  • filter_alt {{ 'collections.sorting.title_tags' | t }}
  • {%- if tag_count -%}
    {%- assign tag_count_formatted = collection.products_count | prepend: " (" | append: “)” -%}
    {%- else -%}
    {%- assign tag_count_formatted = “” -%}
    {%- endif -%}

  • {{ 'collections.general.all_of_collection' | t | append: tag_count_formatted }}
  • {%- for tag in collection.all_tags -%}
    {%- if tag_count -%}
    {%- assign tag_count = 0 -%}

    {%- for product in tag_collection.products -%}
    {%- if product.tags contains tag -%}
    {%- capture tag_count -%}{{ tag_count | plus: 1 }}{%- endcapture -%}
    {%- endif -%}
    {%- endfor -%}

    {%- assign tag_count_formatted = tag_count | prepend: " (" | append: “)” -%}
    {%- else -%}
    {%- assign tag_count_formatted = “” -%}
    {%- endif -%}

    {%- if current_tags contains tag -%}

  • {{ tag | append: tag_count_formatted | link_to_remove_tag: tag }}
  • {%- else -%} {%- if tag_stack -%} {%- unless tag_count == 0 -%}
  • {{ tag | append: tag_count_formatted | link_to_add_tag: tag }}
  • {%- endunless -%} {%- else -%}
  • {{ tag | append: tag_count_formatted | link_to_tag: tag }}
  • {%- endif -%} {%- endif -%} {%- endfor -%}
{%- else -%} filter_alt {{ 'collections.sorting.title_tags' | t }} {%- endif -%}
{%- endif -%} {%- endif -%}

{%- if show_collection_sort -%}

{{ collection_sort }}
{%- endif -%}
{%- endif -%} {%- endif -%}

{%- assign limit = section.settings.desktop_grid | times: section.settings.rows -%}

{%- paginate collection.products by limit -%}
{%- capture grid_item_width -%} {%- render 'product-width' -%} {%- endcapture -%}

{%- for product in collection.products -%}
{%- capture current -%}{% cycle 1, 2, 3, 4, 5, 6 %}{%- endcapture -%}
{%- render ‘product-grid-item’ with product as product, grid_item_width: grid_item_width, current: current -%}
{%- else -%}
{%- if collection.handle == ‘all’ -%}
{%- assign emptyState = true -%}
{%- for i in (1..limit) -%}
{%- capture current -%}{% cycle 1, 2, 3, 4, 5, 6 %}{%- endcapture -%}
{%- render ‘product-grid-item’, emptyState: emptyState, current: current -%}
{%- endfor -%}
{%- else -%}

{{ 'collections.general.no_matches' | t }}

{{ 'cart.general.continue_browsing_html' | t }}
{%- endif -%} {%- endfor -%}

{%- render “pagination” with paginate as paginate -%}
{%- endpaginate -%}

{% schema %}
{
“name”: “Collection pages”,
“class”: “collection-section”,
“settings”: [
{
“type”: “header”,
“content”: “Sorting & Filtering”
},
{
“type”: “checkbox”,
“id”: “collection_tags_enable”,
“label”: “Enable tag filtering”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “collection_tags_count”,
“label”: “Show tags count”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “collection_multiple_tags_filtering_enable”,
“label”: “Enable multiple tags filtering”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “collection_sort_enable”,
“label”: “Enable sorting”,
“default”: true
},
{
“type”: “select”,
“id”: “tag_selector”,
“label”: “Tag picker type”,
“default”: “button”,
“options”: [
{
“value”: “button”,
“label”: “Button”
},
{
“value”: “select”,
“label”: “Dropdown”
}
]
},
{
“type”: “header”,
“content”: “Grid”
},
{
“type”: “select”,
“id”: “rows”,
“label”: “Number of rows”,
“default”: “4”,
“options”: [
{
“value”: “2”,
“label”: “2”
},
{
“value”: “3”,
“label”: “3”
},
{
“value”: “4”,
“label”: “4”
},
{
“value”: “5”,
“label”: “5”
},
{
“value”: “6”,
“label”: “6”
},
{
“value”: “7”,
“label”: “7”
},
{
“value”: “8”,
“label”: “8”
},
{
“value”: “9”,
“label”: “9”
},
{
“value”: “10”,
“label”: “10”
}
]
},
{
“type”: “select”,
“id”: “desktop_grid”,
“label”: “Products per row (desktop)”,
“default”: “4”,
“options”: [
{
“value”: “2”,
“label”: “2”
},
{
“value”: “3”,
“label”: “3”
},
{
“value”: “4”,
“label”: “4”
}
]
},
{
“type”: “select”,
“id”: “mobile_grid”,
“label”: “Product per row (mobile)”,
“default”: “2”,
“options”:[
{
“value”: “1”,
“label”: “1”
},
{
“value”:“2”,
“label”: “2”
}
]
}
]
}
{% endschema %}

Hi John,

Sorry for the late reply, after looking at your collection file, I see it is further split into another file as well. I see code for each product is into “product-grid-item.liquid” file. If you can post the code for that file I might be able to help if it is not further split into other files.

Also if you see price.liquid, paste those too. It might help me understand better.

Here’s the code for product.grid-item.liquid (I don’t see a template or anything for price.liquid.

{% assign has_color_swatches = false %}

{%- if content_for_header contains ‘debutify’ and settings.dbtfy_color_swatches -%}
{%- if settings.dbtfy_color_swatches_grid != blank -%}
{%- if product.available and product.variants.size > 1 -%}
{% assign has_color_swatches = true %}
{%- endif -%}
{%- endif -%}
{%- endif -%}

{%- if emptyState -%}
{%- assign product_link = ‘/admin/products’ -%}
{%- assign vendor = ‘home_page.onboarding.product_vendor’ | t -%}
{%- assign title = ‘home_page.onboarding.product_title’ | t -%}
{%- assign compare_at_price = 2999 -%}
{%- assign price = 1999 -%}
{%- else -%}
{%- assign variant = product.first_available_variant -%}
{%- assign product_link = product.url | within: collection -%}
{%- assign vendor = product.vendor -%}
{%- assign title = product.title -%}

{%- assign compare_at_price = product.compare_at_price -%}
{%- assign price = product.price -%}
{%- endif -%}

{%- if compare_at_price > price -%}
{%- assign on_sale = true -%}
{%- else -%}
{%- assign on_sale = false -%}
{%- endif -%}

{%- if product.available or emptyState -%}
{%- assign sold_out = false -%}
{%- else -%}
{%- assign sold_out = true -%}
{%- endif -%}

{%- if settings.grid_product_hover and product.images.size > 1 -%}
{%- assign image_hover = true -%}
{%- else -%}
{%- assign image_hover = false -%}
{%- endif -%}

{%- assign variant = product.selected_or_first_available_variant -%}

{%- if product.images != blank -%}
{{ product.featured_image.alt }}

{%- if image_hover -%}

{{ product.images[1].alt }}
{%- endif -%} {%- elsif product.images.size < 1 or emptyState -%} {{ 'product-' | append: current | placeholder_svg_tag: 'card-image placeholder-svg' }} {%- endif -%}

{%- unless settings.tag_placement == ‘none’ -%}
{%- if sold_out -%}

watch_later

{{ ‘products.product.sold_out_html’ | t }}


{%- elsif on_sale -%}
{%- capture highest_discount -%}
{%- assign max_price = 0 -%}

{%- for variant in product.variants -%}
{%- if variant.compare_at_price > variant.price -%}
{%- if settings.sale_type == ‘amount’ -%}
{% assign discount_price = variant.compare_at_price | minus: variant.price %}
{%- elsif settings.sale_type == ‘percentage’ -%}
{% assign discount_price = variant.compare_at_price | minus: variant.price | times: 100 | divided_by: variant.compare_at_price %}
{%- endif -%}

{%- if discount_price > max_price -%}
{%- assign max_price = discount_price -%}
{%- endif -%}
{%- endif -%}
{%- endfor -%}

{%- if settings.sale_type == ‘amount’ -%}
{{ max_price | money }}
{%- elsif settings.sale_type == ‘percentage’ -%}
{{ max_price }}%
{%- endif -%}
{%- endcapture -%}

local_offer {{ 'products.general.save_html' | t: saved_amount: highest_discount }} {%- endif -%} {%- endunless -%}

{%- unless emptyState -%}
{%- render “dbtfy-quick-view” with product as product -%}
{%- render “dbtfy-wish-list” with product as product -%}
{%- endunless -%}

{%- unless emptyState -%}
{%- if product != blank -%}
{%- render “dbtfy-collection-addtocart” with product as product, sold_out: sold_out -%}
{%- endif -%}
{%- endunless -%}

{%- if has_color_swatches -%} {%- render "dbtfy-color-swatches" with product as product, type: 'product_grid' -%} {%- endif -%}

{{ title }}

{%- if settings.review_badge_product_grid -%}
{%- unless emptyState -%}
{%- render “review-badge” with product as product, position: “product_grid” -%}
{%- endunless -%}
{%- endif -%}

{%- if settings.dbtfy_color_swatches -%} {%- if product.price_varies and emptyState == false -%} {{ product.price_min | money }} {%- else -%} {{ price | money }} {%- endif -%} {%- else -%} {%- if product.price_varies and emptyState == false -%} {{ product.price_min | money }} + {%- else -%} {{ price | money }} {%- endif -%} {%- endif -%}   {%- if on_sale -%} {{ compare_at_price | money }} {%- else -%} {%- endif -%}

{%- if variant.available and variant.unit_price_measurement -%}
{%- capture unit_price_separator -%}
/ {{ ‘general.accessibility.unit_price_separator’ | t }} 
{%- endcapture -%}

{%- capture unit_price_base_unit -%}

{%- if variant.unit_price_measurement.reference_value != 1 -%}
{{- variant.unit_price_measurement.reference_value -}}
{%- endif -%}
{{ variant.unit_price_measurement.reference_unit }}

{%- endcapture -%}

{{ ‘products.general.unit_price’ | t }}
{{ variant.unit_price | money }}{{- unit_price_separator -}}{{- unit_price_base_unit -}}

{%- endif -%}

{%- if settings.grid_product_vendor -%}

{{ vendor }}

{%- endif -%}
{%- if settings.dbtfy_sales_countdown -%} {%- endif -%}

let see this will work:

  1. find ALL the following line of code:

{{ product.price_min | money }}

  1. replace with following:
    {{ product.price_max | money }}

*** You will need to do above action two times as there is two line to replace **********

@KevinKarma , I only see that line of code 1 time. Where is the second place that you are seeing this?

my mistake, just one

I am having the same issue, but I can’t seem to find the line of code you found here. Possibly just a difference of theme, but if you are still out there helping people… I could use help with this too!

1 Like

Hello, Aharte

I faced the same problem in my theme but found a solution for it.

1- Online Store > Themes > Edit code > search for “price.liquid” you will find this code line in it

if target == product and product.price_varies
    assign money_price = 'products.product.price.from_price_html'| t: price: money_price
  endif

you can easily change the

t: price: money_price

with

t: price: money_price_max
  • t: means the translation of {{ price }} *

2- Now you will find the price is now for the most expensive variant. but you will notice the price is preceded by the word “From”. To remove this word go to Online Store > Themes > three dots beside Customize > Edit default theme content. Now search for “From {{ price }}” and remove the word “From”.

1 Like

This is such a great thread - and exactly what I’m looking for.

I have 4 x price variants for each of my product. They look like the attached picture.

I want to display the 7 day price - so the second lowest option. Is there any way of doing this, or am I limited to min and max?

Thanks in advance :folded_hands:

Hi Ella_gaskell,
In your case try following code:
{{ product.variants[1].price | money }}

product.variants returns all the variant of your product and [index] will point to which variants you want to display (index 0 is equals to first variants)

Hello, I’ve followed pretty much every options that are on this thread. I’ve tried telling that I want the max priced item, but on the website, the prices just disapear. Could someone please help? I can attach the code if needed. Thanks!

You can also follow these steps:

  • Step 1: Go to Online store > Themes > Actions > Edit code.

  • Step 2: Go to snippets > card-product.liquid and look for
    Code: {% render ‘price’, product: card_product, price_class: ‘’, show_compare_at_price: true %}

  • Step 3: Replace this code with

Code: {{ card_product.variants.first.price | money }}

** In case you want to include the currency code in your code replacement, you can modify it like this:

Code: {{ card_product.variants.first.price | money_with_currency }}

Thank you and good luck.

3 Likes

Thank you so much!!! I’ve been on that problem for a month. Dropped de project for two weeks because i had anger issues with the website haha. Now i’ve done it! I’m so happy!!!

This one works perfectly. Clients can see the main item price, which is exactly what they need in 99,99% of cases. Thank you for the solution! :slightly_smiling_face:

Hi @ , check out the YouTube tutorial for displaying variant names and prices on Shopify collection pages.

Hi, Mode I tried this and works great, except i have variables that are out of stock and their price is higher than the variant thats in stock. (So now my products are showing a price of a variant thats out of stock). How can I add a variable in the code, so it displays the highest price of the available variants?

Thank you so much.