Update Price with variant selected

New Member
5 0 0

Hello,

We are using Marketshop Theme for our Shopify store. On our product page, when we choose product size variant from drop down box, the price remains constant. It doesn't change with the variant selected. Please check : https://www.animalcollectibles.com/products/mt101080.

Could someone help us how we could change the price with variant selected ?

Any suggestions are welcome.

Thanks.

0 Likes
Highlighted
Shopify Expert
2684 67 755

Hi G, 

Check that your OptionSelectors call is done right, currently you page shows it like this:

    
jQuery(function($) {
  new Shopify.OptionSelectors("product-select", { product: , onVariantSelected: selectCallback });
});
</script>                         

Notice that there is nothig after product: 

This  call should look like this in your product.liquid 

  jQuery(function($) {
    new Shopify.OptionSelectors('product-select', {
      product: {{ product | json }},
      onVariantSelected: selectCallback,
      enableHistoryState: true
    });

which renders to a lot of information about product after product:

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
I am away till Feb-15.
1 Like
Highlighted
New Member
5 0 0

Hi Tim,

Thanks for replying. We tried with the

product: {{ product | json }}

But stil doesn't work. Could you help.

Thanks.

0 Likes
Highlighted
Shopify Expert
2684 67 755

Hey G, 

I looked at the issue once more and it happens that there is already selectCallback function in frontend.min.js file. And it should be updating the variant price, provided the price is in the element with the "price" id, like this:

<di id="price">{{product.price}}</div>

However, you product page has no element wth price id.

There are two possibilities: either your product.liquid does not output such an element or there is a conflict with some other app, (most probable offender can be a Currency selector/Changer) which may replace the element with id="price" with some other code.

Currently you price is displayed by this HTML:

<div class="price-box"> 
  <div class="special-price">
    <div id="price-field"></div>
    <span class="money" data-currency-usd="
	$ 22.00

    ">
	$ 22.00

    </span>
  </div>
  <div class="compare-price">
    <span class="money" data-currency-usd=""></span>
  </div>                                                
  <meta itemprop="priceCurrency" content="USD"> 
  
  <link itemprop="availability" href="http://schema.org/InStock">
  
</div>

Hope this will guide you in a right direction.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
I am away till Feb-15.
1 Like
Highlighted
New Member
5 0 0

Thanks Tim. It worked out successfully! Thanks for the help.

0 Likes
Highlighted
New Member
1 0 0

Hi Tim,

I'm using Debut theme, and I would like to set the price field on the product page so that customers will know immeditelly what is the price instead of going to cart and abandoning it without even seeing the cost of one.

I hope that you can help me out with code.

Best regards,

Stefan

0 Likes
Highlighted
Shopify Partner
7 1 0

Hi Guys, I have a Similar issue, and I just cant get this to work at all...I can put up a link if theres a quick response to see if anyone can spot the issue?

0 Likes