Variant picker on collection page not updating price - Tinker

Store Design
1

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.

2

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.


  

  

    {{ product.price | money }}

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 ]

3

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

1 Like
4

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

1 Like