Shopify how-to July 13, 2026 4 min read
How to Add a Size Chart to Shopify Hydrogen (Headless)
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.