Add price beside the ATC button and update it when the variant is changed

Shopify Discussion

Topic summary

A user is working with Shopify’s Be Yours theme and wants to display the product price next to the Add to Cart (ATC) button that dynamically updates when variants are selected.

Current Implementation:

  • Added a <span> element with ID price-money in buy-buttons.liquid to display the price beside the ATC button
  • The theme already has a price-money field that updates correctly elsewhere when variants change
  • Included a screenshot showing the price placement

The Problem:
The newly added price field beside the ATC button displays initially but doesn’t update when the user selects different product variants.

Technical Context:
The user references existing JavaScript code in global.js that handles price updates for the original price display location, but the code snippet appears corrupted or improperly formatted in the post.

Status: The issue remains unresolved with no responses yet. The user is seeking guidance on how to make their custom price field respond to variant changes like the existing price display does.

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

i need to add price beside the ATC button in product page in Be Yours theme, in this theme there is a field name price-money that display price whenever the variant is changed. i need the same field to display beside the ATC button

To Display the price beside ATC:
i added in the buy-buttons.liquid this code
{{ product.price | money }}

akilh_0-1713163841614.png
akilh_0-1713163841614.png874×486 23.3 KB

also in global.js file this is the code for the price-money

// Change price
const price__regular = this.querySelector(‘.price__regular’);
price__regular.querySelector(‘.price-item–regular’).innerHTML = <price-money><bdi>${theme.Currency.formatMoney(price, window.shopSettings.moneyFormat)}</bdi></price-money>;

const price__sale = this.querySelector(‘.price__sale’);
price__sale.querySelector(‘.price-item–regular’).innerHTML = <price-money><bdi>${theme.Currency.formatMoney(compare_at_price, window.shopSettings.moneyFormat)}</bdi></price-money>;
price__sale.querySelector(‘.price-item–sale’).innerHTML = <price-money><bdi>${theme.Currency.formatMoney(price, window.shopSettings.moneyFormat)}</bdi></price-money>;

what should i do so that the price money field will be displaying the value beside ATC also change when the variant is changed?