Update React Editor integration and clean up template

components/shopify/product-detail/index.tsx

@@ -60,7 +60,6 @@ const ProductDetail: React.FC<ProductDetailProps> = ({
   const [addingToCart, setAddingToCart] = useState(false);
   const [buyingNow, setBuyingNow] = useState(false);
 
-  // Initialize variant when product loads
   useEffect(() => {
     if (product) {
       const firstVariant = product.variants.edges[0]?.node;
@@ -78,9 +77,7 @@ const ProductDetail: React.FC<ProductDetailProps> = ({
     }
   }, [product]);
 
-  // A value is available if some in-stock variant carries it alongside the
-  // other currently-selected options. Options the shopper hasn't chosen yet
-  // act as wildcards, so nothing is struck through before a full selection.
+  // Unselected options act as wildcards when checking variant availability.
   const isOptionValueAvailable = (optionName: string, value: string) => {
     const variants = product?.variants.edges ?? [];
     if (variants.length === 0) return true;
@@ -100,7 +97,6 @@ const ProductDetail: React.FC<ProductDetailProps> = ({
     const newOptions = { ...selectedOptions, [optionName]: value };
     setSelectedOptions(newOptions);
 
-    // Find matching variant
     const matchingVariant = product?.variants.edges.find(({ node }) => {
       return node.selectedOptions.every(
         (option) => newOptions[option.name] === option.value
@@ -126,8 +122,6 @@ const ProductDetail: React.FC<ProductDetailProps> = ({
     }
   };
 
-  // Adds the item, then sends the shopper straight to the Shopify checkout
-  // (where Shop Pay is offered) rather than opening the cart drawer.
   const handleBuyNow = async () => {
     if (!selectedVariant || !product) return;
 
@@ -152,7 +146,6 @@ const ProductDetail: React.FC<ProductDetailProps> = ({
     return (
       <div className="max-w-screen-2xl mx-auto px-8 py-8">
         <div className="grid grid-cols-1 lg:grid-cols-5 gap-8 lg:gap-10">
-          {/* Image Gallery Skeleton */}
           <div className="lg:col-span-3 grid grid-cols-1 sm:grid-cols-2 gap-3">
             {Array.from({ length: 4 }).map((_, i) => (
               <div
@@ -162,7 +155,6 @@ const ProductDetail: React.FC<ProductDetailProps> = ({
             ))}
           </div>
 
-          {/* Product Info Skeleton */}
           <div className="lg:col-span-2 animate-pulse">
             <div className="h-8 bg-zinc-100 w-2/3"></div>
             <div className="h-5 bg-zinc-100 w-24 mt-2"></div>

components/shopify/product-detail/product-detail-gallery.tsx

@@ -26,8 +26,6 @@ const ProductDetailGallery: React.FC<ProductDetailGalleryProps> = ({
 
   const close = useCallback(() => setZoomedIndex(null), []);
 
-  // The slide whose left edge sits closest to the scroller's left edge is the
-  // one in view. Measuring rects keeps this correct whatever the gap or width.
   const handleScroll = useCallback(() => {
     const scroller = scrollerRef.current;
     if (!scroller) return;
@@ -47,8 +45,7 @@ const ProductDetailGallery: React.FC<ProductDetailGalleryProps> = ({
     setActiveIndex(nearest);
   }, []);
 
-  // Touch already scrolls natively; this adds click-and-drag for pointers that
-  // don't (mouse at mobile widths), suspending snap so the drag stays smooth.
+  // Add pointer dragging without disrupting native touch scrolling.
   const drag = useRef<{ startX: number; startScroll: number } | null>(null);
 
   const onPointerDown = (event: React.PointerEvent<HTMLDivElement>) => {
@@ -74,7 +71,6 @@ const ProductDetailGallery: React.FC<ProductDetailGalleryProps> = ({
     if (!drag.current || !scroller) return;
 
     drag.current = null;
-    // Restoring snap lets the browser settle on the nearest slide.
     scroller.style.scrollSnapType = '';
   };
 
@@ -88,7 +84,6 @@ const ProductDetailGallery: React.FC<ProductDetailGalleryProps> = ({
     scroller.scrollTo({ left: scroller.scrollLeft + offset, behavior: 'smooth' });
   };
 
-  // Close on Escape, and keep the page behind the overlay from scrolling.
   useEffect(() => {
     if (!isZoomed) return;
 
@@ -119,7 +114,6 @@ const ProductDetailGallery: React.FC<ProductDetailGalleryProps> = ({
 
   return (
     <>
-      {/* Swipeable carousel on mobile, grid from sm up */}
       <div
         ref={scrollerRef}
         onScroll={handleScroll}
@@ -152,7 +146,6 @@ const ProductDetailGallery: React.FC<ProductDetailGalleryProps> = ({
         ))}
       </div>
 
-      {/* Carousel pagination — the grid needs no dots, so mobile only */}
       {!isSingle && (
         <div className="flex justify-center gap-2 pt-4 sm:hidden">
           {images.map((_, index) => (
@@ -182,15 +175,10 @@ const ProductDetailGallery: React.FC<ProductDetailGalleryProps> = ({
           <Image
             src={zoomedImage.url}
             alt={zoomedImage.altText || 'Product image'}
-            // Shopify gives us the intrinsic size; the square fallback only
-            // reserves space until CSS scales it down to fit the overlay.
             width={zoomedImage.width || 1600}
             height={zoomedImage.height || 1600}
             sizes="100vw"
             onClick={(event) => event.stopPropagation()}
-            // w/h-auto keeps the box at the image's own ratio; without it the
-            // width+height attributes make both axes definite and the element
-            // stretches to the overlay, swallowing backdrop clicks that close it.
             className="max-h-full max-w-full w-auto h-auto object-contain"
           />
 

components/shopify/product-detail/product-detail-info.tsx

@@ -5,7 +5,7 @@ import { RiSubtractLine, RiAddLine } from '@remixicon/react';
 import ShopPayButton from '@/components/shopify/shop-pay-button';
 import type { ProductOption, ProductOptionValue } from '@/hooks/use-shopify-products';
 import { isSwatchOptionName, swatchColorForName } from '@/config/swatches';
-import { isDefaultTitleOption } from '@/services/shopify/catalog';
+import { isDefaultTitleOption } from '@/services/shopify/shop';
 
 interface ProductPrice {
   amount: string;
@@ -52,15 +52,12 @@ interface ProductDetailInfoProps {
   handleAddToCart: () => void;
   handleBuyNow?: () => void;
   onOptionChange: (optionName: string, value: string) => void;
-  /** Whether an option value still has an in-stock variant behind it. */
   isOptionValueAvailable?: (optionName: string, value: string) => boolean;
   loading?: boolean;
   buyingNow?: boolean;
   addToCartLabel?: string;
 }
 
-// A swatch comes from the option value's own swatch (colour or image) or the
-// colour its name implies (see config/swatches) — never a variant photo.
 const swatchStyle = (
   value: ProductOptionValue
 ): { background?: string; image?: string } => {
@@ -103,13 +100,11 @@ const ProductDetailInfo: React.FC<ProductDetailInfoProps> = ({
   const isSwatchOption = (option: ProductOption) =>
     isSwatchOptionName(option.name);
 
-  // Some products return Size before Color; show the swatches first either way.
-  // Single-SKU products expose a synthetic `Title: Default Title` option — drop it.
+  // Show swatches first and omit Shopify's synthetic single-SKU option.
   const orderedOptions = [...(product.options ?? [])]
     .filter((option) => !isDefaultTitleOption(option))
     .sort((a, b) => Number(isSwatchOption(b)) - Number(isSwatchOption(a)));
 
-  // `optionValues` carries the swatch data; fall back to plain `values`.
   const optionValuesFor = (option: ProductOption): ProductOptionValue[] =>
     option.optionValues?.length
       ? option.optionValues
@@ -131,7 +126,6 @@ const ProductDetailInfo: React.FC<ProductDetailInfoProps> = ({
         )}
       </div>
 
-      {/* Product Options — colour swatches lead, whatever order the API returns */}
       {orderedOptions.map((option) => {
         const isSwatch = isSwatchOption(option);
         const selected = selectedOptions[option.name];
@@ -172,12 +166,6 @@ const ProductDetailInfo: React.FC<ProductDetailInfoProps> = ({
                           : 'ring-1 ring-border hover:ring-foreground/40'
                       } ${isSoldOut ? 'option-unavailable text-foreground/60 opacity-60' : ''}`}
                       style={{
-                        // With no colour and no image the circle would be fully
-                        // transparent, leaving just a hairline ring that
-                        // antialiases unevenly and reads as a speckled border.
-                        // A neutral fill makes the initial-letter fallback look
-                        // deliberate. Set inline so it beats the ghost variant's
-                        // hover background.
                         backgroundColor:
                           background ??
                           (image ? undefined : 'var(--color-muted)'),
@@ -215,7 +203,6 @@ const ProductDetailInfo: React.FC<ProductDetailInfoProps> = ({
         );
       })}
 
-      {/* Quantity + Add to Cart */}
       <div className="mt-8 flex items-stretch gap-3">
         <div className="flex items-center rounded-md border border-border h-11">
           <Button
@@ -252,7 +239,6 @@ const ProductDetailInfo: React.FC<ProductDetailInfoProps> = ({
         </Button>
       </div>
 
-      {/* Cart permalink into Shop Pay; falls back to the cart checkout URL. */}
       <ShopPayButton
         className="mt-3"
         variants={
@@ -263,7 +249,6 @@ const ProductDetailInfo: React.FC<ProductDetailInfoProps> = ({
         onFallbackClick={handleBuyNow}
       />
 
-      {/* Description */}
       {(product.descriptionHtml || product.description) && (
         <div className="mt-10 text-sm leading-6 text-foreground product-description">
           {product.descriptionHtml ? (