Product.price value not updating in custom liquid

Shopify Discussion

Topic summary

A user is attempting to display a discounted price in a custom Liquid block on product pages, but encounters an issue where product.price doesn’t update when different variants are selected—it only shows the base variant’s price.

Core Problem:

  • product.price returns the product’s lowest price as a static value, not the selected variant’s price
  • Liquid code executes server-side during page load and cannot dynamically respond to variant changes in the browser

Solution Required:

  • JavaScript is necessary to update content dynamically when variants change
  • Implementation varies significantly across different Shopify themes
  • Most themes emit events when variants change that JavaScript can listen for
  • Even using product.selected_variant.price in Liquid only updates on full page reloads (when the URL parameter changes)

Options:

  • Use JavaScript to fetch and display variant prices via AJAX
  • Leverage existing theme variant-change events
  • Pre-render all variant prices in the output and show/hide with CSS/JavaScript
  • Search existing forum posts for theme-specific solutions

The responder offers paid customization services for implementing this functionality.

Summarized with AI on November 15. AI used: claude-sonnet-4-5-20250929.
1

I am trying to add a custom liquid block on each product page as part of “PRODUCT INFORMATION” where I plan to show something like - Get this at “discounted price”. I have a fixed % discount code so maths will be easy. Issue is when i am using product.price in custom liquid, the product.price object is not updating if we select a different variant. Its taking value of base variant. How can I make it change on variant change?

The code i wrote for custom liq:

.custom-div { width: 100%; height: 6.5rem; border: 1px solid rgba(0, 0, 0, 0.1); background-color: #E4FEFF; display: flex; align-items: center; justify-content: space-between; } .piccolumn { flex: 0 0 30%; text-align: center; } .column { flex: 0 0 70%; text-align: center; } .square-image { max-width: 85%; height: auto; } .text { font-size: 1.2rem; margin: 0; display: block; } .price { font-size: 1.5rem; margin: 0; color: green; }
Your Image

Get it for {{ product.price | times: 0.85 | money }}

Any help is appreciated. Thanks.

2

You need to use javascript.

How to do this varies wildly among themes, there are existing forum posts if you search for various themes.

If you need this customization fixed and made dynamic then contact me by mail for services.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.
Mail contact info in signature.

#1 product.price is not the same as a variant.price so it’s never going to change because a product only gets ONE price. So it doesn’t matter if the variant changes your still only outputting a static value of the products lowest price.

#2 theme liquid does not run in the users browser, even if you reference something like {{product.selected_variant.price }} the liquid will ONLY update when reloading a page and as long as the url updates the selected variant parameter id.

Unless you use javascript to get or change the information without reloads, or advanced css tricks to show hide elements.

You need to use javascript to update content dynamically when the variant changes or force a page reload. In simple case the price data already needs to be in the codes output so also don’t have to learn how to use ajax to fetch it.

Alot of themes will emit an event code can listen for to trigger code but varies by theme.