How to Add Product Bundles Manually to Cart

In this tutorial, we’ll guide you through adding product bundles manually to the cart. This method is useful if you want to create your own bundling experience while still leveraging Giftship’s Multiship feature.

Important Note: This is an advanced tutorial for qualified Shopify developers with web development experience.

Understanding Giftship’s Bundling Mechanism

First, it’s important to understand what happens when you add a bundle to your cart using Giftship’s product upsell block configured for bundling.

Visit Giftship’s demo store and add a product bundle to your cart:

Giftship Demo Store

Next, go to your cart page and append .json at the end of the URL:

Cart JSON View

This will expose the cart data in raw JSON format. Scroll down to the items and review the bundle properties as shown below:

"properties": {
    "_gs_bundle_prices": [
      "500",
      "1000"
    ],
    "_gs_bundle_contents": [
      "Upsell 1",
      "Upsell 2"
    ],
    "_gs_bundle_ids": [
      "4098742311513",
      "4098574467417"
    ]
  }

Breakdown of Bundle Properties

• _gs_bundle_ids: The variant IDs of each bundled item.
• _gs_bundle_contents: The product titles of the bundled items.
• _gs_bundle_prices: The prices of the variants.

Inspecting the Product Form

Additionally, if you inspect the product form when adding an upsell product, within Giftship’s container #gsAppContainer, you will see a <div> with the ID #gsBundlePrices containing the following markup:

<div id="gsBundlePrices">
  <input type="hidden" name="properties[_gs_bundle_prices][]" value="500">
  <input type="hidden" name="properties[_gs_bundle_contents][]" value="Upsell 1">
  <input type="hidden" name="properties[_gs_bundle_ids][]" value="4098574231513">
  <input type="hidden" name="properties[_gs_bundle_prices][]" value="1000">
  <input type="hidden" name="properties[_gs_bundle_contents][]" value="Upsell 2">
  <input type="hidden" name="properties[_gs_bundle_ids][]" value="4098544867417">
</div>

When you add the bundle to the cart, if your theme’s “Add to Cart” function follows Shopify’s best practices, it will submit the entire form data to Shopify, ensuring that the Giftship product is properly bundled.

Bonus: Setting Bundle Quantities

If you want to set specific quantities for each bundle item, you can include the _gs_bundle_quantities property like this:

"_gs_bundle_quantities": [
  "1",
  "1"
]

This ensures that each bundled item has the correct quantity when added to the cart.