Show variant prices dynamically in a custom liquid section on the product pages

Technical Q&A
, ,

Topic summary

  • Goal: Display variant prices dynamically in a custom Liquid section on product pages using Shopify’s Dawn 13.0.1 theme.

  • Current implementation: A Liquid snippet assigns the selected_or_first_available_variant to current_variant and renders its price inside a div with id “ProductPrice” and a span with class “money”.

  • Desired behavior: When a customer selects a different variant, the displayed price should update in real time, matching the main product section’s price behavior.

  • Issue: Attempts to add JavaScript for dynamic updates have not worked; the author seeks a method to listen to variant change events and update the custom price element accordingly.

  • Artifacts: A short Liquid code snippet is central to the question; no images or additional files.

  • Status: Unresolved; open request for guidance or example JavaScript solution.

Summarized with AI on December 31. AI used: gpt-5.
1

Hello,

I’m trying to show the price of my variants in a custom liquid section. I am using Dawn 13.0.1.

I have the following code:

{%- liquid
  assign current_variant = product.selected_or_first_available_variant
-%}

<div class="product-price" id="ProductPrice">
  <span class="money">{{ current_variant.price | money }}</span>
</div>

I’m trying to add javascript in order to update the price dynamically when a different variant is selected, exactly like the price block does in the main product section, but I just can’t make it work.

Does somebody have an idea ? It would be greatly appreciated.

Thanks for reading me and have a nice day.