All working now, seems site hadn’t been updated for a while so scripts were outdated and conflicting with code. Thanks
Topic summary
Users are seeking to add an “Add to Cart” button directly on collection pages for the Shopify Prestige theme, allowing customers to add products without leaving the collection view.
Initial Solutions:
- Early attempts involved custom HTML forms and jQuery-based code snippets, but these often failed to work properly or became outdated with theme updates.
- Issues included buttons not being clickable, items not appearing in cart until page refresh, and compatibility problems with newer Prestige versions.
Working Solution (by snde, post #17):
- Add button markup to
snippets/product-item.liquidafter the color swatch section - Insert vanilla JavaScript function
_addMeToCart()inassets/custom.js - Uses Shopify’s Cart API (
/cart/add.js) with fetch requests - Includes
data-action="open-drawer"to trigger the cart drawer automatically - Successfully adds items and opens side cart without page refresh
Ongoing Challenges:
- Variant selection: Multiple users want to add variant selectors before adding to cart (sizes, colors)
- Button alignment: Requests for buttons to align evenly at bottom of product cards
- Conditional display: Hiding buttons for sold-out or unavailable products
- Styling: Making buttons appear on hover instead of always visible
Status: The vanilla JavaScript solution works for basic single-variant products, but variant selection and advanced customization remain unresolved.
1 Like
Hey - I am currently having the same issue. Adding to cart > cart slider opens > no products appear.
Was there some code you removed yourself? Or did it automatically fix itself?
Thanks so much for this @snde ! Working like a charm.
What is the best way to prompt a variant selector before adding the item to cart? For example, if someone adds a hat it works perfectly since there is 1 size, but if they add a shirt I’d like them to be able to select their size variant before it is added.
Thanks in advance!
No. Did you insert the javascript @assets/custom.js?
@snde I also would like to know if there is a way to implement a variant selector or even better use the default product item variant selector from the theme itself. Everything works as it should. I pasted the js into custom.js. Thanks !
Sorry. I never tried that. Products in my store don’t have variants. I suppose a specialist can help you here.
Hi! Is there a way to hide the ‘add to cart’ button on the collections page, for those products that are sold out or coming soon? I can’t seem to make it work and I would appreciate your help so much!
Thanks
Please go to Online store > Customize > Theme settings > Cart > Select the Drawer option and save it.
For more details: contact me ifarhanrifat@gmail.com
Hey @snde ,
Thanks for the snippet. It’s been really helpful. I’m having issues getting the cart to correctly update without refreshing the page. I’m able to add the item into the cart and get the little popup to appear as well with the cart but it’s just an empty page.
I added the code to both the custom.js file under Assets and the other code under Snippets/product-item.liquid however the cart remains empty until I hit refresh. What am I missing? Any and all help would be greatly appreciated on this matter!
Thanks!
Very helpful! Works well for me. Any chance you have a modified snippet that has both the Add to Cart CTA + a View Details CTA? So customers can have a clear option to go to the Product detail page. Thank you!!
Hello,
Im new and I am trying to add the add to cart button as well on the prestige theme. can you please explain how should I add it?
Thank you
Danae
could you please guide me on where should I Put this code on my website?
Hi Andrei,
please try adding the original content that is content in your base language (in my case English) to Shopify
so that the “Add to cart” text is entered there:
instead of just showing the placeholder like:
This should normally but not always fix this issue.
Do you have a solution where the button is shown on hover like the original quick buy button, but instead of the ‘plus’ symbol, it just says ‘add to cart’?