Add multiple products to cart with one button

Technical Q&A

Topic summary

A developer is struggling to implement a button that adds multiple products to the cart simultaneously on their Shopify store. They followed a tutorial using AJAX/Fetch API and created a custom snippet included via Pagefly page builder, but the button doesn’t respond when clicked.

Key Technical Details:

  • Code is based on an external tutorial about AJAX API implementation
  • Button is embedded through a custom HTML/Liquid snippet in Pagefly
  • The implementation is for product bundles on a dedicated bundles page

Community Responses:

  • One user shared a working example and offered to review the code, suggesting to verify variant IDs using the .json URL trick
  • Another user encountered an “addAllItems is not defined” error with similar code
  • A jQuery/AJAX solution was shared that collects checked products and adds them via /cart/add.js
  • An app recommendation (MultiATC: Buy Button Anywhere) was provided as an alternative to custom coding

Status: The thread remains unresolved with no confirmed solution from the original poster. Multiple users expressed interest in finding a working implementation.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

Hey guys,
So we’ve recently added some product bundles to the website, and I’ve spent most of the day looking at things that try to explain how to add multiple products to the cart from AJAX to forms, but I can not wrap my head around why it’s not working. I’ll show what I currently have on my store, take from this article.

It’s on this page - https://gslfab.com.au/pages/gsl-bundles
It comes up with an ‘Add to cart’ button (haven’t styled it yet), but nothing happens when I click it. I’ve got the button linked from a page builder (Pagefly) and used custom html/liquid just to include a snippet I made, ‘{% include ‘add-multiple-cart’ %}’ and all that code is located in the snippet.

Long Story Short

If anyone knows how to make an add to cart button, that allows me to add multiple products to cart, and select the variants similar to what’s seen in the previous code (or if you have an alternate way that’s easier that’ll be great too), I - and I’m sure many others - would be ever greatful!

Thanks so much everyone

2

Hi Did you find a solution for this?

I did something similar for a client https://macaroner.com/products/build-your-own-box

I am working on another one as well using Web Components.

I would first check if you are getting the right variant ids.

Here is a trick if you go to a product page and add .json to the end of address in browser it will show a json object with all the data.

I’m happy to take a look at your code ig you like.

I am pst timezone (California)

I followed you on instagram.
https://www.instagram.com/stories/yourshopifyguy/

Cheers,
Mike Haslam

3

Hi Mike,

I’ve been trying out the same code and getting

Uncaught ReferenceError: addAllItems is not defined

Would be great if you can help fix this. I’ll PM you.

4

Mike and GSLFab - Do you guys resolve this? I have a similar problem, and would love to see how you solved yours. Best,

Robert

6

Hello there… Working with bundles and AJAX may quickly become complex, so I completely understand your aggravation.

I recently found MultiATC: Buy Button Anywhere to be quite helpful for this exact problem, if you’re willing to use an app. It enables you to add products to the basket from any page, including landing pages, blogs, and products, and to assign many products to a single button. You can also customize the functionality (e.g., add to cart vs. direct to checkout) and style the buttons.

You might avoid some hassles as a developer