Need Help with Dynamic Liquid Code Update for Variant Switching

Store Design

Topic summary

A Shopify developer needs help making liquid code blocks dynamically update variant prices via Ajax when customers switch product variants, without page refreshes.

Initial Problem:

  • Two liquid code blocks display variant price and title+price correctly on page load
  • Code doesn’t update when variants change using radio pill selectors
  • Developer lacks JavaScript experience but understands pricing data comes from /product/{{product.handle}}.js

Attempted Solution:
Another user provided JavaScript using fetch API to retrieve product data and update prices on variant change. However, implementation issues arose:

  • ID selector mismatches between variant picker and price display elements
  • Currency symbol hardcoded as ‘$’ instead of being dynamic for multi-currency stores (EUR needed)
  • Uncertainty about handling two liquid values in Code 2
  • Test store provided for troubleshooting: https://teststore-9992.myshopify.com/products/soap

Resolution:
Original poster resolved the issue independently after making unspecified modifications to the provided code.

Related Discussion:
Another developer later asked about adapting this approach to dynamically update Add to Cart button labels based on variant inventory status, but also solved it independently.

An alternative implementation approach was shared using a pre-generated variant map stored in JSON format, avoiding repeated Ajax calls.

Summarized with AI on October 25. AI used: claude-sonnet-4-5-20250929.
3

Thank you for your quick response.

I’ve implemented the JavaScript code you provided inside the custom liquid, ensuring that I updated the IDs to match my setup. For “Code 1,” I used the ID “variant-test-price1” for ‘variant-selector’ and I selected the picker with the ID “variant-radios-template–15595519115401__main” for ‘product-price’.

However, it appears that the script doesn’t work in my case. The liquid content within “variant-test-price1” remains static when I select different variants using the variant picker. To clarify my goal, In this case I want, “variant-test-price1” to dynamically update with the correct value and currency using an Ajax script, not the pricing underneath the product title.

Regarding the currency symbol (‘$’) used in the script, how would it would work if multiple currencies are enabled in the shop. Is there a way to make it currency-agnostic? Right now I use “€” EUR.
As for “Code 2,” it contains two liquid values within it. Will this work as is, or do I need to restructure the HTML?

The variant picker has this rendered html on my store:

To trigger a change event, I’m using the ID “variant-radios-template–15595519115401__main”. Is this the correct approach in my case?

I included some images and my test store for reference, the password is: 123
https://teststore-9992.myshopify.com/products/soap?variant=41417412182153

Images:
https://imgur.com/a/z5PxovO

Currently, both Code 1 and Code 2 only display values when a variant is selected and the page is reloaded.

Thank you once again for your assistance.