Update React Editor integration and clean up template

config/root.tsx

@@ -1,14 +1,5 @@
 import { RootConfig } from '@reacteditor/core';
 
-/**
- * Root props are the page's *content*, not its design. Colours, fonts, radius
- * and spacing all live in `app/globals.css` and in the components themselves —
- * the editor only owns the words and the imagery. See `editor.config.tsx` for
- * the same rule applied to every block.
- *
- * The field names below are the ones `pageMetadata()` reads, so editing a page
- * in the editor is what changes its `<head>` tags.
- */
 export type RootProps = {
   title?: string;
   description?: string;
@@ -16,10 +7,7 @@ export type RootProps = {
 };
 
 export const Root: RootConfig<{ props: RootProps }> = {
-  // Root props default to being shared across pages. These are per-page SEO
-  // tags — `pageMetadata()` reads them straight off each `page.json` — so
-  // opting out keeps every route's title and description its own. The header
-  // and footer blocks are the things that stay global.
+  // SEO fields belong to each page rather than the global block store.
   global: false,
   defaultProps: {
     title: 'Shop',
@@ -31,7 +19,6 @@ export const Root: RootConfig<{ props: RootProps }> = {
     description: { label: 'Meta description', type: 'textarea' },
     ogImage: { label: 'Social share image', type: 'image' },
   },
-  // No wrapper: the storefront's own layout and stylesheet own the chrome.
   render: ({ children }) => <>{children}</>,
 };
 

config/site.ts

@@ -1,17 +1,7 @@
-/**
- * Store-wide constants that aren't page content.
- *
- * Nav links, the logo and the footer used to live here; they're editor fields
- * on the header/footer blocks now, so a merchant changes them in the editor
- * rather than in code. What's left is the metadata fallback for routes that
- * haven't set their own.
- */
 export const site = {
   storeName: 'Shop',
   description:
     'An agent-friendly Shopify storefront built with Next.js and Hydrogen.',
-  // Absolute origin behind `metadataBase`, so Open Graph images resolve to full
-  // URLs. Vercel injects VERCEL_PROJECT_PRODUCTION_URL on deployed builds.
   url:
     process.env.NEXT_PUBLIC_SITE_URL ??
     (process.env.VERCEL_PROJECT_PRODUCTION_URL

config/swatches.ts

@@ -1,15 +1,5 @@
-// Swatch configuration for product option pickers.
-//
-// Shopify exposes a `swatch` on each option value, but plenty of products ship
-// without one configured. These settings decide which options render as colour
-// circles and what colour to use when the API doesn't supply one.
-
-// Option names (case-insensitive) rendered as colour circles instead of pills.
 export const SWATCH_OPTION_NAMES = ['color', 'colour'];
 
-// Fallback colours, keyed by lowercased option value name. The first group
-// mirrors hexes the store defines on other products, so a product missing its
-// swatches still matches the ones that have them. Add your own names here.
 export const SWATCH_COLORS: Record<string, string> = {
   clay: '#5a4b3c',
   green: '#81a69b',