Dawn product page title / add to cart button

Store Design

Topic summary

A user seeks to reposition elements on their Shopify Dawn theme product page: placing the price next to the product title and adding it to the “Add to Cart” button, plus displaying the compare-at price near the regular price.

Progress Made:

  • Another user provided detailed instructions involving edits to main-product.liquid and global.js files
  • Code snippets were shared to add an ID to the price element and render it within the cart button using JavaScript
  • The solution successfully added the price to the “Add to Cart” button

Outstanding Issue:

  • The price still doesn’t appear to the right of the product title as intended
  • The helper has requested the user share their main-product.liquid code for further troubleshooting

Note: Much of the conversation text appears corrupted or reversed, but the technical guidance involves modifying Liquid template files and JavaScript to relocate price display elements on the product page.

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

Hello. Im looking to place the price of the product to the right of the product title and to the “Add to Cart” button.

example.

cj18_0-1672428706585.png

ADD TO CART - $Price

Any ideas on how to achieve this ?

2

Please share store URL so I can help you with this

3

https://crystallation.com/

4

Are you comfortable with liquid HTML changes? It is very simple you just need to move a few lines.

5

yes I can make changes if you give me the code to update

6

also im looking to have the compare at price above or below the regular price.

ex.

cj18_0-1672430471814.png
cj18_0-1672430471814.png487×259 4.47 KB

7
  1. From your Shopify admin, go to “Online Store > Themes.”
  2. Find the theme that you want to edit, and click the “Actions” button next to it.
  3. From the dropdown menu, select “Edit code.”
  4. In the “Templates” folder, locate and click on the “product.liquid” file. This is the template that controls the layout and content of your product pages.
  5. Look for the section of the template that displays the product title and price. It should look something like this:
# {{ product.title }}
{{ product.price | money }}​

In above code {{ product.title }} is variable that displays product title and product.price shows prices. You need to adjust both variables.

Something like :

# {{ product.title }}

  {{ product.price | money }}

Keep in mind that this is just one example of how you might approach this task, and the exact code will depend on the specifics of your store and theme. If you are not comfortable editing the code of your theme, you may want to consider hiring a developer to help you make these changes.

Let me know if requires further assistance !

8

Im using the dawn theme. It would be nice to know exactly where to put this. and not have to hire a developer

i do not see a product.liquid in my template section only a main-product.liquid in the sections part

9

Hi @cj18 ,

Please follow the steps below:

  • Step 1: Please go to Actions > Edit code > main-product.liquid file and add id here:

Screenshot.png
Screenshot.png1133×694 56.2 KB

Code:


- {{ product.selected_or_first_available_variant.price | money }}
  • Step 2: Go to global.js file, find ‘renderProductInfo’ and add code here:

Screenshot (1).png
Screenshot (1).png1214×691 62.7 KB

Code:

const priceButton = `price-button-${this.dataset.section}`;
        const destinationPriceButton = document.getElementById(priceButton);
        const sourcePriceButton = html.getElementById(priceButton);
        if (destinationPriceButton && sourcePriceButton) destinationPriceButton.innerHTML = sourcePriceButton.innerHTML;

Hope it helps!

10

awesome! looks like this worked adding the price to the “add to cart” button but im still not seeing the price to the right of the “title”

11

Hi @cj18 ,

Please send me the code of main-product.liquid file, I will check it for you