Adding an "add to cart" button throughout my product page.

buoya23
Excursionist
18 1 1

Hi all,

 

I am trying to add an "add to cart" button a few times throughout my product page. The only option I seem to have is s "shop now" button which takes the user back up to the top of the page (to the prodcut description) which disrupts their flow. I was them to be able to simply add to cart and keep scrolling, retuning to complete the purchase when they're ready.

 

I have tried something from this thread, a liquid Css code but as you can see from this picture it just doenst look any good design wise. 

 

Any tips would be hugely appreciated.

 

I am using the Be Yours Theme and the product page is https://www.buoyavital.com/products/rest-restore-sleep-formula

 

Thank you.

 

Screenshot 2023-05-02 at 12.41.10 pm.png

 

 

Replies 4 (4)

PaulNewton
Shopify Partner
6338 578 1343

 

Your code is probably just missing some css clases on the button (product-form__submit button button--full-width)

Keep in mind {{products.variants.first.id}} will not update if the customer selects other options (such as size, color,etc)

 

Sometimes the indirect approach can be better, don't try to insert specific new buttons with specific behavior.

Just make the new buttons make it so the original button is clicked.

<button onclick="document.querySelector('[name=add]').click();" class="product-form__submit button button--full-width">Add to cart</button>

 

There are caveats to this band-aid approach it wont work reliably on pages with multiple products with multiple add-to-cart buttons; you would need to increase the specificity of the querySelector to be less generic. Here it's just targeting ANY thing with the attribute pattern "name=add"

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


buoya23
Excursionist
18 1 1

Hi, thanks so much for this. Yes that seems easier just having them clock the original button. This worked!! 

PaulNewton
Shopify Partner
6338 578 1343

Your welcome, glad it worked for you. To aid future merchants you can mark my answer as the solution if you want.

 

Do keep an eye out for those caveats though, this approach may behave oddly with things like quickviews/quickbuy buttons which some themes put on the product pages in sections like recommended-products,etc.

 

 

 

 

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


plants4friendz
Excursionist
37 1 9

Would you be able to help me with how this code could work on my page? I'm assuming there's a part of the code I'm missing.

 

Here's the page I'm trying to add buttons throughout: https://thespiralpath.love/products/untamed-a-journey-home-to-your-wildish-self

 

I just want all the buttons to add to cart.