I am looking for someone who can help me fix an issue with my store theme where it’s showing the lowest variant price for a product in the collection pages instead of the highest. I have edited the price.liquid file using a guide but hasn’t seemed to change anything and I cannot find anything on the edit theme section for the collection page. Hope someone can help here.
Hey @GamesRealm Welcome to Shopify Community can you please share the Website URL and also share the screen shoot that what you want to edit
Hello Mustafa, thanks for the reply. The URL to the direct page so you can see the issue is Pokemon Singles – Games Realm
If you look at the first card that shows up, Conkeldurr 65/101, it shows $2 which is the lowest variant of poor and not available in stock. The highest available in stock is Excellent for $2.40 but the link above shows it for $2.
I then went to the price.liquid to change the code as instructed in a shopify guide, the code of the current price.liquid is below…
{%- comment -%}
Renders a list of product's price (regular, sale)
Accepts:
- product: {Object} Product Liquid object (optional)
- use_variant: {Boolean} Renders selected or first variant price instead of overall product pricing (optional)
- show_badges: {Boolean} Renders 'Sale' and 'Sold Out' tags if the product matches the condition (optional)
- price_class: {String} Adds a price class to the price element (optional)
Usage:
{% render 'price', product: product %}
{%- endcomment -%}
{%- liquid
if use_variant
assign target = product.selected_or_first_available_variant
else
assign target = product
endif
assign compare_at_price = target.compare_at_price
assign price = target.price | default: 1999
assign available = target.available | default: false
if settings.currency_format_enable
assign money_price = price | money_with_currency
else
assign money_price = price | money
endif
if target == product and product.price_varies
assign money_price = 'products.product.price.from_price_html' | t: price: money_price
endif
-%}
<div class="price
{%- if price_class %} {{ price_class }}{% endif -%}
{%- if available == false %} price--sold-out {% endif -%}
{%- if compare_at_price > price %} price--on-sale {% endif -%}
{%- if product.price_varies == false and product.compare_at_price_varies %} price--no-compare{% endif -%}
{% if price_style == '2' %} price-style-2{% endif %}">
<dl>
{%- comment -%}
Explanation of description list:
- div.price__regular: Displayed when there are no variants on sale
- div.price__sale: Displayed when a variant is a sale
- div.price__availability: Displayed when the product is sold out
{%- endcomment -%}
<div class="price__regular">
{%- comment -%}
<dt>
<span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.regular_price' | t }}</span>
</dt>
{%- endcomment -%}
<dd class="price__last"><span class="price-item price-item--regular">{{ money_price }}</span></dd>
</div>
<div class="price__sale{% if settings.show_saved_price %} show_saved_price{% endif %}">
{%- comment -%}
<dt class="price__compare">
<span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.regular_price' | t }}</span>
</dt>
{%- endcomment -%}
<dd class="price__compare" data-compare="{{compare_at_price}}"><s class="price-item price-item--regular">{% if settings.currency_format_enable %}{{ compare_at_price | money_with_currency }}{% else %}{{ compare_at_price | money }}{% endif %}</s></dd>
{%- comment -%}
<dt>
<span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.sale_price' | t }}</span>
</dt>
{%- endcomment -%}
<dd class="price__first{% if settings.show_price_percent %} price_percent{% endif %}" data-first="{{price}}"><span class="price-item price-item--sale">{{ money_price }}</span></dd>
{%- if settings.show_saved_price and price != nil and price != blank and compare_at_price != nil and compare_at_price != blank -%}
{%- assign saved_price = compare_at_price | minus: price | money -%}
<div class="price__saved"><span class="price-item price-item--saved">{{'products.product.price.saved_price_html' | t: price: saved_price }}</span></div>
{%- endif -%}
{%- if settings.show_price_percent -%}
<dd class="price__label_sale price__label_percent">
{%- liquid
assign list_compare = product.variants | where: 'compare_at_price'
assign compare = 0
for variant in list_compare
assign saving = variant.compare_at_price | minus: variant.price | times: 100.0 | divided_by: variant.compare_at_price | round
if saving > compare
assign compare = saving
endif
endfor
if compare < 1
assign compare = product.compare_at_price_max | minus: product.price_max | times: 100.0 | divided_by: product.compare_at_price_max | round
endif
-%}<span class="label_sale label_sale_percent">(-{{ compare | append: '%'}})</span>
</dd>
{%- endif -%}
</div>
<small class="unit-price caption{% if available == false or product.selected_or_first_available_variant.unit_price_measurement == nil %} hidden{% endif %}">
<dt class="visually-hidden">{{ 'products.product.price.unit_price' | t }}</dt>
<dd class="price__first"><span>{{- product.selected_or_first_available_variant.unit_price | money -}}</span><span aria-hidden="true">/</span><span class="visually-hidden"> {{ 'accessibility.unit_price_separator' | t }} </span><span>{%- if product.selected_or_first_available_variant.unit_price_measurement.reference_value != 1 -%}
{{- product.selected_or_first_available_variant.unit_price_measurement.reference_value -}}{%- endif -%} {{ product.selected_or_first_available_variant.unit_price_measurement.reference_unit }}</span></dd>
</small>
</dl>
</div>
Hope this helps.
Hey @GamesRealm try this one by follow these steps
open shopify admin —> online store–>themes → edit code —>go to the file search bar and search Snippets folder and then find the price.liquid then delete the whole content then paste the code and then save it if the code is work then don’t forget to like and mark as solution
{%- comment -%}
Renders a list of product's price (regular, sale)
Accepts:
- product: {Object} Product Liquid object (optional)
- use_variant: {Boolean} Renders selected or first variant price instead of overall product pricing (optional)
- show_badges: {Boolean} Renders 'Sale' and 'Sold Out' tags if the product matches the condition (optional)
- price_class: {String} Adds a price class to the price element (optional)
Usage:
{% render 'price', product: product %}
{%- endcomment -%}
{%- liquid
if use_variant
assign target = product.selected_or_first_available_variant
else
assign target = product
endif
comment
FIX: Instead of using product.price (which is price_min and can include
unavailable variants), we find the cheapest AVAILABLE variant explicitly.
This ensures collection pages show the correct in-stock starting price.
endcomment
assign available_variants = product.variants | where: 'available', true
if available_variants.size > 0
assign first_available = available_variants | sort: 'price' | first
assign compare_at_price = first_available.compare_at_price
assign price = first_available.price
assign available = true
else
assign compare_at_price = target.compare_at_price
assign price = target.price | default: 1999
assign available = target.available | default: false
endif
if settings.currency_format_enable
assign money_price = price | money_with_currency
else
assign money_price = price | money
endif
if target == product and product.price_varies
assign money_price = 'products.product.price.from_price_html' | t: price: money_price
endif
-%}
<div class="price
{%- if price_class %} {{ price_class }}{% endif -%}
{%- if available == false %} price--sold-out {% endif -%}
{%- if compare_at_price > price %} price--on-sale {% endif -%}
{%- if product.price_varies == false and product.compare_at_price_varies %} price--no-compare{% endif -%}
{% if price_style == '2' %} price-style-2{% endif %}">
<dl>
{%- comment -%}
Explanation of description list:
- div.price__regular: Displayed when there are no variants on sale
- div.price__sale: Displayed when a variant is on sale
- div.price__availability: Displayed when the product is sold out
{%- endcomment -%}
<div class="price__regular">
<dd class="price__last">
<span class="price-item price-item--regular">{{ money_price }}</span>
</dd>
</div>
<div class="price__sale{% if settings.show_saved_price %} show_saved_price{% endif %}">
<dd class="price__compare" data-compare="{{ compare_at_price }}">
<s class="price-item price-item--regular">
{%- if settings.currency_format_enable -%}
{{ compare_at_price | money_with_currency }}
{%- else -%}
{{ compare_at_price | money }}
{%- endif -%}
</s>
</dd>
<dd class="price__first{% if settings.show_price_percent %} price_percent{% endif %}" data-first="{{ price }}">
<span class="price-item price-item--sale">{{ money_price }}</span>
</dd>
{%- if settings.show_saved_price and price != nil and price != blank and compare_at_price != nil and compare_at_price != blank -%}
{%- assign saved_price = compare_at_price | minus: price | money -%}
<div class="price__saved">
<span class="price-item price-item--saved">
{{ 'products.product.price.saved_price_html' | t: price: saved_price }}
</span>
</div>
{%- endif -%}
{%- if settings.show_price_percent -%}
<dd class="price__label_sale price__label_percent">
{%- liquid
assign list_compare = product.variants | where: 'compare_at_price'
assign compare = 0
for variant in list_compare
assign saving = variant.compare_at_price | minus: variant.price | times: 100.0 | divided_by: variant.compare_at_price | round
if saving > compare
assign compare = saving
endif
endfor
if compare < 1
assign compare = product.compare_at_price_max | minus: product.price_max | times: 100.0 | divided_by: product.compare_at_price_max | round
endif
-%}
<span class="label_sale label_sale_percent">(-{{ compare | append: '%' }})</span>
</dd>
{%- endif -%}
</div>
<small class="unit-price caption{% if available == false or product.selected_or_first_available_variant.unit_price_measurement == nil %} hidden{% endif %}">
<dt class="visually-hidden">{{ 'products.product.price.unit_price' | t }}</dt>
<dd class="price__first">
<span>{{- product.selected_or_first_available_variant.unit_price | money -}}</span>
<span aria-hidden="true">/</span>
<span class="visually-hidden"> {{ 'accessibility.unit_price_separator' | t }} </span>
<span>
{%- if product.selected_or_first_available_variant.unit_price_measurement.reference_value != 1 -%}
{{- product.selected_or_first_available_variant.unit_price_measurement.reference_value -}}
{%- endif -%}
{{ product.selected_or_first_available_variant.unit_price_measurement.reference_unit }}
</span>
</dd>
</small>
</dl>
</div>
You need to make sure that this snippet is only used on product cards in collection.
Many themes use the same snippet for the product page as well in which case the edit suggested above would not work properly on product page.
I’d be approaching it rather like this – instead of:
{%- liquid
if use_variant
assign target = product.selected_or_first_available_variant
else
assign target = product
endif
assign compare_at_price = target.compare_at_price
assign price = target.price | default: 1999
I’d try this:
{%- liquid
assign price = product.selected_or_first_available_variant.price | default: 1999
assign compare_at_price = product.selected_or_first_available_variant.compare_at_price
if use_variant
assign target = product.selected_or_first_available_variant
else
assign target = product
endif
This way, if no variant is selected, the code will output price of first available variant, rather then the cheapest, which can be unavailable.
Hey Mustafa,
Thank you so much! That worked and got everything showing correctly! I appreciate you so much mate! Bless you brother!
Hey @GamesRealm I’m Happy to hear that your problem is solved if you have any other query feel free to share it