The Shopify bundles sample app is an example of how to build a bundle app, and shows an implementation of a `cart_transform` function to update the cart. It also shows how to do merge and expand transformations, and offers guidance on UI extensions to render bundles. ## What you'll learn 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. ## Requirements - You've created a [Partner account](https://www.shopify.com/partners). - You've created a [development store](/docs/api/development-stores#create-a-development-store-to-test-your-app). ## Step 1: Install the Shopify bundles sample app 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](https://shopify-bundles-reference.shopifysvc.com/auth), 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**. ## Step 2: Model a bundle You model a bundle by creating metafields on variants, creating a bundle parent product variant, and defining the bundle on child product variants. ### Create metafields on product variants 1. In the Shopify admin, go to **Settings**. 2. Click **Custom data** in the side navigation. > Note: > The button might say **Metafields** depending on your store's settings. 3. Under **Metafields**, click **Variants**. 4. Click **Add definition** to create the following metafield definitions and click **Save**: `component_reference` metafield definition: <table> <thead> <tr> <th>Field</th> <th>Value</th> </tr> </thead> <tbody> <tr> <td>Name</td> <td><code>component_reference</code></td> </tr> <tr> <td>Namespace and key</td> <td><code>custom.component_reference</code> (Don't change the default)</td> </tr> <tr> <td>Description</td> <td><code>Components included in Bundle</code></td> </tr> <tr> <td>Select type</td> <td><code>Product Variant</code> - <code>List of product variants</code></td> </tr> </tbody> </table> `component_quantities` metafield definition: <table> <thead> <tr> <th>Field</th> <th>Value</th> </tr> </thead> <tbody> <tr> <td>Name</td> <td><code>component_quantities</code></td> </tr> <tr> <td>Namespace and key</td> <td><code>custom.component_quantities</code> (Don't change the default)</td> </tr> <tr> <td>Description</td> <td><code>Quantity of components included in Bundle</code></td> </tr> <tr> <td>Select type</td> <td><code>Integer</code> - <code>List of values</code></td> </tr> <tr> <td>Validation</td> <td><code>Minimum value</code> - <code>1</code></td> </tr> </tbody> </table> `component_parents` metafield definition: <table> <thead> <tr> <th>Field</th> <th>Value</th> </tr> </thead> <tbody> <tr> <td>Name</td> <td><code>component_parents</code></td> </tr> <tr> <td>Namespace and key</td> <td><code>custom.component_parents</code> (Don't change the default)</td> </tr> <tr> <td>Description</td> <td><code>Child component parent definition</code></td> </tr> <tr> <td>Select type</td> <td><code>JSON</code></td> </tr> <tr> <td>Rules</td> <td>Refer to the JSON rules example.</td> </tr> </tbody> </table> <p> <div class="react-code-block" data-preset="file"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script data-option="filename" data-value="JSON rules"></script> <script type="text/plain" data-language="json"> RAW_MD_CONTENT{ "$schema": "https://json-schema.org/draft/2020-12/schema", "title": "Bundle component parents", "description": "A definition of the bundle a child belongs to", "type": "array", "items":{ "type": "object", "properties": { "id": { "description": "ID of bundle parent product variant: gid://shopify/ProductVariant/<id number>", "type": "string" }, "component_reference": { "type": "object", "properties": { "value": { "description": "Array of product variant IDs: [gid://shopify/ProductVariant/<id number>]", "type": "array", "items": { "type": "string" }, "minItems": 1, "uniqueItems": true } } }, "component_quantities": { "type": "object", "properties": { "value": { "description": "Array of quantities of product variants defined in component_reference: [1]", "type": "array", "items": { "type": "integer" }, "minItems": 1 } } } } }, "required": [ "id", "component_reference", "component_quantities" ] } END_RAW_MD_CONTENT</script> </div> </p> ### Create a bundle parent product variant 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. 2. After saving the product, click **Edit** next to the variant of the option. This will be a bundle parent product variant. 3. Scroll to the **Metafields** section of the variant edit page. 4. Open up the product variants that will be included in the bundle in separate browser tabs. > Note: > You'll need access to the product variant IDs of the bundled products while defining them. The product variant IDs can be found in the URL of the product variant: `https://admin.shopify.com/store/<your store>/products/<product ID>/variants/<product variant ID>`. 5. On the parent product variant page, click the `component_reference` field under **Metafields**. 6. Select the product variants that will be bundled, and then click **Save**. 7. Select the `component_quantities` field under **Metafields**. > Note: > Add a quantity for each `component_reference` in the bundle. The order matters, as the quantity entered will correspond with the `component_reference` entered. 8. Click **Save** on the parent product variant page. > Caution: > Don't exit this page, as you'll need the ID from the URL. ### Define the bundle on child product variants 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. > Note: > The `component_reference` and `component_quantities` values must match the values defined on the parent in the previous step. <p> <div class="react-code-block" data-preset="file"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script data-option="filename" data-value="Example"></script> <script type="text/plain" data-language="json"> RAW_MD_CONTENT[ { "id": "gid://shopify/ProductVariant/<ID of parent product variant>", "component_reference": { "value": [ "gid://shopify/ProductVariant/<ID of first child product variant>", "gid://shopify/ProductVariant/<ID of second child product variant>" ] }, "component_quantities": { "value": [ <quantity of first product variant in bundle>, <quantity of second product variant in bundle> ] } } ] END_RAW_MD_CONTENT</script> </div> </p> ## Step 3: Enable the bundle through extensions 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 ### Merge 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`: <p> <div class="react-code-block" data-preset="file"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script data-option="filename" data-value="Query"></script> <script type="text/plain" data-language="graphql"> RAW_MD_CONTENTquery Input { cart { lines { id quantity merchandise { ... on ProductVariant { id component_parents: metafield( namespace: "custom" key: "component_parents" ) { value } } } } } } END_RAW_MD_CONTENT</script> </div> </p> `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: <p> <div class="react-code-block" data-preset="file"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script data-option="filename" data-value="Bundle rule"></script> <script type="text/plain" data-language="json"> RAW_MD_CONTENT{ "id": <Bundle parent ProductVariant ID>, "component_reference": { "value": <Array of Bundle children ProductVariant IDs> }, "component_quantities": { "value": <Array of quantities for children ProductVariant IDs> } } END_RAW_MD_CONTENT</script> </div> </p> 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. <p> <div class="react-code-block" data-preset="file"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script data-option="filename" data-value="Example"></script> <script type="text/plain" data-language="json"> RAW_MD_CONTENT[ { "id": "gid://shopify/ProductVariant/6", "component_reference": { "value": [ "gid://shopify/ProductVariant/3", "gid://shopify/ProductVariant/4" ] }, "component_quantities": { "value": [ 2, 1 ] } } ] END_RAW_MD_CONTENT</script> </div> </p> 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. ### Rendering bundles in storefront 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](/docs/api/app-bridge). ### Creating an app block 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](/docs/apps/build/online-store/theme-app-extensions). ## Next steps - Learn more about how [Shopify Functions](/docs/apps/build/functions) work and the benefits of using Shopify Functions. - Consult the [API references for Shopify Functions](/docs/api/functions). - Learn how to use [variables](/docs/apps/build/functions/input-output/use-variables-input-queries) in your input query.