Does Tailor Size Guide work with Shopify Hydrogen?

Yes — install @tailorsizeguide/hydrogen via npm. Drop in the component on your product route. Auth is the same Storefront API token used by Hydrogen.

What about other headless setups?

Tailor Size Guide also ships @tailorsizeguide/react (works in Next.js, Remix, Gatsby) and a vanilla JS bundle for non-React headless builds. All consume the same Storefront API.

By Mohit Patel, Marketing Specialist, Tailor Size Guide

Shopify how-to July 13, 2026 4 min read

How to Add a Size Chart to Shopify Hydrogen (Headless)

Found this guide useful? Share it with someone who needs it.

Add Tailor Size Guide as a preferred source on Google

Hydrogen + Next.js + Remix supported. React component ships ready.

Install

npm install @tailorsizeguide/hydrogen

Drop into your product route:

import { TailorSizeGuide } from "@tailorsizeguide/hydrogen"; <TailorSizeGuide productHandle={product.handle} />

What You Get

The component fetches the right size chart for the product (via Shopify metafield or tag). Renders the popup, recommender, unit toggle. Same UX as the standard Liquid app, but as a React component you control.

Other Frameworks

Next.js / Remix / Gatsby: use @tailorsizeguide/react (same API).

Vue / Svelte / vanilla JS: use @tailorsizeguide/web as a Web Component.

FAQs

Hydrogen support?

Yes — npm package + React component.

Other headless?

Next.js, Remix, Gatsby, vanilla all supported.

Headless-ready

Tailor Size Guide ships SDKs for every modern Shopify stack.

Install the Shopify app Read the docs