Bundles in Hydrogen
This recipe adds special styling for product bundles on your Hydrogen storefront. Customers will see badges and relevant cover images for bundles when they're viewing product and collection pages.
In this recipe you'll make the following changes:
- Set up the Shopify Bundles app in your Shopify admin and create a new product bundle.
- Update the GraphQL fragments to query for bundles to identify bundled products.
- Update the product and collection templates to display badges on product listings, update the copy for the cart buttons, and display bundle-specific information on product and collection pages.
- Update the cart line item template to display the bundle badge as needed.
Anchor to RequirementsRequirements
To use product bundles, you need to install a bundles app in your Shopify admin. In this recipe, we'll use the Shopify Bundles app.
Anchor to IngredientsIngredients
New files added to the template by this recipe.
| File | Description |
|---|---|
| app/components/BundleBadge.tsx | A badge displayed on bundle product listings. |
| app/components/BundledVariants.tsx | A component that wraps the variants of a bundle product in a single product listing. |
Anchor to Step 1: Set up the Shopify Bundles appStep 1: Set up the Shopify Bundles app
-
Install the Shopify Bundles app in your Shopify admin.
-
Make sure your store meets the eligibility requirements.
-
From the Bundles page, create a new bundle.
Anchor to Step 2: Create the BundleBadge componentStep 2: Create the Bundle
Create a new BundleBadge component to be displayed on bundle product listings.
File
export function BundleBadge() {
return (
<div
style={{
position: 'absolute',
padding: '.5rem .75rem',
fontSize: '11px',
backgroundColor: '#10804c',
color: 'white',
top: '1rem',
right: '1rem',
}}
>
BUNDLE
</div>
);
}
Anchor to Step 3: Create a new BundledVariants componentStep 3: Create a new Bundled
Create a new BundledVariants component that wraps the variants of a bundle product in a single product listing.
File
import {Link} from 'react-router';
import {Image} from '@shopify/hydrogen';
import type {
ProductVariantComponent,
Image as ShopifyImage,
} from '@shopify/hydrogen/storefront-api-types';
export function BundledVariants({
variants,
}: {
variants: ProductVariantComponent[];
}) {
return (
<div
style={{
display: 'flex',
flexDirection: 'column',
paddingTop: '1rem',
}}
>
{variants
?.map(({productVariant: bundledVariant, quantity}) => {
const url = `/products/${bundledVariant.product.handle}`;
return (
<Link
style={{
display: 'flex',
flexDirection: 'row',
marginBottom: '.5rem',
}}
to={url}
key={bundledVariant.id}
>
<Image
alt={bundledVariant.title}
aspectRatio="1/1"
height={60}
loading="lazy"
width={60}
data={bundledVariant.image as ShopifyImage}
/>
<div
style={{
display: 'flex',
flexDirection: 'column',
paddingLeft: '1rem',
}}
>
<small>
{bundledVariant.product.title}
{bundledVariant.title !== 'Default Title'
? `- ${bundledVariant.title}`
: null}
</small>
<small>Qty: {quantity}</small>
</div>
</Link>
);
})
.filter(Boolean)}
</div>
);
}
Anchor to Step 4: Query bundle pricing for recommended productsStep 4: Query bundle pricing for recommended products
Add maxVariantPrice to the RecommendedProducts query's product fields.
amount
currencyCode
}
+ maxVariantPrice {
+ amount
+ currencyCode
+ }
}
featuredImage {
id
Anchor to Step 5: Show bundled products on the product pageStep 5: Show bundled products on the product page
- Add the
requiresComponentsfield to theProductfragment, which is used to identify bundled products. - Pass the
isBundleflag to theProductImagecomponent.
File
import {ProductImage} from '~/components/ProductImage';
import {ProductForm} from '~/components/ProductForm';
import {redirectIfHandleIsLocalized} from '~/lib/redirect';
+import type {ProductVariantComponent} from '@shopify/hydrogen/storefront-api-types';
+import {BundledVariants} from '~/components/BundledVariants';
export const meta: Route.MetaFunction = ({data}) => {
return [
const {title, descriptionHtml} = product;
+ const isBundle = Boolean(product.isBundle?.requiresComponents);
+ const bundledVariants = isBundle ? product.isBundle?.components.nodes : null;
+
return (
<div className="product">
- <ProductImage image={selectedVariant?.image} />
+ <ProductImage image={selectedVariant?.image} isBundle={isBundle} />
<div className="product-main">
<h1>{title}</h1>
<ProductPrice
<ProductForm
productOptions={productOptions}
selectedVariant={selectedVariant}
+ isBundle={isBundle}
/>
<br />
<br />
<br />
<div dangerouslySetInnerHTML={{__html: descriptionHtml}} />
<br />
+ {isBundle && (
+ <div>
+ <h4>Bundled Products</h4>
+ <BundledVariants
+ variants={bundledVariants as ProductVariantComponent[]}
+ />
+ </div>
+ )}
</div>
<Analytics.ProductView
data={{
amount
currencyCode
}
+ requiresComponents
+ components(first: 10) {
+ nodes {
+ productVariant {
+ id
+ title
+ product {
+ handle
+ }
+ }
+ quantity
+ }
+ }
+ groupedBy(first: 10) {
+ nodes {
+ id
+ title
+ product {
+ handle
+ }
+ }
+ }
}
` as const;
adjacentVariants (selectedOptions: $selectedOptions) {
...ProductVariant
}
+ # Check if the product is a bundle
+ isBundle: selectedOrFirstAvailableVariant(ignoreUnknownOptions: true, selectedOptions: { name: "", value: ""}) {
+ ...on ProductVariant {
+ requiresComponents
+ components(first: 100) {
+ nodes {
+ productVariant {
+ ...ProductVariant
+ }
+ quantity
+ }
+ }
+ groupedBy(first: 100) {
+ nodes {
+ id
+ }
+ }
+ }
+ }
seo {
description
title
Anchor to Step 6: Detect bundles in collection listingsStep 6: Detect bundles in collection listings
Like the previous step, use the requiresComponents field to detect if the product item is a bundle.
...MoneyProductItem
}
}
+ # Check if the product is a bundle
+ isBundle: selectedOrFirstAvailableVariant(ignoreUnknownOptions: true, selectedOptions: { name: "", value: ""}) {
+ ...on ProductVariant {
+ requiresComponents
+ }
+ }
}
` as const;
-// NOTE: https://shopify.dev/docs/api/storefront/2022-04/objects/collection
+// NOTE: https://shopify.dev/docs/api/storefront/latest/objects/collection
const COLLECTION_QUERY = `#graphql
${PRODUCT_ITEM_FRAGMENT}
query Collection(
Anchor to Step 7: Identify bundles in the cartStep 7: Identify bundles in the cart
Use the requiresComponents field to determine if a cart line item is a bundle.
name
value
}
+ requiresComponents
+ components(first: 10) {
+ nodes {
+ productVariant {
+ id
+ title
+ product {
+ handle
+ }
+ }
+ quantity
+ }
+ }
}
}
}
name
value
}
+ requiresComponents
+ components(first: 10) {
+ nodes {
+ productVariant {
+ id
+ title
+ product {
+ handle
+ }
+ }
+ quantity
+ }
+ }
+ groupedBy(first: 10) {
+ nodes {
+ id
+ title
+ product {
+ handle
+ }
+ }
+ }
}
}
}
Anchor to Step 8: Show bundle badges in the cartStep 8: Show bundle badges in the cart
If a product is a bundle, show the BundleBadge component in the cart line item.
import {ProductPrice} from './ProductPrice';
import {useAside} from './Aside';
import type {CartApiQueryFragment} from 'storefrontapi.generated';
+import {BundleBadge} from '~/components/BundleBadge';
type CartLine = OptimisticCartLine<CartApiQueryFragment>;
const {product, title, image, selectedOptions} = merchandise;
const lineItemUrl = useVariantUrl(product.handle, selectedOptions);
const {close} = useAside();
+ const isBundle = Boolean(line.merchandise.requiresComponents);
return (
<li key={id} className="cart-line">
/>
)}
- <div>
+ <div style={{display: 'flex', flexDirection: 'column', width: '100%'}}>
<Link
+ style={{position: 'relative'}}
prefetch="intent"
to={lineItemUrl}
onClick={() => {
}
}}
>
- <p>
+ <p style={{maxWidth: '60%'}}>
<strong>{product.title}</strong>
</p>
+ {isBundle ? <BundleBadge /> : null}
</Link>
<ProductPrice price={line?.cost?.totalAmount} />
<ul>
If a product is a bundle, update the text of the product button.
export function ProductForm({
productOptions,
selectedVariant,
+ isBundle,
}: {
productOptions: MappedProductOptions[];
selectedVariant: ProductFragment['selectedOrFirstAvailableVariant'];
+ isBundle: boolean;
}) {
const navigate = useNavigate();
const {open} = useAside();
: []
}
>
- {selectedVariant?.availableForSale ? 'Add to cart' : 'Sold out'}
+ {selectedVariant?.availableForSale
+ ? isBundle
+ ? 'Add bundle to cart'
+ : 'Add to cart'
+ : 'Sold out'}
</AddToCartButton>
</div>
);
Anchor to Step 10: Show bundle badges on product imagesStep 10: Show bundle badges on product images
If a product is a bundle, show the BundleBadge component in the ProductImage component.
import type {ProductVariantFragment} from 'storefrontapi.generated';
import {Image} from '@shopify/hydrogen';
+import {BundleBadge} from './BundleBadge';
export function ProductImage({
image,
+ isBundle = false,
}: {
image: ProductVariantFragment['image'];
+ isBundle: boolean;
}) {
if (!image) {
return <div className="product-image" />;
key={image.id}
sizes="(min-width: 45em) 50vw, 100vw"
/>
+ {isBundle ? <BundleBadge /> : null}
</div>
);
}
Anchor to Step 11: Show bundle badges on product cardsStep 11: Show bundle badges on product cards
If a product is a bundle, show the BundleBadge component in the ProductItem component.
File
import {Link} from 'react-router';
import {Image, Money} from '@shopify/hydrogen';
-import type {
- ProductItemFragment,
- CollectionItemFragment,
- RecommendedProductFragment,
-} from 'storefrontapi.generated';
+import type {ProductItemFragment} from 'storefrontapi.generated';
import {useVariantUrl} from '~/lib/variants';
+import {BundleBadge} from '~/components/BundleBadge';
export function ProductItem({
product,
loading,
}: {
- product:
- | CollectionItemFragment
- | ProductItemFragment
- | RecommendedProductFragment;
+ product: ProductItemFragment;
loading?: 'eager' | 'lazy';
}) {
const variantUrl = useVariantUrl(product.handle);
- const image = product.featuredImage;
+ const isBundle = product?.isBundle?.requiresComponents;
+
return (
<Link
className="product-item"
prefetch="intent"
to={variantUrl}
>
- {image && (
- <Image
- alt={image.altText || product.title}
- aspectRatio="1/1"
- data={image}
- loading={loading}
- sizes="(min-width: 45em) 400px, 100vw"
- />
- )}
- <h4>{product.title}</h4>
- <small>
- <Money data={product.priceRange.minVariantPrice} />
- </small>
+ <div style={{position: 'relative'}}>
+ {product.featuredImage && (
+ <Image
+ alt={product.featuredImage.altText || product.title}
+ aspectRatio="1/1"
+ data={product.featuredImage}
+ loading={loading}
+ sizes="(min-width: 45em) 400px, 100vw"
+ />
+ )}
+ <h4>{product.title}</h4>
+ <small>
+ <Money data={product.priceRange.minVariantPrice} />
+ </small>
+ {isBundle && <BundleBadge />}
+ </div>
</Link>
);
}
Anchor to Step 12: Position bundle badges on imagesStep 12: Position bundle badges on images
Make sure the bundle badge is positioned relative to the product image.
margin-top: 0;
}
+.product-image {
+ position: relative;
+}
+
.product-image img {
height: auto;
width: 100%;
Anchor to Next stepsNext steps
- Test your implementation by going to your store and adding a bundle to the cart. Make sure that the bundle's badge appears on the product page and in the cart.
- (Optional) Place a test order to see how orders for bundles appear in your Shopify admin.
Was this page helpful?