Why does my variants price doesn't change shopify

Why does my variants price doesn't change shopify

Jackypotato
Tourist
8 0 2

I have variant of necklace : size 
Large : $ 375 
Small : $ 249 

Jackypotato_0-1744998562758.png

 

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 

Jackypotato_1-1744998687755.png

 

could anyone how to fix it ? 



Replies 10 (10)

TheScriptFlow
Shopify Partner
709 49 95

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.error.png

Based on confirmation I can provide you better solution.

Thanks

- Need a Shopify Specialist? Chat on WhatsApp Or Email at info@thescriptflow.com

- Boost Your Sales with Affiliate Marketing - UpPromote: Affiliate & Referral


- If my solution was helpful, mark it as a solution and hit the like button! And Wait Don't forget to Buy me a Coffee

Jackypotato
Tourist
8 0 2

nope i didnt change any on global.js file . 
I'm trying to revise on  " snippets > price.liquid " 

TheScriptFlow
Shopify Partner
709 49 95

Could you please share the price.liquid code so that I check if there is any issue.

- Need a Shopify Specialist? Chat on WhatsApp Or Email at info@thescriptflow.com

- Boost Your Sales with Affiliate Marketing - UpPromote: Affiliate & Referral


- If my solution was helpful, mark it as a solution and hit the like button! And Wait Don't forget to Buy me a Coffee

Jackypotato
Tourist
8 0 2

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">&nbsp;{{ 'accessibility.unit_price_separator' | t }}&nbsp;</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>

TheScriptFlow
Shopify Partner
709 49 95

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>

- Need a Shopify Specialist? Chat on WhatsApp Or Email at info@thescriptflow.com

- Boost Your Sales with Affiliate Marketing - UpPromote: Affiliate & Referral


- If my solution was helpful, mark it as a solution and hit the like button! And Wait Don't forget to Buy me a Coffee

Jackypotato
Tourist
8 0 2

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  

shrine-pro-custom-theme 

 

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 ? 

 

 

 

 

 

Jackypotato
Tourist
8 0 2

Thanks Jignesh , i find an alternative .. i change to the theme Dawn , which can fit me .. and variant price works well on that page

Ecom_boss-
Excursionist
22 1 2

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. 

Shopify Expert | Fixing Store Issues & Boosting Performance
I’ve got your back>
Jackypotato
Tourist
8 0 2

Hi there , didnt see such code , but find the following : 

 "product.selected_or_first_available_variant.price | money"

Ecom_boss-
Excursionist
22 1 2

@Jackypotato 
Can you see this code?

{{ product.price | money }}

 

If yes, replace it with this code

{{ current_variant.price | money }}

Shopify Expert | Fixing Store Issues & Boosting Performance
I’ve got your back>