Sell products in bundles while tracking inventory separately

Caution

This is an advanced tutorial and is not supported by Shopify. Knowledge of web design languages such as HTML, CSS, Javascript and Liquid is required. We suggest hiring a Shopify Expert if you are not comfortable proceeding with the following tutorial.

Yes you can sell two products as a bundle on the same product page and track inventory separately, with the use of a Shopify App. We recommend using the Directed Edge Product Recommender.

The Directed Edge Product Recommender allows a visitor to buy an item along with one related product with a single button-click from the same product page. This example will demonstrate how to sell bikini tops and bottoms on one product page but maintain separate inventory counts.

Product inventory

You can also check out our app demo.

To set up two products on the same product page, follow these steps:

  1. Create all of your tops and bottoms products. Learn about creating products.

  2. After you have created all your products, click on the Apps tab.

  3. Install the Directed Edge Product Recommender through the Shopify App store.

  4. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  5. Find the theme you want to edit, click the ... button, and then click Edit HTML/CSS.

  6. Under the "Templates" folder, locate and click on product.liquid to open it in the online code editor.

  7. Copy this Bundle snippet into your product.liquid template. Paste the snippet right above your product description,


<script id="expressrex" src="http://shopify.directededge.com/widget/bundle?product={{product.id}}" type="text/javascript" charset="utf-8"></script>

Like so:

Product inventory 2

Go to the product details page for each top and bottom (or whatever 2 products you want to sell together on the same page), and click on the Apps button in the top righthand corner.

Click on Choose recommended products from the drop-down menu, like so:

Product inventory 3

Select the right top for your bottom, or the right bottom for your top:

Product inventory 4

Repeat for all tops and bottoms (or whatever 2 products you want to sell together on the same page) in your shop.

Visit the product pages on your storefront to make sure it works. Your customers now have the possibility of adding to the cart the main product on your page along with its matching top or bottom:

Product inventory 5

Don't worry, your customers will be able to select different sizes for tops and bottoms. They will be prompted to select whatever variant they want for each individual product. For example: they will be able to buy a small bottom with a medium top.

Want to discuss this page?

Visit the Shopify Community