Create a bundle app

In this tutorial, you’ll learn how to do the following tasks:

• Install the Shopify bundles sample app.
• Model a bundle by creating metafields on variants, creating a bundle parent product variant, and defining the bundle on child product variants.
• Enable the bundle through extensions.

• You've created a Partner account.
• You've created a development store.

The sample app is currently published under the Shopify organization, and available for installation on stores.

1. Navigate to the Shopify bundles sample app's installation URL, and enter your development store's storefront URL into the text box.

   You're redirected to the Shopify admin for the store and prompted to install the app.

2. Click Install app.

You model a bundle by creating metafields on variants, creating a bundle parent product variant, and defining the bundle on child product variants.

1. In the Shopify admin, go to Settings.

2. Click Custom data in the side navigation.

3. Under Metafields, click Variants.

4. Click Add definition to create the following metafield definitions and click Save:

   component_reference metafield definition:

   Field	Value
   Name	component_reference
   Namespace and key	custom.component_reference (Don't change the default)
   Description	Components included in Bundle
   Select type	Product Variant - List of product variants

   component_quantities metafield definition:

   Field	Value
   Name	component_quantities
   Namespace and key	custom.component_quantities (Don't change the default)
   Description	Quantity of components included in Bundle
   Select type	Integer - List of values
   Validation	Minimum value - 1

   component_parents metafield definition:

   Field	Value
   Name	component_parents
   Namespace and key	custom.component_parents (Don't change the default)
   Description	Child component parent definition
   Select type	JSON
   Rules	Refer to the JSON rules example.

1. Create a product that represents the bundle with the following requirements:

• At least one available in inventory
• Price is more than 0
• At least one option, since you'll need access to the product variant.

1. After saving the product, click Edit next to the variant of the option. This will be a bundle parent product variant.

2. Scroll to the Metafields section of the variant edit page.

3. Open up the product variants that will be included in the bundle in separate browser tabs.

4. On the parent product variant page, click the component_reference field under Metafields.

5. Select the product variants that will be bundled, and then click Save.

6. Select the component_quantities field under Metafields.

7. Click Save on the parent product variant page.

Complete the following steps for each children product variant defined in component_reference in the previous step:

1. On the child product variant page, click the component_parents field under Metafields.

2. Using the JSON schema defined, build the bundle definition.

The bundle-cart-transform extension uses the cart_transform function in Shopify to update the cart. The sample app uses the extension to do two transformations:

• Merge the bundle
• Expand the bundle

If the extension detects all of the components of a given bundle in the cart at checkout, then the extension returns merge operations to Shopify that combine the respective components and present the given parent_product_variant.

In the reference app, the merge functionality reads over all of the product_variants, and looks for the metafield with the following properties: namespace: "custom", key: "component_parents".

This query is defined in extensions/bundle-cart-transform/input.graphql:

component_parents is a metafield on product_variant with the content type JSON. Its value is an array of objects defining the bundle rules. For the merge function to work in the sample app, each child belonging to a bundle must have component_parents defined. A bundle rule has the following shape:

For example, you might have a bundle that contains two shirts and one pair of pants. The bundle parent product_variant ID is 6, the shirt product_variant ID included in the bundle is 3 and the pants product_variant ID included in the bundle is 4.

The following example shows the value of the component_parents metafield that must belong to both the shirt product_variant and pants product_variant for the merge functionality in the extension to work.

The order of the component_reference and the component_quantities match up. In the example, the first component_quantities value (2) matches with the first component_reference value (gid://shopify/ProductVariant/3) because two shirts are required for the bundle to be complete.

Notice that the extension uses Shopify's product_variant GIDs. The ID of the product_variant must be prepended with gid://shopify/ProductVariant/ to denote that it's a product_variant ID.

Bundles apps are responsible for managing product variants and options. Bundles apps need to create user interface product management flows to do the following:

• Create a new product. At least one bundle configuration must be created.
• Update an existing product.

These pages must be implemented using Shopify App Bridge.

If your bundles app needs to customize the storefront, then you need to create an app block that encapsulates that logic.

Learn how to create an app block using theme app extensions.

• Learn more about how Shopify Functions work and the benefits of using Shopify Functions.
• Consult the API references for Shopify Functions.
• Learn how to use variables in your input query.