Headless Commerce Trends 2025: Shopify Plus Complete Guide

// app/routes/products.$handle.tsx
import {json, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
import {useLoaderData} from '@remix-run/react';
import {Image, Money} from '@shopify/hydrogen';

export async function loader({params, context}: LoaderFunctionArgs) {
  const {handle} = params;
  const {storefront} = context;

  const {product} = await storefront.query(PRODUCT_QUERY, {
    variables: {handle},
  });

  if (!product) {
    throw new Response('Product not found', {status: 404});
  }

  return json({product});
}

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

  return (
    <div className="product-page">
      <Image
        data={product.featuredImage}
        aspectRatio="1/1"
        sizes="(min-width: 45em) 50vw, 100vw"
      />
      <h1>{product.title}</h1>
      <Money data={product.priceRange.minVariantPrice} />
      <div dangerouslySetInnerHTML={{__html: product.descriptionHtml}} />
    </div>
  );
}

const PRODUCT_QUERY = `#graphql
  query Product($handle: String!) {
    product(handle: $handle) {
      id
      title
      descriptionHtml
      featuredImage {
        url
        altText
        width
        height
      }
      priceRange {
        minVariantPrice {
          amount
          currencyCode
        }
      }
    }
  }
`;