Integration · Hydrogen

VisionThree for Hydrogen, headless 3D at the edge

Ship our 3D configurator, AR viewer and AI visualisation inside your Shopify Hydrogen storefront. React components, Storefront API sync and Oxygen-ready performance, without slowing your build.

Book a Hydrogen demo All integrations

Trusted by leading brands worldwide

About VisionThree

The 3D commerce platform built for complex, configurable products.

VisionThree helps the world's most ambitious brands turn flat product pages into interactive buying experiences. Photoreal 3D, AR, AI visualisation and an enterprise rules engine, designed for Remix, React Router and Hydrogen.

Photoreal 3D

Asset pipeline that matches studio photography across every variant and finish.

Rules engine

Constraints, dependencies and pricing logic exposed via typed React hooks.

AR & mobile

Native AR on iOS / Android, streamed from Oxygen's global edge.

Enterprise-ready

SOC 2, GDPR, SLAs, and a CDN-backed runtime trusted by global brands.

+52%

Average uplift in conversion on Hydrogen product pages

−34%

Reduction in return rate for configurable categories

< 60ms

Variant + price sync latency via Storefront API

1 day

Typical React SDK integration

How it connects

From install to first sale, in days

VisionThree ships as a first-class React library for Hydrogen, streaming, Suspense and Oxygen-friendly, with zero client waterfalls.

Install the React SDK

Add @visionthree/hydrogen to your Hydrogen project. A single provider wires up the Storefront API client and the configurator runtime.

Sync your catalogue

We map Shopify products, variants, options and metafields to configurator rules over the Storefront API, with caching tuned for Oxygen.

Embed on product routes

Drop a <Configurator /> component into your product route loader and Suspense boundary. Server-rendered, hydrated on interaction.

Sell, measure, iterate

Configurations add to the Hydrogen cart via cartLinesAdd. Track engagement with your existing analytics and Shopify Web Pixels.

What you can do

Everything Hydrogen teams need for 3D commerce

Purpose-built React components, not a generic iframe. VisionThree behaves like a first-class part of your Hydrogen storefront.

Storefront API sync

Every option set, price tier and metafield flows through the Storefront API, with cache directives tuned for Oxygen edge.

Add-to-cart as configured

One useCart() hook adds the exact configuration, 3D snapshot, options and price, to the Hydrogen cart.

Markets & i18n ready

Locale-aware pricing, currency formatting and translations, following your Hydrogen routing conventions.

AR + streaming assets

Native iOS Quick Look + Android Scene Viewer, with progressive asset streaming from Oxygen.

Typed, tree-shakable SDK

First-class TypeScript, ESM-only, tree-shakable, and safe to use in server components.

Web Pixels + analytics

Emits Shopify Web Pixel events for engagement, add-to-cart and configuration completion.

On your product route

A configurator that feels native to Hydrogen

We render inside your existing product route, inherit your Tailwind tokens and React context, and respect the variant picker, cart drawer, and checkout flow you've already built.

Server-rendered with Suspense boundaries
Storefront API + Customer Account API aware
Snapshot image saved to cart line attributes
Works with Oxygen, Vercel and Netlify

For developers

Drop in a single React component

Import <Configurator /> from our SDK, pass a product handle, and you're done. Full TypeScript, tree-shakable and server-component safe.

Talk to engineering View all integrations

routes/products.$handle.tsx

import { Configurator } from '@visionthree/hydrogen';
import { useLoaderData } from '@remix-run/react';

export default function Product() {
  const { product } = useLoaderData<typeof loader>();
  return (
    <Configurator
      productHandle={product.handle}
      variantId={product.selectedVariant.id}
    />
  );
}

Customer stories

Results from Hydrogen storefronts

"Migrating to Hydrogen with VisionThree meant we shipped edge-rendered 3D without a client-side waterfall. Product page LCP dropped by 40%."

Eva Andersen · Head of Digital, Lumen Oak

+56%

sectional conversion

−40%

product page LCP

"The SDK is exactly what a Hydrogen team wants, typed, tree-shakable and Suspense-friendly. We integrated it in an afternoon."

Magnus Holm · VP eCommerce, Norden

+42%

AOV uplift

1 day

to integrate

FAQ

Hydrogen integration,
answered.

Everything you need to know to launch VisionThree on Hydrogen. Still curious? We're a quick conversation away.

Talk to our team

Avg. reply < 2h

Real humans, no bots

Which Hydrogen versions are supported?

We support Hydrogen 2 (Remix / React Router based) on Oxygen, Vercel and Netlify. The SDK works with React 18 and 19, server components and streaming SSR.

How does data sync work in a headless setup?

We call the Shopify Storefront API on the edge with cache directives tuned for Oxygen. Variant, price and inventory data are always in sync, without shipping extra data to the client.

What happens at checkout?

Configured products are added to the Hydrogen cart via cartLinesAdd with the chosen options and a snapshot image saved as line attributes. Shop Pay, discounts and B2B all work as normal.

Does it work with server components and Suspense?

Yes. The Configurator component is server-component safe and Suspense-aware. Heavy 3D assets are streamed and hydrated only on interaction.

How long does an integration take?

A basic <Configurator /> integration takes about a day. Catalogue mapping and 3D asset onboarding typically take 2-4 weeks depending on category complexity.

Ready to bring 3D to your Hydrogen storefront?

Book a 30-minute demo. We'll show you VisionThree running inside a Hydrogen storefront like yours, with your products and your design system.

Book a Hydrogen demo Explore all integrations