Shopify themes, liquid, logos, and UX
How can I add an extra 'add to cart button' to my product page. I would like it to go straight to cart not a link to the product page.
URL: Hygiadental.com
PW: Melek
Hi @Anonymous
Please create a Custom liquid section then add this code to Liquid.
<div>
<button type="button" class="button button--primary atc-second">Add to cart</button>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
var atcSecondButton = document.querySelector('.atc-second');
if (atcSecondButton) {
atcSecondButton.addEventListener('click', function() {
var productFormSubmitButton = document.querySelector('.product-form__submit');
if (productFormSubmitButton) {
productFormSubmitButton.click();
}
});
}
});
</script>
- Helpful? Like & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
Hi thank you, This has added an add to cart button though I would also like it to activate the add to cart function. What the link is doing is taking me back to the top of the product page.
You can do that by adding this value to link of button
#MainContent
- Helpful? Like & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
can you put it in for me as supposed to be? Nothing is happening on my end
Sorry, I did not explain clearly. I mean, please add the link I mentioned to button you got on your product page
- Helpful? Like & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
Hello @Anonymous
You can add code by following these steps
1. Go to Online Store -> Theme -> Open Customize.
2. Open your Product template.
3. Add new section from custom.liquid
4. Paste the below code from custom.liquid section
<div class="center">
<button id="ProductSubmitButton-template--17256408449124__main" type="submit" name="add" form="product-form-template--17256408449124__main" class="button button--primary" aria-haspopup="dialog">
<span>Add to cart</span>
<div class="loading__spinner hidden">
<svg aria-hidden="true" focusable="false" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
<circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
</svg>
</div>
</button>
</duv>
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.
Hi thankyou, This has added an add to cart button though I would also like it to activate the add to cart function. What the link is doing is taking me back to the top of the product page.
June brought summer energy to our community. Members jumped in with solutions, clicked ...
By JasonH Jun 5, 2025Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025