Hello, thanks for your help!
When I try to select the different variants of the product, the price doesn’t change.
https://artful.ma/products/tableau-mindset-is-everything
I can’t seem to figure out the problem. Thank you for anyone’s help!
Topic summary
A store owner reports that product prices fail to update when selecting different variants on their product page.
Attempted Solution:
A community member provided JavaScript code to add to theme.js or theme.min.js that listens for variant changes and updates the displayed price accordingly. The code targets the product form and price element to dynamically reflect the selected variant’s price.
Current Status:
The original poster implemented the suggested code but reports it still doesn’t work on their end, while the helper claims to see the price changing correctly when testing the same product page. This discrepancy suggests a potential caching issue or implementation error.
Alternative Diagnosis:
Another contributor suggests two possible root causes:
- All variant prices may be identical in the Shopify admin (making changes invisible)
- Issues in the
price.liquidfile within the Snippets folder
They recommend checking variant pricing in the Products section and reviewing the price snippet code for proper implementation.
Resolution: Unresolved—the issue persists for the store owner despite attempted fixes.
1 Like
Hello @artstore
It seems like your Shopify theme may not have JavaScript code in place to update the price when a variant is selected. To fix this issue, add the following JavaScript code to the ‘theme.js’ or ‘theme.min.js’.
document.addEventListener('DOMContentLoaded', function() {
const productForm = document.querySelector('form[action="/cart/add"]');
const productPrice = document.querySelector('.price-item.price-item--sale');
if (productForm && productPrice) {
productForm.addEventListener('change', function() {
const selectedVariant = JSON.parse(productForm.querySelector('option:checked').dataset.variant);
if (selectedVariant) {
productPrice.textContent = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: selectedVariant.price.currency
}).format(selectedVariant.price.amount);
}
});
}
});
After saving your changes, the price should now update correctly when selecting different variants on your product page. If the issue persists, it might be due to customizations in your theme or conflicts with other scripts.
I tried it, but it didn’t work. Could there be another solution?
Are you sure @artstore ? I just tried to select the different variants of the product and the prices are changed.
Yesit still doesn’t work. when i select the variant it doesn’t change. did it work for you because of the code you provided me with, if yes in which line was it added.
Hi @artstore ,
We think the problem you are facing may come from the following 2 reasons, please check them carefully:
- Go to the Products section in Shopify admin, then select the product that is having an error in your price. Here you should carefully check the price of each Variants to see if they are unfortunately identical.
- After completing step 1, if you don’t see any problems, go to Themes → Edit code.
Next, go to the Snippets folder, select the price.liquid file and check the following code (if your code is similar to the code in the image below, it means there is no problem):
Hope this help to solve your problem.