Subject: Issue with displaying variant prices on my Shopify page
Dear Shopify Community,
I am reaching out to you because I am experiencing an issue with the correct display of variant prices on my Shopify page. I have noticed that only the price of the first variant is being displayed accurately, while the prices of the other variants are not being shown correctly.
I have already attempted to adjust the corresponding Liquid code to ensure that the prices for each variant are retrieved and displayed correctly. However, I have been unable to resolve the issue.
Could you please check if there is a known issue or if there are specific customizations I need to make to ensure that the prices of all variants on my page are displayed correctly?
Thank you for your assistance.
Best regards,
Daniel Bechtold (GeschenkRosen)
This is the code of “price.liquid”
"
{% 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)
- show_compare_at_price: {Boolean} Renders the compare at price if the product matches the condition (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 price_min = product.price_min
assign price_max = product.price_max
assign available = target.available | default: false
assign money_price = price | money
assign money_price_min = price_min | money
assign money_price_max = price_max | money
if settings.currency_code_enabled
assign money_price = price | money_with_currency
assign money_price_min = price_min | money_with_currency
assign money_price_max = price_max | money_with_currency
endif
if target == product and product.price_varies
assign money_price = ‘products.product.price.from_price_html’ | t: price: money_price
endif
-%}
{%- 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
{%- endcomment -%}
{%- if product.quantity_price_breaks_configured? -%}
{%- if show_compare_at_price and compare_at_price -%}
{%- unless product.price_varies == false and product.compare_at_price_varies %}
{{- 'products.product.price.regular_price' | t -}}
{% if settings.currency_code_enabled %}
{{ compare_at_price | money_with_currency }}
{% else %}
{{ compare_at_price | money }}
{% endif %}
{%- endunless -%}
{%- endif -%}
{{ 'products.product.price.regular_price' | t }}
{{- 'products.product.volume_pricing.price_range' | t: minimum: money_price_min, maximum: money_price_max -}}
{%- else -%}
{{ 'products.product.price.regular_price' | t }}
{{ money_price }}
{%- endif -%}
{%- unless product.price_varies == false and product.compare_at_price_varies %}
{{ 'products.product.price.regular_price' | t }}
{% if settings.currency_code_enabled %}
{{ compare_at_price | money_with_currency }}
{% else %}
{{ compare_at_price | money }}
{% endif %}
{%- endunless -%}
{{ 'products.product.price.sale_price' | t }}
{{ money_price }}
{{ 'products.product.price.unit_price' | t }}
{{- product.selected_or_first_available_variant.unit_price | money -}}
/
{{ 'accessibility.unit_price_separator' | t }}
{%- 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 }}
{%- if show_badges -%}
{{ 'products.product.on_sale' | t }}
{{ 'products.product.sold_out' | t }}
{%- endif -%}
"
Pictures of the problem:
Your theme looks like modified Dawn?
The problem is not with variant price itself – the theme has Javascript code which should update it when variant changes – this code fails.
This happens because on your page there are two product elements with the same ID (relevant elements have yellow outline on the screenshot):
Having multiple elements with the same id is an error in itself, but in your case, theme JS is trying to update hidden variant id input in both of them and fails because there is not variant id input in the first form.
It’s hard to tell from outside, but in your sections/main-product.liquid there should be code similar to:
{%- form 'product' ... -%}
...
{%- endform -%}
I’d remove the outer form and leave it like this:
...
To start with, you can remove/disable “Quantity selector” block in “product info” section in your theme editor and see if this resolves the price display problem.
Thank you, Tim, but the issue now is that it always shows 1 quantity, whether I choose 2 or more at checkout… Do you have a solution for that?
You should talk to the Apps on Demand people – if their app (Instant checkout?) is disabled, proper quantity is added to cart.
