Product.price value not updating in custom liquid

[MPP009]

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:

<style>
.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;
}
</style>

<div class="custom-div">
<div class="piccolumn">
<img class="square-image" src="" alt="Your Image">
</div>
<div class="column">
<p class="text"><span class="price">Get it for {{ product.price | times: 0.85 | money }}</span></p>
</div>
</div>

Any help is appreciated. Thanks.

[PaulNewton]

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.