How do I duplicate a price block on a landing page that changes with variant selection?

[Andy106]

store: https://mastorascy.myshopify.com/products/garden-claw-gloves?variant=47411888587091
Hello, so currently my landing page looks like this:

I want to create a duplicate of the price block as to appear right under the variant picker like in the following image:

Any suggestions?
I want to add the block as custom liquid. My main idea was just to copy the code of price.liquid in the new liquid, and this does make the price block appear, but the main issue is that the price doesnt change dynamically when I choose different variant.

Any help, either building on my method or completely new approach is welcomed. Thanks

[BSS-Commerce]

Hi @Andy106 ,

The reason why your copied price block isn’t updated is that the theme updates the price by javascript, it gets the price element by ID, so it just changes only 1 price element.

You have to find which javascript file of your theme changes the inner HTML of the price block. As I can see in dev tool, this is “global.js” file

Following these steps below to add 1 more price block

1. After you copy liquid code to render another price element, you need to change the id of it

NOTE: you don’t need to copy all code of file “price.liquid” as you said in your comment, just copy the block “render price” as I do in Dawn theme

Change id to “my-price” or something you want

2. Go to file “global.js”, find the following code : “if (source && destination) destination.innerHTML = source.innerHTML;”

this code is used to change innerHTML inside the price block (“destination” variable) to new price (“source” variable)

Change to the following code

if (source && destination) {
   destination.innerHTML = source.innerHTML;
   document.getElementById('my-price').innerHTML = source.innerHTML;
}

The new code in line 3 will update the new price for your added price block without affecting the old code and theme logic

The result will be like

[Andy106]

Amazing, that works great! Thanks alot!
I was wondering, if its possible to also show the discount for variant 2 and variant 3. For example, with variant 1, the buyer saves 40%, and this is shown next to the price. With variant 2 the buyer saves about 50%, but this is not shown next to the price. See image below for what i mean:
Vatiant 1 - shows discount

Variant 2 or 3 - Shows just price: