How to Optimize Headless Shopify & Hydrogen for AI Shopping Engines

// app/routes/products.$handle.tsx (Shopify Hydrogen / Remix)
import { json, type LoaderFunctionArgs } from '@shopify/remix-oxygen';
import { useLoaderData } from '@remix-run/react';

export async function loader({ params, context }: LoaderFunctionArgs) {
  const { handle } = params;
  const { product } = await context.storefront.query(PRODUCT_QUERY, {
    variables: { handle },
  });

  if (!product) throw new Response('Not Found', { status: 404 });

  // Pre-compile Machine Discovery Schema at the Edge
  const machineSchema = {
    '@context': 'https://schema.org/',
    '@type': 'Product',
    name: product.title,
    description: product.description,
    offers: product.variants.nodes.map((v: any) => ({
      '@type': 'Offer',
      sku: v.sku,
      price: v.price.amount,
      priceCurrency: v.price.currencyCode,
      availability: v.availableForSale
        ? 'https://schema.org/InStock'
        : 'https://schema.org/OutOfStock',
    })),
  };

  return json({ product, machineSchema });
}

export default function ProductRoute() {
  const { product, machineSchema } = useLoaderData<typeof loader>();

  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(machineSchema) }}
      />
      <ProductDisplay product={product} />
    </>
  );
}