Show highest price variant in collection pages in Symmetry Theme

[Vatiliotis]

Hello, this is a very standard question as other people have requested this type of help but none of the solutions work on my theme. I'm using the Symmetry theme and I'm looking to display the highest price variant on the collection page of some variants. Could someone please assist me with fixing this? I believe I need to change something in the price-range.liquid file but I am not sure. Thanks in advance!

[pawankumar]

Hi,
I hope you are doing good.
Can you please share the code of page-range snippet ?
Thanks!

[Vatiliotis]

Hi friend,

Thanks so much for the reply!

There is no page-range snippet in the code, there is a price-range snippet though, if that is the one i need to share. I will share it anyways, please let me know if this is not the snippet i need to share. Thanks again!

{%- liquid
assign uses_comma_decimals = false
assign currency_test_string = 101 | money_without_currency
if currency_test_string == '1,01'
assign uses_comma_decimals = true
endif
-%}
<div class="cc-price-range">
<div class="cc-price-range__input-row">
<div class="cc-price-range__input-container">
<span class="cc-price-range__input-currency-symbol">{{ cart.currency.symbol }}</span>
<input class="cc-price-range__input cc-price-range__input--min"
id="CCPriceRangeMin"
name="{{ filter.min_value.param_name }}"
{%- if filter.min_value.value -%}
{%- if uses_comma_decimals -%}
value="{{ filter.min_value.value | money_without_currency | remove: ' ' | remove: "'" | remove: '.' | replace: ',', '.' | round }}"
{%- else -%}
value="{{ filter.min_value.value | money_without_currency | remove: ' ' | remove: "'" | remove: ',' | round }}"
{%- endif -%}
{% endif %}
placeholder="0"
type="text"
inputmode="numeric"
pattern="[0-9]*"
step="10"
min="0"
{%- if uses_comma_decimals -%}
max="{{ filter.range_max | money_without_currency | remove: ' ' | remove: "'" | remove: '.' | replace: ',', '.' | round }}"
{%- else -%}
max="{{ filter.range_max | money_without_currency | remove: ' ' | remove: "'" | remove: ',' | round }}"
{% endif %}
aria-label="{{ 'collections.price_range.min_label' | t | escape }}" />
</div>
<div class="cc-price-range__input-container">
<span class="cc-price-range__input-currency-symbol">{{ cart.currency.symbol }}</span>
<input class="cc-price-range__input cc-price-range__input--max"
id="CCPriceRangeMax"
name="{{ filter.max_value.param_name }}"
{%- if filter.max_value.value -%}
{%- if uses_comma_decimals -%}
value="{{ filter.max_value.value | money_without_currency | remove: ' ' | remove: "'" | remove: '.' | replace: ',', '.' | round }}"
{%- else -%}
value="{{ filter.max_value.value | money_without_currency | remove: ' ' | remove: "'" | remove: ',' | round }}"
{% endif %}
{%- endif -%}
{%- if uses_comma_decimals -%}
placeholder="{{ filter.range_max | money_without_currency | remove: ' ' | remove: "'" | remove: '.' | replace: ',', '.' | round }}"
{%- else -%}
placeholder="{{ filter.range_max | money_without_currency | remove: ' ' | remove: "'" | remove: ',' | round }}"
{% endif %}
type="text"
inputmode="numeric"
pattern="[0-9]*"
step="10"
min="0"
{%- if uses_comma_decimals -%}
max="{{ filter.range_max | money_without_currency | remove: ' ' | remove: '.' | replace: ',', '.' | round }}"
{%- else -%}
max="{{ filter.range_max | money_without_currency | remove: ' ' | remove: ',' | round }}"
{% endif %}
aria-label="{{ 'collections.price_range.max_label' | t | escape }}" />
</div>
</div>

<div class="cc-price-range__bar">
<div class="cc-price-range__bar-inactive"></div>
<div class="cc-price-range__bar-active"></div>
<div class="cc-price-range__control cc-price-range__control--min"></div>
<div class="cc-price-range__control cc-price-range__control--max"></div>
</div>
</div>

[pawankumar]

Hi @Vatiliotis 
Thanks for sharing code snippet, this code does not show price, it is related to price filter
So, you can search for a snippet like price or you can see price code directly in collection template.
To show maximum price, you can use code like this
<span class="money">{{ product.price_max | money }}</span>
Where product is product variant on the template, it can card_product in your case, if yes
you can try this

<span class="money">{{ card_product .price_max | money }}</span>

I hope, it is useful to you
Thanks!

[Jahid-KlinKode]

Hey @Vatiliotis, explore a solution for showcasing variant names and prices on Shopify collection pages in this YouTube video: