Variant picker on collection page not updating price - Tinker

[HBaars]

Having issues with the Variant Picker on collection pages not loading the corresponding variant price, or eventually loading once clicking back and forth on different variants a few times. 

Seems to be working correctly on the product page. Using Tinker theme.

[rajweb]

Hey @HBaars 

The issue with the variant price not updating on the collection page is due to missing product data and JS logic. I’ve prepared a quick fix using product JSON and a script to update the price when a variant is selected.

<div class="product-card" data-product='{{ product | json | escape }}'>
  <select class="variant-picker">
    {% for variant in product.variants %}
      <option value="{{ variant.id }}">{{ variant.title }}</option>
    {% endfor %}
  </select>

  <div class="price">
    {{ product.price | money }}
  </div>
</div>

JavaScript Code (add to your theme's main JS file):

document.addEventListener('DOMContentLoaded', function () {
  document.querySelectorAll('.product-card').forEach(card => {
    const productData = JSON.parse(card.dataset.product);
    const variantSelector = card.querySelector('.variant-picker');
    const priceContainer = card.querySelector('.price');

    if (variantSelector && priceContainer) {
      variantSelector.addEventListener('change', (e) => {
        const selectedId = e.target.value;
        const selectedVariant = productData.variants.find(v => v.id == selectedId);

        if (selectedVariant) {
          priceContainer.innerHTML = Shopify.formatMoney(
            selectedVariant.price,
            "{{ shop.money_format }}"
          );
        }
      });
    }
  });
});

Let me know if you'd like me to implement this directly for you — please feel free to reach out!

Best Regards,

Rajat 

[ Shopify Expert ]

[jakeclifford · Accepted solution]

Hi @HBaars,

What version of the Tinker theme are you using?

It does this automatically on version 1.0.5 without code changes so you may need to update. 

Hope that helps,
Jake 

[HBaars]

Ended up moving from Tinker 1.0.2 to 1.0.5 to resolve this issue.