Price automatically update on the product page

Store Design

Topic summary

A user wants the product price to automatically update when customers adjust the quantity on the product page, without requiring a page refresh.

Solution Approach:

  • Multiple responders confirm this requires custom JavaScript code
  • The functionality is not built into most Shopify themes by default

Technical Implementation:
Two detailed code examples were provided:

  1. JavaScript snippet that:

    • Listens for changes to the quantity input field
    • Recalculates total price dynamically (base price × quantity)
    • Updates the displayed price element in real-time

  2. HTML modification to:

    • Add a data-base-price attribute to store the unit price
    • Enable the JavaScript to access and calculate from this value

Next Steps:
Several developers offered to implement the solution directly, requesting:

  • Store URL
  • Collaborator access code
  • Theme details

The discussion remains open with the original poster yet to respond or select an implementation approach.

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

Hi

I would like to have price automatically update on the product page when the quantity is adjusted.

Can someone help me? Thanks!

4 Likes
2

Hey @Slice_agency ,

You can absolutely make the product price update automatically when the customer adjusts the quantity.
This usually involves a small JavaScript snippet that listens for changes in the quantity input and then recalculates the total price dynamically, without needing to refresh the page.

For example (basic version):

document.addEventListener("DOMContentLoaded", function() {
  const qtyInput = document.querySelector('input[name="quantity"]');
  const priceElement = document.querySelector('.product-price'); 
  const basePrice = parseFloat(priceElement.dataset.basePrice); // store base price in a data attribute

  qtyInput.addEventListener("input", function() {
    let qty = parseInt(this.value) || 1;
    let newPrice = (basePrice * qty).toFixed(2);
    priceElement.textContent = `$${newPrice}`;
  });
});

You’d just need to ensure your product price element has something like:

<span class="product-price" data-base-price="{{ product.price | money_without_currency }}">{{ product.price | money }}</span>

That way, whenever the customer changes the quantity, the displayed price updates automatically.

If you’d like me to implement this directly on your store (so it works smoothly with your theme’s design), please feel free to connect with me. You can also check out my past Shopify projects here: https://rajatweb.dev/

Best,

Rajat | Shopify Expert

3

Hey @Slice_agency

Some additional Javascript would be required for that. It usually depends on your theme files and how it is developed because many themes by default don’t support this feature so it has to be custom coded.

Feel free to share your store URL and collaborator request code in my private messages then depending on that I can custom code a script for you.

Best,
Moeed

4

Hey @Slice_agency,

In order to do the requested changes requires to do the custom code in your theme file.

Could you please share the 4 digits collab code along with the store url in the p/m so that I can take a look and make the requested changes.

Thanks

5

Hi @Slice_agency

You’ll need some extra JavaScript to achieve this. Whether it works out of the box really depends on your theme, since many themes don’t support this feature by default and it often requires custom coding.

So could you please share your store URL so I can take a look? If your store is password-protected, kindly provide the password as well.

Best regards,

Danny from Samita Team

6

Hi @Slice_agency ,
Online Store → Themes → Edit Code → Assets → theme.js or global.js
add this code at the bottom

document.addEventListener("DOMContentLoaded", function () {
  const quantityInput = document.querySelector('input[name="quantity"]');
  const priceElement = document.querySelector('[data-product-price]');
  
  if (quantityInput && priceElement) {
    const basePrice = parseFloat(priceElement.dataset.basePrice); // store base price
    
    quantityInput.addEventListener("input", function () {
      let qty = parseInt(this.value) || 1;
      let newPrice = (basePrice * qty).toFixed(2);
      priceElement.innerText = `$${newPrice}`;
    });
  }
});

now go to sections/main-product.liquid or product.liquid
and find the price element which look like this

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

replace it with this code

<div class="price">
  <span data-product-price data-base-price="{{ product.price | divided_by: 100.0 }}">
    {{ product.price | money }}
  </span>
</div>

save and check.
Thanks
Manoj

7

Hi @Slice_agency ,

I hope you are well!

Can you please provide the store URL? I will try to check your requirement on the front store, and I will also need the collaborative code so that I can add the code to fix the issue.

8

Hi @Slice_agency,

This is possible, you need to handle JavaScript for it.

What theme are you using? Please send the website link, I will check it for you

9

@Slice_agency

Yes, this can be done with a small JavaScript customization. By listening to the quantity input change event, you can dynamically recalculate the total price and update it on the product page without requiring a page reload. If you’d like, I can guide you with the exact code snippet to implement this in your theme.