Re: dawn product page title / add to cart button

dawn product page title / add to cart button

cj18
Excursionist
26 0 5

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 ?

Replies 10 (10)

SocialAutoPost
Shopify Partner
434 59 104

Please share store URL so I can help you with this

Was the reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution
Auto post your Shopify products to Instagram, Facebook, Pinterest, LinkedIn and Twitter.
App: Social Schedular
cj18
Excursionist
26 0 5
SocialAutoPost
Shopify Partner
434 59 104

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

Was the reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution
Auto post your Shopify products to Instagram, Facebook, Pinterest, LinkedIn and Twitter.
App: Social Schedular
cj18
Excursionist
26 0 5

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

cj18
Excursionist
26 0 5

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

 

ex. 

cj18_0-1672430471814.png

 

SocialAutoPost
Shopify Partner
434 59 104
  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:

 

<h1 class="product-title">{{ product.title }}</h1>
<div class="price price--large price--on-sale  price--show-badge">{{ product.price | money }}</span>​

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

 

Something like :

<h1 class="product-title">{{ product.title }}</h1>
<div style="float: right;">
  <span class="product-price">{{ product.price | money }}</span>
</div>

 

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 ! 

 

 

Was the reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution
Auto post your Shopify products to Instagram, Facebook, Pinterest, LinkedIn and Twitter.
App: Social Schedular
cj18
Excursionist
26 0 5

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

LitExtension
Shopify Partner
4860 1002 1151

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

Code:

<span id="price-button-{{ section.id }}">
- {{ product.selected_or_first_available_variant.price | money }}
<span>

- Step 2: Go to global.js file, find 'renderProductInfo' and add code here:

Screenshot (1).png

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!

 

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
cj18
Excursionist
26 0 5

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"

 

LitExtension
Shopify Partner
4860 1002 1151

Hi @cj18,

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

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify