Have your say in Community Polls: What was/is your greatest motivation to start your own business?

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

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 6 (6)

PaulNewton
Shopify Partner
7450 657 1564

 

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"

Contact paull.newton+shopifyforum@gmail.com for the solutions you need


Save time & money ,Ask Questions The Smart Way


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

Answers powered by coffee Thank Paul with 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
7450 657 1564

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.

 

 

 

 

Contact paull.newton+shopifyforum@gmail.com for the solutions you need


Save time & money ,Ask Questions The Smart Way


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

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


rkpindustry
New Member
5 0 0

Hello, Can you please tell me how and where to add code and please share code for add to cart through product page. Thank you

plants4friendz
Excursionist
43 1 10

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.

rkpindustry
New Member
5 0 0

Hello, Can you please tell me how and where to add code and please share code for add to cart through product page. Thank you