Shopify themes, liquid, logos, and UX
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.
ADD TO CART - $Price
Any ideas on how to achieve this ?
Please share store URL so I can help you with this
Are you comfortable with liquid HTML changes? It is very simple you just need to move a few lines.
yes I can make changes if you give me the code to update
also im looking to have the compare at price above or below the regular price.
ex.
<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 !
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
Hi @cj18,
Please follow the steps below:
- Step 1: Please go to Actions > Edit code > main-product.liquid file and add id here:
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:
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!
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"
Hi @cj18,
Please send me the code of main-product.liquid file, I will check it for you
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025