Integrate a headless CMS (Contentful) with a Shopify Hydrogen storefront to power editorial content on product pages

In-depth guide

Steps

1. Add the Contentful SDK or use the Contentful Delivery API REST endpoint directly in your Hydrogen route loaders; pass the Contentful space ID and delivery API token as environment variables
2. In the product route loader, run the Shopify Storefront API product query and the Contentful query for editorial content in parallel using Promise.all to minimize total latency
3. Use the product handle or a SKU field stored in a Contentful entry to link the CMS content to the correct Shopify product; establish a linking convention (for example, store the Shopify product handle in a Contentful field named shopifyHandle)
4. Return both the product and CMS content from the loader and render them in the route component, using the CMS content for sections such as long-form descriptions, video embeds, or editorial photography
5. Apply appropriate caching strategies: use Hydrogen's CacheLong for CMS content that changes infrequently and CacheShort or no-store for product pricing and availability data
6. Add a Contentful webhook that triggers a Shopify Oxygen or Vercel revalidation when CMS content is published, so editorial changes appear on the storefront without a manual redeploy