---
title: Hydrogen Cookbook
description: Browse ready-to-use recipes for adding new features to your Hydrogen project.
source_url:
  html: https://shopify.dev/docs/storefronts/headless/hydrogen/cookbook
  md: https://shopify.dev/docs/storefronts/headless/hydrogen/cookbook.md
---

# Hydrogen Cookbook

The Hydrogen Cookbook offers step-by-step recipes for adding new features to your project. Each recipe includes adaptable code samples, detailed instructions, and best practices to speed up development.

Note

Recipes are based on the [default Hydrogen project template](https://github.com/Shopify/hydrogen/tree/main/templates/skeleton). The required code changes might look different for your own project.

***

## Recipes

[![](https://shopify.dev/images/icons/48/shopifyplus.png)![](https://shopify.dev/images/icons/48/shopifyplus-dark.png)](https://shopify.dev/docs/storefronts/headless/hydrogen/cookbook/b2b)

[B2B Commerce](https://shopify.dev/docs/storefronts/headless/hydrogen/cookbook/b2b)

[Add Business-to-Business (B2B) functionality with company locations, quantity rules, and volume pricing.](https://shopify.dev/docs/storefronts/headless/hydrogen/cookbook/b2b)

[![](https://shopify.dev/images/icons/48/products-api.png)![](https://shopify.dev/images/icons/48/products-api-dark.png)](https://shopify.dev/docs/storefronts/headless/hydrogen/cookbook/bundles)

[Bundles](https://shopify.dev/docs/storefronts/headless/hydrogen/cookbook/bundles)

[Add support for bundles on product pages and in the cart.](https://shopify.dev/docs/storefronts/headless/hydrogen/cookbook/bundles)

[![](https://shopify.dev/images/icons/48/blocks.png)![](https://shopify.dev/images/icons/48/blocks-dark.png)](https://shopify.dev/docs/storefronts/headless/hydrogen/cookbook/combined-listings)

[Combined listings](https://shopify.dev/docs/storefronts/headless/hydrogen/cookbook/combined-listings)

[Display combined listings on product pages and in search results.](https://shopify.dev/docs/storefronts/headless/hydrogen/cookbook/combined-listings)

[![](https://shopify.dev/images/icons/48/liquid.png)![](https://shopify.dev/images/icons/48/liquid-dark.png)](https://shopify.dev/docs/storefronts/headless/hydrogen/cookbook/custom-cart-method)

[Custom Cart Method](https://shopify.dev/docs/storefronts/headless/hydrogen/cookbook/custom-cart-method)

[Add inline product option editing to cart items.](https://shopify.dev/docs/storefronts/headless/hydrogen/cookbook/custom-cart-method)

[![](https://shopify.dev/images/icons/48/information.png)![](https://shopify.dev/images/icons/48/information-dark.png)](https://shopify.dev/docs/storefronts/headless/hydrogen/cookbook/metaobjects)

[Dynamic Content with Metaobjects](https://shopify.dev/docs/storefronts/headless/hydrogen/cookbook/metaobjects)

[Build a flexible CMS using Shopify metaobjects for dynamic content sections.](https://shopify.dev/docs/storefronts/headless/hydrogen/cookbook/metaobjects)

[![](https://shopify.dev/images/icons/48/build.png)![](https://shopify.dev/images/icons/48/build-dark.png)](https://shopify.dev/docs/storefronts/headless/hydrogen/cookbook/express)

[Express Server](https://shopify.dev/docs/storefronts/headless/hydrogen/cookbook/express)

[Deploy Hydrogen on Node.js with Express instead of Shopify Oxygen.](https://shopify.dev/docs/storefronts/headless/hydrogen/cookbook/express)

[![](https://shopify.dev/images/icons/48/growth.png)![](https://shopify.dev/images/icons/48/growth-dark.png)](https://shopify.dev/docs/storefronts/headless/hydrogen/cookbook/gtm)

[Google Tag Manager Integration](https://shopify.dev/docs/storefronts/headless/hydrogen/cookbook/gtm)

[Add Google Tag Manager to your Hydrogen storefront for advanced analytics and marketing tracking.](https://shopify.dev/docs/storefronts/headless/hydrogen/cookbook/gtm)

[![](https://shopify.dev/images/icons/32/arrayfilters.png)![](https://shopify.dev/images/icons/32/arrayfilters-dark.png)](https://shopify.dev/docs/storefronts/headless/hydrogen/cookbook/infinite-scroll)

[Infinite Scroll](https://shopify.dev/docs/storefronts/headless/hydrogen/cookbook/infinite-scroll)

[Add infinite scroll pagination to collection pages for seamless product browsing.](https://shopify.dev/docs/storefronts/headless/hydrogen/cookbook/infinite-scroll)

[![](https://shopify.dev/images/icons/48/key.png)![](https://shopify.dev/images/icons/48/key-dark.png)](https://shopify.dev/docs/storefronts/headless/hydrogen/cookbook/legacy-customer-account-flow)

[Legacy Customer Account Flow](https://shopify.dev/docs/storefronts/headless/hydrogen/cookbook/legacy-customer-account-flow)

[Implement legacy customer account authentication using the Storefront API.](https://shopify.dev/docs/storefronts/headless/hydrogen/cookbook/legacy-customer-account-flow)

[![](https://shopify.dev/images/icons/48/globe.png)![](https://shopify.dev/images/icons/48/globe-dark.png)](https://shopify.dev/docs/storefronts/headless/hydrogen/cookbook/markets)

[Markets](https://shopify.dev/docs/storefronts/headless/hydrogen/cookbook/markets)

[Add support for localized shopping experiences.](https://shopify.dev/docs/storefronts/headless/hydrogen/cookbook/markets)

[![](https://shopify.dev/images/icons/48/gear.png)![](https://shopify.dev/images/icons/48/gear-dark.png)](https://shopify.dev/docs/storefronts/headless/hydrogen/cookbook/partytown)

[Partytown + Google Tag Manager](https://shopify.dev/docs/storefronts/headless/hydrogen/cookbook/partytown)

[Add Partytown web worker integration for Google Tag Manager to improve performance.](https://shopify.dev/docs/storefronts/headless/hydrogen/cookbook/partytown)

[![](https://shopify.dev/images/icons/48/custom-storefronts.png)![](https://shopify.dev/images/icons/48/custom-storefronts-dark.png)](https://shopify.dev/docs/storefronts/headless/hydrogen/cookbook/subscriptions)

[Subscriptions](https://shopify.dev/docs/storefronts/headless/hydrogen/cookbook/subscriptions)

[Display selling plans for subscription-based products.](https://shopify.dev/docs/storefronts/headless/hydrogen/cookbook/subscriptions)

[![](https://shopify.dev/images/icons/32/liquidobjects.png)![](https://shopify.dev/images/icons/32/liquidobjects-dark.png)](https://shopify.dev/docs/storefronts/headless/hydrogen/cookbook/third-party-api)

[Third-party API Queries and Caching](https://shopify.dev/docs/storefronts/headless/hydrogen/cookbook/third-party-api)

[Add third-party GraphQL API queries with Oxygen's sub-request caching to your Hydrogen storefront.](https://shopify.dev/docs/storefronts/headless/hydrogen/cookbook/third-party-api)

***