Dawn product page title / add to cart button

Store Design
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