How To Show Max Price On Collections Page

[Pavlakis]

Hello all,

How can I get it to show the max price (from the variants available in the product) in the collections page?

E.g. if a product page has 2 items, one selling for $10 and another for $20, by default it shows $10 under the product in the collections page, whereas i need it to show $20.

Thank you in advance.

[GemPages]

Hello @Pavlakis

It’s GemPages support team and glad to support you today.

Please use the following code, put in the collection template you want:

    {% if product.variants.size !=1 %} 
      MAX: {{product.price_max | money}}
    {% endif %}

Hope my solution can work and support you!

Kind & Best regards!

GemPages Support Team.

[Pavlakis]

Thank you very much for the info guys, but as i’m not an expert in coding, could you please clarify in which folder exactly i should go and where to place this code? Or what other code to replace? (if such is the case)

Thank you!

[GemPages]

@Pavlakis

Let me know which theme you use
and the location you want to put the code (link page and screenshot location)

[Pavlakis]

Its the ELLA theme from Halo themes, bought it off from Themeforest.

If you go for example in this link below, you can see that the price it displays is 15.90, per product, but if you open the product page the price is either 27.90 of 29.90, and 15.90 is only a complementary product of the one i’m actually selling on the photo.

https://bit.ly/PaidikoVasileio-Magio

Thank you!

[EcomGraduates]

Hello there

To show the maximum price of products on a collections page in a Shopify store, you can follow these steps:

1. In the Shopify admin, go to the “Online Store” section and click on “Themes.”
2. Find the theme you want to edit and click on the “Actions” dropdown, then select “Edit code.”
3. In the “Sections” directory, find the “collection-template.liquid” file and click on it to open it for editing.
4. Find the area of the template where you want to display the maximum price. You can use the for loop that iterates over the collection’s products to find the maximum price:

{% for product in collection.products %}
  {% assign max_price = product.price | plus: max_price %}
{% endfor %}

{% assign max_price = max_price | divided_by: collection.products.size %}

1. Use the max_price variable to display the maximum price on the page. For example:

Maximum price: {{ max_price | money }}

1. Save your changes and refresh your store to see the maximum price displayed on the collections page.

hope this helps!

[Pavlakis]

Thank you very much for the code, but i’m stuck at point 4 you say “Find the area of the template where you want to display the maximum price.”, but i have no idea where to place this. In that page the code is as per below (and then you also say “Use the max_price variable to display the maximum price on the page.”, where do i put that?) :

{% assign column = column | default: section.settings.column %}
{% assign limit = limit | default: section.settings.limit %}

{% if settings.breadcrumb_layout == ‘top’ %}
{% render ‘breadcrumb’ %}
{% endif %}

{% if current_tags == blank %}
{% assign has_refined = false %}
{% else %}
{% assign has_refined = true %}
{% endif %}

{% paginate collection.products by limit %}

× {{ 'general.accessibility.close_modal' | t }}

{{ collection.title | upcase }}

{% if collection.description != blank %}

{{ collection.description }}

{% endif %}

{% if section.settings.enable_filter or section.settings.enable_sort %}

{% if section.settings.enable_filter %}

{{ 'collections.filters.title_tags' | t }}

{{ 'collections.filters.refined_by' | t }}

{{ 'collections.filters.clear_all' | t }}

{% for t in current_tags %} {% assign tag = t | strip %} {% assign tag_value = tag | handleize %}
• {{ tag}}  ×
{% endfor %}

{% for block in section.blocks %} {% if block.type == 'filter_text' %}

{{ block.settings.title }}

{% assign tags = block.settings.list_tags | split: ',' %} {% assign collection_tags = collection.all_tags %} {% if current_tags != blank %} {% assign collection_tags = collection.tags %} {% endif %} {% for t in tags %} {% assign tag = t | strip %} {% assign tag_value = tag | handleize %} {% assign current_tags_value = current_tags | handleize %} {% if collection_tags contains tag %}

{{ tag }}

{% endif %} {% endfor %}

{% endif %} {% if block.type == 'filter_color' %}

{{ block.settings.title }}

{% assign tags = block.settings.list_tags | split: ',' %} {% assign collection_tags = collection.all_tags %} {% if current_tags != blank %} {% assign collection_tags = collection.tags %} {% endif %} {% for t in tags %} {% assign tag = t | strip %} {% assign tag_value = tag | handleize %} {% assign current_tags_value = current_tags | handleize %} {% if collection_tags contains tag %}

