Adding multiple products to cart via one product page's "Add to Cart" button

Technical Q&A

Topic summary

A developer is building a product bundle system with two components:

Current functionality:

  • A Shopify script detects when specific SKUs (XYZ) are in the cart and automatically applies bundle discounts

Desired functionality:

  • Create a bundle product page where one “Add to Cart” click adds multiple separate products (XYZ SKUs) simultaneously
  • Implement inventory validation: prevent bundle addition if any component SKU is out of stock

Proposed solutions:

  • Use Shopify’s Cart API (/cart/add.js) with an items array parameter to add multiple products via custom JavaScript
  • Override the default add-to-cart button to call this API
  • First retrieve the three product IDs, then pass them as an array to the API endpoint

Alternative approaches mentioned:

  • Third-party app “MultiATC - Buy Button Anywhere” handles multi-product additions with inventory checking
  • Custom coding services available for related product cart features

The discussion remains open with one participant seeking to learn from the original poster’s script implementation.

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

I am working on creating a bundle. Currently if XYZ skus are in the card, I have a script that will recognize that and Bundle them together and apply a discount for that bundle. On the other end, adding the products via 1 click.

Let’s say that I create a Product page for bundle XYZ skus. I want to just click that “Add to Cart” button and it will automatically put XYZ skus in the cart. So one click can add 3 separate products in the cart. I also need to account for inventory. If one of the skus XYZ is out of inventory. This bundle would not be able to be added to the cart. After that my script can do the calculations for discounts and pricing.

2

You can use cart API to add individual items to the cart: https://shopify.dev/api/ajax/reference/cart

Just override the add to cart button to call the API

3

First: you need to look at how the XYZ binding of three products, and get the three products id：

Second: you can call shopify provide API: / cart/add js items inside a parameter value is an array, and then added to this array
You can go to https://shopify.dev/api/ajax/reference/cart ,If you have any do not understand, at any time consulting me.

4

Hi Ian - I am looking to create a script to adds multiple products (a bundle) from a product page button click, with a discount for the bundle. Would you be willing to share some details about your script that does this? I’m hoping to not use an app do do this - and it sounds like you have done it. Any insight you can provide would be great. Thanks!

-Dave

5

You might find this app useful for what you’re trying to do: MultiATC - Buy Button Anywhere.
It lets you create a button that adds multiple products to the cart at once, even on a custom bundle product page. It also respects inventory, so if one item is out of stock, it won’t add the bundle.

6

Hi @ianRogers ,

We can custom code this feature for any theme to provide add to cart CTA for related product from cart page or drawer. We have implemented this feature where we provides option to map product as related.

When any of that product is in cart we make it mandatory to add related product in cart if not added.

In your case you just need to remove the mandatory validation and instead of linking the product we can provide the option of adding it into the cart.

Please refer the below video to see it in action.