Hydrogen storefront runtime

The SDK separates pre-interaction code from the heavier crop and result runtime. Keep the provider and CTA in the product page, then lazy-load interactive UI when the customer opens VTO.

import {lazy, Suspense} from 'react';
import {
  VtoEmbeddedCta,
  VtoProvider,
} from '@aabhastech/shopify-vto/hydrogen';

const VtoRuntime = lazy(() => import('./AabhasVtoRuntime.client'));

export function ProductVto({config, open, setOpen}) {
  return (
    <VtoProvider config={config}>
      <VtoEmbeddedCta label="Try it on" onClick={() => setOpen(true)} />
      {open ? (
        <Suspense fallback={<span role="status">Loading virtual try-on...</span>}>
          <VtoRuntime onClose={() => setOpen(false)} />
        </Suspense>
      ) : null}
    </VtoProvider>
  );
}

Import boundaries

Import	Load it in
@aabhastech/shopify-vto/core/server	Hydrogen server only.
@aabhastech/shopify-vto/core	Framework-neutral browser or shared code.
@aabhastech/shopify-vto/hydrogen	Product-page provider and launchers.
@aabhastech/shopify-vto/hydrogen/runtime	Lazy interactive chunk only.
@aabhastech/shopify-vto/hydrogen/analytics	Application root below Shopify analytics.

Required runtime behavior

• Refresh bootstrap when the selected product or variant changes.
• Branch on bootstrap.storageMode: signed upload for persist, inline submission for no_store.
• Debounce submit to prevent duplicate execution IDs.
• Keep the countdown visible after crop and upload.
• Present server error codes as safe customer messages.
• Preserve the provider across lazy component boundaries; do not bundle a second React context singleton.

The package supports React 18 and 19 and ESM tooling. CommonJS applications must use dynamic import().