Feedback for your online store from the community
I have variant of necklace : size
Large : $ 375
Small : $ 249
and for sure I have saved it many times
and when it goes to the website
https://tanchur.com/products/auspicious-heart-lock-necklace?variant=42934170058822
the price doesn't change with the variant
the price keep $375 even I click on small
could anyone how to fix it ?
Just want to confirm did you add a custom JavsScript in the global.js file?
Because I click on the variants it show the issue in the Console.
Based on confirmation I can provide you better solution.
Thanks
nope i didnt change any on global.js file .
I'm trying to revise on " snippets > price.liquid "
Could you please share the price.liquid code so that I check if there is any issue.
sure , it is the original one , without any changes :
{% 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)
- hide_currency_code: {Boolean} hide currency code regardless of what setting is chosen
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
assign money_compare_at_price = compare_at_price | money
assign money_price = price | money
unless hide_currency_code
if settings.currency_code_enabled
assign money_price = price | money_with_currency
assign money_compare_at_price = compare_at_price | money_with_currency
endif
endunless
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 show_badges %} price--show-badge{% endif -%}
" style=" {% if block.settings.pricebottomborder %} border-bottom: 1px solid #e6e6e6!important; padding-bottom: 20px!important; {% endif %}"
>
<div class="price__container">
{%- 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 -%}
<div class="price__regular">
<span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.regular_price' | t }}</span>
<span class="price-item price-item--regular{% if main_price %} main-price accent-color-{{ block.settings.price_color }}{% endif %}">
{{ money_price }}
</span>
</div>
<div class="price__sale {% if price_second %} price__sale--price-second{% endif %}">
<span class="visually-hidden visually-hidden--inline compare-price-label">
{{- 'products.product.price.regular_price' | t -}}
</span>
<span class="price-item price-item--sale price-item--last{% if main_price %} main-price accent-color-{{ block.settings.price_color }}{% endif %}">
{{ money_price }}
</span>
{%- unless product.price_varies == false and product.compare_at_price_varies %}
<span class="visually-hidden visually-hidden--inline regular-price-label">
{{- 'products.product.price.sale_price' | t -}}
</span>
<span class="price__compare-price">
<s class="price-item price-item--regular{% if main_price %} main-comapre-price accent-color-{{ block.settings.compare_price_color }}{% endif %}">
{{ money_compare_at_price }}
</s>
</span>
{%- endunless -%}
</div>
<small class="unit-price caption{% if product.selected_or_first_available_variant.unit_price_measurement == nil %} hidden{% endif %}">
<span class="visually-hidden">{{ 'products.product.price.unit_price' | t }}</span>
<span class="price-item price-item--last">
<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>
</span>
</small>
</div>
{%- if show_badges -%}
{% unless hide_sale_badge %}
<span class="badge price__badge-sale color-{{ settings.sale_badge_color_scheme }}">
{% assign percentage_saved = compare_at_price | minus: price | times: 100.0 | divided_by: compare_at_price | floor | append: '%' %}
{% capture money_saved %}
{{ compare_at_price | minus: price | money_without_trailing_zeros }}
{% endcapture %}
{% if settings.sale_basge_discount_icon %}{% render 'icon-discount' %}{% endif %}<span class='nowrap'>{{ settings.sale_badge_text | replace: '[percentage]', percentage_saved | replace: '[amount]', money_saved }}</span>
</span>
{% endunless %}
<span class="badge price__badge-sold-out color-{{ settings.sold_out_badge_color_scheme }}">
{{ 'products.product.sold_out' | t }}
</span>
{%- endif -%}
{% if block.settings.freeshipprice %}
<span style="color:black;margin-left: 0px;font-weight: bold;font-size:{{ block.settings.shiptextnexttopricesize }}px;">{{ block.settings.shiptextnexttoprice }}</span>
{% endif %}
</div>
<style>
.price .main-price {
font-size: {{block.settings.main-pricesize }}px!important;
}
.price .main-comapre-price {
font-size: {{block.settings.maincomapre-pricesize }}px!important;
}
</style>
Please add this Javascript in the end of this file.
<script>
document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('[name="id"]').forEach(radio => {
radio.addEventListener('change', function() {
updatePriceForVariant(this.value);
});
});
const variantSelect = document.getElementById('product-select');
if (variantSelect) {
variantSelect.addEventListener('change', function() {
updatePriceForVariant(this.value);
});
}
});
function updatePriceForVariant(variantId) {
const variantData = JSON.parse(document.querySelector(`.variant-price-data[data-id="${variantId}"]`).textContent);
const regularPriceElement = document.querySelector('.price__regular .price-item');
const salePriceElement = document.querySelector('.price__sale .price-item--last');
const comparePriceElement = document.querySelector('.price__compare-price s');
if (variantData.compare_at_price > variantData.price) {
regularPriceElement.textContent = Shopify.formatMoney(variantData.price, "{{ shop.money_format }}");
salePriceElement.textContent = Shopify.formatMoney(variantData.price, "{{ shop.money_format }}");
comparePriceElement.textContent = Shopify.formatMoney(variantData.compare_at_price, "{{ shop.money_format }}");
} else {
regularPriceElement.textContent = Shopify.formatMoney(variantData.price, "{{ shop.money_format }}");
}
}
</script>
Hi there , still doesnt work .. either i choose large or small , still $375.
i find that mainly due to the theme ..
now I'm using my own theme , i uploaded my self
I find that the issue maybe due to this theme..
how i can fix it ?
i can send u the script of my theme if you needed .
when I change to other theme , like dawn , no problem at all.
so how I need to fix it ?
Thanks Jignesh , i find an alternative .. i change to the theme Dawn , which can fit me .. and variant price works well on that page
Go to Online Store > Edit Code.
Under Sections, open product-template.liquid or main-product.liquid.
Look for the price code.
Make sure it's using {{ current_variant.price | money }} or JavaScript that updates price on variant change.
Save and preview.
Hi there , didnt see such code , but find the following :
"product.selected_or_first_available_variant.price | money"
@Jackypotato
Can you see this code?
{{ product.price | money }}
If yes, replace it with this code
{{ current_variant.price | money }}
Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025Discover opportunities to improve SEO with new guidance available from Shopify’s growth...
By Jacqui May 1, 2025