{{ tag }}

{% endif %} {% endfor %}

{% endif %} {% endfor %}

{% endif %} {% if section.settings.enable_sort %}

{%- assign sort_by = collection.sort_by | default: collection.default_sort_by -%} {{ 'collections.sorting.title' | t }}

{% for option in collection.sort_options %}

{{ option.name }}

{% endfor %}

{% endif %}

{{ 'general.sidebar.title' | t }}:

{% endif %}

{% for product in collection.products %}

{% render 'product-card-grid', product: product, serial: forloop.index, compare: settings.enable_compare_product %}

{% else %} {% if collection.handle == 'all' and collection.all_vendors.size == 0 and collection.all_types.size == 0 %} {% for i in (1..limit) %}

{% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %} {{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}

{{ 'homepage.onboarding.product_title' | t }}

{% render 'product-price', variant: nil %}

{% endfor %} {% else %} {%- assign is_empty_collection = true -%} {% endif %} {% endfor %}

{% if section.settings.pagination_type == 'infinite_scroll' %} {% if paginate.next.is_link %}

show more

{% endif %} {% else %} {% if paginate.pages > 1 %} {% render 'pagination-2', paginate: paginate %} {% endif %} {% endif %}

{% if settings.enable_compare_product %}

{{ 'general.compare.title' | t }} ()

{% render 'compare-products-popup' %} {% endif %}

{% endpaginate %}

{% schema %}
{
“name”: “Collection Content”,
“settings”: [
{
“type”: “header”,
“content”: “Layout”
},
{
“type”: “range”,
“id”: “column”,
“label”: “Column”,
“default”: 4,
“min”: 1,
“max”: 6,
“step”: 1
},
{
“type”: “range”,
“id”: “limit”,
“label”: “Limits product per page”,
“default”: 12,
“min”: 4,
“max”: 48,
“step”: 4
},
{
“type”: “header”,
“content”: “Filter & Sorting”
},
{
“type”: “checkbox”,
“id”: “enable_filter”,
“label”: “Enable filter”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “enable_sort”,
“label”: “Enable sorting”,
“default”: true
},
{
“type”: “header”,
“content”: “Pagination”
},
{
“type”: “radio”,
“id”: “pagination_type”,
“label”: “Select Pagination to show”,
“default”: “pagination”,
“options”: [
{
“value”: “pagination”,
“label”: “Pagination”
},
{
“value”: “infinite_scroll”,
“label”: “Show more”
}
]
}
],
“blocks”: [
{
“type”: “filter_text”,
“name”: “Filter Text”,
“settings”: [
{
“type”: “text”,
“id”: “title”,
“label”: “Heading”
},
{
“type”: “textarea”,
“id”: “list_tags”,
“label”: “List Tags”,
“info”: “Separate by a comma, i.e "Dincidunteros, Nectellus, Solutmades".”
}
]
},
{
“type”: “filter_color”,
“name”: “Filter Color”,
“settings”: [
{
“type”: “text”,
“id”: “title”,
“label”: “Heading”
},
{
“type”: “textarea”,
“id”: “list_tags”,
“label”: “List Tags”,
“info”: “Separate by a comma, i.e "Dincidunteros, Nectellus, Solutmades".”
}
]
}
]
}
{% endschema %}

[Vishnu08]

Hey, I have the same problem. I’m using the refresh theme and i want it to display the max price under the product name in the collection.

I’m not really sure where to paste the code.

Please help

[mode0192]

Hello, Vishnu08

For Refresh theme you can follow those steps.

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

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”.

[MJ22]

This just made the price dissapear.. I use dawn

[Gourav2]

Hello,

I’m Working on Stilleto1.8.0 theme and facing the same isseue so can u plz tell me how can i do it in this theme.

Plz Help.

[Jahid-KlinKode]

Hi @Pavlakis , learn how to display variant names and prices on Shopify collection pages with this helpful video:

Display Variants Name and Price on Collection Pages in Shopify

[nikola123]

Did you manage to fix it?

[nikola123]

I think I solved it:

A few lines above this code
if target == product and product.price_varies assign money_price = ‘products.product.price.from_price_html’| t: price: money_price endif
assign compare_at_price = target.compare_at_price

You need to replace the current variables with this

assign price = target.price_max | default: 1999

assign money_price = price_max | money

[lvalics_1]

I have solved like this to show on collection page.

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