Adding Price to Add to Cart Button in Dawn Theme

Topic summary

Goal: display the product price inside the Add to Cart button and keep it updated when switching variants in Shopify’s Dawn theme.

Initial behavior: copying the price next to the button worked on page load but disappeared when changing variants in Dawn 4.0.

Fix confirmed: add a unique id around the price in the buy-buttons markup (e.g., a “price-button-[section]” element), then in global.js within renderProductInfo, copy the updated price from the freshly rendered HTML into the destination element via innerHTML. This keeps the button price in sync with variant changes.

Technical notes: variants are option-specific product versions with different prices; Liquid is Shopify’s templating language; global.js handles dynamic product updates; renderProductInfo runs after variant/section content is re-rendered.

Follow-ups: a request to also update the price with quantity changes was redirected to a new thread (no solution here). Questions about which file to edit for step 1 were not resolved in this thread.

Alternative: a simplified approach used a fixed id “price-button” and Liquid to render selected_or_first_available_variant.price; reported working for some, but a user on Dawn 14.0.0 said it didn’t work.

Status: solution validated for Dawn 4.0; compatibility for newer Dawn versions (e.g., 14.0.0) remains open.

Summarized with AI on December 24. AI used: gpt-5.

Hello,

This helps keep the price on the button when changing variants but does not change the price to the variant’s price. The price stays as the original variant’s price.

Backend:

Ideally, the price on the button would change when the variant is changed as well. Thank you!