All things Shopify and commerce
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.
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
Hi, thanks so much for this. Yes that seems easier just having them clock the original button. This worked!!
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
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
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.
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
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024