Integrating Simple Bundles with a Hydrogen Storefront

In this help document, we will guide you through the process of integrating bundles created with Simple Bundles with a Hydrogen storefront, as well as with other channels like a custom iOS or Android app that uses Shopify's storefront API. The detailed steps and code examples for the integration can be found in the project's README on GitHub.

1. Add Bundle Product Items

The first major section is about adding bundle product items to your storefront. This involves making metafields available, adding necessary permissions, and then using mutation code to expose these metafields in your product queries. Once that's done, you will need to create a component for your bundled items and reference it in your main Product component.

Here are the basic steps:

1. Make metafields available by installing the Shopify GraphiQL App.
2. Ensure all necessary permissions are added.
3. Add mutation code inside the GraphiQL app.
4. Once metafields are exposed, add them within your product queries.
5. Create a component for your bundled items.
6. Reference and parse the JSON of the metafield string in your main Product component.
7. Add the bundleItems component expression within your main product component.
8. Check bundled products with infinite options or non-bundled products to make sure the bundled items component doesn't appear where it shouldn't.

For more details, please refer to the Add Bundle Product Items section of the project's README on GitHub.

2. Add Infinite Bundle Product Select Options

The second major section covers the process of adding bundle select options for infinite options bundles. This involves exposing the necessary metafields, updating your GraphQL queries, and then creating components to display the bundled options as select fields.

Here are the basic steps:

1. Expose Variant Options and Variant Options v2 Metafields in the Shopify GraphiQL App.
2. Update GraphQL to import both variant options metafields within your PRODUCT_FRAGMENT query.
3. Import metafield data from Shopify, parse the JSON, and pass it to child components.
4. Create a component to display the bundled options as select fields.
5. Update your ProductForm component to include the new component and data.
6. Test the infinite bundle options to make sure the select fields show up for each product in the bundle.

For more details, please refer to the Add Infinite Bundle Product Select Options section of the project's README on GitHub.