Re: Product page extra add to cart button

Product page extra add to cart button

Not applicable

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

 

Screenshot 2024-07-31 at 5.21.08 PM.png

Replies 7 (7)

Dan-From-Ryviu
Shopify Partner
12022 2350 2529

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>

 

Screenshot 2024-07-31 at 14.31.38.png

- 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.

Not applicable

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.

Dan-From-Ryviu
Shopify Partner
12022 2350 2529

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.

Not applicable

can you put it in for me as supposed to be? Nothing is happening on my end

Dan-From-Ryviu
Shopify Partner
12022 2350 2529

Sorry, I did not explain clearly. I mean, please add the link I mentioned to button you got on your product page Screenshot 2024-08-02 at 10.05.25.png

- 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.

K-Mahesh
Shopify Partner
21 3 5

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>

 

Screenshot 2024-07-31 143731.png

 

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

Not applicable

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.