update product details

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

app.schema.json

@@ -2,20 +2,20 @@
   "/": {
     "root": {
       "props": {
-        "title": "Maison — Considered essentials",
+        "title": "Pulse — Made to Move",
-        "headerFont": "Playfair Display",
+        "headerFont": "Archivo Black",
+        "headerFontWeight": "400",
         "bodyFont": "Inter",
-        "primaryColor": "#0a0a0a",
+        "primaryColor": "#111111",
-        "secondaryColor": "#64748B",
+        "secondaryColor": "#707072",
         "accentColor": "#f5f5f5",
         "bgColor": "#ffffff",
-        "fgColor": "#0a0a0a",
+        "fgColor": "#111111",
         "mutedColor": "#f5f5f5",
-        "roundedness": "md",
+        "radius": "xl",
-        "radius": "md",
+        "buttonRadius": "full",
-        "shadowLevel": "sm",
+        "shadow": "none",
-        "shadow": "sm",
+        "maxWidth": "2xl"
-        "maxWidth": "xl"
       }
     },
     "content": [
@@ -23,11 +23,12 @@
         "type": "navigation",
         "props": {
           "id": "nav-home",
-          "brand": "Maison",
+          "brand": "PULSE",
           "links": [
-            { "label": "Shop", "href": "/collections" },
+            { "label": "Run", "href": "/collections/run" },
-            { "label": "Lookbook", "href": "/lookbook" },
+            { "label": "Train", "href": "/collections/train" },
-            { "label": "Journal", "href": "/journal" },
+            { "label": "Recover", "href": "/collections/recover" },
+            { "label": "Sale", "href": "/collections/sale" },
             { "label": "About", "href": "/about" }
           ],
           "showSearch": "yes",
@@ -42,23 +43,25 @@
         "props": {
           "id": "hero-home",
           "tagline": "Spring 2026",
-          "heading": "Made for the way you move",
+          "heading": "Made to move.",
-          "subheading": "A considered wardrobe of essentials, cut from natural fibers and designed to last.",
+          "subheading": "Performance gear engineered for athletes who train like they mean it. Built light. Built honest. Built for the next mile.",
-          "primaryCta": { "label": "Shop the collection", "href": "/collections" },
+          "buttons": [
-          "secondaryCta": { "label": "Our story", "href": "/about" },
+            { "label": "Shop the kit", "href": "/search", "variant": "primary" },
-          "imageUrl": "https://images.unsplash.com/photo-1490481651871-ab68de25d43d?auto=format&fit=crop&w=2400&q=80",
+            { "label": "Our story", "href": "/about", "variant": "secondary" }
+          ],
+          "imageUrl": "https://supabase.frontend-ai.com/storage/v1/object/public/assets/themes/pulse-nike/athletic-assortment.jpeg",
           "align": "left",
           "height": "lg",
-          "tone": "dark"
+          "tone": "light"
         }
       },
       {
         "type": "products-carousel",
         "props": {
           "id": "carousel-home",
-          "tagline": "New",
+          "tagline": "Just dropped",
-          "heading": "Just dropped",
+          "heading": "New arrivals",
-          "subheading": "Fresh additions to the lineup.",
+          "subheading": "Fresh kit for the season ahead.",
           "limit": 12,
           "slidesPerView": "4",
           "ctaLabel": "Shop new",
@@ -66,60 +69,92 @@
         }
       },
       {
-        "type": "featured-product",
+        "type": "hero",
         "props": {
-          "id": "featured-home",
+          "id": "cover-home-performance",
-          "product": null,
+          "tagline": "Performance Series",
-          "tagline": "Featured",
+          "heading": "Engineered to outlast you.",
-          "ctaLabel": "Add to bag",
+          "subheading": "Tested on track, trail, and treadmill. Every piece earns its place.",
+          "buttons": [],
+          "imageUrl": "https://supabase.frontend-ai.com/storage/v1/object/public/assets/themes/pulse-nike/cover-performance.jpeg",
           "align": "left",
-          "tone": "muted"
+          "height": "lg",
-        }
+          "tone": "light"
-      },
-      {
-        "type": "collection-grid",
-        "props": {
-          "id": "collections-home",
-          "tagline": "Shop by collection",
-          "heading": "Curated edits",
-          "subheading": "Bundles built around the way you actually live.",
-          "layout": "tiles",
-          "limit": 6
         }
       },
       {
         "type": "features",
         "props": {
           "id": "features-home",
-          "tagline": "Why us",
+          "tagline": "Why Pulse",
-          "heading": "Built with intention",
+          "heading": "Three rules. No exceptions.",
-          "subheading": "A small set of values that shape every piece we make.",
+          "subheading": "",
           "columns": "3",
           "items": [
-            { "title": "Natural fibers", "body": "Linen, organic cotton, and merino — sourced from mills with traceable supply chains." },
+            {
-            { "title": "Small batches", "body": "Made in considered quantities so nothing goes to waste." },
+              "title": "Engineered",
-            { "title": "Built to last", "body": "Reinforced seams and finishes that age into something better." }
+              "body": "Every fabric, every seam, every fit decision starts with athletes on a track. Lab work comes after."
+            },
+            {
+              "title": "Field tested",
+              "body": "Twelve weeks. Two race blocks. One full season. Nothing ships without that on the record."
+            },
+            {
+              "title": "Guaranteed",
+              "body": "If it fails before its time, we replace it. If it fails on race day, we apologize and replace it."
+            }
           ]
         }
       },
+      {
+        "type": "hero",
+        "props": {
+          "id": "cover-home-discipline",
+          "tagline": "Discipline",
+          "heading": "The work happens before sunrise.",
+          "subheading": "We make the kit. You do the work. Five-thirty isn't early — it's the only honest hour.",
+          "buttons": [],
+          "imageUrl": "https://supabase.frontend-ai.com/storage/v1/object/public/assets/themes/pulse-nike/cover-discipline.jpeg",
+          "align": "left",
+          "height": "lg",
+          "tone": "light"
+        }
+      },
+      {
+        "type": "collection-grid",
+        "props": {
+          "id": "collections-home",
+          "tagline": "Shop by sport",
+          "heading": "Built for what you actually do.",
+          "subheading": "",
+          "layout": "tiles",
+          "limit": 6
+        }
+      },
       {
         "type": "testimonials",
         "props": {
           "id": "testimonials-home",
-          "tagline": "Reviews",
+          "tagline": "From the field",
-          "heading": "What our customers say",
+          "heading": "Athletes on Pulse",
           "items": [
             {
-              "quote": "I've been wearing the same linen shirt for two summers now and it's somehow gotten better with every wash.",
+              "quote": "Took the shell to Chamonix and back. Still smells, still works, still cheaper than therapy.",
-              "author": "Mara K.",
+              "author": "Mateo S.",
-              "role": "Berlin",
+              "role": "Sub-3 marathoner / Boulder",
-              "avatar": "https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=200&q=80"
+              "avatar": ""
             },
             {
-              "quote": "Considered cuts, neutral palette, real fabric. Exactly what I want when I'm getting dressed in the dark.",
+              "quote": "I have one drawer of running gear. The Pulse half is the half I actually wear.",
-              "author": "Theo R.",
+              "author": "Priya N.",
-              "role": "Brooklyn",
+              "role": "Ultra runner / Portland",
-              "avatar": "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?auto=format&fit=crop&w=200&q=80"
+              "avatar": ""
+            },
+            {
+              "quote": "Wore the shorts for an entire 16-week block. They held. That's the whole review.",
+              "author": "Jonas R.",
+              "role": "Track coach / Berlin",
+              "avatar": ""
             }
           ]
         }
@@ -128,12 +163,12 @@
         "type": "newsletter-cta",
         "props": {
           "id": "newsletter-home",
-          "tagline": "Stay in the loop",
+          "tagline": "Field notes",
-          "heading": "Letters from the studio",
+          "heading": "Weekly notes from the lab.",
-          "subheading": "New collections, mill stories, and the occasional invitation. Twice a month.",
+          "subheading": "Test results, training blocks, gear we cut and gear we kept. Every Monday at 5:30am.",
           "buttonLabel": "Subscribe",
           "endpoint": "",
-          "imageUrl": "https://images.unsplash.com/photo-1469334031218-e382a71b716b?auto=format&fit=crop&w=1800&q=80",
+          "imageUrl": "https://supabase.frontend-ai.com/storage/v1/object/public/assets/themes/pulse-nike/newsletter.png",
           "layout": "split"
         }
       },
@@ -141,23 +176,25 @@
         "type": "footer",
         "props": {
           "id": "footer-home",
-          "brand": "Maison",
+          "brand": "PULSE",
-          "tagline": "Considered essentials, made in small batches and built to last beyond the season.",
+          "tagline": "Performance gear for athletes who break their kit before they break themselves.",
           "columns": [
             {
               "title": "Shop",
               "links": [
-                { "label": "All", "href": "/collections" },
+                { "label": "All gear", "href": "/search" },
                 { "label": "New", "href": "/collections/new" },
-                { "label": "Best sellers", "href": "/collections/best" }
+                { "label": "Run", "href": "/collections/run" },
+                { "label": "Train", "href": "/collections/train" },
+                { "label": "Sale", "href": "/collections/sale" }
               ]
             },
             {
               "title": "About",
               "links": [
                 { "label": "Our story", "href": "/about" },
-                { "label": "Materials", "href": "/materials" },
+                { "label": "The lab", "href": "/lab" },
-                { "label": "Journal", "href": "/journal" }
+                { "label": "Athletes", "href": "/athletes" }
               ]
             },
             {
@@ -165,6 +202,7 @@
               "links": [
                 { "label": "Shipping", "href": "/help/shipping" },
                 { "label": "Returns", "href": "/help/returns" },
+                { "label": "Lifetime guarantee", "href": "/help/guarantee" },
                 { "label": "Contact", "href": "/contact" }
               ]
             },
@@ -178,13 +216,13 @@
           ],
           "social": [
             { "label": "Instagram", "href": "#" },
-            { "label": "Pinterest", "href": "#" },
+            { "label": "Strava", "href": "#" },
-            { "label": "TikTok", "href": "#" }
+            { "label": "YouTube", "href": "#" }
           ],
           "showNewsletter": "no",
-          "newsletterHeading": "Stay in touch",
+          "newsletterHeading": "",
           "newsletterEndpoint": "",
-          "copyright": "© 2026 Maison. All rights reserved."
+          "copyright": "© 2026 Pulse. Built to be replaced when used up."
         }
       }
     ]
@@ -192,20 +230,20 @@
   "/products/:handle": {
     "root": {
       "props": {
-        "title": "Default product",
+        "title": "Pulse",
-        "headerFont": "Playfair Display",
+        "headerFont": "Archivo Black",
+        "headerFontWeight": "400",
         "bodyFont": "Inter",
-        "primaryColor": "#0a0a0a",
+        "primaryColor": "#111111",
-        "secondaryColor": "#64748B",
+        "secondaryColor": "#707072",
         "accentColor": "#f5f5f5",
         "bgColor": "#ffffff",
-        "fgColor": "#0a0a0a",
+        "fgColor": "#111111",
         "mutedColor": "#f5f5f5",
-        "roundedness": "md",
+        "radius": "xl",
-        "radius": "md",
+        "buttonRadius": "full",
-        "shadowLevel": "sm",
+        "shadow": "none",
-        "shadow": "sm",
+        "maxWidth": "2xl"
-        "maxWidth": "xl"
       }
     },
     "content": [
@@ -213,11 +251,12 @@
         "type": "navigation",
         "props": {
           "id": "nav-product",
-          "brand": "Maison",
+          "brand": "PULSE",
           "links": [
-            { "label": "Shop", "href": "/collections" },
+            { "label": "Run", "href": "/collections/run" },
-            { "label": "Lookbook", "href": "/lookbook" },
+            { "label": "Train", "href": "/collections/train" },
-            { "label": "Journal", "href": "/journal" },
+            { "label": "Recover", "href": "/collections/recover" },
+            { "label": "Sale", "href": "/collections/sale" },
             { "label": "About", "href": "/about" }
           ],
           "showSearch": "yes",
@@ -238,8 +277,8 @@
         "type": "products-carousel",
         "props": {
           "id": "carousel-related",
-          "tagline": "You might also like",
+          "tagline": "Pairs well with",
-          "heading": "Related pieces",
+          "heading": "Complete the kit",
           "limit": 8,
           "slidesPerView": "4",
           "ctaLabel": "Shop all",
@@ -250,13 +289,137 @@
         "type": "footer",
         "props": {
           "id": "footer-product",
-          "brand": "Maison",
+          "brand": "PULSE",
-          "tagline": "Considered essentials, made in small batches.",
+          "tagline": "Performance gear for athletes who break their kit before they break themselves.",
           "columns": [
             {
               "title": "Shop",
               "links": [
-                { "label": "All", "href": "/collections" },
+                { "label": "All gear", "href": "/search" },
+                { "label": "New", "href": "/collections/new" }
+              ]
+            },
+            {
+              "title": "Help",
+              "links": [
+                { "label": "Shipping", "href": "/help/shipping" },
+                { "label": "Returns", "href": "/help/returns" },
+                { "label": "Lifetime guarantee", "href": "/help/guarantee" }
+              ]
+            }
+          ],
+          "social": [
+            { "label": "Instagram", "href": "#" },
+            { "label": "Strava", "href": "#" }
+          ],
+          "showNewsletter": "no",
+          "newsletterHeading": "",
+          "newsletterEndpoint": "",
+          "copyright": "© 2026 Pulse. Built to be replaced when used up."
+        }
+      }
+    ]
+  },
+  "/collections/:handle": {
+    "root": {
+      "props": {
+        "title": "Collection — Pulse",
+        "headerFont": "Archivo Black",
+        "headerFontWeight": "400",
+        "bodyFont": "Inter",
+        "primaryColor": "#111111",
+        "secondaryColor": "#707072",
+        "accentColor": "#f5f5f5",
+        "bgColor": "#ffffff",
+        "fgColor": "#111111",
+        "mutedColor": "#f5f5f5",
+        "radius": "xl",
+        "buttonRadius": "full",
+        "shadow": "none",
+        "maxWidth": "2xl"
+      }
+    },
+    "content": [
+      {
+        "type": "navigation",
+        "props": {
+          "id": "nav-collection",
+          "brand": "PULSE",
+          "links": [
+            { "label": "Run", "href": "/collections/run" },
+            { "label": "Train", "href": "/collections/train" },
+            { "label": "Recover", "href": "/collections/recover" },
+            { "label": "Sale", "href": "/collections/sale" },
+            { "label": "About", "href": "/about" }
+          ],
+          "showSearch": "yes",
+          "showAccount": "yes",
+          "showCart": "yes",
+          "sticky": "yes",
+          "tone": "default"
+        }
+      },
+      {
+        "type": "collection",
+        "props": {
+          "id": "collection-detail",
+          "collection": null,
+          "showDescription": "yes",
+          "showCoverImage": "yes",
+          "customCoverImage": "",
+          "columns": "4",
+          "limit": 24,
+          "defaultSort": "BEST_SELLING",
+          "showAvailability": "yes",
+          "showPriceRange": "yes",
+          "showProductType": "yes",
+          "productTypeOptions": [
+            { "label": "Tops" },
+            { "label": "Shorts" },
+            { "label": "Tights" },
+            { "label": "Outerwear" },
+            { "label": "Shoes" },
+            { "label": "Accessories" }
+          ],
+          "showVendor": "no",
+          "vendorOptions": [],
+          "showTags": "no",
+          "tagOptions": [],
+          "showColor": "yes",
+          "colorOptions": [
+            { "label": "Black", "color": "#111111" },
+            { "label": "White", "color": "#ffffff" },
+            { "label": "Grey", "color": "#707072" },
+            { "label": "Volt", "color": "#d6ff3f" },
+            { "label": "Sodium", "color": "#fa5400" }
+          ],
+          "showStyle": "no",
+          "styleOptions": [],
+          "showSize": "yes",
+          "sizeOptions": [
+            { "label": "XS" },
+            { "label": "S" },
+            { "label": "M" },
+            { "label": "L" },
+            { "label": "XL" },
+            { "label": "XXL" }
+          ],
+          "showMaterial": "no",
+          "materialOptions": [],
+          "metafieldFilters": []
+        }
+      },
+      {
+        "type": "footer",
+        "props": {
+          "id": "footer-collection",
+          "brand": "PULSE",
+          "tagline": "Performance gear for athletes who break their kit before they break themselves.",
+          "columns": [
+            {
+              "title": "Shop",
+              "links": [
+                { "label": "All gear", "href": "/search" },
                 { "label": "New", "href": "/collections/new" }
               ]
             },
@@ -270,12 +433,271 @@
           ],
           "social": [
             { "label": "Instagram", "href": "#" },
-            { "label": "Pinterest", "href": "#" }
+            { "label": "Strava", "href": "#" }
           ],
           "showNewsletter": "no",
-          "newsletterHeading": "Stay in touch",
+          "newsletterHeading": "",
           "newsletterEndpoint": "",
-          "copyright": "© 2026 Maison. All rights reserved."
+          "copyright": "© 2026 Pulse. Built to be replaced when used up."
+        }
+      }
+    ]
+  },
+  "/search": {
+    "root": {
+      "props": {
+        "title": "Shop — Pulse",
+        "headerFont": "Archivo Black",
+        "headerFontWeight": "400",
+        "bodyFont": "Inter",
+        "primaryColor": "#111111",
+        "secondaryColor": "#707072",
+        "accentColor": "#f5f5f5",
+        "bgColor": "#ffffff",
+        "fgColor": "#111111",
+        "mutedColor": "#f5f5f5",
+        "radius": "xl",
+        "buttonRadius": "full",
+        "shadow": "none",
+        "maxWidth": "2xl"
+      }
+    },
+    "content": [
+      {
+        "type": "navigation",
+        "props": {
+          "id": "nav-search",
+          "brand": "PULSE",
+          "links": [
+            { "label": "Run", "href": "/collections/run" },
+            { "label": "Train", "href": "/collections/train" },
+            { "label": "Recover", "href": "/collections/recover" },
+            { "label": "Sale", "href": "/collections/sale" },
+            { "label": "About", "href": "/about" }
+          ],
+          "showSearch": "yes",
+          "showAccount": "yes",
+          "showCart": "yes",
+          "sticky": "yes",
+          "tone": "default"
+        }
+      },
+      {
+        "type": "search-products",
+        "props": {
+          "id": "search-products",
+          "heading": "All gear.",
+          "subheading": "Filter by sport, fabric, fit, color. Or sort by what's been beaten the hardest.",
+          "columns": "4",
+          "limit": 24,
+          "showAvailability": "yes",
+          "showPriceRange": "yes",
+          "showProductType": "yes",
+          "showVendor": "no",
+          "showTags": "yes",
+          "metafieldFilters": [],
+          "defaultSort": "BEST_SELLING",
+          "productTypeOptions": [
+            { "label": "Tops" },
+            { "label": "Shorts" },
+            { "label": "Tights" },
+            { "label": "Outerwear" },
+            { "label": "Shoes" },
+            { "label": "Accessories" }
+          ],
+          "vendorOptions": [],
+          "tagOptions": [
+            { "label": "New" },
+            { "label": "Race day" },
+            { "label": "Field tested" },
+            { "label": "Sale" }
+          ]
+        }
+      },
+      {
+        "type": "footer",
+        "props": {
+          "id": "footer-search",
+          "brand": "PULSE",
+          "tagline": "Performance gear for athletes who break their kit before they break themselves.",
+          "columns": [
+            {
+              "title": "Shop",
+              "links": [
+                { "label": "All gear", "href": "/search" },
+                { "label": "Run", "href": "/collections/run" },
+                { "label": "Train", "href": "/collections/train" }
+              ]
+            },
+            {
+              "title": "Help",
+              "links": [
+                { "label": "Shipping", "href": "/help/shipping" },
+                { "label": "Returns", "href": "/help/returns" }
+              ]
+            }
+          ],
+          "social": [
+            { "label": "Instagram", "href": "#" },
+            { "label": "Strava", "href": "#" }
+          ],
+          "showNewsletter": "no",
+          "newsletterHeading": "",
+          "newsletterEndpoint": "",
+          "copyright": "© 2026 Pulse. Built to be replaced when used up."
+        }
+      }
+    ]
+  },
+  "/about": {
+    "root": {
+      "props": {
+        "title": "About — Pulse",
+        "headerFont": "Archivo Black",
+        "headerFontWeight": "400",
+        "bodyFont": "Inter",
+        "primaryColor": "#111111",
+        "secondaryColor": "#707072",
+        "accentColor": "#f5f5f5",
+        "bgColor": "#ffffff",
+        "fgColor": "#111111",
+        "mutedColor": "#f5f5f5",
+        "radius": "xl",
+        "buttonRadius": "full",
+        "shadow": "none",
+        "maxWidth": "2xl"
+      }
+    },
+    "content": [
+      {
+        "type": "navigation",
+        "props": {
+          "id": "nav-about",
+          "brand": "PULSE",
+          "links": [
+            { "label": "Run", "href": "/collections/run" },
+            { "label": "Train", "href": "/collections/train" },
+            { "label": "Recover", "href": "/collections/recover" },
+            { "label": "Sale", "href": "/collections/sale" },
+            { "label": "About", "href": "/about" }
+          ],
+          "showSearch": "yes",
+          "showAccount": "yes",
+          "showCart": "yes",
+          "sticky": "yes",
+          "tone": "default"
+        }
+      },
+      {
+        "type": "hero",
+        "props": {
+          "id": "hero-about",
+          "tagline": "The lab",
+          "heading": "We don't make activewear. We make tools.",
+          "subheading": "Pulse started in a converted warehouse with three coaches, two athletes, and a whiteboard full of things they wished worked better. Eight years later, the whiteboard is still there. So is the standard.",
+          "buttons": [
+            { "label": "Shop the kit", "href": "/search", "variant": "primary" }
+          ],
+          "imageUrl": "https://supabase.frontend-ai.com/storage/v1/object/public/assets/themes/pulse-nike/hero-about.png",
+          "align": "left",
+          "height": "lg",
+          "tone": "light"
+        }
+      },
+      {
+        "type": "features",
+        "props": {
+          "id": "features-about",
+          "tagline": "What we believe",
+          "heading": "Three rules. No exceptions.",
+          "subheading": "",
+          "columns": "3",
+          "items": [
+            {
+              "title": "Engineered",
+              "body": "Every fabric, every seam, every fit decision starts with athletes on a track. Lab work comes after, if at all."
+            },
+            {
+              "title": "Field tested",
+              "body": "Twelve weeks of training. Two race blocks. One full season. Nothing leaves the lab without that on the record."
+            },
+            {
+              "title": "Guaranteed",
+              "body": "If it fails before its time, we replace it. If it fails on race day, we apologize and replace it. That's the deal."
+            }
+          ]
+        }
+      },
+      {
+        "type": "hero",
+        "props": {
+          "id": "cover-about-performance",
+          "tagline": "Used up is the goal",
+          "heading": "Designed to be worn out, not preserved.",
+          "subheading": "If you're babying your kit, we did something wrong. Bring it back when it's done — we'll send the next one.",
+          "buttons": [],
+          "imageUrl": "https://supabase.frontend-ai.com/storage/v1/object/public/assets/themes/pulse-nike/cover-performance.jpeg",
+          "align": "left",
+          "height": "lg",
+          "tone": "light"
+        }
+      },
+      {
+        "type": "newsletter-cta",
+        "props": {
+          "id": "newsletter-about",
+          "tagline": "Field notes",
+          "heading": "Weekly notes from the lab.",
+          "subheading": "Test results, training blocks, gear we cut and gear we kept. Every Monday at 5:30am.",
+          "buttonLabel": "Subscribe",
+          "endpoint": "",
+          "imageUrl": "https://supabase.frontend-ai.com/storage/v1/object/public/assets/themes/pulse-nike/newsletter.png",
+          "layout": "split"
+        }
+      },
+      {
+        "type": "footer",
+        "props": {
+          "id": "footer-about",
+          "brand": "PULSE",
+          "tagline": "Performance gear for athletes who break their kit before they break themselves.",
+          "columns": [
+            {
+              "title": "Shop",
+              "links": [
+                { "label": "All gear", "href": "/search" },
+                { "label": "New", "href": "/collections/new" },
+                { "label": "Run", "href": "/collections/run" },
+                { "label": "Train", "href": "/collections/train" }
+              ]
+            },
+            {
+              "title": "About",
+              "links": [
+                { "label": "Our story", "href": "/about" },
+                { "label": "The lab", "href": "/lab" },
+                { "label": "Athletes", "href": "/athletes" }
+              ]
+            },
+            {
+              "title": "Help",
+              "links": [
+                { "label": "Shipping", "href": "/help/shipping" },
+                { "label": "Returns", "href": "/help/returns" },
+                { "label": "Lifetime guarantee", "href": "/help/guarantee" },
+                { "label": "Contact", "href": "/contact" }
+              ]
+            }
+          ],
+          "social": [
+            { "label": "Instagram", "href": "#" },
+            { "label": "Strava", "href": "#" },
+            { "label": "YouTube", "href": "#" }
+          ],
+          "showNewsletter": "no",
+          "newsletterHeading": "",
+          "newsletterEndpoint": "",
+          "copyright": "© 2026 Pulse. Built to be replaced when used up."
         }
       }
     ]

app/_components/editor-shell.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import { useMemo } from "react";
+import { Editor } from "@reacteditor/core";
+import createTailwindCdnPlugin from "@reacteditor/plugin-tailwind-cdn";
+import type { UserConfig } from "@/config/types";
+
+export type EditorShellProps = {
+  config: UserConfig;
+  data: any;
+  routeKey?: string;
+};
+
+export function EditorShell({ config, data, routeKey }: EditorShellProps) {
+  const plugins = useMemo(() => [createTailwindCdnPlugin()], []);
+
+  const handlePublish = async (nextData: any, route?: any) => {
+    const resolved = route ?? (routeKey ? { key: routeKey } : undefined);
+    console.log({
+      type: "PUBLISH",
+      data: { data: nextData, route: JSON.stringify(resolved) },
+    });
+    if (typeof window !== "undefined" && window.parent !== window) {
+      window.parent.postMessage(
+        { type: "PUBLISH", data: { data: nextData, route: resolved } },
+        "*",
+      );
+    }
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+  };
+
+  return (
+    <div className="h-screen w-screen">
+      <Editor
+        config={config as any}
+        data={data}
+        plugins={plugins}
+        iframe={{ enabled: true }}
+        ui={{ leftSideBarVisible: false }}
+        onPublish={handlePublish}
+      />
+    </div>
+  );
+}

app/collections/[handle]/page.tsx

@@ -0,0 +1,10 @@
+"use client";
+
+import { Render } from "@reacteditor/core";
+import { collectionsConfig } from "@/config/configs";
+import schema from "@/app.schema.json";
+
+export default function CollectionPage() {
+  const data = (schema as any)["/collections/:handle"];
+  return <Render config={collectionsConfig as any} data={data} />;
+}

app/editor/collections/[handle]/page.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import { EditorShell } from "@/app/_components/editor-shell";
+import { collectionsConfig } from "@/config/configs";
+import schema from "@/app.schema.json";
+
+export default function CollectionEditorPage() {
+  const data = (schema as any)["/collections/:handle"];
+  return (
+    <EditorShell
+      config={collectionsConfig}
+      data={data}
+      routeKey="/collections/:handle"
+    />
+  );
+}

app/editor/page.tsx

@@ -0,0 +1,10 @@
+"use client";
+
+import { EditorShell } from "@/app/_components/editor-shell";
+import { homeConfig } from "@/config/configs";
+import schema from "@/app.schema.json";
+
+export default function HomeEditorPage() {
+  const data = (schema as any)["/"];
+  return <EditorShell config={homeConfig} data={data} routeKey="/" />;
+}

app/editor/products/[handle]/page.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import { EditorShell } from "@/app/_components/editor-shell";
+import { productConfig } from "@/config/configs";
+import schema from "@/app.schema.json";
+
+export default function ProductEditorPage() {
+  const data = (schema as any)["/products/:handle"];
+  return (
+    <EditorShell
+      config={productConfig}
+      data={data}
+      routeKey="/products/:handle"
+    />
+  );
+}

app/editor/search/page.tsx

@@ -0,0 +1,10 @@
+"use client";
+
+import { EditorShell } from "@/app/_components/editor-shell";
+import { searchConfig } from "@/config/configs";
+import schema from "@/app.schema.json";
+
+export default function SearchEditorPage() {
+  const data = (schema as any)["/search"];
+  return <EditorShell config={searchConfig} data={data} routeKey="/search" />;
+}

app/globals.css

@@ -1,6 +1,5 @@
 @import "tailwindcss";
 @import "tw-animate-css";
-@import "@fontsource-variable/geist";
 
 @custom-variant dark (&:is(.dark *));
 
@@ -29,10 +28,10 @@
   --color-input: var(--input);
   --color-ring: var(--ring);
 
-  --radius-sm: calc(var(--radius) - 4px);
+  --radius-sm: calc(var(--radius) * 0.5);
-  --radius-md: calc(var(--radius) - 2px);
+  --radius-md: calc(var(--radius) * 0.75);
   --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
+  --radius-xl: calc(var(--radius) * 1.5);
 
   --animate-marquee: marquee var(--duration) infinite linear;
   --animate-marquee-vertical: marquee-vertical var(--duration) linear infinite;
@@ -60,9 +59,9 @@
   --color-chart-3: var(--chart-3);
   --color-chart-2: var(--chart-2);
   --color-chart-1: var(--chart-1);
-  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-2xl: calc(var(--radius) * 2);
-  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-3xl: calc(var(--radius) * 3);
-  --radius-4xl: calc(var(--radius) * 2.6)
+  --radius-4xl: calc(var(--radius) * 4)
 }
 
 :root {
@@ -103,9 +102,16 @@
   --sidebar-ring: oklch(0.708 0 0);
 }
 
+*,
+::after,
+::before,
+::backdrop,
+::file-selector-button {
+  border-color: var(--border);
+}
+
 @layer base {
-  * { border-color: var(--border);
+  * { @apply outline-ring/50; }
-    @apply border-border outline-ring/50; }
   html, body { background-color: var(--background); color: var(--foreground); }
   body {
     font-family: var(--font-body), "Apple Color Emoji", "Segoe UI Emoji";

app/layout.tsx

@@ -0,0 +1,20 @@
+import type { ReactNode } from "react";
+import "@reacteditor/core/react-editor.css";
+import "@reacteditor/plugin-media/styles.css";
+import "@reacteditor/plugin-ai/styles.css";
+import "./globals.css";
+import { Providers } from "./providers";
+
+export const metadata = {
+  title: "Shopify Storefront",
+};
+
+export default function RootLayout({ children }: { children: ReactNode }) {
+  return (
+    <html lang="en">
+      <body>
+        <Providers>{children}</Providers>
+      </body>
+    </html>
+  );
+}

app/page.tsx

@@ -0,0 +1,10 @@
+"use client";
+
+import { Render } from "@reacteditor/core";
+import { homeConfig } from "@/config/configs";
+import schema from "@/app.schema.json";
+
+export default function HomePage() {
+  const data = (schema as any)["/"];
+  return <Render config={homeConfig as any} data={data} />;
+}

app/products/[handle]/page.tsx

@@ -0,0 +1,10 @@
+"use client";
+
+import { Render } from "@reacteditor/core";
+import { productConfig } from "@/config/configs";
+import schema from "@/app.schema.json";
+
+export default function ProductPage() {
+  const data = (schema as any)["/products/:handle"];
+  return <Render config={productConfig as any} data={data} />;
+}

app/providers.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import { useEffect, useState, type ReactNode } from "react";
+import { ShopifyProvider } from "@/contexts/shopify-context";
+
+const SHOPIFY_DOMAIN =
+  process.env.NEXT_PUBLIC_SHOPIFY_DOMAIN ?? "mock.shop";
+const STOREFRONT_TOKEN =
+  process.env.NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN ?? "";
+
+export function Providers({ children }: { children: ReactNode }) {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+  if (!mounted) return null;
+
+  return (
+    <ShopifyProvider domain={SHOPIFY_DOMAIN} token={STOREFRONT_TOKEN}>
+      {children}
+    </ShopifyProvider>
+  );
+}

app/search/page.tsx

@@ -0,0 +1,10 @@
+"use client";
+
+import { Render } from "@reacteditor/core";
+import { searchConfig } from "@/config/configs";
+import schema from "@/app.schema.json";
+
+export default function SearchPage() {
+  const data = (schema as any)["/search"];
+  return <Render config={searchConfig as any} data={data} />;
+}

components.json

@@ -1,11 +1,11 @@
 {
   "$schema": "https://ui.shadcn.com/schema.json",
   "style": "base-nova",
-  "rsc": false,
+  "rsc": true,
   "tsx": true,
   "tailwind": {
     "config": "",
-    "css": "src/globals.css",
+    "css": "app/globals.css",
     "baseColor": "neutral",
     "cssVariables": true,
     "prefix": ""

components/Heading.tsx

@@ -0,0 +1,117 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+import { Typography, type TypographyVariant } from "@/components/Typography";
+
+export type HeadingSize = "sm" | "md" | "lg" | "xl";
+export type HeadingAlign = "left" | "center";
+export type HeadingTone = "default" | "light";
+
+type SizeMap = {
+  title: TypographyVariant;
+  subtitle: TypographyVariant;
+  taglineGap: string;
+  subtitleGap: string;
+};
+
+const sizeMap: Record<HeadingSize, SizeMap> = {
+  sm: {
+    title: "h4",
+    subtitle: "subtitle2",
+    taglineGap: "mb-2",
+    subtitleGap: "mt-2",
+  },
+  md: {
+    title: "h3",
+    subtitle: "subtitle1",
+    taglineGap: "mb-3",
+    subtitleGap: "mt-3",
+  },
+  lg: {
+    title: "h2",
+    subtitle: "subtitle1",
+    taglineGap: "mb-3",
+    subtitleGap: "mt-3",
+  },
+  xl: {
+    title: "h1",
+    subtitle: "subtitle1",
+    taglineGap: "mb-4",
+    subtitleGap: "mt-4",
+  },
+};
+
+const alignClasses: Record<HeadingAlign, string> = {
+  left: "items-start text-left",
+  center: "items-center text-center",
+};
+
+export type HeadingProps = {
+  tagline?: React.ReactNode;
+  title?: React.ReactNode;
+  subtitle?: React.ReactNode;
+  size?: HeadingSize;
+  align?: HeadingAlign;
+  tone?: HeadingTone;
+  className?: string;
+  titleClassName?: string;
+  subtitleClassName?: string;
+  taglineClassName?: string;
+  maxWidth?: string;
+};
+
+export function Heading({
+  tagline,
+  title,
+  subtitle,
+  size = "lg",
+  align = "left",
+  tone = "default",
+  className,
+  titleClassName,
+  subtitleClassName,
+  taglineClassName,
+  maxWidth,
+}: HeadingProps) {
+  if (!tagline && !title && !subtitle) return null;
+  const map = sizeMap[size];
+  const isLight = tone === "light";
+
+  return (
+    <div className={cn("flex flex-col", alignClasses[align], maxWidth, className)}>
+      {tagline ? (
+        <Typography
+          variant="caption"
+          className={cn(
+            map.taglineGap,
+            isLight && "text-background/70",
+            taglineClassName,
+          )}
+        >
+          {tagline}
+        </Typography>
+      ) : null}
+      {title ? (
+        <Typography
+          variant={map.title}
+          className={cn(isLight && "text-background", titleClassName)}
+        >
+          {title}
+        </Typography>
+      ) : null}
+      {subtitle ? (
+        <Typography
+          variant={map.subtitle}
+          className={cn(
+            map.subtitleGap,
+            isLight && "text-background/70",
+            subtitleClassName,
+          )}
+        >
+          {subtitle}
+        </Typography>
+      ) : null}
+    </div>
+  );
+}
+
+export default Heading;

components/ThemeProvider.tsx

@@ -3,6 +3,7 @@ import { useEffect, useMemo, useRef } from "react";
 
 export type ThemeProps = {
   headerFont?: string;
+  headerFontWeight?: string;
   bodyFont?: string;
   primaryColor?: string;
   primaryForegroundColor?: string;
@@ -13,31 +14,28 @@ export type ThemeProps = {
   mutedColor?: string;
   mutedForegroundColor?: string;
   borderColor?: string;
-  roundedness?: "none" | "sm" | "md" | "lg" | "xl" | "full";
+  radius?: "none" | "sm" | "md" | "lg" | "xl";
-  radius?: "none" | "xs" | "sm" | "md" | "lg";
+  shadow?: "none" | "sm" | "md" | "lg" | "xl";
-  shadowLevel?: "none" | "sm" | "md" | "lg" | "xl";
+  maxWidth?: "sm" | "md" | "lg" | "xl" | "full";
-  shadow?: "none" | "sm" | "md" | "lg";
-  maxWidth?: "sm" | "md" | "lg" | "xl" | "2xl" | "full";
 };
 
-const radiusMap: Record<NonNullable<ThemeProps["roundedness"]>, string> = {
+const radiusMap: Record<NonNullable<ThemeProps["radius"]>, string> = {
   none: "0px",
   sm: "0.25rem",
   md: "0.5rem",
   lg: "0.75rem",
   xl: "1rem",
-  full: "9999px",
 };
 
-const radiusEnumMap: Record<NonNullable<ThemeProps["radius"]>, string> = {
+const maxWidthMap: Record<NonNullable<ThemeProps["maxWidth"]>, string> = {
-  none: "0px",
+  sm: "64rem",
-  xs: "0.125rem",
+  md: "72rem",
-  sm: "0.25rem",
+  lg: "80rem",
-  md: "0.5rem",
+  xl: "96rem",
-  lg: "0.75rem",
+  full: "100%",
 };
 
-const shadowMap: Record<NonNullable<ThemeProps["shadowLevel"]>, string> = {
+const shadowMap: Record<NonNullable<ThemeProps["shadow"]>, string> = {
   none: "0 0 #0000",
   sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
   md: "0 4px 6px -1px rgb(0 0 0 / 0.10), 0 2px 4px -2px rgb(0 0 0 / 0.10)",
@@ -45,26 +43,40 @@ const shadowMap: Record<NonNullable<ThemeProps["shadowLevel"]>, string> = {
   xl: "0 20px 25px -5px rgb(0 0 0 / 0.10), 0 8px 10px -6px rgb(0 0 0 / 0.10)",
 };
 
-const shadowEnumMap: Record<NonNullable<ThemeProps["shadow"]>, string> = {
+function googleFontsHref(
-  none: "0 0 #0000",
+  headerFont?: string,
-  sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+  bodyFont?: string,
-  md: "0 4px 6px -1px rgb(0 0 0 / 0.10), 0 2px 4px -2px rgb(0 0 0 / 0.10)",
+  headerFontWeight?: string,
-  lg: "0 10px 15px -3px rgb(0 0 0 / 0.10), 0 4px 6px -4px rgb(0 0 0 / 0.10)",
+): string | null {
-};
+  const valid = (f?: string): f is string => !!f && f !== "system-ui";
+  const families: string[] = [];
+  const seen = new Set<string>();
 
-function googleFontsHref(headerFont?: string, bodyFont?: string): string | null {
+  const headerWeight = headerFontWeight || "400";
-  const fonts = [headerFont, bodyFont].filter(
+  const bodyWeights = "400;500;600;700";
-    (f): f is string => !!f && f !== "system-ui"
+
+  if (valid(headerFont)) {
+    seen.add(headerFont);
+    // Header font uses the configured weight only — avoids HTTP 400 from
+    // Google Fonts when a single-weight family (e.g. Archivo Black) is paired
+    // with a multi-weight default request.
+    families.push(
+      `family=${encodeURIComponent(headerFont)}:wght@${headerWeight}`,
     );
-  if (fonts.length === 0) return null;
+  }
-  const families = Array.from(new Set(fonts))
+  if (valid(bodyFont) && !seen.has(bodyFont)) {
-    .map((f) => `family=${encodeURIComponent(f)}:wght@400;500;600;700`)
+    seen.add(bodyFont);
-    .join("&");
+    families.push(
-  return `https://fonts.googleapis.com/css2?${families}&display=swap`;
+      `family=${encodeURIComponent(bodyFont)}:wght@${bodyWeights}`,
+    );
+  }
+  if (families.length === 0) return null;
+  return `https://fonts.googleapis.com/css2?${families.join("&")}&display=swap`;
 }
 
 export function ThemeProvider({
   headerFont,
+  headerFontWeight,
   bodyFont,
   primaryColor,
   primaryForegroundColor,
@@ -75,10 +87,9 @@ export function ThemeProvider({
   mutedColor,
   mutedForegroundColor,
   borderColor,
-  roundedness,
   radius,
-  shadowLevel,
   shadow,
+  maxWidth,
   children,
 }: ThemeProps & { children?: React.ReactNode }) {
   // Recompute CSS-variable map only when a relevant prop changes.
@@ -93,15 +104,16 @@ export function ThemeProvider({
     if (mutedColor) vars["--muted"] = mutedColor;
     if (mutedForegroundColor) vars["--muted-foreground"] = mutedForegroundColor;
     if (borderColor) vars["--border"] = borderColor;
-    if (radius) vars["--radius"] = radiusEnumMap[radius];
+    if (radius) vars["--radius"] = radiusMap[radius];
-    else if (roundedness) vars["--radius"] = radiusMap[roundedness];
+    if (shadow) vars["--shadow"] = shadowMap[shadow];
-    if (shadow) vars["--shadow"] = shadowEnumMap[shadow];
+    if (maxWidth) vars["--container-max-width"] = maxWidthMap[maxWidth];
-    else if (shadowLevel) vars["--shadow"] = shadowMap[shadowLevel];
     if (headerFont) vars["--font-header"] = `"${headerFont}", system-ui, sans-serif`;
     if (bodyFont) vars["--font-body"] = `"${bodyFont}", system-ui, sans-serif`;
+    if (headerFontWeight) vars["--font-weight-header"] = headerFontWeight;
     return vars;
   }, [
     headerFont,
+    headerFontWeight,
     bodyFont,
     primaryColor,
     primaryForegroundColor,
@@ -112,10 +124,9 @@ export function ThemeProvider({
     mutedColor,
     mutedForegroundColor,
     borderColor,
-    roundedness,
     radius,
-    shadowLevel,
     shadow,
+    maxWidth,
   ]);
 
   // Imperatively push every CSS var onto :root inside the host document
@@ -145,20 +156,28 @@ export function ThemeProvider({
   }, [cssVars]);
 
   const fontsHref = useMemo(
-    () => googleFontsHref(headerFont, bodyFont),
+    () => googleFontsHref(headerFont, bodyFont, headerFontWeight),
-    [headerFont, bodyFont],
+    [headerFont, bodyFont, headerFontWeight],
   );
 
   // Plain CSS rules — applied directly, no Tailwind CDN runtime needed.
-  // Tailwind preflight resets h1..h6 to font-family: inherit, which would
+  // Body font is set on `body` once and inherited by descendants (span, a,
-  // make headings pick up the body font. We override that here using the
+  // p, li, etc. don't need explicit rules — applying one to `span/a` would
-  // `--font-header` CSS var ThemeProvider sets per-page.
+  // break heading children, anchors inside headings, and any element using
+  // `as="span"` to render a heading variant).
+  // Form controls have user-agent defaults, so they need an explicit override.
+  // Tailwind preflight resets h1..h6 to font-family: inherit, so we restore
+  // the heading font + weight here using the per-page CSS vars.
   const css = `
-    body, p, span, a, li, button, input, textarea, select {
+    body {
       font-family: var(--font-body), system-ui, -apple-system, sans-serif;
     }
+    button, input, textarea, select {
+      font-family: inherit;
+    }
     h1, h2, h3, h4, h5, h6 {
       font-family: var(--font-header), system-ui, -apple-system, sans-serif;
+      font-weight: var(--font-weight-header, 600);
     }
   `;
 
@@ -169,6 +188,12 @@ export function ThemeProvider({
     @theme {
       --font-family-heading: var(--font-header), system-ui, -apple-system, sans-serif;
       --font-family-body: var(--font-body), system-ui, -apple-system, sans-serif;
+      --radius-sm: calc(var(--radius) * 0.5);
+      --radius-md: calc(var(--radius) * 0.75);
+      --radius-lg: var(--radius);
+      --radius-xl: calc(var(--radius) * 1.5);
+      --radius-2xl: calc(var(--radius) * 2);
+      --radius-3xl: calc(var(--radius) * 3);
     }
   `;
 

components/Typography.tsx

@@ -15,17 +15,17 @@ export type TypographyVariant =
   | "caption";
 
 const sizeClasses: Record<TypographyVariant, string> = {
-  h1: "text-5xl md:text-6xl lg:text-7xl font-semibold tracking-tight leading-[1.05]",
+  h1: "text-5xl md:text-6xl lg:text-7xl tracking-tight leading-[1.05]",
-  h2: "text-4xl md:text-5xl font-semibold tracking-tight leading-[1.1]",
+  h2: "text-4xl md:text-5xl tracking-tight leading-[1.1]",
-  h3: "text-3xl md:text-4xl font-semibold tracking-tight leading-tight",
+  h3: "text-3xl md:text-4xl tracking-tight leading-tight",
-  h4: "text-2xl md:text-3xl font-semibold tracking-tight leading-snug",
+  h4: "text-2xl md:text-3xl tracking-tight leading-snug",
-  h5: "text-xl md:text-2xl font-semibold leading-snug",
+  h5: "text-xl md:text-2xl leading-snug",
-  h6: "text-lg md:text-xl font-semibold leading-snug",
+  h6: "text-lg md:text-xl leading-snug",
   subtitle1: "text-lg md:text-xl leading-relaxed text-muted-foreground",
   subtitle2: "text-base md:text-lg leading-relaxed text-muted-foreground",
   body1: "text-lg leading-relaxed",
   body2: "text-base leading-relaxed",
-  caption: "text-sm leading-relaxed text-muted-foreground",
+  caption: "text-xs font-bold uppercase tracking-[0.2em] text-muted-foreground",
 };
 
 // Inline-style fallbacks so headings size correctly even when Tailwind
@@ -33,17 +33,17 @@ const sizeClasses: Record<TypographyVariant, string> = {
 // hasn't compiled utility classes yet. The Tailwind classes above still
 // apply on top once available (responsive breakpoints, leading, etc.).
 const sizeStyles: Record<TypographyVariant, React.CSSProperties> = {
-  h1: { fontSize: "clamp(2.5rem, 6vw, 4.5rem)", lineHeight: 1.05, fontWeight: 600, letterSpacing: "-0.02em" },
+  h1: { fontSize: "clamp(2.5rem, 6vw, 4.5rem)", lineHeight: 1.05, letterSpacing: "-0.02em" },
-  h2: { fontSize: "clamp(2rem, 4vw, 3rem)",     lineHeight: 1.1,  fontWeight: 600, letterSpacing: "-0.02em" },
+  h2: { fontSize: "clamp(2rem, 4vw, 3rem)",     lineHeight: 1.1,  letterSpacing: "-0.02em" },
-  h3: { fontSize: "clamp(1.75rem, 3.5vw, 2.25rem)", lineHeight: 1.15, fontWeight: 600, letterSpacing: "-0.015em" },
+  h3: { fontSize: "clamp(1.75rem, 3.5vw, 2.25rem)", lineHeight: 1.15, letterSpacing: "-0.015em" },
-  h4: { fontSize: "clamp(1.5rem, 3vw, 1.875rem)",   lineHeight: 1.2,  fontWeight: 600, letterSpacing: "-0.01em" },
+  h4: { fontSize: "clamp(1.5rem, 3vw, 1.875rem)",   lineHeight: 1.2,  letterSpacing: "-0.01em" },
-  h5: { fontSize: "1.5rem",   lineHeight: 1.25, fontWeight: 600 },
+  h5: { fontSize: "1.5rem",   lineHeight: 1.25 },
-  h6: { fontSize: "1.25rem",  lineHeight: 1.3,  fontWeight: 600 },
+  h6: { fontSize: "1.25rem",  lineHeight: 1.3 },
   subtitle1: { fontSize: "1.125rem", lineHeight: 1.6 },
   subtitle2: { fontSize: "1rem",     lineHeight: 1.6 },
   body1: { fontSize: "1.125rem", lineHeight: 1.6 },
   body2: { fontSize: "1rem",     lineHeight: 1.6 },
-  caption: { fontSize: "0.875rem", lineHeight: 1.5 },
+  caption: { fontSize: "0.75rem", lineHeight: 1.5, fontWeight: 700, letterSpacing: "0.2em", textTransform: "uppercase" },
 };
 
 const defaultTag: Record<TypographyVariant, keyof JSX.IntrinsicElements> = {
@@ -80,11 +80,22 @@ export function Typography<C extends keyof JSX.IntrinsicElements = "p">({
   const isHeading = variant.startsWith("h");
   const fontClass = isHeading ? "font-heading" : "font-body";
 
+  // Apply the heading font + weight inline so the styling holds even when
+  // the rendered element isn't h1–h6 (e.g. <span> via the `as` prop). The
+  // ThemeProvider's element-scoped CSS rule only matches real h-tags, and
+  // the `font-heading` Tailwind utility can't be relied on in CDN mode.
+  const fontStyles: React.CSSProperties = isHeading
+    ? {
+        fontFamily: "var(--font-header), system-ui, sans-serif",
+        fontWeight: "var(--font-weight-header, 600)",
+      }
+    : {};
+
   return React.createElement(
     Tag,
     {
       className: cn(fontClass, sizeClasses[variant], className),
-      style: { ...sizeStyles[variant], ...style },
+      style: { ...fontStyles, ...sizeStyles[variant], ...style },
       ...rest,
     },
     children,

components/commerce/cart-drawer.tsx

@@ -4,17 +4,34 @@ import React from 'react';
 import { useShopifyCart, redirectToCheckout } from '@/hooks/use-shopify-cart';
 import { Button } from '@/components/ui/button';
 import { Spinner } from '@/components/ui/spinner';
+import { Loader } from '@/components/ui/loader';
+import { X, ImageIcon, Minus, Plus } from 'lucide-react';
+import {
+  Empty,
+  EmptyHeader,
+  EmptyTitle,
+  EmptyDescription,
+  EmptyContent,
+} from '@/components/ui/empty';
 import {
   Sheet,
   SheetContent,
   SheetHeader,
   SheetTitle,
-  SheetBody,
-  SheetFooter,
 } from '@/components/ui/sheet';
 
 const CartDrawer: React.FC = () => {
-  const { isOpen, closeCart, items, itemCount, totalAmount, checkoutUrl, loading, removeItem, updateItemQuantity } = useShopifyCart();
+  const {
+    isOpen,
+    closeCart,
+    items,
+    itemCount,
+    totalAmount,
+    checkoutUrl,
+    loading,
+    removeItem,
+    updateItemQuantity,
+  } = useShopifyCart();
 
   const handleCheckout = () => {
     if (checkoutUrl) {
@@ -22,42 +39,56 @@ const CartDrawer: React.FC = () => {
     }
   };
 
-  const getItemImage = (item: typeof items[0]) => {
+  const getItemImage = (item: (typeof items)[0]) => {
     return item.merchandise.image?.url;
   };
 
-  const getSelectedOptions = (item: typeof items[0]) => {
+  const getSelectedOptions = (item: (typeof items)[0]) => {
     return item.merchandise.selectedOptions ?? [];
   };
 
   return (
-    <Sheet open={isOpen} onOpenChange={(open) => !open && closeCart()} side="right">
+    <Sheet open={isOpen} onOpenChange={(open) => !open && closeCart()}>
-      <SheetContent className="w-full sm:max-w-md">
+      <SheetContent
+        side="right"
+        className="w-full max-w-md"
+        showCloseButton={false}
+      >
         {/* Header */}
-        <SheetHeader>
+        <SheetHeader className="h-14 min-h-0 px-4 py-3 flex items-center border-b border-border">
+          <div className="flex items-center justify-between w-full">
             <SheetTitle className="text-base">
               Shopping Cart ({itemCount})
             </SheetTitle>
+            <Button onClick={closeCart} variant="ghost" size="icon-sm">
+              <X size={20} />
+            </Button>
+          </div>
         </SheetHeader>
 
         {/* Cart Items */}
-        <SheetBody>
+        <div className="flex-1 overflow-y-auto px-6 py-4">
           {loading && items.length === 0 ? (
             <div className="flex items-center justify-center py-12">
               <Spinner size="lg" />
             </div>
           ) : items.length === 0 ? (
-            <div className="text-center py-12">
+            <Empty className="border-0">
-              <i className="ri-shopping-cart-line text-6xl text-gray-300 mb-4 block"></i>
+              <EmptyContent>
-              <h3 className="text-lg font-semibold text-gray-600 mb-2">Your cart is empty</h3>
+                <EmptyHeader>
-              <p className="text-gray-500 mb-6">Add some products to get started!</p>
+                  <EmptyTitle>Your cart is empty</EmptyTitle>
+                  <EmptyDescription>
+                    Add some products to get started!
+                  </EmptyDescription>
+                </EmptyHeader>
                 <Button
                   onClick={closeCart}
-                className="font-heading"
+                  variant="outline"
                 >
                   Continue Shopping
                 </Button>
-            </div>
+              </EmptyContent>
+            </Empty>
           ) : (
             <div className="space-y-6">
               {items.map((item) => {
@@ -65,9 +96,12 @@ const CartDrawer: React.FC = () => {
                 const selectedOptions = getSelectedOptions(item);
 
                 return (
-                  <div key={item.id} className="flex items-start space-x-4 pb-6 border-b border-gray-200 last:border-b-0">
+                  <div
+                    key={item.id}
+                    className="flex items-start space-x-4 pb-6 border-b border-border last:border-b-0"
+                  >
                     {/* Product Image */}
-                    <div className="w-20 h-20 bg-gray-100 rounded-lg overflow-hidden flex-shrink-0">
+                    <div className="w-20 h-20 bg-muted rounded-lg overflow-hidden flex-shrink-0">
                       {image ? (
                         <img
                           src={image}
@@ -75,25 +109,27 @@ const CartDrawer: React.FC = () => {
                           className="w-full h-full object-cover"
                         />
                       ) : (
-                        <div className="w-full h-full flex items-center justify-center text-gray-400">
+                        <div className="w-full h-full flex items-center justify-center text-muted-foreground">
-                          <i className="ri-image-line text-2xl"></i>
+                          <ImageIcon size={24} />
                         </div>
                       )}
                     </div>
 
                     {/* Product Details */}
                     <div className="flex-1 min-w-0">
-                      <h4 className="font-semibold text-gray-900 mb-1 line-clamp-2">
+                      <h4 className="font-semibold text-foreground mb-1 line-clamp-2">
                         {item.merchandise.product.title}
                       </h4>
 
                       {/* Variant Info */}
                       {selectedOptions.length > 0 && (
-                        <div className="text-sm text-gray-500 mb-2">
+                        <div className="text-sm text-muted-foreground mb-2">
                           {selectedOptions.map((option, index) => (
                             <span key={option.name}>
                               {option.value}
-                              {index < selectedOptions.length - 1 ? ' / ' : ''}
+                              {index < selectedOptions.length - 1
+                                ? ' / '
+                                : ''}
                             </span>
                           ))}
                         </div>
@@ -101,27 +137,31 @@ const CartDrawer: React.FC = () => {
 
                       {/* Quantity Controls */}
                       <div className="flex items-center mt-3">
-                        <div className="flex items-center border border-gray-300 rounded-lg">
+                        <div className="flex items-center border border-border rounded-lg">
                           <Button
-                            onClick={() => updateItemQuantity(item.id, item.quantity - 1)}
+                            onClick={() =>
+                              updateItemQuantity(item.id, item.quantity - 1)
+                            }
                             variant="ghost"
                             size="icon-sm"
                             disabled={item.quantity <= 1 || loading}
                             className="h-7 w-7"
                           >
-                            <i className="ri-subtract-line text-sm"></i>
+                            <Minus size={14} />
                           </Button>
                           <span className="px-2 py-1 font-semibold min-w-[30px] text-center text-sm">
                             {item.quantity}
                           </span>
                           <Button
-                            onClick={() => updateItemQuantity(item.id, item.quantity + 1)}
+                            onClick={() =>
+                              updateItemQuantity(item.id, item.quantity + 1)
+                            }
                             variant="ghost"
                             size="icon-sm"
                             disabled={loading}
                             className="h-7 w-7"
                           >
-                            <i className="ri-add-line text-sm"></i>
+                            <Plus size={14} />
                           </Button>
                         </div>
                       </div>
@@ -129,7 +169,7 @@ const CartDrawer: React.FC = () => {
 
                     {/* Price */}
                     <div className="flex-shrink-0">
-                      <span className="text-sm font-semibold text-gray-900">
+                      <span className="text-sm font-semibold text-foreground">
                         ${parseFloat(item.merchandise.price.amount).toFixed(2)}
                       </span>
                     </div>
@@ -141,9 +181,9 @@ const CartDrawer: React.FC = () => {
                         variant="ghost"
                         size="icon-sm"
                         disabled={loading}
-                        className="text-gray-400 hover:text-red-500"
+                        className="text-muted-foreground hover:text-foreground"
                       >
-                        <i className="ri-delete-bin-line text-lg"></i>
+                        <X size={18} />
                       </Button>
                     </div>
                   </div>
@@ -151,11 +191,11 @@ const CartDrawer: React.FC = () => {
               })}
             </div>
           )}
-        </SheetBody>
+        </div>
 
         {/* Footer - Checkout Section */}
         {items.length > 0 && (
-          <SheetFooter className="flex-col sm:flex-col sm:justify-start gap-0">
+          <div className="border-t border-border p-6">
             {/* Subtotal */}
             <div className="flex items-center justify-between mb-4">
               <span className="text-base font-semibold">Subtotal</span>
@@ -164,7 +204,7 @@ const CartDrawer: React.FC = () => {
               </span>
             </div>
 
-            <div className="text-sm text-gray-500 mb-4">
+            <div className="text-sm text-muted-foreground mb-4">
               Shipping and taxes calculated at checkout
             </div>
 
@@ -178,7 +218,7 @@ const CartDrawer: React.FC = () => {
               >
                 {loading ? (
                   <span className="flex items-center justify-center space-x-2">
-                    <Spinner size="sm" />
+                    <Loader size={16} />
                     <span>Processing...</span>
                   </span>
                 ) : (
@@ -186,15 +226,11 @@ const CartDrawer: React.FC = () => {
                 )}
               </Button>
 
-              <Button
+              <Button onClick={closeCart} variant="link" className="w-full">
-                onClick={closeCart}
-                variant="link"
-                className="w-full"
-              >
                 Continue Shopping
               </Button>
             </div>
-          </SheetFooter>
+          </div>
         )}
       </SheetContent>
     </Sheet>

components/commerce/collection-card.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import { Link } from 'react-router';
+import Link from 'next/link';
 import { Card, CardContent } from '@/components/ui/card';
+import { Typography } from '@/components/Typography';
 
 interface CollectionImage {
   url: string;
@@ -21,10 +22,10 @@ interface CollectionCardProps {
 
 const CollectionCard: React.FC<CollectionCardProps> = ({ collection }) => {
   return (
-    <Link to={`/collections/${collection.handle}`} className="block group">
+    <Link href={`/collections/${collection.handle}`} className="block group">
       <Card className="hover:shadow-xl transition-shadow duration-300 overflow-hidden py-0 gap-0">
         {/* Collection Image */}
-        <div className="aspect-video overflow-hidden bg-gray-100">
+        <div className="aspect-video overflow-hidden bg-muted">
           {collection.image ? (
             <img
               src={collection.image.url}
@@ -32,7 +33,7 @@ const CollectionCard: React.FC<CollectionCardProps> = ({ collection }) => {
               className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
             />
           ) : (
-            <div className="w-full h-full flex items-center justify-center text-gray-400">
+            <div className="w-full h-full flex items-center justify-center text-muted-foreground">
               <i className="ri-folder-line text-6xl"></i>
             </div>
           )}
@@ -40,18 +41,21 @@ const CollectionCard: React.FC<CollectionCardProps> = ({ collection }) => {
 
         {/* Collection Info */}
         <CardContent className="p-6">
-          <h3 className="text-2xl font-bold text-gray-900 mb-3 group-hover:text-gray-600 transition-colors font-heading">
+          <Typography
+            variant="subtitle1"
+            className="mb-3 font-semibold tracking-tight text-foreground transition-colors group-hover:text-muted-foreground"
+          >
             {collection.title}
-          </h3>
+          </Typography>
 
           {collection.description && (
-            <p className="text-gray-600">
+            <p className="text-muted-foreground">
               {collection.description.substring(0, 100)}
               {collection.description.length > 100 ? '...' : ''}
             </p>
           )}
 
-          <div className="mt-4 text-black font-semibold group-hover:text-gray-600 transition-colors flex items-center">
+          <div className="mt-4 text-foreground font-semibold group-hover:text-muted-foreground transition-colors flex items-center">
             <span>View Collection</span>
             <i className="ri-arrow-right-s-line ml-2"></i>
           </div>

components/commerce/collection-detail.tsx

@@ -64,18 +64,18 @@ const CollectionDetail: React.FC<{ handle?: string }> = ({ handle: handleProp })
   return (
     <div className="pt-4 pb-16">
       <div className="container mx-auto px-4">
-        <h2 className="text-5xl font-bold text-center mb-16 text-gray-900 font-heading">
+        <h2 className="text-5xl font-bold text-center mb-16 text-foreground font-heading">
           {title}
         </h2>
 
         {products.length === 0 ? (
           <div className="text-center py-12">
-            <div className="bg-gray-50 border border-gray-200 rounded-lg p-8 max-w-md mx-auto">
+            <div className="bg-muted border border-border rounded-lg p-8 max-w-md mx-auto">
-              <i className="ri-shopping-bag-line text-4xl text-gray-400 mb-4"></i>
+              <i className="ri-shopping-bag-line text-4xl text-muted-foreground mb-4"></i>
-              <h3 className="text-lg font-semibold text-gray-600 mb-2">
+              <h3 className="text-lg font-semibold text-foreground mb-2">
                 No Products in Collection
               </h3>
-              <p className="text-gray-500">
+              <p className="text-muted-foreground">
                 This collection doesn&apos;t have any products yet.
               </p>
             </div>

components/commerce/collection-grid.tsx

@@ -1,8 +1,10 @@
 import { useEffect, useState } from "react";
-import { Link } from "react-router";
+import Link from "next/link";
 import { shopifyFetch } from "@/services/shopify/client";
 import { GET_COLLECTIONS_QUERY } from "@/graphql/collections";
+import { Container } from "@/components/layout/Container";
 import { Typography } from "@/components/Typography";
+import { Heading } from "@/components/Heading";
 
 export type CollectionGridProps = {
   tagline: string;
@@ -45,20 +47,16 @@ export function CollectionGrid({
 
   return (
     <section className="bg-background py-20 md:py-28">
-      <div className="container mx-auto max-w-7xl px-6">
+      <Container>
-        <div className="mx-auto mb-12 max-w-2xl text-center">
+        <Heading
-          {tagline ? (
+          tagline={tagline}
-            <p className="mb-3 text-xs uppercase tracking-[0.2em] text-muted-foreground">
+          title={heading}
-              {tagline}
+          subtitle={subheading}
-            </p>
+          align="center"
-          ) : null}
+          size="lg"
-          <Typography variant="h2">{heading}</Typography>
+          className="mx-auto mb-12"
-          {subheading ? (
+          maxWidth="max-w-2xl"
-            <Typography variant="subtitle1" className="mt-3">
+        />
-              {subheading}
-            </Typography>
-          ) : null}
-        </div>
 
         <div
           className={
@@ -73,7 +71,7 @@ export function CollectionGrid({
           ).map((c: CollectionRow) => (
             <Link
               key={c.id}
-              to={c.handle ? `/collections/${c.handle}` : "#"}
+              href={c.handle ? `/collections/${c.handle}` : "#"}
               className="group block"
             >
               <div
@@ -89,28 +87,33 @@ export function CollectionGrid({
                 {isEditorial ? (
                   <div className="absolute inset-0 flex items-end bg-gradient-to-t from-black/60 via-transparent to-transparent p-8">
                     <div>
-                      <Typography variant="h4" className="text-white">
+                      <Typography
+                        variant="subtitle1"
+                        className="font-semibold tracking-tight text-white"
+                      >
                         {c.title}
                       </Typography>
                       <span className="mt-2 inline-flex text-xs uppercase tracking-[0.2em] text-white/80">
-                        Shop now →
+                        Shop now
                       </span>
                     </div>
                   </div>
                 ) : null}
               </div>
               {!isEditorial ? (
-                <div className="mt-4 flex items-center justify-between">
+                <div className="mt-4">
-                  <h3 className="text-sm font-medium tracking-tight">{c.title}</h3>
+                  <Typography
-                  <span className="text-xs text-muted-foreground transition-opacity group-hover:opacity-100">
+                    variant="subtitle2"
-                    →
+                    className="font-medium tracking-tight text-foreground"
-                  </span>
+                  >
+                    {c.title}
+                  </Typography>
                 </div>
               ) : null}
             </Link>
           ))}
         </div>
-      </div>
+      </Container>
     </section>
   );
 }

components/commerce/collection.editor.tsx

@@ -1,5 +1,7 @@
 import { ComponentConfig } from "@reacteditor/core";
 import { FolderOpen } from "lucide-react";
+import { imageField } from "@reacteditor/plugin-media/field";
+import { frontendAiMediaAdapter } from "@/services/media-adapter";
 import { CollectionView, type CollectionProps } from "@/components/commerce/collection";
 
 export function createCollectionEditor(opts: {
@@ -9,17 +11,240 @@ export function createCollectionEditor(opts: {
     label: "Collection page",
     icon: <FolderOpen size={16} />,
     category: "commerce",
-    defaultProps: { collection: null, showDescription: "no" },
+    defaultProps: {
+      collection: null,
+      showDescription: "yes",
+      showCoverImage: "yes",
+      customCoverImage: "",
+      columns: "4",
+      limit: 24,
+      defaultSort: "BEST_SELLING",
+      showAvailability: "yes",
+      showPriceRange: "yes",
+      showProductType: "no",
+      productTypeOptions: [],
+      showVendor: "no",
+      vendorOptions: [],
+      showTags: "no",
+      tagOptions: [],
+      showColor: "yes",
+      colorOptions: [
+        { label: "Black", color: "#000000" },
+        { label: "White", color: "#FFFFFF" },
+        { label: "Navy", color: "#1e3a5f" },
+      ],
+      showStyle: "no",
+      styleOptions: [],
+      showSize: "yes",
+      sizeOptions: [
+        { label: "XS" },
+        { label: "S" },
+        { label: "M" },
+        { label: "L" },
+        { label: "XL" },
+      ],
+      showMaterial: "no",
+      materialOptions: [],
+      metafieldFilters: [],
+    },
     fields: {
       collection: { label: "Collection", ...opts.collectionField },
       showDescription: {
         label: "Description",
         type: "radio",
         options: [
-          { label: "Hide description", value: "no" },
+          { label: "Show", value: "yes" },
-          { label: "Show description", value: "yes" },
+          { label: "Hide", value: "no" },
         ],
       },
+      showCoverImage: {
+        label: "Cover image",
+        type: "radio",
+        options: [
+          { label: "Show", value: "yes" },
+          { label: "Hide", value: "no" },
+        ],
+      },
+      customCoverImage: {
+        label: "Custom cover image",
+        ...imageField({ adapter: frontendAiMediaAdapter }),
+      },
+      columns: {
+        label: "Columns",
+        type: "radio",
+        options: [
+          { label: "2", value: "2" },
+          { label: "3", value: "3" },
+          { label: "4", value: "4" },
+        ],
+      },
+      limit: { label: "Products per page", type: "number", min: 4, max: 48 },
+      defaultSort: {
+        label: "Default sort",
+        type: "select",
+        options: [
+          { label: "Best Selling", value: "BEST_SELLING" },
+          { label: "Newest", value: "CREATED" },
+          { label: "Price: Low to High", value: "PRICE" },
+          { label: "Alphabetical", value: "TITLE" },
+        ],
+      },
+      showAvailability: {
+        label: "Availability filter",
+        type: "radio",
+        options: [
+          { label: "Show", value: "yes" },
+          { label: "Hide", value: "no" },
+        ],
+      },
+      showPriceRange: {
+        label: "Price range filter",
+        type: "radio",
+        options: [
+          { label: "Show", value: "yes" },
+          { label: "Hide", value: "no" },
+        ],
+      },
+      showColor: {
+        label: "Color filter",
+        type: "radio",
+        options: [
+          { label: "Show", value: "yes" },
+          { label: "Hide", value: "no" },
+        ],
+      },
+      colorOptions: {
+        label: "Colors",
+        type: "array",
+        defaultItemProps: { label: "", color: "#000000" },
+        getItemSummary: (it: any) => it?.label || "Color",
+        arrayFields: {
+          label: { label: "Color name", type: "text" },
+          color: { label: "Color", type: "color" },
+        },
+      },
+      showStyle: {
+        label: "Style filter",
+        type: "radio",
+        options: [
+          { label: "Show", value: "yes" },
+          { label: "Hide", value: "no" },
+        ],
+      },
+      styleOptions: {
+        label: "Styles",
+        type: "array",
+        defaultItemProps: { label: "" },
+        getItemSummary: (it: any) => it?.label || "Style",
+        arrayFields: {
+          label: { label: "Style name", type: "text" },
+        },
+      },
+      showSize: {
+        label: "Size filter",
+        type: "radio",
+        options: [
+          { label: "Show", value: "yes" },
+          { label: "Hide", value: "no" },
+        ],
+      },
+      sizeOptions: {
+        label: "Sizes",
+        type: "array",
+        defaultItemProps: { label: "" },
+        getItemSummary: (it: any) => it?.label || "Size",
+        arrayFields: {
+          label: { label: "Size name", type: "text" },
+        },
+      },
+      showMaterial: {
+        label: "Material filter",
+        type: "radio",
+        options: [
+          { label: "Show", value: "yes" },
+          { label: "Hide", value: "no" },
+        ],
+      },
+      materialOptions: {
+        label: "Materials",
+        type: "array",
+        defaultItemProps: { label: "" },
+        getItemSummary: (it: any) => it?.label || "Material",
+        arrayFields: {
+          label: { label: "Material name", type: "text" },
+        },
+      },
+      showVendor: {
+        label: "Brand / vendor filter",
+        type: "radio",
+        options: [
+          { label: "Show", value: "yes" },
+          { label: "Hide", value: "no" },
+        ],
+      },
+      vendorOptions: {
+        label: "Brands",
+        type: "array",
+        defaultItemProps: { label: "" },
+        getItemSummary: (it: any) => it?.label || "Brand",
+        arrayFields: {
+          label: { label: "Brand name", type: "text" },
+        },
+      },
+      showProductType: {
+        label: "Product type filter",
+        type: "radio",
+        options: [
+          { label: "Show", value: "yes" },
+          { label: "Hide", value: "no" },
+        ],
+      },
+      productTypeOptions: {
+        label: "Product types",
+        type: "array",
+        defaultItemProps: { label: "" },
+        getItemSummary: (it: any) => it?.label || "Type",
+        arrayFields: {
+          label: { label: "Type name", type: "text" },
+        },
+      },
+      showTags: {
+        label: "Tags filter",
+        type: "radio",
+        options: [
+          { label: "Show", value: "yes" },
+          { label: "Hide", value: "no" },
+        ],
+      },
+      tagOptions: {
+        label: "Tags",
+        type: "array",
+        defaultItemProps: { label: "" },
+        getItemSummary: (it: any) => it?.label || "Tag",
+        arrayFields: {
+          label: { label: "Tag name", type: "text" },
+        },
+      },
+      metafieldFilters: {
+        label: "Metafield filters",
+        type: "array",
+        defaultItemProps: { namespace: "", key: "", label: "", values: [{ label: "" }] },
+        getItemSummary: (it: any) => it?.label || it?.key || "Metafield",
+        arrayFields: {
+          namespace: { label: "Namespace", type: "text" },
+          key: { label: "Key", type: "text" },
+          label: { label: "Label", type: "text" },
+          values: {
+            label: "Values",
+            type: "array",
+            defaultItemProps: { label: "" },
+            getItemSummary: (v: any) => v?.label || "Value",
+            arrayFields: {
+              label: { label: "Value", type: "text" },
+            },
+          },
+        },
+      },
     },
     render: (props) => <CollectionView {...props} />,
   };

components/commerce/collection.tsx

@@ -1,76 +1,554 @@
-import type { ShopifyCollection } from "@reacteditor/field-shopify";
+import { useState, useCallback } from 'react';
-import { useCollectionProducts } from "@/hooks/use-shopify-collections";
+import { useParams } from 'next/navigation';
-import { ProductCard } from "./product-card";
+import { ChevronDown, SlidersHorizontal } from 'lucide-react';
-import { Typography } from "@/components/Typography";
+import type { ShopifyCollection } from '@reacteditor/field-shopify';
-import { Skeleton } from "@/components/ui/skeleton";
+import {
+  useCollectionProducts,
+  type CollectionSortKey,
+  type ProductFilter,
+} from '@/hooks/use-shopify-collections';
+import { ProductCard } from './product-card';
+import { Typography } from '@/components/Typography';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@/components/ui/select';
+import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger, SheetFooter } from '@/components/ui/sheet';
+import { Button } from '@/components/ui/button';
+import { Container } from '@/components/layout/Container';
+import { cn } from '@/lib/utils';
+
+type FilterOption = { label: string };
+type ColorOption = { label: string; color: string };
 
 export type CollectionProps = {
   collection: ShopifyCollection | null;
-  showDescription: "yes" | "no";
+  showDescription: 'yes' | 'no';
+  showCoverImage: 'yes' | 'no';
+  customCoverImage: string;
+  columns: '2' | '3' | '4';
+  limit: number;
+  defaultSort: CollectionSortKey;
+  showAvailability: 'yes' | 'no';
+  showPriceRange: 'yes' | 'no';
+  showProductType: 'yes' | 'no';
+  productTypeOptions: FilterOption[];
+  showVendor: 'yes' | 'no';
+  vendorOptions: FilterOption[];
+  showTags: 'yes' | 'no';
+  tagOptions: FilterOption[];
+  showColor: 'yes' | 'no';
+  colorOptions: ColorOption[];
+  showStyle: 'yes' | 'no';
+  styleOptions: FilterOption[];
+  showSize: 'yes' | 'no';
+  sizeOptions: FilterOption[];
+  showMaterial: 'yes' | 'no';
+  materialOptions: FilterOption[];
+  metafieldFilters: { namespace: string; key: string; label: string; values: { label: string }[] }[];
 };
 
-export function CollectionView({
+const SORT_OPTIONS: { label: string; value: CollectionSortKey }[] = [
-  collection: selected,
+  { label: 'Best Selling', value: 'BEST_SELLING' },
-  showDescription,
+  { label: 'Newest',       value: 'CREATED'      },
-}: CollectionProps) {
+  { label: 'Price: Low to High', value: 'PRICE'  },
-  const handle = selected?.handle ?? "";
+  { label: 'Alphabetical', value: 'TITLE'        },
-  const { collection, loading } = useCollectionProducts(handle, { first: 24 });
+];
 
-  if (!selected) {
+const colClass: Record<CollectionProps['columns'], string> = {
+  '2': 'grid-cols-2',
+  '3': 'grid-cols-2 md:grid-cols-3',
+  '4': 'grid-cols-2 md:grid-cols-3 lg:grid-cols-4',
+};
+
+// ─── Filter group (collapsible) ────────────────────────────────────────────────
+
+function FilterGroup({ label, children, defaultOpen = true }: {
+  label: string;
+  children: React.ReactNode;
+  defaultOpen?: boolean;
+}) {
+  const [open, setOpen] = useState(defaultOpen);
+  return (
+    <div className="border-b border-border py-4">
+      <button
+        type="button"
+        onClick={() => setOpen((o) => !o)}
+        className="flex w-full items-center justify-between text-xs font-semibold uppercase tracking-[0.15em] text-foreground"
+      >
+        {label}
+        <ChevronDown
+          size={14}
+          className={cn('transition-transform', open ? 'rotate-180' : '')}
+        />
+      </button>
+      {open && <div className="mt-3 space-y-2">{children}</div>}
+    </div>
+  );
+}
+
+function Checkbox({ checked, onChange, label }: {
+  checked: boolean;
+  onChange: (v: boolean) => void;
+  label: string;
+}) {
+  return (
+    <label className="flex cursor-pointer items-center gap-2.5 text-sm text-foreground/80 hover:text-foreground">
+      <input
+        type="checkbox"
+        checked={checked}
+        onChange={(e) => onChange(e.target.checked)}
+        className="sr-only"
+      />
+      <span
+        className={cn(
+          'flex h-4 w-4 shrink-0 items-center justify-center rounded border',
+          checked ? 'border-foreground bg-foreground' : 'border-border',
+        )}
+      >
+        {checked && (
+          <svg viewBox="0 0 10 8" className="h-2.5 w-2.5 fill-background" aria-hidden>
+            <path d="M1 4l3 3 5-6" stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinecap="round" strokeLinejoin="round" />
+          </svg>
+        )}
+      </span>
+      {label}
+    </label>
+  );
+}
+
+// ─── Sidebar ────────────────────────────────────────────────────────────────────
+
+type ActiveFilters = {
+  availability: boolean;
+  productTypes: string[];
+  vendors: string[];
+  tags: string[];
+  colors: string[];
+  styles: string[];
+  sizes: string[];
+  materials: string[];
+  minPrice: string;
+  maxPrice: string;
+  metafieldValues: Record<string, string[]>;
+};
+
+function Sidebar({
+  props,
+  active,
+  onChange,
+}: {
+  props: CollectionProps;
+  active: ActiveFilters;
+  onChange: (patch: Partial<ActiveFilters>) => void;
+}) {
+  const productTypes = (props.productTypeOptions ?? []).map((o) => o.label).filter(Boolean);
+  const vendors = (props.vendorOptions ?? []).map((o) => o.label).filter(Boolean);
+  const tags = (props.tagOptions ?? []).map((o) => o.label).filter(Boolean);
+  const colors = (props.colorOptions ?? []) as ColorOption[];
+  const styles = (props.styleOptions ?? []).map((o) => o.label).filter(Boolean);
+  const sizes = (props.sizeOptions ?? []).map((o) => o.label).filter(Boolean);
+  const materials = (props.materialOptions ?? []).map((o) => o.label).filter(Boolean);
+  const metafieldFilters = (props.metafieldFilters ?? []).filter((mf) => mf.namespace && mf.key);
+
+  function toggle(key: 'productTypes' | 'vendors' | 'tags' | 'colors' | 'styles' | 'sizes' | 'materials', value: string) {
+    const arr = active[key];
+    onChange({ [key]: arr.includes(value) ? arr.filter((v) => v !== value) : [...arr, value] });
+  }
+
+  return (
+    <div className="w-full">
+      {props.showAvailability === 'yes' && (
+        <FilterGroup label="Availability">
+          <Checkbox
+            checked={active.availability}
+            onChange={(v) => onChange({ availability: v })}
+            label="In stock"
+          />
+        </FilterGroup>
+      )}
+
+      {props.showPriceRange === 'yes' && (
+        <FilterGroup label="Price">
+          <div className="flex items-center gap-2">
+            <input
+              type="number"
+              min={0}
+              placeholder="Min"
+              value={active.minPrice}
+              onChange={(e) => onChange({ minPrice: e.target.value })}
+              className="w-full rounded-md border border-border bg-background px-2 py-1.5 text-sm"
+            />
+            <span className="text-muted-foreground">–</span>
+            <input
+              type="number"
+              min={0}
+              placeholder="Max"
+              value={active.maxPrice}
+              onChange={(e) => onChange({ maxPrice: e.target.value })}
+              className="w-full rounded-md border border-border bg-background px-2 py-1.5 text-sm"
+            />
+          </div>
+        </FilterGroup>
+      )}
+
+      {props.showVendor === 'yes' && vendors.length > 0 && (
+        <FilterGroup label="Brand">
+          {vendors.map((v) => (
+            <Checkbox
+              key={v}
+              checked={active.vendors.includes(v)}
+              onChange={() => toggle('vendors', v)}
+              label={v}
+            />
+          ))}
+        </FilterGroup>
+      )}
+
+      {props.showColor === 'yes' && colors.length > 0 && (
+        <FilterGroup label="Color">
+          {colors.filter((c) => c.label).map((c) => (
+            <label
+              key={c.label}
+              className="flex cursor-pointer items-center gap-2.5 text-sm text-foreground/80 hover:text-foreground"
+            >
+              <input
+                type="checkbox"
+                checked={active.colors.includes(c.label)}
+                onChange={() => toggle('colors', c.label)}
+                className="sr-only"
+              />
+              <span
+                className={cn(
+                  'flex h-5 w-5 shrink-0 rounded-full border-2',
+                  active.colors.includes(c.label) ? 'border-foreground' : 'border-transparent',
+                )}
+                style={{ backgroundColor: c.color || undefined }}
+              />
+              {c.label}
+            </label>
+          ))}
+        </FilterGroup>
+      )}
+
+      {props.showStyle === 'yes' && styles.length > 0 && (
+        <FilterGroup label="Style">
+          {styles.map((s) => (
+            <Checkbox
+              key={s}
+              checked={active.styles.includes(s)}
+              onChange={() => toggle('styles', s)}
+              label={s}
+            />
+          ))}
+        </FilterGroup>
+      )}
+
+      {props.showSize === 'yes' && sizes.length > 0 && (
+        <FilterGroup label="Size">
+          {sizes.map((s) => (
+            <Checkbox
+              key={s}
+              checked={active.sizes.includes(s)}
+              onChange={() => toggle('sizes', s)}
+              label={s}
+            />
+          ))}
+        </FilterGroup>
+      )}
+
+      {props.showMaterial === 'yes' && materials.length > 0 && (
+        <FilterGroup label="Material">
+          {materials.map((m) => (
+            <Checkbox
+              key={m}
+              checked={active.materials.includes(m)}
+              onChange={() => toggle('materials', m)}
+              label={m}
+            />
+          ))}
+        </FilterGroup>
+      )}
+
+      {props.showProductType === 'yes' && productTypes.length > 0 && (
+        <FilterGroup label="Product type">
+          {productTypes.map((pt) => (
+            <Checkbox
+              key={pt}
+              checked={active.productTypes.includes(pt)}
+              onChange={() => toggle('productTypes', pt)}
+              label={pt}
+            />
+          ))}
+        </FilterGroup>
+      )}
+
+      {props.showTags === 'yes' && tags.length > 0 && (
+        <FilterGroup label="Tags">
+          {tags.map((t) => (
+            <Checkbox
+              key={t}
+              checked={active.tags.includes(t)}
+              onChange={() => toggle('tags', t)}
+              label={t}
+            />
+          ))}
+        </FilterGroup>
+      )}
+
+      {metafieldFilters.map((mf, i) => {
+        const mfKey = `${mf.namespace}.${mf.key}`;
+        const selected = active.metafieldValues[mfKey] ?? [];
+        return (
+          <FilterGroup key={mfKey + i} label={mf.label || mfKey}>
+            {mf.values.map((v) => v.label).filter(Boolean).map((val) => (
+              <Checkbox
+                key={val}
+                checked={selected.includes(val)}
+                onChange={(checked) => {
+                  const next = checked
+                    ? [...selected, val]
+                    : selected.filter((v) => v !== val);
+                  onChange({ metafieldValues: { ...active.metafieldValues, [mfKey]: next } });
+                }}
+                label={val}
+              />
+            ))}
+          </FilterGroup>
+        );
+      })}
+    </div>
+  );
+}
+
+// ─── Build Shopify ProductFilter array ──────────────────────────────────────────
+
+function buildProductFilters(active: ActiveFilters): ProductFilter[] {
+  const filters: ProductFilter[] = [];
+
+  if (active.availability) filters.push({ available: true });
+
+  if (active.minPrice !== '' || active.maxPrice !== '') {
+    filters.push({
+      price: {
+        min: active.minPrice !== '' ? parseFloat(active.minPrice) : undefined,
+        max: active.maxPrice !== '' ? parseFloat(active.maxPrice) : undefined,
+      },
+    });
+  }
+
+  for (const pt of active.productTypes) filters.push({ productType: pt });
+  for (const v of active.vendors) filters.push({ productVendor: v });
+  for (const t of active.tags) filters.push({ tag: t });
+
+  for (const c of active.colors) filters.push({ variantOption: { name: 'Color', value: c } });
+  for (const s of active.styles) filters.push({ variantOption: { name: 'Style', value: s } });
+  for (const s of active.sizes) filters.push({ variantOption: { name: 'Size', value: s } });
+  for (const m of active.materials) filters.push({ variantOption: { name: 'Material', value: m } });
+
+  for (const [mfKey, vals] of Object.entries(active.metafieldValues)) {
+    const [namespace, key] = mfKey.split('.');
+    for (const value of vals) {
+      filters.push({ productMetafield: { namespace, key, value } });
+    }
+  }
+
+  return filters;
+}
+
+// ─── Main component ──────────────────────────────────────────────────────────
+
+export function CollectionView(props: CollectionProps) {
+  const { collection: selected, showDescription, showCoverImage, customCoverImage, columns, limit, defaultSort } = props;
+  const params = useParams();
+  const paramHandle =
+    typeof params?.handle === 'string' ? params.handle : undefined;
+  const handle = selected?.handle ?? paramHandle ?? '';
+
+  const [sort, setSort] = useState<CollectionSortKey>(defaultSort);
+  const [reverse, setReverse] = useState(false);
+  const [filtersOpen, setFiltersOpen] = useState(false);
+  const [active, setActive] = useState<ActiveFilters>({
+    availability: false,
+    productTypes: [],
+    vendors: [],
+    tags: [],
+    colors: [],
+    styles: [],
+    sizes: [],
+    materials: [],
+    minPrice: '',
+    maxPrice: '',
+    metafieldValues: {},
+  });
+
+  const patchActive = useCallback((patch: Partial<ActiveFilters>) => {
+    setActive((prev) => ({ ...prev, ...patch }));
+  }, []);
+
+  const clearAll = useCallback(() => {
+    setActive({
+      availability: false,
+      productTypes: [],
+      vendors: [],
+      tags: [],
+      colors: [],
+      styles: [],
+      sizes: [],
+      materials: [],
+      minPrice: '',
+      maxPrice: '',
+      metafieldValues: {},
+    });
+  }, []);
+
+  const productFilters = buildProductFilters(active);
+
+  const handleSortChange = (value: string) => {
+    if (value === 'PRICE_DESC') {
+      setSort('PRICE');
+      setReverse(true);
+    } else {
+      setSort(value as CollectionSortKey);
+      setReverse(false);
+    }
+  };
+
+  const sortValue = sort === 'PRICE' && reverse ? 'PRICE_DESC' : sort;
+
+  const { collection, loading, hasNextPage, fetchMore } = useCollectionProducts(handle, {
+    first: limit,
+    sortKey: sort,
+    reverse,
+    filters: productFilters.length ? productFilters : undefined,
+  });
+
+  const products = collection?.products ?? [];
+  const description = collection?.description ?? (selected as any)?.description;
+  const collectionImage = customCoverImage || collection?.image?.url;
+
+  if (!selected && !paramHandle) {
     return (
       <section className="bg-background pb-24 pt-12 md:pt-20">
-        <div className="container mx-auto max-w-7xl px-6">
+        <Container>
           <header className="mx-auto mb-14 flex max-w-2xl flex-col items-center gap-3 text-center">
             <Skeleton className="h-3 w-24" />
             <Skeleton className="h-10 w-3/4" />
-            {showDescription === "yes" ? (
-              <Skeleton className="mt-1 h-5 w-2/3" />
-            ) : null}
           </header>
           <div className="grid grid-cols-2 gap-x-6 gap-y-12 md:grid-cols-3 lg:grid-cols-4">
             {Array.from({ length: 8 }).map((_, i) => (
               <Skeleton key={i} className="aspect-[4/5] w-full" />
             ))}
           </div>
-        </div>
+        </Container>
       </section>
     );
   }
 
-  const products = (collection?.products as any[] | undefined) ?? [];
-  const description = collection?.description ?? selected.description;
-
   return (
     <section className="bg-background pb-24 pt-12 md:pt-20">
-      <div className="container mx-auto max-w-7xl px-6">
+      <Container>
-        <header className="mx-auto mb-14 max-w-2xl text-center">
+        {/* Cover image */}
+        {showCoverImage === 'yes' && collectionImage && (
+          <div className="mb-10 overflow-hidden rounded-lg">
+            <img
+              src={collectionImage}
+              alt={collection?.title ?? ''}
+              className="h-48 w-full object-cover md:h-72 lg:h-80"
+            />
+          </div>
+        )}
+
+        {/* Header */}
+        <header className="mb-10">
           <p className="mb-3 text-xs uppercase tracking-[0.2em] text-muted-foreground">
             Collection
           </p>
           <Typography variant="h1">
-            {collection?.title ?? selected.title}
+            {collection?.title ?? (selected as any)?.title ?? paramHandle}
           </Typography>
-          {showDescription === "yes" && description ? (
+          {showDescription === 'yes' && description ? (
-            <Typography variant="subtitle1" className="mt-4">
+            <Typography variant="subtitle1" className="mt-4 max-w-2xl">
               {description}
             </Typography>
           ) : null}
         </header>
 
-        <div className="grid grid-cols-2 gap-x-6 gap-y-12 md:grid-cols-3 lg:grid-cols-4">
+        {/* Filter + sort bar */}
+        <div className="mb-6 flex items-center justify-between">
+          <Sheet open={filtersOpen} onOpenChange={setFiltersOpen}>
+            <SheetTrigger asChild>
+              <button
+                type="button"
+                className="flex items-center gap-2 rounded-md border border-border px-3 py-2 text-sm font-medium hover:bg-muted"
+              >
+                <SlidersHorizontal size={14} />
+                Filters
+              </button>
+            </SheetTrigger>
+            <SheetContent side="left" className="w-full sm:max-w-md">
+              <SheetHeader>
+                <SheetTitle>Filters</SheetTitle>
+              </SheetHeader>
+              <div className="flex-1 overflow-y-auto px-4">
+                <Sidebar props={props} active={active} onChange={patchActive} />
+              </div>
+              <SheetFooter className="flex-row gap-2 border-t border-border">
+                <Button variant="outline" className="flex-1" onClick={clearAll}>
+                  Clear
+                </Button>
+                <Button className="flex-1" onClick={() => setFiltersOpen(false)}>
+                  Search
+                </Button>
+              </SheetFooter>
+            </SheetContent>
+          </Sheet>
+
+          <div className="flex items-center gap-4">
+            <p className="hidden text-sm text-muted-foreground sm:block">
+              {loading ? 'Loading…' : `${products.length} product${products.length === 1 ? '' : 's'}`}
+            </p>
+            <Select value={sortValue} onValueChange={handleSortChange}>
+              <SelectTrigger className="h-auto px-3 py-2 text-sm">
+                <SelectValue>
+                  {[...SORT_OPTIONS, { label: 'Price: High to Low', value: 'PRICE_DESC' }].find((o) => o.value === sortValue)?.label}
+                </SelectValue>
+              </SelectTrigger>
+              <SelectContent>
+                {SORT_OPTIONS.map((o) => (
+                  <SelectItem key={o.value} value={o.value}>{o.label}</SelectItem>
+                ))}
+                <SelectItem value="PRICE_DESC">Price: High to Low</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+
+        {/* Grid */}
+        <div className={cn('grid gap-x-6 gap-y-10', colClass[columns])}>
           {loading
-            ? Array.from({ length: 8 }).map((_, i) => (
+            ? Array.from({ length: limit }).map((_, i) => (
                 <Skeleton key={i} className="aspect-[4/5] w-full" />
               ))
             : products.map((p: any) => <ProductCard key={p.id} product={p} />)}
         </div>
 
-        {!loading && products.length === 0 ? (
+        {!loading && products.length === 0 && (
-          <div className="mx-auto mt-12 max-w-md text-center text-sm text-muted-foreground">
+          <div className="mt-16 text-center text-sm text-muted-foreground">
-            This collection has no products yet.
+            No products found in this collection.
           </div>
-        ) : null}
+        )}
+
+        {hasNextPage && !loading && (
+          <div className="mt-12 flex justify-center">
+            <button
+              type="button"
+              onClick={fetchMore}
+              className="rounded-md border border-border px-8 py-3 text-sm font-medium hover:bg-muted"
+            >
+              Load more
+            </button>
           </div>
+        )}
+      </Container>
     </section>
   );
 }

components/commerce/collections.tsx

@@ -11,19 +11,19 @@ const Collections: React.FC = () => {
     return (
       <div className="py-16">
         <div className="container mx-auto px-4">
-          <h2 className="text-5xl font-bold text-center mb-16 text-gray-900 font-heading">
+          <h2 className="text-5xl font-bold text-center mb-16 text-foreground font-heading">
             Our Collections
           </h2>
 
           {/* Loading Skeleton */}
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
             {Array.from({ length: 6 }).map((_, index) => (
-              <div key={index} className="bg-white rounded-lg shadow-md overflow-hidden animate-pulse">
+              <div key={index} className="bg-card rounded-lg shadow-md overflow-hidden animate-pulse">
-                <div className="aspect-video bg-gray-200"></div>
+                <div className="aspect-video bg-muted"></div>
                 <div className="p-6">
-                  <div className="h-8 bg-gray-200 rounded mb-4"></div>
+                  <div className="h-8 bg-muted rounded mb-4"></div>
-                  <div className="h-4 bg-gray-200 rounded mb-2"></div>
+                  <div className="h-4 bg-muted rounded mb-2"></div>
-                  <div className="h-4 bg-gray-200 rounded w-3/4"></div>
+                  <div className="h-4 bg-muted rounded w-3/4"></div>
                 </div>
               </div>
             ))}
@@ -62,12 +62,12 @@ const Collections: React.FC = () => {
             Our Collections
           </h2>
 
-          <div className="bg-gray-50 border border-gray-200 rounded-lg p-8 max-w-md mx-auto">
+          <div className="bg-muted border border-border rounded-lg p-8 max-w-md mx-auto">
-            <i className="ri-folder-line text-4xl text-gray-400 mb-4"></i>
+            <i className="ri-folder-line text-4xl text-muted-foreground mb-4"></i>
-            <h3 className="text-lg font-semibold text-gray-600 mb-2">
+            <h3 className="text-lg font-semibold text-foreground mb-2">
               No Collections Found
             </h3>
-            <p className="text-gray-500">
+            <p className="text-muted-foreground">
               Check back later or configure your Shopify store connection.
             </p>
           </div>
@@ -79,7 +79,7 @@ const Collections: React.FC = () => {
   return (
     <div className="py-16">
       <div className="container mx-auto px-4">
-        <h2 className="text-5xl font-bold text-center mb-16 text-gray-900 font-heading">
+        <h2 className="text-5xl font-bold text-center mb-16 text-foreground font-heading">
           Our Collections
         </h2>
 

components/commerce/featured-product.tsx

@@ -1,9 +1,10 @@
-import { Link } from "react-router";
+import Link from "next/link";
 import type { ShopifyProduct } from "@reacteditor/field-shopify";
 import { useProduct } from "@/hooks/use-shopify-products";
 import { useShopifyCart } from "@/hooks/use-shopify-cart";
 import { Typography } from "@/components/Typography";
 import { Skeleton } from "@/components/ui/skeleton";
+import { Container } from "@/components/layout/Container";
 import { cn } from "@/lib/utils";
 
 export type FeaturedProductProps = {
@@ -33,7 +34,7 @@ export function FeaturedProductView({
           tone === "muted" ? "bg-muted/40" : "bg-background",
         )}
       >
-        <div className="container mx-auto grid max-w-7xl grid-cols-1 items-center gap-10 px-6 md:grid-cols-2 md:gap-16">
+        <Container className="grid grid-cols-1 items-center gap-10 md:grid-cols-2 md:gap-16">
           <div className={cn(align === "right" && "md:order-2")}>
             <Skeleton className="aspect-[4/5] w-full" />
           </div>
@@ -47,11 +48,11 @@ export function FeaturedProductView({
               <Skeleton className="h-4 w-4/6" />
             </div>
             <div className="mt-2 flex flex-wrap gap-3">
-              <Skeleton className="h-11 w-32 rounded-full" />
+              <Skeleton className="h-11 w-32 rounded-md" />
-              <Skeleton className="h-11 w-32 rounded-full" />
+              <Skeleton className="h-11 w-32 rounded-md" />
-            </div>
             </div>
           </div>
+        </Container>
       </section>
     );
   }
@@ -75,7 +76,7 @@ export function FeaturedProductView({
           : "bg-background py-20 md:py-28"
       }
     >
-      <div className="container mx-auto grid max-w-7xl grid-cols-1 items-center gap-10 px-6 md:grid-cols-2 md:gap-16">
+      <Container className="grid grid-cols-1 items-center gap-10 md:grid-cols-2 md:gap-16">
         <div className={align === "right" ? "md:order-2" : ""}>
           {image ? (
             <img
@@ -89,9 +90,7 @@ export function FeaturedProductView({
         </div>
         <div className="flex flex-col items-start gap-5">
           {tagline ? (
-            <p className="text-xs uppercase tracking-[0.2em] text-muted-foreground">
+            <Typography variant="caption">{tagline}</Typography>
-              {tagline}
-            </p>
           ) : null}
           <Typography variant="h2">{product.title}</Typography>
           {formatted ? (
@@ -111,19 +110,19 @@ export function FeaturedProductView({
                 await cart.addItem(variant.id, 1);
                 cart.openCart();
               }}
-              className="inline-flex items-center justify-center rounded-full bg-foreground px-6 py-3 text-sm font-medium tracking-wide text-background hover:opacity-90"
+              className="inline-flex items-center justify-center rounded-md bg-foreground px-6 py-3 text-sm font-medium tracking-wide text-background hover:opacity-90"
             >
               {ctaLabel}
             </button>
             <Link
-              to={`/products/${product.handle}`}
+              href={`/products/${product.handle}`}
-              className="inline-flex items-center justify-center rounded-full border border-foreground px-6 py-3 text-sm font-medium tracking-wide hover:opacity-80"
+              className="inline-flex items-center justify-center rounded-md border border-foreground px-6 py-3 text-sm font-medium tracking-wide hover:opacity-80"
             >
               View details
             </Link>
           </div>
         </div>
-      </div>
+      </Container>
     </section>
   );
 }

components/commerce/product-card.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
-import { Link } from "react-router";
+import Link from "next/link";
+import { Typography } from "@/components/Typography";
 
 type ProductImage = { url: string; altText?: string };
 type ProductPrice = { amount: string; currencyCode: string };
@@ -40,7 +41,7 @@ export function ProductCard({
   };
 
   return (
-    <Link to={`/products/${product.handle}`} className="group block">
+    <Link href={`/products/${product.handle}`} className="group block">
       <div
         className={`relative w-full overflow-hidden rounded-md bg-muted ${aspectClass[aspect]}`}
       >
@@ -53,7 +54,12 @@ export function ProductCard({
         ) : null}
       </div>
       <div className="mt-4 flex items-start justify-between gap-3">
-        <h3 className="text-sm font-medium tracking-tight">{product.title}</h3>
+        <Typography
+          variant="subtitle2"
+          className="font-medium tracking-tight text-foreground"
+        >
+          {product.title}
+        </Typography>
         {price ? (
           <div className="flex flex-col items-end text-sm">
             {onSale && compare ? (

components/commerce/product-detail/index.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React, { useState, useEffect } from 'react';
-import { Link } from 'react-router';
+import Link from 'next/link';
 import { useProduct, type Product } from '@/hooks/use-shopify-products';
 import { useShopifyCart } from '@/hooks/use-shopify-cart';
 import ProductDetailGallery from './product-detail-gallery';
@@ -158,19 +158,19 @@ const ProductDetail: React.FC<ProductDetailProps> = ({ handle: handleProp }) =>
   }
 
   return (
-    <div className="min-h-screen bg-white">
+    <div className="min-h-screen bg-background">
       <div className="container mx-auto px-4 py-8">
         <Breadcrumb className="mb-6">
           <BreadcrumbList>
             <BreadcrumbItem>
               <BreadcrumbLink asChild>
-                <Link to="/">Home</Link>
+                <Link href="/">Home</Link>
               </BreadcrumbLink>
             </BreadcrumbItem>
             <BreadcrumbSeparator />
             <BreadcrumbItem>
               <BreadcrumbLink asChild>
-                <Link to="/shop">Shop</Link>
+                <Link href="/shop">Shop</Link>
               </BreadcrumbLink>
             </BreadcrumbItem>
             <BreadcrumbSeparator />

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

@@ -23,7 +23,7 @@ const ProductDetailGallery: React.FC<ProductDetailGalleryProps> = ({
   return (
     <div>
       {/* Main Image */}
-      <div className="aspect-square bg-gray-100 rounded-lg overflow-hidden mb-4">
+      <div className="aspect-square bg-muted rounded-lg overflow-hidden mb-4">
         {images.length > 0 ? (
           <img
             src={images[selectedImage].url}
@@ -31,7 +31,7 @@ const ProductDetailGallery: React.FC<ProductDetailGalleryProps> = ({
             className="w-full h-full object-cover"
           />
         ) : (
-          <div className="w-full h-full flex items-center justify-center text-gray-400">
+          <div className="w-full h-full flex items-center justify-center text-muted-foreground">
             <i className="ri-image-line text-6xl"></i>
           </div>
         )}
@@ -46,8 +46,8 @@ const ProductDetailGallery: React.FC<ProductDetailGalleryProps> = ({
               onClick={() => setSelectedImage(index)}
               className={`aspect-square rounded-lg overflow-hidden border-2 transition-colors ${
                 selectedImage === index 
-                  ? 'border-black' 
+                  ? 'border-foreground'
-                  : 'border-gray-200 hover:border-gray-300'
+                  : 'border-border hover:border-muted-foreground'
               }`}
             >
               <img

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

@@ -38,18 +38,18 @@ const ProductDetailInfo: React.FC<ProductDetailInfoProps> = ({
 
   return (
     <div>
-      <h1 className="text-4xl font-bold text-gray-900 mb-4 font-heading">
+      <h1 className="text-4xl font-bold text-foreground mb-4 font-heading">
         {product.title}
       </h1>
 
       {/* Price */}
       <div className="flex items-center space-x-4 mb-6">
-        <span className="text-2xl font-bold text-gray-900">
+        <span className="text-2xl font-bold text-foreground">
           {formatPrice(price)}
         </span>
         {hasDiscount && compareAtPrice && (
           <>
-            <span className="text-xl text-gray-500 line-through">
+            <span className="text-xl text-muted-foreground line-through">
               {formatPrice(compareAtPrice)}
             </span>
             <Badge variant="destructive">
@@ -61,7 +61,7 @@ const ProductDetailInfo: React.FC<ProductDetailInfoProps> = ({
 
       {/* Description */}
       {product.description && (
-        <div className="text-gray-600 mb-8 text-lg leading-relaxed">
+        <div className="text-muted-foreground mb-8 text-lg leading-relaxed">
           {product.descriptionHtml ? (
             <div dangerouslySetInnerHTML={{ __html: product.descriptionHtml }} />
           ) : (
@@ -73,7 +73,7 @@ const ProductDetailInfo: React.FC<ProductDetailInfoProps> = ({
       {/* Product Options */}
       {product.options.map(option => (
         <div key={option.id} className="mb-6">
-          <label className="block text-sm font-semibold text-gray-700 mb-2">
+          <label className="block text-sm font-semibold text-foreground mb-2">
             {option.name}
           </label>
           <div className="flex flex-wrap gap-2">
@@ -92,10 +92,10 @@ const ProductDetailInfo: React.FC<ProductDetailInfoProps> = ({
 
       {/* Quantity Selector */}
       <div className="mb-8">
-        <label className="block text-sm font-semibold text-gray-700 mb-2">
+        <label className="block text-sm font-semibold text-foreground mb-2">
           Quantity
         </label>
-        <div className="flex items-center border border-gray-300 rounded-lg w-fit">
+        <div className="flex items-center border border-border rounded-lg w-fit">
           <Button
             onClick={() => setQuantity(Math.max(1, quantity - 1))}
             variant="ghost"
@@ -135,8 +135,8 @@ const ProductDetailInfo: React.FC<ProductDetailInfoProps> = ({
       </Button>
 
       {/* Additional Info */}
-      <div className="mt-8 pt-8 border-t border-gray-200">
+      <div className="mt-8 pt-8 border-t border-border">
-        <div className="space-y-3 text-sm text-gray-600">
+        <div className="space-y-3 text-sm text-muted-foreground">
           <div className="flex items-center space-x-2">
             <i className="ri-truck-line"></i>
             <span>Free shipping on orders over $100</span>

components/commerce/product-detail/product-recommendations.tsx

@@ -17,29 +17,29 @@ const ProductRecommendations: React.FC<ProductRecommendationsProps> = ({ product
   }
 
   return (
-    <div className="bg-gray-50 py-16">
+    <div className="bg-muted py-16">
       <div className="container mx-auto px-4">
-        <h2 className="text-4xl font-bold text-center mb-12 text-gray-900 font-heading">
+        <h2 className="text-4xl font-bold text-center mb-12 text-foreground font-heading">
           You Might Also Like
         </h2>
 
         {loading ? (
           <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
             {Array.from({ length: 4 }).map((_, index) => (
-              <div key={index} className="bg-white rounded-lg shadow-md overflow-hidden animate-pulse">
+              <div key={index} className="bg-card rounded-lg shadow-md overflow-hidden animate-pulse">
-                <div className="aspect-square bg-gray-200"></div>
+                <div className="aspect-square bg-muted"></div>
                 <div className="p-6">
-                  <div className="h-6 bg-gray-200 rounded mb-2"></div>
+                  <div className="h-6 bg-muted rounded mb-2"></div>
-                  <div className="h-4 bg-gray-200 rounded mb-4"></div>
+                  <div className="h-4 bg-muted rounded mb-4"></div>
-                  <div className="h-8 bg-gray-200 rounded mb-4"></div>
+                  <div className="h-8 bg-muted rounded mb-4"></div>
-                  <div className="h-12 bg-gray-200 rounded"></div>
+                  <div className="h-12 bg-muted rounded"></div>
                 </div>
               </div>
             ))}
           </div>
         ) : error ? (
           <div className="text-center py-8">
-            <p className="text-gray-500">Recommendations could not be loaded</p>
+            <p className="text-muted-foreground">Recommendations could not be loaded</p>
           </div>
         ) : (
           <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">

components/commerce/product-details.tsx

@@ -1,18 +1,22 @@
 import { useEffect, useState } from "react";
-import { useParams } from "react-router";
+import { useParams } from "next/navigation";
 import type { ShopifyProduct } from "@reacteditor/field-shopify";
 import { useProduct } from "@/hooks/use-shopify-products";
 import { useShopifyCart } from "@/hooks/use-shopify-cart";
 import { Typography } from "@/components/Typography";
 import { cn } from "@/lib/utils";
 import { Skeleton } from "@/components/ui/skeleton";
+import { Loader } from "@/components/ui/loader";
+import { Container } from "@/components/layout/Container";
 
 export type ProductDetailsProps = {
   product: ShopifyProduct | null;
 };
 
 export function ProductDetailsView({ product: selected }: ProductDetailsProps) {
-  const { handle: paramHandle } = useParams<{ handle?: string }>();
+  const params = useParams();
+  const paramHandle =
+    typeof params?.handle === "string" ? params.handle : undefined;
   const handle = selected?.handle ?? paramHandle ?? null;
   const { product, loading } = useProduct(handle);
   const cart = useShopifyCart();
@@ -30,7 +34,7 @@ export function ProductDetailsView({ product: selected }: ProductDetailsProps) {
   if (!handle || loading || !product) {
     return (
       <section className="bg-background py-12 md:py-20">
-        <div className="container mx-auto grid max-w-7xl grid-cols-1 gap-10 px-6 md:grid-cols-2 md:gap-16">
+        <Container className="grid grid-cols-1 gap-10 md:grid-cols-2 md:gap-16">
           <div className="flex flex-col gap-4">
             <Skeleton className="aspect-[4/5] w-full" />
             <div className="flex gap-3">
@@ -45,14 +49,14 @@ export function ProductDetailsView({ product: selected }: ProductDetailsProps) {
             <div className="flex flex-col gap-3">
               <Skeleton className="h-3 w-16" />
               <div className="flex gap-2">
-                <Skeleton className="h-10 w-16 rounded-full" />
+                <Skeleton className="h-10 w-16 rounded-md" />
-                <Skeleton className="h-10 w-16 rounded-full" />
+                <Skeleton className="h-10 w-16 rounded-md" />
-                <Skeleton className="h-10 w-16 rounded-full" />
+                <Skeleton className="h-10 w-16 rounded-md" />
               </div>
             </div>
             <div className="flex items-center gap-4 pt-2">
-              <Skeleton className="h-11 w-32 rounded-full" />
+              <Skeleton className="h-11 w-32 rounded-md" />
-              <Skeleton className="h-11 flex-1 rounded-full" />
+              <Skeleton className="h-11 flex-1 rounded-md" />
             </div>
             <div className="space-y-2 border-t border-border pt-6">
               <Skeleton className="h-3 w-20" />
@@ -61,7 +65,7 @@ export function ProductDetailsView({ product: selected }: ProductDetailsProps) {
               <Skeleton className="h-4 w-4/6" />
             </div>
           </div>
-        </div>
+        </Container>
       </section>
     );
   }
@@ -89,7 +93,7 @@ export function ProductDetailsView({ product: selected }: ProductDetailsProps) {
 
   return (
     <section className="bg-background py-12 md:py-20">
-      <div className="container mx-auto grid max-w-7xl grid-cols-1 gap-10 px-6 md:grid-cols-2 md:gap-16">
+      <Container className="grid grid-cols-1 gap-10 md:grid-cols-2 md:gap-16">
         <div className="flex flex-col gap-4">
           <div className="aspect-[4/5] w-full overflow-hidden rounded-md bg-muted">
             {main ? (
@@ -156,7 +160,7 @@ export function ProductDetailsView({ product: selected }: ProductDetailsProps) {
                       key={val}
                       onClick={() => matching && setVariant(matching.node)}
                       className={cn(
-                        "min-w-12 rounded-full border px-4 py-2 text-sm transition-colors",
+                        "min-w-12 rounded-md border px-4 py-2 text-sm transition-colors",
                         selected
                           ? "border-foreground bg-foreground text-background"
                           : "border-border hover:border-foreground",
@@ -171,7 +175,7 @@ export function ProductDetailsView({ product: selected }: ProductDetailsProps) {
           ))}
 
           <div className="flex items-center gap-4 pt-2">
-            <div className="flex items-center gap-3 rounded-full border border-border px-4 py-2">
+            <div className="flex items-center gap-3 rounded-md border border-border px-4 py-2">
               <button
                 onClick={() => setQuantity((q) => Math.max(1, q - 1))}
                 className="text-base hover:opacity-60"
@@ -189,9 +193,16 @@ export function ProductDetailsView({ product: selected }: ProductDetailsProps) {
             <button
               onClick={onAdd}
               disabled={!variant || adding}
-              className="flex-1 rounded-full bg-foreground px-6 py-3 text-sm font-medium tracking-wide text-background transition-opacity hover:opacity-90 disabled:opacity-50"
+              className="flex-1 rounded-md bg-foreground px-6 py-3 text-sm font-medium tracking-wide text-background transition-opacity hover:opacity-90 disabled:opacity-50"
             >
-              {adding ? "Adding…" : "Add to bag"}
+              {adding ? (
+                <span className="flex items-center justify-center gap-2">
+                  <Loader size={16} />
+                  Adding…
+                </span>
+              ) : (
+                "Add to bag"
+              )}
             </button>
           </div>
 
@@ -206,7 +217,7 @@ export function ProductDetailsView({ product: selected }: ProductDetailsProps) {
             </div>
           ) : null}
         </div>
-      </div>
+      </Container>
     </section>
   );
 }

components/commerce/products-carousel.tsx

@@ -1,10 +1,10 @@
 import { useEffect, useState } from "react";
-import { Link } from "react-router";
+import Link from "next/link";
 import type { ShopifyCollection } from "@reacteditor/field-shopify";
 import { getProducts } from "@/hooks/use-shopify-products";
 import { getCollectionProducts } from "@/hooks/use-shopify-collections";
 import { ProductCard } from "./product-card";
-import { Typography } from "@/components/Typography";
+import { Heading } from "@/components/Heading";
 import {
   Carousel,
   CarouselContent,
@@ -12,6 +12,7 @@ import {
   CarouselNext,
   CarouselPrevious,
 } from "@/components/ui/carousel";
+import { Container } from "@/components/layout/Container";
 
 export type ProductsCarouselProps = {
   collection: ShopifyCollection | null;
@@ -50,7 +51,7 @@ export function ProductsCarousel({
           const data = await getCollectionProducts(collection.handle, {
             first: limit,
           });
-          if (!cancelled) setProducts(data?.products ?? []);
+          if (!cancelled) setProducts(data?.collection?.products ?? []);
         } else {
           const data = await getProducts({
             first: limit,
@@ -71,24 +72,19 @@ export function ProductsCarousel({
 
   return (
     <section className="bg-background py-20 md:py-28">
-      <div className="container mx-auto max-w-7xl px-6">
+      <Container>
         <div className="mb-10 flex flex-col gap-6 md:flex-row md:items-end md:justify-between">
-          <div className="max-w-xl">
+          <Heading
-            {tagline ? (
+            tagline={tagline}
-              <p className="mb-3 text-xs uppercase tracking-[0.2em] text-muted-foreground">
+            title={heading}
-                {tagline}
+            subtitle={subheading}
-              </p>
+            align="left"
-            ) : null}
+            size="lg"
-            <Typography variant="h2">{heading}</Typography>
+            maxWidth="max-w-xl"
-            {subheading ? (
+          />
-              <Typography variant="subtitle1" className="mt-3">
-                {subheading}
-              </Typography>
-            ) : null}
-          </div>
           {ctaLabel ? (
             <Link
-              to={
+              href={
                 ctaHref ||
                 (collection?.handle ? `/collections/${collection.handle}` : "/collections")
               }
@@ -120,7 +116,7 @@ export function ProductsCarousel({
           <CarouselPrevious className="hidden md:inline-flex" />
           <CarouselNext className="hidden md:inline-flex" />
         </Carousel>
-      </div>
+      </Container>
     </section>
   );
 }

components/commerce/products-grid.tsx

@@ -1,10 +1,11 @@
 import { useEffect, useState } from "react";
-import { Link } from "react-router";
+import Link from "next/link";
 import type { ShopifyCollection } from "@reacteditor/field-shopify";
 import { getProducts } from "@/hooks/use-shopify-products";
 import { getCollectionProducts } from "@/hooks/use-shopify-collections";
 import { ProductCard } from "./product-card";
-import { Typography } from "@/components/Typography";
+import { Container } from "@/components/layout/Container";
+import { Heading } from "@/components/Heading";
 
 export type ProductsGridProps = {
   collection: ShopifyCollection | null;
@@ -42,7 +43,7 @@ export function ProductsGrid({
           const data = await getCollectionProducts(collection.handle, {
             first: limit,
           });
-          if (!cancelled) setProducts(data?.products ?? []);
+          if (!cancelled) setProducts(data?.collection?.products ?? []);
         } else {
           const data = await getProducts({ first: limit, sortKey: "BEST_SELLING" });
           if (!cancelled) setProducts(data ?? []);
@@ -59,24 +60,19 @@ export function ProductsGrid({
 
   return (
     <section className="bg-background py-20 md:py-28">
-      <div className="container mx-auto max-w-7xl px-6">
+      <Container>
         <div className="mb-12 flex flex-col items-end justify-between gap-6 md:flex-row md:items-end">
-          <div className="max-w-xl">
+          <Heading
-            {tagline ? (
+            tagline={tagline}
-              <p className="mb-3 text-xs uppercase tracking-[0.2em] text-muted-foreground">
+            title={heading}
-                {tagline}
+            subtitle={subheading}
-              </p>
+            align="left"
-            ) : null}
+            size="lg"
-            <Typography variant="h2">{heading}</Typography>
+            maxWidth="max-w-xl"
-            {subheading ? (
+          />
-              <Typography variant="subtitle1" className="mt-3">
-                {subheading}
-              </Typography>
-            ) : null}
-          </div>
           {ctaLabel ? (
             <Link
-              to={ctaHref || (collection?.handle ? `/collections/${collection.handle}` : "/collections")}
+              href={ctaHref || (collection?.handle ? `/collections/${collection.handle}` : "/collections")}
               className="text-sm font-medium tracking-wide hover:opacity-70"
             >
               {ctaLabel} →
@@ -94,7 +90,7 @@ export function ProductsGrid({
               ))
             : products.map((p) => <ProductCard key={p.id} product={p} />)}
         </div>
-      </div>
+      </Container>
     </section>
   );
 }

components/commerce/products.tsx

@@ -127,13 +127,13 @@ const Products: React.FC<ProductsProps> = ({
           {/* Loading Skeleton */}
           <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
             {Array.from({ length: 8 }).map((_, index) => (
-              <div key={index} className="bg-white rounded-lg shadow-md overflow-hidden animate-pulse">
+              <div key={index} className="bg-card rounded-lg shadow-md overflow-hidden animate-pulse">
-                <div className="aspect-square bg-gray-200"></div>
+                <div className="aspect-square bg-muted"></div>
                 <div className="p-6">
-                  <div className="h-6 bg-gray-200 rounded mb-2"></div>
+                  <div className="h-6 bg-muted rounded mb-2"></div>
-                  <div className="h-4 bg-gray-200 rounded mb-4"></div>
+                  <div className="h-4 bg-muted rounded mb-4"></div>
-                  <div className="h-8 bg-gray-200 rounded mb-4"></div>
+                  <div className="h-8 bg-muted rounded mb-4"></div>
-                  <div className="h-12 bg-gray-200 rounded"></div>
+                  <div className="h-12 bg-muted rounded"></div>
                 </div>
               </div>
             ))}
@@ -173,12 +173,12 @@ const Products: React.FC<ProductsProps> = ({
             {title}
           </h2>
           
-          <div className="bg-gray-50 border border-gray-200 rounded-lg p-8 max-w-md mx-auto">
+          <div className="bg-muted border border-border rounded-lg p-8 max-w-md mx-auto">
-            <i className="ri-shopping-bag-line text-4xl text-gray-400 mb-4"></i>
+            <i className="ri-shopping-bag-line text-4xl text-muted-foreground mb-4"></i>
-            <h3 className="text-lg font-semibold text-gray-600 mb-2">
+            <h3 className="text-lg font-semibold text-foreground mb-2">
               No Products Found
             </h3>
-            <p className="text-gray-500">
+            <p className="text-muted-foreground">
               Check back later or configure your Shopify store connection.
             </p>
           </div>
@@ -190,7 +190,7 @@ const Products: React.FC<ProductsProps> = ({
   return (
     <div className="py-16">
       <div className="container mx-auto px-4">
-        <h2 className="text-5xl font-bold text-center mb-16 text-gray-900 font-heading">
+        <h2 className="text-5xl font-bold text-center mb-16 text-foreground font-heading">
           {title}
         </h2>
 

components/commerce/recommended-products.tsx

@@ -4,8 +4,9 @@ import {
   useProductRecommendations,
 } from "@/hooks/use-shopify-products";
 import { ProductCard } from "./product-card";
-import { Typography } from "@/components/Typography";
 import { Skeleton } from "@/components/ui/skeleton";
+import { Container } from "@/components/layout/Container";
+import { Heading } from "@/components/Heading";
 
 export type RecommendedProductsProps = {
   product: ShopifyProduct | null;
@@ -27,7 +28,7 @@ export function RecommendedProductsView({
   if (!selected) {
     return (
       <section className="bg-background py-20 md:py-28">
-        <div className="container mx-auto max-w-7xl px-6">
+        <Container>
           <div className="mb-12 flex max-w-xl flex-col gap-3">
             {tagline ? <Skeleton className="h-3 w-24" /> : null}
             <Skeleton className="h-8 w-2/3" />
@@ -37,22 +38,22 @@ export function RecommendedProductsView({
               <Skeleton key={i} className="aspect-[4/5] w-full" />
             ))}
           </div>
-        </div>
+        </Container>
       </section>
     );
   }
 
   return (
     <section className="bg-background py-20 md:py-28">
-      <div className="container mx-auto max-w-7xl px-6">
+      <Container>
-        <div className="mb-12 max-w-xl">
+        <Heading
-          {tagline ? (
+          tagline={tagline}
-            <p className="mb-3 text-xs uppercase tracking-[0.2em] text-muted-foreground">
+          title={heading}
-              {tagline}
+          align="left"
-            </p>
+          size="md"
-          ) : null}
+          className="mb-12"
-          <Typography variant="h3">{heading}</Typography>
+          maxWidth="max-w-xl"
-        </div>
+        />
 
         <div className="grid grid-cols-2 gap-x-6 gap-y-12 md:grid-cols-4">
           {items.length === 0
@@ -61,7 +62,7 @@ export function RecommendedProductsView({
               ))
             : items.map((p: any) => <ProductCard key={p.id} product={p} />)}
         </div>
-      </div>
+      </Container>
     </section>
   );
 }

components/commerce/search-products.editor.tsx

@@ -0,0 +1,242 @@
+import { ComponentConfig } from '@reacteditor/core';
+import { Search } from 'lucide-react';
+import { SearchProductsView, type SearchProductsProps } from '@/components/commerce/search-products';
+
+export const searchProductsEditor: ComponentConfig<SearchProductsProps> = {
+  label: 'Search & filter',
+  icon: <Search size={16} />,
+  category: 'commerce',
+  defaultProps: {
+    heading: 'Shop',
+    subheading: 'Browse our full collection.',
+    columns: '4',
+    limit: 24,
+    showAvailability: 'yes',
+    showPriceRange: 'yes',
+    showProductType: 'yes',
+    productTypeOptions: [
+      { label: 'T-Shirts' },
+      { label: 'Pants' },
+      { label: 'Outerwear' },
+      { label: 'Accessories' },
+      { label: 'Shoes' },
+    ],
+    showVendor: 'yes',
+    vendorOptions: [
+      { label: 'Maison' },
+      { label: 'Atelier' },
+      { label: 'Studio' },
+    ],
+    showTags: 'yes',
+    tagOptions: [
+      { label: 'New' },
+      { label: 'Sale' },
+      { label: 'Bestseller' },
+      { label: 'Limited Edition' },
+    ],
+    showColor: 'yes',
+    colorOptions: [
+      { label: 'Black', color: '#000000' },
+      { label: 'White', color: '#FFFFFF' },
+      { label: 'Navy', color: '#1e3a5f' },
+      { label: 'Red', color: '#c0392b' },
+    ],
+    showStyle: 'no',
+    styleOptions: [],
+    showSize: 'yes',
+    sizeOptions: [
+      { label: 'XS' },
+      { label: 'S' },
+      { label: 'M' },
+      { label: 'L' },
+      { label: 'XL' },
+    ],
+    showMaterial: 'no',
+    materialOptions: [],
+    metafieldFilters: [],
+    defaultSort: 'BEST_SELLING',
+  },
+  fields: {
+    heading: { label: 'Heading', type: 'text', contentEditable: true },
+    subheading: { label: 'Subheading', type: 'textarea', contentEditable: true },
+    columns: {
+      label: 'Columns',
+      type: 'radio',
+      options: [
+        { label: '2', value: '2' },
+        { label: '3', value: '3' },
+        { label: '4', value: '4' },
+      ],
+    },
+    limit: { label: 'Products per page', type: 'number', min: 4, max: 48 },
+    defaultSort: {
+      label: 'Default sort',
+      type: 'select',
+      options: [
+        { label: 'Best Selling',       value: 'BEST_SELLING' },
+        { label: 'Relevance',          value: 'RELEVANCE'    },
+        { label: 'Newest',             value: 'NEWEST'       },
+        { label: 'Price: Low to High', value: 'PRICE_ASC'    },
+        { label: 'Price: High to Low', value: 'PRICE_DESC'   },
+        { label: 'Alphabetical',       value: 'TITLE_ASC'    },
+      ],
+    },
+    showAvailability: {
+      label: 'Availability filter',
+      type: 'radio',
+      options: [
+        { label: 'Show', value: 'yes' },
+        { label: 'Hide', value: 'no'  },
+      ],
+    },
+    showPriceRange: {
+      label: 'Price range filter',
+      type: 'radio',
+      options: [
+        { label: 'Show', value: 'yes' },
+        { label: 'Hide', value: 'no'  },
+      ],
+    },
+    showProductType: {
+      label: 'Product type filter',
+      type: 'radio',
+      options: [
+        { label: 'Show', value: 'yes' },
+        { label: 'Hide', value: 'no'  },
+      ],
+    },
+    productTypeOptions: {
+      label: 'Product types',
+      type: 'array',
+      defaultItemProps: { label: '' },
+      getItemSummary: (it: any) => it?.label || 'Type',
+      arrayFields: {
+        label: { label: 'Type name', type: 'text' },
+      },
+    },
+    showVendor: {
+      label: 'Brand / vendor filter',
+      type: 'radio',
+      options: [
+        { label: 'Show', value: 'yes' },
+        { label: 'Hide', value: 'no'  },
+      ],
+    },
+    vendorOptions: {
+      label: 'Brands',
+      type: 'array',
+      defaultItemProps: { label: '' },
+      getItemSummary: (it: any) => it?.label || 'Brand',
+      arrayFields: {
+        label: { label: 'Brand name', type: 'text' },
+      },
+    },
+    showTags: {
+      label: 'Tags filter',
+      type: 'radio',
+      options: [
+        { label: 'Show', value: 'yes' },
+        { label: 'Hide', value: 'no'  },
+      ],
+    },
+    tagOptions: {
+      label: 'Tags',
+      type: 'array',
+      defaultItemProps: { label: '' },
+      getItemSummary: (it: any) => it?.label || 'Tag',
+      arrayFields: {
+        label: { label: 'Tag name', type: 'text' },
+      },
+    },
+    showColor: {
+      label: 'Color filter',
+      type: 'radio',
+      options: [
+        { label: 'Show', value: 'yes' },
+        { label: 'Hide', value: 'no'  },
+      ],
+    },
+    colorOptions: {
+      label: 'Colors',
+      type: 'array',
+      defaultItemProps: { label: '', color: '#000000' },
+      getItemSummary: (it: any) => it?.label || 'Color',
+      arrayFields: {
+        label: { label: 'Color name', type: 'text' },
+        color: { label: 'Color', type: 'color' },
+      },
+    },
+    showStyle: {
+      label: 'Style filter',
+      type: 'radio',
+      options: [
+        { label: 'Show', value: 'yes' },
+        { label: 'Hide', value: 'no'  },
+      ],
+    },
+    styleOptions: {
+      label: 'Styles',
+      type: 'array',
+      defaultItemProps: { label: '' },
+      getItemSummary: (it: any) => it?.label || 'Style',
+      arrayFields: {
+        label: { label: 'Style name', type: 'text' },
+      },
+    },
+    showSize: {
+      label: 'Size filter',
+      type: 'radio',
+      options: [
+        { label: 'Show', value: 'yes' },
+        { label: 'Hide', value: 'no'  },
+      ],
+    },
+    sizeOptions: {
+      label: 'Sizes',
+      type: 'array',
+      defaultItemProps: { label: '' },
+      getItemSummary: (it: any) => it?.label || 'Size',
+      arrayFields: {
+        label: { label: 'Size name', type: 'text' },
+      },
+    },
+    showMaterial: {
+      label: 'Material filter',
+      type: 'radio',
+      options: [
+        { label: 'Show', value: 'yes' },
+        { label: 'Hide', value: 'no'  },
+      ],
+    },
+    materialOptions: {
+      label: 'Materials',
+      type: 'array',
+      defaultItemProps: { label: '' },
+      getItemSummary: (it: any) => it?.label || 'Material',
+      arrayFields: {
+        label: { label: 'Material name', type: 'text' },
+      },
+    },
+    metafieldFilters: {
+      label: 'Metafield filters',
+      type: 'array',
+      defaultItemProps: { namespace: '', key: '', label: '', values: [{ label: '' }] },
+      getItemSummary: (it: any) => it?.label || it?.key || 'Metafield',
+      arrayFields: {
+        namespace: { label: 'Namespace', type: 'text' },
+        key: { label: 'Key', type: 'text' },
+        label: { label: 'Label', type: 'text' },
+        values: {
+          label: 'Values',
+          type: 'array',
+          defaultItemProps: { label: '' },
+          getItemSummary: (v: any) => v?.label || 'Value',
+          arrayFields: {
+            label: { label: 'Value', type: 'text' },
+          },
+        },
+      },
+    },
+  },
+  render: (props) => <SearchProductsView {...props} />,
+};

components/commerce/search-products.tsx

@@ -0,0 +1,533 @@
+import { useState, useEffect, useCallback } from 'react';
+import { useSearchParams, useRouter, usePathname } from 'next/navigation';
+import { ChevronDown, SlidersHorizontal } from 'lucide-react';
+import { useShopifySearch, type SearchFilters, type SortOption } from '@/hooks/use-shopify-search';
+
+import { ProductCard } from './product-card';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@/components/ui/select';
+import { Button } from '@/components/ui/button';
+import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger, SheetFooter } from '@/components/ui/sheet';
+import { Container } from '@/components/layout/Container';
+import { cn } from '@/lib/utils';
+
+type FilterOption = { label: string };
+type ColorOption = { label: string; color: string };
+
+export type SearchProductsProps = {
+  heading: string;
+  subheading: string;
+  columns: '2' | '3' | '4';
+  limit: number;
+  showAvailability: 'yes' | 'no';
+  showPriceRange: 'yes' | 'no';
+  showProductType: 'yes' | 'no';
+  productTypeOptions: FilterOption[];
+  showVendor: 'yes' | 'no';
+  vendorOptions: FilterOption[];
+  showTags: 'yes' | 'no';
+  tagOptions: FilterOption[];
+  showColor: 'yes' | 'no';
+  colorOptions: ColorOption[];
+  showStyle: 'yes' | 'no';
+  styleOptions: FilterOption[];
+  showSize: 'yes' | 'no';
+  sizeOptions: FilterOption[];
+  showMaterial: 'yes' | 'no';
+  materialOptions: FilterOption[];
+  metafieldFilters: { namespace: string; key: string; label: string; values: { label: string }[] }[];
+  defaultSort: SortOption;
+};
+
+const SORT_OPTIONS: { label: string; value: SortOption }[] = [
+  { label: 'Relevance',          value: 'RELEVANCE'    },
+  { label: 'Best Selling',       value: 'BEST_SELLING' },
+  { label: 'Newest',             value: 'NEWEST'       },
+  { label: 'Price: Low to High', value: 'PRICE_ASC'    },
+  { label: 'Price: High to Low', value: 'PRICE_DESC'   },
+  { label: 'Alphabetical',       value: 'TITLE_ASC'    },
+];
+
+const colClass: Record<SearchProductsProps['columns'], string> = {
+  '2': 'grid-cols-2',
+  '3': 'grid-cols-2 md:grid-cols-3',
+  '4': 'grid-cols-2 md:grid-cols-3 lg:grid-cols-4',
+};
+
+// ─── Filter group (collapsible) ────────────────────────────────────────────────
+
+function FilterGroup({ label, children, defaultOpen = true }: {
+  label: string;
+  children: React.ReactNode;
+  defaultOpen?: boolean;
+}) {
+  const [open, setOpen] = useState(defaultOpen);
+  return (
+    <div className="border-b border-border py-4">
+      <button
+        type="button"
+        onClick={() => setOpen((o) => !o)}
+        className="flex w-full items-center justify-between text-xs font-semibold uppercase tracking-[0.15em] text-foreground"
+      >
+        {label}
+        <ChevronDown
+          size={14}
+          className={cn('transition-transform', open ? 'rotate-180' : '')}
+        />
+      </button>
+      {open && <div className="mt-3 space-y-2">{children}</div>}
+    </div>
+  );
+}
+
+function Checkbox({ checked, onChange, label }: {
+  checked: boolean;
+  onChange: (v: boolean) => void;
+  label: string;
+}) {
+  return (
+    <label className="flex cursor-pointer items-center gap-2.5 text-sm text-foreground/80 hover:text-foreground">
+      <input
+        type="checkbox"
+        checked={checked}
+        onChange={(e) => onChange(e.target.checked)}
+        className="sr-only"
+      />
+      <span
+        className={cn(
+          'flex h-4 w-4 shrink-0 items-center justify-center rounded border',
+          checked ? 'border-foreground bg-foreground' : 'border-border',
+        )}
+      >
+        {checked && (
+          <svg viewBox="0 0 10 8" className="h-2.5 w-2.5 fill-background" aria-hidden>
+            <path d="M1 4l3 3 5-6" stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinecap="round" strokeLinejoin="round" />
+          </svg>
+        )}
+      </span>
+      {label}
+    </label>
+  );
+}
+
+// ─── Sidebar ────────────────────────────────────────────────────────────────────
+
+type ActiveFilters = {
+  availability: boolean;
+  productTypes: string[];
+  vendors: string[];
+  tags: string[];
+  colors: string[];
+  styles: string[];
+  sizes: string[];
+  materials: string[];
+  minPrice: string;
+  maxPrice: string;
+  metafieldValues: Record<string, string[]>;
+};
+
+function Sidebar({
+  props,
+  active,
+  onChange,
+}: {
+  props: SearchProductsProps;
+  active: ActiveFilters;
+  onChange: (patch: Partial<ActiveFilters>) => void;
+}) {
+  const productTypes = (props.productTypeOptions ?? []).map((o) => o.label).filter(Boolean);
+  const vendors = (props.vendorOptions ?? []).map((o) => o.label).filter(Boolean);
+  const tags = (props.tagOptions ?? []).map((o) => o.label).filter(Boolean);
+  const colors = (props.colorOptions ?? []) as ColorOption[];
+  const styles = (props.styleOptions ?? []).map((o) => o.label).filter(Boolean);
+  const sizes = (props.sizeOptions ?? []).map((o) => o.label).filter(Boolean);
+  const materials = (props.materialOptions ?? []).map((o) => o.label).filter(Boolean);
+  const metafieldFilters = (props.metafieldFilters ?? []).filter((mf) => mf.namespace && mf.key);
+
+  function toggle(key: 'productTypes' | 'vendors' | 'tags' | 'colors' | 'styles' | 'sizes' | 'materials', value: string) {
+    const arr = active[key];
+    onChange({ [key]: arr.includes(value) ? arr.filter((v) => v !== value) : [...arr, value] });
+  }
+
+  return (
+    <div className="w-full">
+      {props.showAvailability === 'yes' && (
+        <FilterGroup label="Availability">
+          <Checkbox
+            checked={active.availability}
+            onChange={(v) => onChange({ availability: v })}
+            label="In stock"
+          />
+        </FilterGroup>
+      )}
+
+      {props.showPriceRange === 'yes' && (
+        <FilterGroup label="Price">
+          <div className="flex items-center gap-2">
+            <input
+              type="number"
+              min={0}
+              placeholder="Min"
+              value={active.minPrice}
+              onChange={(e) => onChange({ minPrice: e.target.value })}
+              className="w-full rounded-md border border-border bg-background px-2 py-1.5 text-sm"
+            />
+            <span className="text-muted-foreground">–</span>
+            <input
+              type="number"
+              min={0}
+              placeholder="Max"
+              value={active.maxPrice}
+              onChange={(e) => onChange({ maxPrice: e.target.value })}
+              className="w-full rounded-md border border-border bg-background px-2 py-1.5 text-sm"
+            />
+          </div>
+        </FilterGroup>
+      )}
+
+      {props.showVendor === 'yes' && vendors.length > 0 && (
+        <FilterGroup label="Brand">
+          {vendors.map((v) => (
+            <Checkbox
+              key={v}
+              checked={active.vendors.includes(v)}
+              onChange={() => toggle('vendors', v)}
+              label={v}
+            />
+          ))}
+        </FilterGroup>
+      )}
+
+      {props.showColor === 'yes' && colors.length > 0 && (
+        <FilterGroup label="Color">
+          {colors.filter((c) => c.label).map((c) => (
+            <label
+              key={c.label}
+              className="flex cursor-pointer items-center gap-2.5 text-sm text-foreground/80 hover:text-foreground"
+            >
+              <input
+                type="checkbox"
+                checked={active.colors.includes(c.label)}
+                onChange={() => toggle('colors', c.label)}
+                className="sr-only"
+              />
+              <span
+                className={cn(
+                  'flex h-5 w-5 shrink-0 rounded-full border-2',
+                  active.colors.includes(c.label) ? 'border-foreground' : 'border-transparent',
+                )}
+                style={{ backgroundColor: c.color || undefined }}
+              />
+              {c.label}
+            </label>
+          ))}
+        </FilterGroup>
+      )}
+
+      {props.showStyle === 'yes' && styles.length > 0 && (
+        <FilterGroup label="Style">
+          {styles.map((s) => (
+            <Checkbox
+              key={s}
+              checked={active.styles.includes(s)}
+              onChange={() => toggle('styles', s)}
+              label={s}
+            />
+          ))}
+        </FilterGroup>
+      )}
+
+      {props.showSize === 'yes' && sizes.length > 0 && (
+        <FilterGroup label="Size">
+          {sizes.map((s) => (
+            <Checkbox
+              key={s}
+              checked={active.sizes.includes(s)}
+              onChange={() => toggle('sizes', s)}
+              label={s}
+            />
+          ))}
+        </FilterGroup>
+      )}
+
+      {props.showMaterial === 'yes' && materials.length > 0 && (
+        <FilterGroup label="Material">
+          {materials.map((m) => (
+            <Checkbox
+              key={m}
+              checked={active.materials.includes(m)}
+              onChange={() => toggle('materials', m)}
+              label={m}
+            />
+          ))}
+        </FilterGroup>
+      )}
+
+      {props.showProductType === 'yes' && productTypes.length > 0 && (
+        <FilterGroup label="Product type">
+          {productTypes.map((pt) => (
+            <Checkbox
+              key={pt}
+              checked={active.productTypes.includes(pt)}
+              onChange={() => toggle('productTypes', pt)}
+              label={pt}
+            />
+          ))}
+        </FilterGroup>
+      )}
+
+      {props.showTags === 'yes' && tags.length > 0 && (
+        <FilterGroup label="Tags">
+          {tags.map((t) => (
+            <Checkbox
+              key={t}
+              checked={active.tags.includes(t)}
+              onChange={() => toggle('tags', t)}
+              label={t}
+            />
+          ))}
+        </FilterGroup>
+      )}
+
+      {metafieldFilters.map((mf, i) => {
+        const mfKey = `${mf.namespace}.${mf.key}`;
+        const selected = active.metafieldValues[mfKey] ?? [];
+        return (
+          <FilterGroup key={mfKey + i} label={mf.label || mfKey}>
+            {mf.values.map((v) => v.label).filter(Boolean).map((val) => (
+              <Checkbox
+                key={val}
+                checked={selected.includes(val)}
+                onChange={(checked) => {
+                  const next = checked
+                    ? [...selected, val]
+                    : selected.filter((v) => v !== val);
+                  onChange({ metafieldValues: { ...active.metafieldValues, [mfKey]: next } });
+                }}
+                label={val}
+              />
+            ))}
+          </FilterGroup>
+        );
+      })}
+    </div>
+  );
+}
+
+// ─── Main component ──────────────────────────────────────────────────────────
+
+export function SearchProductsView(props: SearchProductsProps) {
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const pathname = usePathname();
+  const initialQ = searchParams.get('q') ?? '';
+
+  const [query, setQuery] = useState(initialQ);
+  const [inputValue, setInputValue] = useState(initialQ);
+  const [sort, setSort] = useState<SortOption>(props.defaultSort);
+  const [filtersOpen, setFiltersOpen] = useState(false);
+  const [active, setActive] = useState<ActiveFilters>({
+    availability: false,
+    productTypes: [],
+    vendors: [],
+    tags: [],
+    colors: [],
+    styles: [],
+    sizes: [],
+    materials: [],
+    minPrice: '',
+    maxPrice: '',
+    metafieldValues: {},
+  });
+
+  const patchActive = useCallback((patch: Partial<ActiveFilters>) => {
+    setActive((prev) => ({ ...prev, ...patch }));
+  }, []);
+
+  const clearAll = useCallback(() => {
+    setActive({
+      availability: false,
+      productTypes: [],
+      vendors: [],
+      tags: [],
+      colors: [],
+      styles: [],
+      sizes: [],
+      materials: [],
+      minPrice: '',
+      maxPrice: '',
+      metafieldValues: {},
+    });
+  }, []);
+
+  const filters: SearchFilters = {
+    q: query,
+    sort,
+    availability: active.availability || undefined,
+    productTypes: active.productTypes.length ? active.productTypes : undefined,
+    vendors: active.vendors.length ? active.vendors : undefined,
+    tags: active.tags.length ? active.tags : undefined,
+    colors: active.colors.length ? active.colors : undefined,
+    styles: active.styles.length ? active.styles : undefined,
+    sizes: active.sizes.length ? active.sizes : undefined,
+    materials: active.materials.length ? active.materials : undefined,
+    minPrice: active.minPrice !== '' ? parseFloat(active.minPrice) : undefined,
+    maxPrice: active.maxPrice !== '' ? parseFloat(active.maxPrice) : undefined,
+    metafields: (() => {
+      const mfs = Object.entries(active.metafieldValues).flatMap(([mfKey, vals]) => {
+        const [namespace, key] = mfKey.split('.');
+        return vals.map((value) => ({ namespace, key, value }));
+      });
+      return mfs.length ? mfs : undefined;
+    })(),
+  };
+
+  const { products, loading, error, hasNextPage, fetchMore } = useShopifySearch(filters, {
+    first: props.limit,
+  });
+
+  // Sync ?q= param when query changes
+  useEffect(() => {
+    const params = new URLSearchParams(searchParams.toString());
+    if (query) params.set('q', query); else params.delete('q');
+    const qs = params.toString();
+    router.replace(qs ? `${pathname}?${qs}` : pathname, { scroll: false });
+  }, [query]);
+
+  const handleSearch = (e: React.FormEvent) => {
+    e.preventDefault();
+    setQuery(inputValue.trim());
+  };
+
+  return (
+    <section className="bg-background py-12 md:py-16">
+      <Container>
+
+        {/* Page header */}
+        <div className="mb-10">
+          {props.heading && (
+            <h1 className="mb-2 font-heading text-4xl font-bold tracking-tight text-foreground md:text-5xl">
+              {props.heading}
+            </h1>
+          )}
+          {props.subheading && (
+            <p className="text-muted-foreground">{props.subheading}</p>
+          )}
+          {/* Search bar (mobile only – desktop version lives in the product area) */}
+          <form onSubmit={handleSearch} className="mt-6 flex gap-2 md:hidden">
+            <input
+              type="search"
+              value={inputValue}
+              onChange={(e) => setInputValue(e.target.value)}
+              placeholder="Search products…"
+              className="flex-1 rounded-md border border-border bg-background px-4 py-2.5 text-sm outline-none focus:border-foreground"
+            />
+            <button
+              type="submit"
+              className="rounded-md bg-foreground px-5 py-2.5 text-sm font-medium text-background hover:opacity-90"
+            >
+              Search
+            </button>
+          </form>
+        </div>
+
+        {/* Search bar (desktop only — mobile lives in header above) */}
+        <form onSubmit={handleSearch} className="mb-4 hidden gap-2 md:flex">
+          <input
+            type="search"
+            value={inputValue}
+            onChange={(e) => setInputValue(e.target.value)}
+            placeholder="Search products…"
+            className="flex-1 rounded-md border border-border bg-background px-4 py-2.5 text-sm outline-none focus:border-foreground"
+          />
+          <button
+            type="submit"
+            className="rounded-md bg-foreground px-5 py-2.5 text-sm font-medium text-background hover:opacity-90"
+          >
+            Search
+          </button>
+        </form>
+
+        {/* Filter + sort bar */}
+        <div className="mb-6 flex items-center justify-between">
+          <Sheet open={filtersOpen} onOpenChange={setFiltersOpen}>
+            <SheetTrigger asChild>
+              <button
+                type="button"
+                className="flex items-center gap-2 rounded-md border border-border px-3 py-2 text-sm font-medium hover:bg-muted"
+              >
+                <SlidersHorizontal size={14} />
+                Filters
+              </button>
+            </SheetTrigger>
+            <SheetContent side="left" className="w-full sm:max-w-md">
+              <SheetHeader>
+                <SheetTitle>Filters</SheetTitle>
+              </SheetHeader>
+              <div className="flex-1 overflow-y-auto px-4">
+                <Sidebar props={props} active={active} onChange={patchActive} />
+              </div>
+              <SheetFooter className="flex-row gap-2 border-t border-border">
+                <Button variant="outline" className="flex-1" onClick={clearAll}>
+                  Clear
+                </Button>
+                <Button className="flex-1" onClick={() => setFiltersOpen(false)}>
+                  Search
+                </Button>
+              </SheetFooter>
+            </SheetContent>
+          </Sheet>
+
+          <div className="flex items-center gap-4">
+            <p className="hidden text-sm text-muted-foreground sm:block">
+              {loading ? 'Loading…' : `${products.length} product${products.length === 1 ? '' : 's'}`}
+            </p>
+            <Select value={sort} onValueChange={(v) => setSort(v as SortOption)}>
+              <SelectTrigger className="h-auto px-3 py-2 text-sm">
+                <SelectValue>{SORT_OPTIONS.find((o) => o.value === sort)?.label}</SelectValue>
+              </SelectTrigger>
+              <SelectContent>
+                {SORT_OPTIONS.map((o) => (
+                  <SelectItem key={o.value} value={o.value}>{o.label}</SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+
+        {error && (
+          <p className="rounded-md border border-border p-4 text-sm text-muted-foreground">
+            {error}
+          </p>
+        )}
+
+        {/* Grid */}
+        <div className={cn('grid gap-x-6 gap-y-10', colClass[props.columns])}>
+          {loading
+            ? Array.from({ length: props.limit }).map((_, i) => (
+                <Skeleton key={i} className="aspect-[4/5] w-full" />
+              ))
+            : products.map((p) => <ProductCard key={p.id} product={p} />)}
+        </div>
+
+        {!loading && products.length === 0 && !error && (
+          <div className="mt-16 text-center text-sm text-muted-foreground">
+            No products found.{query ? ` Try a different search term.` : ''}
+          </div>
+        )}
+
+        {hasNextPage && !loading && (
+          <div className="mt-12 flex justify-center">
+            <button
+              type="button"
+              onClick={fetchMore}
+              className="rounded-md border border-border px-8 py-3 text-sm font-medium hover:bg-muted"
+            >
+              Load more
+            </button>
+          </div>
+        )}
+      </Container>
+    </section>
+  );
+}

components/commerce/shop-footer.tsx

@@ -1,24 +0,0 @@
-import React from 'react';
-
-const Footer: React.FC = () => {
-  return (
-    <footer className="bg-black text-white py-12">
-      <div className="container mx-auto px-4 text-center">
-        <h3
-          className="text-2xl font-bold mb-4"
-          style={{fontFamily: 'Space Grotesk, sans-serif'}}
-        >
-          Store
-        </h3>
-        <p className="text-gray-400 mb-6">
-          Your premium shopping destination
-        </p>
-        <div className="mt-8 pt-8 border-t border-gray-800 text-gray-400">
-          <p>&copy; 2025 Store. All rights reserved.</p>
-        </div>
-      </div>
-    </footer>
-  );
-};
-
-export default Footer;

components/commerce/shop-header.tsx

@@ -1,68 +0,0 @@
-'use client';
-
-import React from 'react';
-import { Link } from 'react-router';
-import { useShopifyCart } from '@/hooks/use-shopify-cart';
-import config from '@/lib/config.json';
-
-const CartIcon: React.FC = () => {
-  const { toggleCart, itemCount } = useShopifyCart();
-
-  return (
-    <button
-      onClick={toggleCart}
-      className="relative p-1 text-black hover:text-gray-600 transition-colors"
-    >
-      <i className="ri-shopping-cart-line text-xl"></i>
-      {itemCount > 0 && (
-        <span className="absolute -top-1 -right-1 bg-black text-white text-[10px] rounded-full w-4 h-4 flex items-center justify-center font-semibold">
-          {itemCount > 99 ? '99+' : itemCount}
-        </span>
-      )}
-    </button>
-  );
-};
-
-const Header: React.FC = () => {
-  return (
-    <nav className="bg-white shadow-sm sticky top-0 z-30 h-14">
-      <div className="container mx-auto px-4 h-full">
-        <div className="flex justify-between items-center h-full">
-          {/* Logo */}
-          <Link to="/" className="text-lg font-bold text-black font-heading">
-            {config.brand.logo.url ? (
-              <img
-                src={config.brand.logo.url}
-                alt={config.brand.logo.alt || 'Store'}
-                className="h-8"
-              />
-            ) : (
-              'Store'
-            )}
-          </Link>
-
-          {/* Navigation Links */}
-          <div className="flex items-center space-x-6">
-            <Link
-              to="/"
-              className="text-sm text-black hover:text-gray-600 font-medium transition-colors"
-            >
-              Products
-            </Link>
-            <Link
-              to="/collections"
-              className="text-sm text-black hover:text-gray-600 font-medium transition-colors"
-            >
-              Collections
-            </Link>
-
-            {/* Cart Icon */}
-            <CartIcon />
-          </div>
-        </div>
-      </div>
-    </nav>
-  );
-};
-
-export default Header;

components/cta/cta.tsx

@@ -1,6 +1,6 @@
-import { Link } from "react-router";
+import Link from "next/link";
 import { cn } from "@/lib/utils";
-import { Typography } from "@/components/Typography";
+import { Heading } from "@/components/Heading";
 
 export type CTAProps = {
   tagline: string;
@@ -43,17 +43,15 @@ export function CTA({
           align === "center" ? "items-center text-center" : "items-start",
         )}
       >
-        {tagline ? (
+        <Heading
-          <p className="mb-4 text-xs uppercase tracking-[0.2em] text-white/80">
+          tagline={tagline}
-            {tagline}
+          title={heading}
-          </p>
+          subtitle={subheading}
-        ) : null}
+          align={align === "center" ? "center" : "left"}
-        <Typography variant="h2">{heading}</Typography>
+          size="lg"
-        {subheading ? (
+          tone="light"
-          <Typography variant="subtitle1" className="mt-5 max-w-xl text-white/80">
+          subtitleClassName="max-w-xl"
-            {subheading}
+        />
-          </Typography>
-        ) : null}
         <div
           className={cn(
             "mt-10 flex flex-wrap gap-3",
@@ -62,16 +60,16 @@ export function CTA({
         >
           {primaryCta?.label ? (
             <Link
-              to={primaryCta.href || "#"}
+              href={primaryCta.href || "#"}
-              className="inline-flex items-center justify-center rounded-full bg-white px-6 py-3 text-sm font-medium tracking-wide text-black hover:opacity-90"
+              className="inline-flex items-center justify-center rounded-md bg-white px-6 py-3 text-sm font-medium tracking-wide text-black hover:opacity-90"
             >
               {primaryCta.label}
             </Link>
           ) : null}
           {secondaryCta?.label ? (
             <Link
-              to={secondaryCta.href || "#"}
+              href={secondaryCta.href || "#"}
-              className="inline-flex items-center justify-center rounded-full border border-white px-6 py-3 text-sm font-medium tracking-wide text-white hover:bg-white/10"
+              className="inline-flex items-center justify-center rounded-md border border-white px-6 py-3 text-sm font-medium tracking-wide text-white hover:bg-white/10"
             >
               {secondaryCta.label}
             </Link>

components/faq/faq.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { Plus, Minus } from "lucide-react";
-import { Typography } from "@/components/Typography";
+import { Heading } from "@/components/Heading";
 
 export type FAQProps = {
   tagline: string;
@@ -14,19 +14,14 @@ export function FAQ({ tagline, heading, subheading, items }: FAQProps) {
   return (
     <section className="bg-background py-20 md:py-28">
       <div className="container mx-auto max-w-3xl px-6">
-        <div className="mb-12 text-center">
+        <Heading
-          {tagline ? (
+          tagline={tagline}
-            <p className="mb-3 text-xs uppercase tracking-[0.2em] text-muted-foreground">
+          title={heading}
-              {tagline}
+          subtitle={subheading}
-            </p>
+          align="center"
-          ) : null}
+          size="lg"
-          <Typography variant="h2">{heading}</Typography>
+          className="mb-12"
-          {subheading ? (
+        />
-            <Typography variant="subtitle1" className="mt-3">
-              {subheading}
-            </Typography>
-          ) : null}
-        </div>
 
         <div className="divide-y divide-border border-y border-border">
           {items.map((item, i) => {

components/features/features.tsx

@@ -1,4 +1,6 @@
 import { Typography } from "@/components/Typography";
+import { Container } from "@/components/layout/Container";
+import { Heading } from "@/components/Heading";
 
 export type FeaturesProps = {
   tagline: string;
@@ -17,35 +19,31 @@ const colClass: Record<FeaturesProps["columns"], string> = {
 export function Features({ tagline, heading, subheading, columns, items }: FeaturesProps) {
   return (
     <section className="bg-background py-20 md:py-28">
-      <div className="container mx-auto max-w-7xl px-6">
+      <Container>
-        <div className="mx-auto mb-16 max-w-2xl text-center">
+        <Heading
-          {tagline ? (
+          tagline={tagline}
-            <p className="mb-3 text-xs uppercase tracking-[0.2em] text-muted-foreground">
+          title={heading}
-              {tagline}
+          subtitle={subheading}
-            </p>
+          align="center"
-          ) : null}
+          size="lg"
-          <Typography variant="h2">{heading}</Typography>
+          className="mx-auto mb-16"
-          {subheading ? (
+          maxWidth="max-w-2xl"
-            <Typography variant="subtitle1" className="mt-3">
+        />
-              {subheading}
-            </Typography>
-          ) : null}
-        </div>
 
         <div className={`grid grid-cols-1 gap-x-10 gap-y-12 ${colClass[columns]}`}>
           {items.map((item, i) => (
-            <div key={i} className="border-t border-border pt-6">
+            <div key={i} className="flex flex-col gap-3">
-              <p className="mb-3 text-xs tracking-[0.18em] text-muted-foreground">
+              <Typography variant="caption">
                 {String(i + 1).padStart(2, "0")}
-              </p>
+              </Typography>
               <Typography variant="h5">{item.title}</Typography>
-              <Typography variant="body2" className="mt-3 text-muted-foreground">
+              <Typography variant="body2" className="text-muted-foreground">
                 {item.body}
               </Typography>
             </div>
           ))}
         </div>
-      </div>
+      </Container>
     </section>
   );
 }

components/footer/footer.tsx

@@ -1,6 +1,7 @@
 import { useState } from "react";
-import { Link } from "react-router";
+import Link from "next/link";
 import { Typography } from "@/components/Typography";
+import { Container } from "@/components/layout/Container";
 
 export type FooterProps = {
   brand: string;
@@ -45,7 +46,7 @@ export function Footer({
 
   return (
     <footer className="border-t border-border bg-background">
-      <div className="container mx-auto max-w-7xl px-6 py-20 md:py-24">
+      <Container className="py-20 md:py-24">
         <div className="grid grid-cols-1 gap-12 md:grid-cols-12">
           <div className="md:col-span-4">
             <Typography variant="h5" as="p">
@@ -96,7 +97,7 @@ export function Footer({
                   {col.links.map((l, j) => (
                     <li key={j}>
                       <Link
-                        to={l.href}
+                        href={l.href}
                         className="text-sm text-foreground/80 hover:text-foreground"
                       >
                         {l.label}
@@ -123,7 +124,7 @@ export function Footer({
             ))}
           </div>
         </div>
-      </div>
+      </Container>
     </footer>
   );
 }

components/hero/hero.editor.tsx

@@ -13,8 +13,10 @@ export const heroEditor: ComponentConfig<HeroProps> = {
     heading: "Made for the way you move",
     subheading:
       "A considered wardrobe of essentials, cut from natural fibers and designed to last.",
-    primaryCta: { label: "Shop the collection", href: "/collections" },
+    buttons: [
-    secondaryCta: { label: "Our story", href: "/about" },
+      { label: "Shop the collection", href: "/collections", variant: "primary" },
+      { label: "Our story", href: "/about", variant: "secondary" },
+    ],
     imageUrl:
       "https://images.unsplash.com/photo-1490481651871-ab68de25d43d?auto=format&fit=crop&w=2400&q=80",
     align: "left",
@@ -25,21 +27,29 @@ export const heroEditor: ComponentConfig<HeroProps> = {
     tagline: { label: "Tagline", type: "text", contentEditable: true },
     heading: { label: "Heading", type: "textarea", contentEditable: true },
     subheading: { label: "Subheading", type: "textarea", contentEditable: true },
-    primaryCta: {
+    buttons: {
-      label: "Primary CTA",
+      label: "Buttons",
-      type: "object",
+      type: "array",
-      objectFields: {
+      arrayFields: {
         label: { label: "Label", type: "text", contentEditable: true },
         href: { label: "Link", type: "text" },
+        variant: {
+          label: "Variant",
+          type: "select",
+          options: [
+            { label: "Primary (filled)", value: "primary" },
+            { label: "Secondary (outline)", value: "secondary" },
+            { label: "Outline", value: "outline" },
+            { label: "Ghost", value: "ghost" },
+          ],
         },
       },
-    secondaryCta: {
+      defaultItemProps: {
-      label: "Secondary CTA",
+        label: "Button",
-      type: "object",
+        href: "/",
-      objectFields: {
+        variant: "primary",
-        label: { label: "Label", type: "text", contentEditable: true },
-        href: { label: "Link", type: "text" },
       },
+      getItemSummary: (item) => item?.label || "Button",
     },
     imageUrl: { label: "Background image", ...imageField({ adapter: frontendAiMediaAdapter }) },
     align: {

components/hero/hero.tsx

@@ -1,13 +1,20 @@
-import { Link } from "react-router";
+import Link from "next/link";
 import { cn } from "@/lib/utils";
 import { Typography } from "@/components/Typography";
 
+export type HeroButtonVariant = "primary" | "secondary" | "outline" | "ghost";
+
+export type HeroButton = {
+  label: string;
+  href: string;
+  variant: HeroButtonVariant;
+};
+
 export type HeroProps = {
   tagline: string;
   heading: string;
   subheading: string;
-  primaryCta: { label: string; href: string };
+  buttons: HeroButton[];
-  secondaryCta: { label: string; href: string };
   imageUrl: string;
   align: "left" | "center";
   height: "md" | "lg" | "full";
@@ -20,18 +27,40 @@ const heightClass: Record<HeroProps["height"], string> = {
   full: "min-h-screen",
 };
 
+function buttonClass(variant: HeroButtonVariant, isDark: boolean): string {
+  switch (variant) {
+    case "primary":
+      return cn(
+        "inline-flex items-center justify-center rounded-md px-6 py-3 text-sm font-medium tracking-wide transition-opacity hover:opacity-90",
+        isDark ? "bg-white text-black" : "bg-foreground text-background",
+      );
+    case "secondary":
+    case "outline":
+      return cn(
+        "inline-flex items-center justify-center rounded-md border px-6 py-3 text-sm font-medium tracking-wide transition-opacity hover:opacity-80",
+        isDark ? "border-white text-white" : "border-foreground text-foreground",
+      );
+    case "ghost":
+      return cn(
+        "inline-flex items-center justify-center rounded-md px-6 py-3 text-sm font-medium tracking-wide transition-opacity hover:opacity-80",
+        isDark ? "text-white" : "text-foreground",
+      );
+  }
+}
+
 export function Hero({
   tagline,
   heading,
   subheading,
-  primaryCta,
+  buttons,
-  secondaryCta,
   imageUrl,
   align,
   height,
   tone,
 }: HeroProps) {
   const isDark = tone === "dark";
+  const visibleButtons = (buttons ?? []).filter((b) => b?.label);
+
   return (
     <section
       className={cn(
@@ -63,14 +92,15 @@ export function Hero({
         )}
       >
         {tagline ? (
-          <p
+          <Typography
+            variant="caption"
             className={cn(
-              "mb-5 text-xs uppercase tracking-[0.2em]",
+              "mb-5",
               isDark ? "text-white/80" : "text-foreground/70",
             )}
           >
             {tagline}
-          </p>
+          </Typography>
         ) : null}
         <Typography variant="h1" className="max-w-3xl">
           {heading}
@@ -87,35 +117,24 @@ export function Hero({
           </Typography>
         ) : null}
 
+        {visibleButtons.length > 0 ? (
           <div
             className={cn(
               "mt-10 flex flex-wrap gap-3",
               align === "center" && "justify-center",
             )}
           >
-          {primaryCta?.label ? (
+            {visibleButtons.map((b, i) => (
               <Link
-              to={primaryCta.href || "#"}
+                key={`${b.href}-${b.label}-${i}`}
-              className={cn(
+                href={b.href || "#"}
-                "inline-flex items-center justify-center rounded-full px-6 py-3 text-sm font-medium tracking-wide transition-opacity hover:opacity-90",
+                className={buttonClass(b.variant, isDark)}
-                isDark ? "bg-white text-black" : "bg-foreground text-background",
-              )}
               >
-              {primaryCta.label}
+                {b.label}
               </Link>
-          ) : null}
+            ))}
-          {secondaryCta?.label ? (
-            <Link
-              to={secondaryCta.href || "#"}
-              className={cn(
-                "inline-flex items-center justify-center rounded-full border px-6 py-3 text-sm font-medium tracking-wide transition-opacity hover:opacity-80",
-                isDark ? "border-white text-white" : "border-foreground text-foreground",
-              )}
-            >
-              {secondaryCta.label}
-            </Link>
-          ) : null}
           </div>
+        ) : null}
       </div>
     </section>
   );

components/landing/banner.tsx

@@ -1,4 +1,4 @@
-import { Link } from "react-router";
+import Link from "next/link";
 import { cn } from "@/lib/utils";
 
 export type BannerProps = {
@@ -20,7 +20,7 @@ export function Banner({ text, ctaLabel, ctaHref, tone }: BannerProps) {
         <span>{text}</span>
         {ctaLabel ? (
           <Link
-            to={ctaHref || "#"}
+            href={ctaHref || "#"}
             className="underline-offset-4 hover:underline"
           >
             {ctaLabel} →

components/landing/image-gallery.tsx

@@ -1,5 +1,6 @@
 import { cn } from "@/lib/utils";
-import { Typography } from "@/components/Typography";
+import { Container } from "@/components/layout/Container";
+import { Heading } from "@/components/Heading";
 
 export type ImageGalleryProps = {
   tagline: string;
@@ -12,22 +13,16 @@ export type ImageGalleryProps = {
 export function ImageGallery({ tagline, heading, subheading, layout, items }: ImageGalleryProps) {
   return (
     <section className="bg-background py-20 md:py-28">
-      <div className="container mx-auto max-w-7xl px-6">
+      <Container>
-        {(tagline || heading || subheading) && (
+        <Heading
-          <div className="mx-auto mb-12 max-w-2xl text-center">
+          tagline={tagline}
-            {tagline ? (
+          title={heading}
-              <p className="mb-3 text-xs uppercase tracking-[0.2em] text-muted-foreground">
+          subtitle={subheading}
-                {tagline}
+          align="center"
-              </p>
+          size="lg"
-            ) : null}
+          className="mx-auto mb-12"
-            {heading ? <Typography variant="h2">{heading}</Typography> : null}
+          maxWidth="max-w-2xl"
-            {subheading ? (
+        />
-              <Typography variant="subtitle1" className="mt-3">
-                {subheading}
-              </Typography>
-            ) : null}
-          </div>
-        )}
 
         {layout === "masonry" ? (
           <div className="columns-1 gap-4 sm:columns-2 lg:columns-3">
@@ -86,7 +81,7 @@ export function ImageGallery({ tagline, heading, subheading, layout, items }: Im
             ))}
           </div>
         )}
-      </div>
+      </Container>
     </section>
   );
 }

components/landing/newsletter-cta.editor.tsx

@@ -1,9 +1,34 @@
-import { ComponentConfig } from "@reacteditor/core";
+import { ComponentConfig, Fields } from "@reacteditor/core";
 import { imageField } from "@reacteditor/plugin-media/field";
 import { Mail } from "lucide-react";
 import { NewsletterCta, type NewsletterCtaProps } from "@/components/landing/newsletter-cta";
 import { frontendAiMediaAdapter } from "@/services/media-adapter";
 
+const baseFields: Fields<NewsletterCtaProps> = {
+  tagline: { label: "Tagline", type: "text", contentEditable: true },
+  heading: { label: "Heading", type: "text", contentEditable: true },
+  subheading: { label: "Subheading", type: "textarea", contentEditable: true },
+  buttonLabel: { label: "Button label", type: "text", contentEditable: true },
+  emailProvider: {
+    label: "Email provider",
+    type: "select",
+    options: [
+      { label: "None (custom endpoint)", value: "none" },
+      { label: "Mailchimp", value: "mailchimp" },
+      { label: "Klaviyo", value: "klaviyo" },
+    ],
+  },
+  imageUrl: { label: "Image", ...imageField({ adapter: frontendAiMediaAdapter }) },
+  layout: {
+    label: "Layout",
+    type: "radio",
+    options: [
+      { label: "Split (image + form)", value: "split" },
+      { label: "Stacked (centered)", value: "stacked" },
+    ],
+  },
+};
+
 export const newsletterCtaEditor: ComponentConfig<NewsletterCtaProps> = {
   label: "Newsletter",
   icon: <Mail size={16} />,
@@ -14,26 +39,42 @@ export const newsletterCtaEditor: ComponentConfig<NewsletterCtaProps> = {
     subheading:
       "New collections, mill stories, and the occasional invitation to in-person events. Twice a month.",
     buttonLabel: "Subscribe",
+    emailProvider: "none",
     endpoint: "",
+    mailchimpApiKey: "",
+    mailchimpServerPrefix: "",
+    mailchimpAudienceId: "",
+    klaviyoCompanyId: "",
+    klaviyoListId: "",
     imageUrl:
       "https://images.unsplash.com/photo-1469334031218-e382a71b716b?auto=format&fit=crop&w=1800&q=80",
     layout: "split",
   },
-  fields: {
+  fields: baseFields,
-    tagline: { label: "Tagline", type: "text", contentEditable: true },
+  resolveFields: (data) => {
-    heading: { label: "Heading", type: "text", contentEditable: true },
+    const provider = data.props.emailProvider;
-    subheading: { label: "Subheading", type: "textarea", contentEditable: true },
+    if (provider === "mailchimp") {
-    buttonLabel: { label: "Button label", type: "text", contentEditable: true },
+      return {
-    endpoint: { label: "Submit endpoint", type: "text" },
+        ...baseFields,
-    imageUrl: { label: "Image", ...imageField({ adapter: frontendAiMediaAdapter }) },
+        mailchimpApiKey: { label: "Mailchimp API key", type: "text" },
-    layout: {
+        mailchimpServerPrefix: {
-      label: "Layout",
+          label: "Server prefix (e.g. us21)",
-      type: "radio",
+          type: "text",
-      options: [
-        { label: "Split (image + form)", value: "split" },
-        { label: "Stacked (centered)", value: "stacked" },
-      ],
         },
+        mailchimpAudienceId: { label: "Audience ID", type: "text" },
+      };
+    }
+    if (provider === "klaviyo") {
+      return {
+        ...baseFields,
+        klaviyoCompanyId: { label: "Company ID (public API key)", type: "text" },
+        klaviyoListId: { label: "List ID", type: "text" },
+      };
+    }
+    return {
+      ...baseFields,
+      endpoint: { label: "Submit endpoint", type: "text" },
+    };
   },
   render: (props) => <NewsletterCta {...props} />,
 };

components/landing/newsletter-cta.tsx

@@ -1,13 +1,24 @@
 import { useState } from "react";
 import { cn } from "@/lib/utils";
-import { Typography } from "@/components/Typography";
+import { Container } from "@/components/layout/Container";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Heading } from "@/components/Heading";
+
+export type EmailProvider = "none" | "mailchimp" | "klaviyo";
 
 export type NewsletterCtaProps = {
   tagline: string;
   heading: string;
   subheading: string;
   buttonLabel: string;
-  endpoint: string;
+  emailProvider: EmailProvider;
+  endpoint?: string;
+  mailchimpApiKey?: string;
+  mailchimpServerPrefix?: string;
+  mailchimpAudienceId?: string;
+  klaviyoCompanyId?: string;
+  klaviyoListId?: string;
   imageUrl: string;
   layout: "split" | "stacked";
 };
@@ -17,7 +28,13 @@ export function NewsletterCta({
   heading,
   subheading,
   buttonLabel,
+  emailProvider,
   endpoint,
+  mailchimpApiKey,
+  mailchimpServerPrefix,
+  mailchimpAudienceId,
+  klaviyoCompanyId,
+  klaviyoListId,
   imageUrl,
   layout,
 }: NewsletterCtaProps) {
@@ -30,7 +47,53 @@ export function NewsletterCta({
     if (!email) return;
     setSubmitting(true);
     try {
-      if (endpoint) {
+      if (emailProvider === "mailchimp") {
+        if (mailchimpServerPrefix && mailchimpAudienceId && mailchimpApiKey) {
+          await fetch(
+            `https://${mailchimpServerPrefix}.api.mailchimp.com/3.0/lists/${mailchimpAudienceId}/members`,
+            {
+              method: "POST",
+              headers: {
+                "Content-Type": "application/json",
+                Authorization: `Bearer ${mailchimpApiKey}`,
+              },
+              body: JSON.stringify({
+                email_address: email,
+                status: "subscribed",
+              }),
+            },
+          );
+        }
+      } else if (emailProvider === "klaviyo") {
+        if (klaviyoCompanyId && klaviyoListId) {
+          await fetch(
+            `https://a.klaviyo.com/client/subscriptions/?company_id=${klaviyoCompanyId}`,
+            {
+              method: "POST",
+              headers: {
+                "Content-Type": "application/json",
+                revision: "2024-10-15",
+              },
+              body: JSON.stringify({
+                data: {
+                  type: "subscription",
+                  attributes: {
+                    profile: {
+                      data: {
+                        type: "profile",
+                        attributes: { email },
+                      },
+                    },
+                  },
+                  relationships: {
+                    list: { data: { type: "list", id: klaviyoListId } },
+                  },
+                },
+              }),
+            },
+          );
+        }
+      } else if (endpoint) {
         await fetch(endpoint, {
           method: "POST",
           headers: { "Content-Type": "application/json" },
@@ -48,56 +111,72 @@ export function NewsletterCta({
   const Form = (
     <form
       onSubmit={submit}
-      className="flex w-full max-w-md items-center border-b border-foreground/30 focus-within:border-foreground"
+      className="flex w-full max-w-md flex-col gap-3 sm:flex-row sm:items-center"
     >
-      <input
+      <Input
         type="email"
         required
         value={email}
         onChange={(e) => setEmail(e.target.value)}
-        placeholder="you@example.com"
+        placeholder="Enter your email"
-        className="flex-1 bg-transparent py-3 text-sm placeholder:text-muted-foreground focus:outline-none"
+        className="h-11 flex-1"
       />
-      <button
+      <Button type="submit" size="lg" disabled={submitting} className="h-11">
-        type="submit"
+        {submitting ? "Joining…" : buttonLabel}
-        disabled={submitting}
+      </Button>
-        className="ml-3 text-sm font-medium tracking-wide hover:opacity-70 disabled:opacity-40"
-      >
-        {submitting ? "…" : buttonLabel} →
-      </button>
     </form>
   );
 
-  if (layout === "split") {
+  const isStacked = layout === "stacked";
+
   return (
     <section className="bg-background">
-        <div className="container mx-auto max-w-7xl px-6 py-16 md:py-24">
+      <Container className="py-20 md:py-28">
-          <div className="grid grid-cols-1 items-center gap-12 md:grid-cols-2">
+        <div
-            <div>
+          className={cn(
+            "grid grid-cols-1 gap-10",
+            isStacked
+              ? "mx-auto max-w-3xl items-center text-center"
+              : "items-center md:grid-cols-12 md:gap-16",
+          )}
+        >
           {imageUrl ? (
+            <div className={cn(!isStacked && "md:col-span-7")}>
+              <div className="relative overflow-hidden rounded-xl bg-muted">
                 <img
                   src={imageUrl}
                   alt=""
-                  className="aspect-[5/4] w-full rounded-md object-cover"
+                  className={cn(
+                    "w-full object-cover transition-transform duration-700 hover:scale-105",
+                    isStacked ? "aspect-[16/9]" : "aspect-[4/3]",
+                  )}
                 />
-              ) : null}
               </div>
-            <div className="flex flex-col items-start">
+            </div>
-              {tagline ? (
-                <p className="mb-3 text-xs uppercase tracking-[0.2em] text-muted-foreground">
-                  {tagline}
-                </p>
           ) : null}
-              <Typography variant="h2">{heading}</Typography>
+          <div
-              {subheading ? (
+            className={cn(
-                <Typography variant="subtitle1" className="mt-3 max-w-md">
+              "flex w-full flex-col",
-                  {subheading}
+              isStacked ? "items-center" : "items-start md:col-span-5",
-                </Typography>
+            )}
-              ) : null}
+          >
-              <div className="mt-8 w-full">
+            <Heading
+              tagline={tagline}
+              title={heading}
+              subtitle={subheading}
+              align={isStacked ? "center" : "left"}
+              size="lg"
+              subtitleClassName={isStacked ? "mx-auto max-w-xl" : "max-w-md"}
+            />
+            <div
+              className={cn(
+                "mt-8 w-full",
+                isStacked && "flex justify-center",
+              )}
+            >
               {submitted ? (
-                  <p className="text-sm text-muted-foreground">
+                <p className="text-sm font-medium uppercase tracking-wide">
-                    Thanks — we'll be in touch.
+                  You're in. See you Monday at 5:30am.
                 </p>
               ) : (
                 Form
@@ -105,35 +184,7 @@ export function NewsletterCta({
             </div>
           </div>
         </div>
-        </div>
+      </Container>
-      </section>
-    );
-  }
-
-  return (
-    <section className="bg-muted/40 py-20 md:py-28">
-      <div className="container mx-auto max-w-2xl px-6 text-center">
-        {tagline ? (
-          <p className="mb-3 text-xs uppercase tracking-[0.2em] text-muted-foreground">
-            {tagline}
-          </p>
-        ) : null}
-        <Typography variant="h2">{heading}</Typography>
-        {subheading ? (
-          <Typography variant="subtitle1" className="mt-3">
-            {subheading}
-          </Typography>
-        ) : null}
-        <div className={cn("mx-auto mt-10 flex w-full max-w-md justify-center")}>
-          {submitted ? (
-            <p className="text-sm text-muted-foreground">
-              Thanks — we'll be in touch.
-            </p>
-          ) : (
-            Form
-          )}
-        </div>
-      </div>
     </section>
   );
 }

components/layout/Container.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export type ContainerProps = React.HTMLAttributes<HTMLElement> & {
+  as?: React.ElementType;
+};
+
+export function Container({
+  as: Comp = "div",
+  className,
+  style,
+  ...props
+}: ContainerProps) {
+  return (
+    <Comp
+      className={cn("mx-auto w-full px-6", className)}
+      style={{ maxWidth: "var(--container-max-width, 80rem)", ...style }}
+      {...props}
+    />
+  );
+}

components/logos/logos.tsx

@@ -1,3 +1,6 @@
+import { Container } from "@/components/layout/Container";
+import { Typography } from "@/components/Typography";
+
 export type LogosProps = {
   tagline: string;
   items: Array<{ src: string; alt: string }>;
@@ -7,11 +10,11 @@ export type LogosProps = {
 export function Logos({ tagline, items, layout }: LogosProps) {
   return (
     <section className="border-y border-border bg-muted/40 py-12">
-      <div className="container mx-auto max-w-7xl px-6">
+      <Container>
         {tagline ? (
-          <p className="mb-8 text-center text-xs uppercase tracking-[0.2em] text-muted-foreground">
+          <Typography variant="caption" className="mb-8 text-center">
             {tagline}
-          </p>
+          </Typography>
         ) : null}
         {layout === "marquee" ? (
           <div className="overflow-hidden">
@@ -38,7 +41,7 @@ export function Logos({ tagline, items, layout }: LogosProps) {
             ))}
           </div>
         )}
-      </div>
+      </Container>
     </section>
   );
 }

components/navigation/navigation.editor.tsx

@@ -1,6 +1,8 @@
 import { ComponentConfig } from "@reacteditor/core";
 import { Menu as MenuIcon } from "lucide-react";
+import { imageField } from "@reacteditor/plugin-media/field";
 import { Navigation, type NavigationProps } from "@/components/navigation/navigation";
+import { frontendAiMediaAdapter } from "@/services/media-adapter";
 
 export const navigationEditor: ComponentConfig<NavigationProps> = {
   label: "Navigation",
@@ -9,21 +11,21 @@ export const navigationEditor: ComponentConfig<NavigationProps> = {
   global: true,
   defaultProps: {
     brand: "Maison",
+    logo: "",
     links: [
-      { label: "Shop", href: "/collections" },
+      { label: "Mens", href: "/collections/mens" },
-      { label: "Lookbook", href: "/lookbook" },
+      { label: "Womens", href: "/collections/womens" },
-      { label: "Journal", href: "/journal" },
+      { label: "Shop", href: "/search" },
       { label: "About", href: "/about" },
     ],
     showSearch: "yes",
     showCart: "yes",
     sticky: "yes",
     tone: "default",
-    bannerText: "",
-    bannerTone: "accent",
   },
   fields: {
-    brand: { label: "Brand", type: "text", contentEditable: true },
+    logo: { label: "Logo", ...imageField({ adapter: frontendAiMediaAdapter }) },
+    brand: { label: "Logo Alt", type: "text", contentEditable: true },
     links: {
       label: "Links",
       type: "array",
@@ -34,20 +36,6 @@ export const navigationEditor: ComponentConfig<NavigationProps> = {
         href: { label: "Link", type: "text" },
       },
     },
-    bannerText: {
-      label: "Banner text",
-      type: "text",
-      contentEditable: true,
-    },
-    bannerTone: {
-      label: "Banner tone",
-      type: "select",
-      options: [
-        { label: "Default", value: "default" },
-        { label: "Accent", value: "accent" },
-        { label: "Inverse (dark)", value: "inverse" },
-      ],
-    },
     showSearch: {
       label: "Search icon",
       type: "radio",

components/navigation/navigation.tsx

@@ -1,33 +1,32 @@
 import { Menu as MenuIcon, ShoppingBag, Search } from "lucide-react";
 import { useState } from "react";
-import { Link } from "react-router";
+import Link from "next/link";
 import { useShopifyCart } from "@/hooks/use-shopify-cart";
 import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/components/ui/sheet";
+import { Container } from "@/components/layout/Container";
+import { Typography } from "@/components/Typography";
 import { cn } from "@/lib/utils";
 
 export type NavigationProps = {
   brand: string;
+  logo?: string;
   links: Array<{ label: string; href: string }>;
   showSearch: "yes" | "no";
   showCart: "yes" | "no";
   sticky: "yes" | "no";
   tone: "default" | "muted" | "inverse";
-  bannerText: string;
-  bannerTone: "default" | "accent" | "inverse";
 };
 
 export function Navigation({
   brand,
+  logo,
   links,
   showSearch,
   showCart,
   sticky,
   tone,
-  bannerText,
-  bannerTone,
 }: NavigationProps) {
   const [mobileOpen, setMobileOpen] = useState(false);
-  const [cartOpen, setCartOpen] = useState(false);
   const cart = useShopifyCart();
   const itemCount = cart?.itemCount ?? 0;
 
@@ -37,14 +36,6 @@ export function Navigation({
     inverse: "bg-foreground text-background",
   };
 
-  const bannerToneClass: Record<NavigationProps["bannerTone"], string> = {
-    default: "bg-muted text-foreground",
-    accent: "bg-primary text-primary-foreground",
-    inverse: "bg-foreground text-background",
-  };
-
-  const hasBanner = typeof bannerText === "string" && bannerText.trim().length > 0;
-
   return (
     <>
       <div
@@ -53,13 +44,6 @@ export function Navigation({
           sticky === "yes" && "sticky top-0 z-40",
         )}
       >
-        {hasBanner && (
-          <div className={cn("w-full", bannerToneClass[bannerTone])}>
-            <div className="container mx-auto max-w-7xl px-6 py-2 text-center text-xs tracking-wide md:text-sm">
-              {bannerText}
-            </div>
-          </div>
-        )}
       <header
         className={cn(
           "w-full",
@@ -67,20 +51,26 @@ export function Navigation({
           toneClass[tone],
         )}
       >
-        <div className="container mx-auto flex h-16 max-w-7xl items-center justify-between px-6 md:h-20">
+        <Container className="flex h-16 items-center justify-between md:h-20">
-          <Link
+          <Link href="/" className="inline-flex items-center">
-            to="/"
+            {logo ? (
-            className="font-semibold tracking-tight"
+              <img
-            style={{ fontSize: "1.125rem", letterSpacing: "0.02em" }}
+                src={logo}
-          >
+                alt={brand || "Brand Logo"}
-            {brand}
+                className="h-8 w-auto object-contain"
+              />
+            ) : (
+              <Typography variant="h3" as="span">
+                {brand || "Brand Logo"}
+              </Typography>
+            )}
           </Link>
 
           <nav className="hidden items-center gap-8 md:flex">
             {links.map((l) => (
               <Link
                 key={l.href + l.label}
-                to={l.href}
+                href={l.href}
                 className="text-sm tracking-wide opacity-80 transition-opacity hover:opacity-100"
               >
                 {l.label}
@@ -90,16 +80,17 @@ export function Navigation({
 
           <div className="flex items-center gap-1">
             {showSearch === "yes" && (
-              <button
+              <Link
+                href="/search"
                 aria-label="Search"
                 className="hidden h-10 w-10 items-center justify-center rounded-full transition-colors hover:bg-foreground/5 md:inline-flex"
               >
                 <Search size={18} strokeWidth={1.5} />
-              </button>
+              </Link>
             )}
             {showCart === "yes" && (
               <button
-                onClick={() => setCartOpen(true)}
+                onClick={() => cart.openCart()}
                 aria-label="Cart"
                 className="relative inline-flex h-10 w-10 items-center justify-center rounded-full transition-colors hover:bg-foreground/5"
               >
@@ -119,7 +110,7 @@ export function Navigation({
               <MenuIcon size={20} strokeWidth={1.5} />
             </button>
           </div>
-        </div>
+        </Container>
       </header>
       </div>
 
@@ -129,11 +120,11 @@ export function Navigation({
           <SheetHeader>
             <SheetTitle className="text-left">{brand}</SheetTitle>
           </SheetHeader>
-          <nav className="mt-6 flex flex-col gap-1">
+          <nav className="mt-2 flex flex-col gap-1 px-4">
             {links.map((l) => (
               <Link
                 key={l.href + l.label}
-                to={l.href}
+                href={l.href}
                 className="rounded-md px-3 py-3 text-base hover:bg-muted"
               >
                 {l.label}
@@ -143,90 +134,6 @@ export function Navigation({
         </SheetContent>
       </Sheet>
 
-      {/* Cart drawer */}
-      <Sheet open={cartOpen} onOpenChange={setCartOpen}>
-        <SheetContent side="right" className="flex w-[92vw] max-w-md flex-col">
-          <SheetHeader>
-            <SheetTitle className="text-left">Cart</SheetTitle>
-          </SheetHeader>
-
-          <div className="-mx-6 mt-4 flex-1 overflow-y-auto px-6">
-            {cart?.items?.length ? (
-              <ul className="divide-y divide-border">
-                {cart.items.map((line: any) => (
-                  <li key={line.id} className="flex gap-4 py-4">
-                    <div className="aspect-square h-20 flex-shrink-0 overflow-hidden rounded-md bg-muted">
-                      {line.merchandise?.product?.images?.edges?.[0]?.node?.url ? (
-                        <img
-                          src={line.merchandise.product.images.edges[0].node.url}
-                          alt={line.merchandise.product.title}
-                          className="h-full w-full object-cover"
-                        />
-                      ) : null}
-                    </div>
-                    <div className="flex flex-1 flex-col">
-                      <p className="text-sm font-medium">{line.merchandise?.product?.title}</p>
-                      {line.merchandise?.title && line.merchandise.title !== "Default Title" ? (
-                        <p className="text-xs text-muted-foreground">{line.merchandise.title}</p>
-                      ) : null}
-                      <div className="mt-auto flex items-center justify-between">
-                        <div className="flex items-center gap-2 text-xs">
-                          <button
-                            onClick={() => cart.updateItemQuantity(line.id, line.quantity - 1)}
-                            className="h-6 w-6 rounded-full border border-border hover:bg-muted"
-                          >
-                            −
-                          </button>
-                          <span>{line.quantity}</span>
-                          <button
-                            onClick={() => cart.updateItemQuantity(line.id, line.quantity + 1)}
-                            className="h-6 w-6 rounded-full border border-border hover:bg-muted"
-                          >
-                            +
-                          </button>
-                        </div>
-                        <span className="text-sm">
-                          {line.merchandise?.price
-                            ? new Intl.NumberFormat("en-US", {
-                                style: "currency",
-                                currency: line.merchandise.price.currencyCode,
-                              }).format(parseFloat(line.merchandise.price.amount) * line.quantity)
-                            : null}
-                        </span>
-                      </div>
-                    </div>
-                  </li>
-                ))}
-              </ul>
-            ) : (
-              <div className="flex h-full flex-col items-center justify-center gap-3 text-center text-sm text-muted-foreground">
-                <ShoppingBag size={28} strokeWidth={1.25} />
-                <p>Your cart is empty.</p>
-              </div>
-            )}
-          </div>
-
-          {cart?.items?.length ? (
-            <div className="border-t border-border pt-4">
-              <div className="mb-4 flex items-center justify-between text-sm">
-                <span className="text-muted-foreground">Subtotal</span>
-                <span className="font-medium">
-                  {new Intl.NumberFormat("en-US", {
-                    style: "currency",
-                    currency: cart.cart?.cost?.totalAmount?.currencyCode ?? "USD",
-                  }).format(cart.totalAmount)}
-                </span>
-              </div>
-              <a
-                href={cart.checkoutUrl ?? "#"}
-                className="inline-flex w-full items-center justify-center rounded-full bg-foreground px-4 py-3 text-sm font-medium text-background transition-opacity hover:opacity-90"
-              >
-                Checkout
-              </a>
-            </div>
-          ) : null}
-        </SheetContent>
-      </Sheet>
     </>
   );
 }

components/testimonials/testimonials.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { ArrowLeft, ArrowRight } from "lucide-react";
-import { Typography } from "@/components/Typography";
+import { Heading } from "@/components/Heading";
 
 export type TestimonialsProps = {
   tagline: string;
@@ -21,15 +21,26 @@ export function Testimonials({ tagline, heading, items }: TestimonialsProps) {
   return (
     <section className="bg-muted/40 py-20 md:py-28">
       <div className="container mx-auto max-w-4xl px-6 text-center">
-        {tagline ? (
+        <Heading
-          <p className="mb-3 text-xs uppercase tracking-[0.2em] text-muted-foreground">
+          tagline={tagline}
-            {tagline}
+          title={heading}
-          </p>
+          align="center"
-        ) : null}
+          size="lg"
-        {heading ? <Typography variant="h2">{heading}</Typography> : null}
+        />
 
         {item ? (
-          <figure className="mx-auto mt-12 flex max-w-2xl flex-col items-center">
+          <div className="relative mt-12">
+            {total > 1 ? (
+              <button
+                onClick={() => setI((p) => (p - 1 + total) % total)}
+                className="absolute left-0 top-1/2 hidden -translate-y-1/2 items-center justify-center rounded-full border h-10 w-10 hover:bg-background md:inline-flex"
+                aria-label="Previous"
+              >
+                <ArrowLeft size={16} />
+              </button>
+            ) : null}
+
+            <figure className="mx-auto flex max-w-2xl flex-col items-center px-12 md:px-16">
               <blockquote
                 className="text-balance text-foreground"
                 style={{ fontSize: "clamp(1.25rem, 2.4vw, 1.75rem)", lineHeight: 1.4 }}
@@ -52,23 +63,29 @@ export function Testimonials({ tagline, heading, items }: TestimonialsProps) {
                 </div>
               </figcaption>
             </figure>
+
+            {total > 1 ? (
+              <button
+                onClick={() => setI((p) => (p + 1) % total)}
+                className="absolute right-0 top-1/2 hidden -translate-y-1/2 items-center justify-center rounded-full border h-10 w-10 hover:bg-background md:inline-flex"
+                aria-label="Next"
+              >
+                <ArrowRight size={16} />
+              </button>
             ) : null}
 
             {total > 1 ? (
-          <div className="mt-10 flex items-center justify-center gap-3">
+              <div className="mt-8 flex items-center justify-center gap-3 md:hidden">
                 <button
                   onClick={() => setI((p) => (p - 1 + total) % total)}
-              className="inline-flex h-10 w-10 items-center justify-center rounded-full border border-border hover:bg-background"
+                  className="inline-flex h-10 w-10 items-center justify-center rounded-full border hover:bg-background"
                   aria-label="Previous"
                 >
                   <ArrowLeft size={16} />
                 </button>
-            <span className="text-xs tabular-nums text-muted-foreground">
-              {i + 1} / {total}
-            </span>
                 <button
                   onClick={() => setI((p) => (p + 1) % total)}
-              className="inline-flex h-10 w-10 items-center justify-center rounded-full border border-border hover:bg-background"
+                  className="inline-flex h-10 w-10 items-center justify-center rounded-full border hover:bg-background"
                   aria-label="Next"
                 >
                   <ArrowRight size={16} />
@@ -76,6 +93,8 @@ export function Testimonials({ tagline, heading, items }: TestimonialsProps) {
               </div>
             ) : null}
           </div>
+        ) : null}
+      </div>
     </section>
   );
 }

components/ui/button.tsx

@@ -22,8 +22,8 @@ const buttonVariants = cva(
       },
       size: {
         default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        sm: "h-8 rounded-md px-3 has-[>svg]:px-2.5",
+        sm: "h-8 px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        lg: "h-10 px-6 has-[>svg]:px-4",
         icon: "size-9",
       },
     },

components/ui/select.tsx

@@ -104,7 +104,7 @@ function SelectTrigger({
       data-slot="select-trigger"
       onClick={() => setOpen(!open)}
       className={cn(
-        'border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*="text-"])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 h-9 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*="size-"])]:size-4',
+        'border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*="text-"])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-full min-w-[10rem] items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 h-9 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*="size-"])]:size-4',
         className
       )}
       {...props}

components/ui/sheet.tsx

@@ -1,303 +1,134 @@
-"use client";
+"use client"
 
-import React, { useState, useCallback, useContext, createContext } from 'react';
+import * as React from "react"
-import { createPortal } from 'react-dom';
+import * as SheetPrimitive from "@radix-ui/react-dialog"
-import { motion, AnimatePresence } from 'framer-motion';
+import { XIcon } from "lucide-react"
-import { cn } from '@/lib/utils';
 
-interface SheetContextType {
+import { cn } from "@/lib/utils"
-  open: boolean;
+
-  setOpen: (open: boolean) => void;
+function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
-  side: 'top' | 'right' | 'bottom' | 'left';
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />
 }
 
-const SheetContext = createContext<SheetContextType | undefined>(undefined);
+function SheetTrigger({
-
+  ...props
-function useSheet() {
+}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
-  const context = useContext(SheetContext);
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
-  if (!context) {
-    throw new Error('Sheet components must be used within a Sheet');
-  }
-  return context;
 }
 
-interface SheetProps {
+function SheetClose({
-  open?: boolean;
+  ...props
-  onOpenChange?: (open: boolean) => void;
+}: React.ComponentProps<typeof SheetPrimitive.Close>) {
-  children: React.ReactNode;
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
-  side?: 'top' | 'right' | 'bottom' | 'left';
 }
 
-function Sheet({
+function SheetPortal({
-  open: controlledOpen,
+  ...props
-  onOpenChange,
+}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
-  children,
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
-  side = 'right',
-}: SheetProps) {
-  const [internalOpen, setInternalOpen] = useState(false);
-  const isControlled = controlledOpen !== undefined;
-  const open = isControlled ? controlledOpen : internalOpen;
-
-  const setOpen = useCallback(
-    (newOpen: boolean) => {
-      if (!isControlled) {
-        setInternalOpen(newOpen);
-      }
-      onOpenChange?.(newOpen);
-    },
-    [isControlled, onOpenChange]
-  );
-
-  return (
-    <SheetContext.Provider value={{ open, setOpen, side }}>
-      {children}
-    </SheetContext.Provider>
-  );
-}
-
-function SheetTrigger(
-  props: React.ButtonHTMLAttributes<HTMLButtonElement> & { asChild?: boolean }
-) {
-  const { setOpen } = useSheet();
-  const { children, asChild, ...rest } = props;
-
-  if (asChild && React.isValidElement(children)) {
-    return React.cloneElement(children as React.ReactElement, {
-      ...rest,
-      onClick: (e: React.MouseEvent) => {
-        setOpen(true);
-        children.props.onClick?.(e);
-      },
-    });
-  }
-
-  return (
-    <button
-      data-slot="sheet-trigger"
-      {...rest}
-      onClick={(e) => {
-        setOpen(true);
-        props.onClick?.(e);
-      }}
-    >
-      {children}
-    </button>
-  );
-}
-
-function SheetPortal({ children }: { children: React.ReactNode }) {
-  if (typeof document === 'undefined') return null;
-  return createPortal(children, document.body);
 }
 
 function SheetOverlay({
   className,
-  onClick,
   ...props
-}: React.HTMLAttributes<HTMLDivElement>) {
+}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
-  const { setOpen } = useSheet();
-
   return (
-    <motion.div
+    <SheetPrimitive.Overlay
       data-slot="sheet-overlay"
-      className={cn('fixed inset-0 z-50 bg-black/50', className)}
+      className={cn(
-      initial={{ opacity: 0 }}
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
-      animate={{ opacity: 1 }}
+        className
-      exit={{ opacity: 0 }}
+      )}
-      transition={{ duration: 0.3 }}
-      onClick={(e) => {
-        setOpen(false);
-        onClick?.(e);
-      }}
       {...props}
     />
-  );
+  )
-}
-
-interface SheetContentProps extends React.HTMLAttributes<HTMLDivElement> {
-  showCloseButton?: boolean;
 }
 
 function SheetContent({
   className,
   children,
+  side = "right",
   showCloseButton = true,
   ...props
-}: SheetContentProps) {
+}: React.ComponentProps<typeof SheetPrimitive.Content> & {
-  const { open, setOpen, side } = useSheet();
+  side?: "top" | "right" | "bottom" | "left"
-
+  showCloseButton?: boolean
-  const sideClasses = {
+}) {
-    right: 'inset-y-0 right-0 h-full w-3/4 sm:max-w-sm border-l',
-    left: 'inset-y-0 left-0 h-full w-3/4 sm:max-w-sm border-r',
-    top: 'inset-x-0 top-0 h-auto border-b',
-    bottom: 'inset-x-0 bottom-0 h-auto border-t',
-  };
-
-  const slideVariants = {
-    right: {
-      initial: { x: 400, opacity: 0 },
-      animate: { x: 0, opacity: 1 },
-      exit: { x: 400, opacity: 0 },
-    },
-    left: {
-      initial: { x: -400, opacity: 0 },
-      animate: { x: 0, opacity: 1 },
-      exit: { x: -400, opacity: 0 },
-    },
-    top: {
-      initial: { y: -400, opacity: 0 },
-      animate: { y: 0, opacity: 1 },
-      exit: { y: -400, opacity: 0 },
-    },
-    bottom: {
-      initial: { y: 400, opacity: 0 },
-      animate: { y: 0, opacity: 1 },
-      exit: { y: 400, opacity: 0 },
-    },
-  };
-
   return (
     <SheetPortal>
-      <AnimatePresence>
-        {open ? (
-          <>
       <SheetOverlay />
-            <motion.div
+      <SheetPrimitive.Content
         data-slot="sheet-content"
         className={cn(
-                'bg-background fixed z-50 flex flex-col gap-0 shadow-lg',
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
-                sideClasses[side],
+          side === "right" &&
-                className,
+            "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+          side === "left" &&
+            "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+          side === "top" &&
+            "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
+          side === "bottom" &&
+            "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
+          className
         )}
-              variants={slideVariants[side]}
-              initial="initial"
-              animate="animate"
-              exit="exit"
-              transition={{ type: 'spring', stiffness: 300, damping: 30 }}
         {...props}
       >
         {children}
         {showCloseButton && (
-                <button
+          <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
-                  data-slot="sheet-close"
+            <XIcon className="size-4" />
-                  onClick={() => setOpen(false)}
+            <span className="sr-only">Close</span>
-                  className="absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none"
+          </SheetPrimitive.Close>
-                  aria-label="Close"
-                >
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="24"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    strokeWidth="2"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    className="size-4"
-                  >
-                    <path d="M18 6l-12 12M6 6l12 12" />
-                  </svg>
-                </button>
         )}
-            </motion.div>
+      </SheetPrimitive.Content>
-          </>
-        ) : null}
-      </AnimatePresence>
     </SheetPortal>
-  );
+  )
 }
 
-function SheetClose(
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
-  props: React.ButtonHTMLAttributes<HTMLButtonElement> & { asChild?: boolean }
-) {
-  const { setOpen } = useSheet();
-  const { children, asChild, ...rest } = props;
-
-  if (asChild && React.isValidElement(children)) {
-    return React.cloneElement(children as React.ReactElement, {
-      ...rest,
-      onClick: (e: React.MouseEvent) => {
-        setOpen(false);
-        children.props.onClick?.(e);
-      },
-    });
-  }
-
-  return (
-    <button
-      data-slot="sheet-close"
-      {...rest}
-      onClick={(e) => {
-        setOpen(false);
-        props.onClick?.(e);
-      }}
-    >
-      {children}
-    </button>
-  );
-}
-
-function SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="sheet-header"
-      className={cn(
+      className={cn("flex flex-col gap-1.5 p-4", className)}
-        'flex flex-col gap-1.5 p-6 border-b border-border',
-        className
-      )}
       {...props}
     />
-  );
+  )
 }
 
-function SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="sheet-footer"
-      className={cn(
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
-        'flex flex-col-reverse gap-2 p-6 border-t border-border sm:flex-row sm:justify-end',
-        className
-      )}
       {...props}
     />
-  );
+  )
 }
 
-function SheetTitle({ className, ...props }: React.ComponentProps<'h2'>) {
+function SheetTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Title>) {
   return (
-    <h2
+    <SheetPrimitive.Title
       data-slot="sheet-title"
-      className={cn('text-lg leading-none font-semibold', className)}
+      className={cn("text-foreground font-semibold", className)}
       {...props}
     />
-  );
+  )
 }
 
-function SheetDescription({ className, ...props }: React.ComponentProps<'p'>) {
+function SheetDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Description>) {
   return (
-    <p
+    <SheetPrimitive.Description
       data-slot="sheet-description"
-      className={cn('text-muted-foreground text-sm', className)}
+      className={cn("text-muted-foreground text-sm", className)}
       {...props}
     />
-  );
+  )
-}
-
-interface SheetBodyProps extends React.HTMLAttributes<HTMLDivElement> {
-  children: React.ReactNode;
-}
-
-function SheetBody({ className, children, ...props }: SheetBodyProps) {
-  return (
-    <div
-      data-slot="sheet-body"
-      className={cn('flex-1 overflow-y-auto px-6 py-4', className)}
-      {...props}
-    >
-      {children}
-    </div>
-  );
 }
 
 export {
@@ -309,8 +140,4 @@ export {
   SheetFooter,
   SheetTitle,
   SheetDescription,
-  SheetBody,
+}
-  SheetPortal,
-  SheetOverlay,
-  AnimatePresence,
-};

config/configs.ts

@@ -0,0 +1,108 @@
+import {
+  createFieldShopifyProduct,
+  createFieldShopifyCollection,
+} from "@reacteditor/field-shopify";
+
+import { navigationEditor } from "@/components/navigation/navigation.editor";
+import { footerEditor } from "@/components/footer/footer.editor";
+
+import { heroEditor } from "@/components/hero/hero.editor";
+import { bannerEditor } from "@/components/landing/banner.editor";
+
+import { createFeaturedProductEditor } from "@/components/commerce/featured-product.editor";
+import { createProductsGridEditor } from "@/components/commerce/products-grid.editor";
+import { createProductsCarouselEditor } from "@/components/commerce/products-carousel.editor";
+import { collectionGridEditor } from "@/components/commerce/collection-grid.editor";
+import { createCollectionEditor } from "@/components/commerce/collection.editor";
+import { createProductDetailsEditor } from "@/components/commerce/product-details.editor";
+import { createRecommendedProductsEditor } from "@/components/commerce/recommended-products.editor";
+import { searchProductsEditor } from "@/components/commerce/search-products.editor";
+
+import { featuresEditor } from "@/components/features/features.editor";
+import { testimonialsEditor } from "@/components/testimonials/testimonials.editor";
+import { imageGalleryEditor } from "@/components/landing/image-gallery.editor";
+import { newsletterCtaEditor } from "@/components/landing/newsletter-cta.editor";
+import { logosEditor } from "@/components/logos/logos.editor";
+import { ctaEditor } from "@/components/cta/cta.editor";
+import { faqEditor } from "@/components/faq/faq.editor";
+
+import Root from "@/config/root";
+import type { UserConfig } from "@/config/types";
+
+const SHOPIFY_DOMAIN =
+  process.env.NEXT_PUBLIC_SHOPIFY_DOMAIN ?? "mock.shop";
+const STOREFRONT_TOKEN =
+  process.env.NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN ?? "";
+
+const productField = createFieldShopifyProduct({
+  storeDomain: SHOPIFY_DOMAIN,
+  storefrontAccessToken: STOREFRONT_TOKEN || undefined,
+}) as any;
+
+const collectionField = createFieldShopifyCollection({
+  storeDomain: SHOPIFY_DOMAIN,
+  storefrontAccessToken: STOREFRONT_TOKEN || undefined,
+}) as any;
+
+const categories = {
+  navigation: { title: "Navigation" },
+  hero: { title: "Hero & Banners" },
+  commerce: { title: "Commerce" },
+  content: { title: "Content" },
+  footer: { title: "Footer" },
+};
+
+const sharedComponents = {
+  navigation: navigationEditor,
+  footer: footerEditor,
+};
+
+export const homeConfig: UserConfig = {
+  root: Root,
+  categories,
+  components: {
+    ...sharedComponents,
+    hero: heroEditor,
+    banner: bannerEditor,
+    "featured-product": createFeaturedProductEditor({ productField }),
+    "products-grid": createProductsGridEditor({ collectionField }),
+    "products-carousel": createProductsCarouselEditor({ collectionField }),
+    "collection-grid": collectionGridEditor,
+    features: featuresEditor,
+    testimonials: testimonialsEditor,
+    "image-gallery": imageGalleryEditor,
+    "newsletter-cta": newsletterCtaEditor,
+    logos: logosEditor,
+    cta: ctaEditor,
+    faq: faqEditor,
+  } as any,
+};
+
+export const productConfig: UserConfig = {
+  root: Root,
+  categories,
+  components: {
+    ...sharedComponents,
+    "product-details": createProductDetailsEditor({ productField }),
+    "recommended-products": createRecommendedProductsEditor({ productField }),
+    "products-carousel": createProductsCarouselEditor({ collectionField }),
+  } as any,
+};
+
+export const collectionsConfig: UserConfig = {
+  root: Root,
+  categories,
+  components: {
+    ...sharedComponents,
+    collection: createCollectionEditor({ collectionField }),
+  } as any,
+};
+
+export const searchConfig: UserConfig = {
+  root: Root,
+  categories,
+  components: {
+    ...sharedComponents,
+    "search-products": searchProductsEditor,
+  } as any,
+};

config/root.tsx

@@ -22,6 +22,7 @@ export const Root: RootConfig<{
   defaultProps: {
     title: "Untitled",
     headerFont: "Inter",
+    headerFontWeight: "600",
     bodyFont: "Inter",
     // Hex defaults so the color picker reads them and any non-picker
     // input (typed hex, AI-set value, etc.) is round-trip compatible.
@@ -31,17 +32,28 @@ export const Root: RootConfig<{
     bgColor: "#ffffff",
     fgColor: "#0a0a0a",
     mutedColor: "#f5f5f5",
-    roundedness: "md",
     radius: "md",
-    shadowLevel: "sm",
     shadow: "sm",
-    maxWidth: "xl",
+    maxWidth: "lg",
   },
   fields: {
     title: { label: "Page title", type: "text" },
     description: { label: "Description", type: "textarea" },
     ogImage: { label: "OG image", ...imageField({ adapter: frontendAiMediaAdapter }) },
     headerFont: { label: "Header font", ...headerFontField },
+    headerFontWeight: {
+      label: "Header font weight",
+      type: "select",
+      options: [
+        { label: "300 — Light", value: "300" },
+        { label: "400 — Regular", value: "400" },
+        { label: "500 — Medium", value: "500" },
+        { label: "600 — Semibold", value: "600" },
+        { label: "700 — Bold", value: "700" },
+        { label: "800 — Extrabold", value: "800" },
+        { label: "900 — Black", value: "900" },
+      ],
+    },
     bodyFont: { label: "Body font", ...bodyFontField },
     primaryColor: { label: "Primary color", type: "color", placeholder: "#0a0a0a" },
     secondaryColor: { label: "Secondary color", type: "color", placeholder: "#64748B" },
@@ -49,34 +61,11 @@ export const Root: RootConfig<{
     bgColor: { label: "Background color", type: "color", placeholder: "#ffffff" },
     fgColor: { label: "Foreground color", type: "color", placeholder: "#0a0a0a" },
     mutedColor: { label: "Muted color", type: "color", placeholder: "#f5f5f5" },
-    roundedness: {
-      label: "Roundedness",
-      type: "select",
-      options: [
-        { label: "None", value: "none" },
-        { label: "Small", value: "sm" },
-        { label: "Medium", value: "md" },
-        { label: "Large", value: "lg" },
-        { label: "Extra large", value: "xl" },
-        { label: "Full (pill)", value: "full" },
-      ],
-    },
     radius: {
       label: "Radius",
       type: "select",
       options: [
-        { label: "None", value: "none" },
+        { label: "None (square)", value: "none" },
-        { label: "Extra small", value: "xs" },
-        { label: "Small", value: "sm" },
-        { label: "Medium", value: "md" },
-        { label: "Large", value: "lg" },
-      ],
-    },
-    shadowLevel: {
-      label: "Shadow level",
-      type: "select",
-      options: [
-        { label: "None", value: "none" },
         { label: "Small", value: "sm" },
         { label: "Medium", value: "md" },
         { label: "Large", value: "lg" },
@@ -91,6 +80,7 @@ export const Root: RootConfig<{
         { label: "Small", value: "sm" },
         { label: "Medium", value: "md" },
         { label: "Large", value: "lg" },
+        { label: "Extra large", value: "xl" },
       ],
     },
     maxWidth: {
@@ -101,7 +91,6 @@ export const Root: RootConfig<{
         { label: "Medium", value: "md" },
         { label: "Large", value: "lg" },
         { label: "Extra large", value: "xl" },
-        { label: "2X large", value: "2xl" },
         { label: "Full bleed", value: "full" },
       ],
     },
@@ -109,6 +98,7 @@ export const Root: RootConfig<{
   render: ({
     children,
     headerFont,
+    headerFontWeight,
     bodyFont,
     primaryColor,
     secondaryColor,
@@ -116,14 +106,14 @@ export const Root: RootConfig<{
     bgColor,
     fgColor,
     mutedColor,
-    roundedness,
     radius,
-    shadowLevel,
     shadow,
+    maxWidth,
   }) => {
     return (
       <ThemeProvider
         headerFont={headerFont}
+        headerFontWeight={headerFontWeight}
         bodyFont={bodyFont}
         primaryColor={primaryColor}
         secondaryColor={secondaryColor}
@@ -131,10 +121,9 @@ export const Root: RootConfig<{
         bgColor={bgColor}
         fgColor={fgColor}
         mutedColor={mutedColor}
-        roundedness={roundedness}
         radius={radius}
-        shadowLevel={shadowLevel}
         shadow={shadow}
+        maxWidth={maxWidth}
       >
         {children}
       </ThemeProvider>

contexts/shopify-context.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import React, { createContext, useContext, useState, useCallback, useEffect, useMemo } from 'react';
+import { ShoppingBag } from 'lucide-react';
 import {
   createCart,
   getCart,
@@ -9,6 +10,8 @@ import {
   updateCartLines,
 } from '@/hooks/use-shopify-cart';
 import { setShopifyCredentials } from '@/services/shopify/client';
+import CartDrawer from '@/components/commerce/cart-drawer';
+import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet';
 
 const CART_ID_KEY = 'cartId';
 
@@ -200,6 +203,7 @@ export const ShopifyProvider: React.FC<{
       ]);
 
       setCart(updatedCart);
+      setIsOpen(true);
       return updatedCart;
     } catch (err) {
       const errorMessage = err instanceof Error ? err.message : 'Failed to add item to cart';
@@ -284,6 +288,7 @@ export const ShopifyProvider: React.FC<{
         refreshCart,
       }}>
         {children}
+        <CartDrawer />
       </CartContext.Provider>
     </ShopifyConfigContext.Provider>
   );

graphql/collections.js

@@ -31,7 +31,7 @@ export const GET_COLLECTIONS_QUERY = `
 // Get products in a collection
 export const GET_COLLECTION_PRODUCTS_QUERY = `
   ${ProductFragment}
-  query GetCollectionProducts($handle: String!, $first: Int!, $sortKey: ProductCollectionSortKeys, $reverse: Boolean) {
+  query GetCollectionProducts($handle: String!, $first: Int!, $sortKey: ProductCollectionSortKeys, $reverse: Boolean, $filters: [ProductFilter!], $after: String) {
     collection(handle: $handle) {
       id
       title
@@ -45,7 +45,7 @@ export const GET_COLLECTION_PRODUCTS_QUERY = `
         width
         height
       }
-      products(first: $first, sortKey: $sortKey, reverse: $reverse) {
+      products(first: $first, sortKey: $sortKey, reverse: $reverse, filters: $filters, after: $after) {
         edges {
           node {
             ...ProductFragment

graphql/products.js

@@ -105,6 +105,30 @@ export const GET_PRODUCT_QUERY = `
   }
 `;
 
+// Search products with cursor-based pagination and full filter support
+export const GET_SEARCH_QUERY = `
+  ${ProductFragment}
+  query SearchProducts(
+    $first: Int!
+    $query: String
+    $sortKey: ProductSortKeys
+    $reverse: Boolean
+    $after: String
+  ) {
+    products(first: $first, query: $query, sortKey: $sortKey, reverse: $reverse, after: $after) {
+      edges {
+        node {
+          ...ProductFragment
+        }
+      }
+      pageInfo {
+        hasNextPage
+        endCursor
+      }
+    }
+  }
+`;
+
 // Get product recommendations
 export const QUERY_PRODUCT_RECOMMENDATIONS = `
   ${ProductFragment}

hooks/use-shopify-collections.ts

@@ -26,10 +26,23 @@ export interface CollectionWithProducts extends Collection {
   products: Product[];
 }
 
+export type CollectionSortKey = 'BEST_SELLING' | 'CREATED' | 'PRICE' | 'TITLE';
+
+export interface ProductFilter {
+  available?: boolean;
+  price?: { min?: number; max?: number };
+  productType?: string;
+  productVendor?: string;
+  tag?: string;
+  variantOption?: { name: string; value: string };
+  productMetafield?: { namespace: string; key: string; value: string };
+}
+
 interface UseCollectionProductsOptions {
   first?: number;
-  sortKey?: 'BEST_SELLING' | 'CREATED' | 'PRICE' | 'TITLE';
+  sortKey?: CollectionSortKey;
   reverse?: boolean;
+  filters?: ProductFilter[];
 }
 
 // Fetch all collections
@@ -45,19 +58,24 @@ export async function getCollections(first = 50): Promise<Collection[]> {
 // Fetch products in a collection by handle
 export async function getCollectionProducts(
   handle: string,
-  { first = 50, sortKey = 'BEST_SELLING', reverse = false }: UseCollectionProductsOptions = {}
+  { first = 50, sortKey = 'BEST_SELLING', reverse = false, filters }: UseCollectionProductsOptions = {},
-): Promise<CollectionWithProducts | null> {
+  after?: string | null,
+): Promise<{ collection: CollectionWithProducts; hasNextPage: boolean; endCursor: string | null } | null> {
   const response = await shopifyFetch({
     query: GET_COLLECTION_PRODUCTS_QUERY,
-    variables: { handle, first, sortKey, reverse },
+    variables: { handle, first, sortKey, reverse, filters: filters?.length ? filters : undefined, after: after ?? null },
   });
 
   const collection = response.data.collection;
   if (!collection) return null;
 
   return {
+    collection: {
       ...collection,
       products: collection.products.edges.map((edge: { node: Product }) => edge.node),
+    },
+    hasNextPage: collection.products.pageInfo.hasNextPage,
+    endCursor: collection.products.pageInfo.endCursor,
   };
 }
 
@@ -96,6 +114,10 @@ export function useCollectionProducts(
   const [collection, setCollection] = useState<CollectionWithProducts | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const [hasNextPage, setHasNextPage] = useState(false);
+  const [cursor, setCursor] = useState<string | null>(null);
+
+  const filtersKey = JSON.stringify(options.filters ?? []);
 
   const fetchCollection = useCallback(async () => {
     if (!handle) {
@@ -106,10 +128,14 @@ export function useCollectionProducts(
     try {
       setLoading(true);
       setError(null);
-      const data = await getCollectionProducts(handle, options);
+      const result = await getCollectionProducts(handle, options);
-      setCollection(data);
+      if (!result) {
-      if (!data) {
+        setCollection(null);
         setError('Collection not found');
+      } else {
+        setCollection(result.collection);
+        setHasNextPage(result.hasNextPage);
+        setCursor(result.endCursor);
       }
     } catch (err) {
       console.error('Error fetching collection products:', err);
@@ -117,11 +143,32 @@ export function useCollectionProducts(
     } finally {
       setLoading(false);
     }
-  }, [handle, options.first, options.sortKey, options.reverse]);
+  }, [handle, options.first, options.sortKey, options.reverse, filtersKey]);
 
   useEffect(() => {
     fetchCollection();
   }, [fetchCollection]);
 
-  return { collection, loading, error, refetch: fetchCollection };
+  const fetchMore = useCallback(async () => {
+    if (!handle || !cursor || !hasNextPage || loading) return;
+    setLoading(true);
+    try {
+      const result = await getCollectionProducts(handle, options, cursor);
+      if (result) {
+        setCollection((prev) =>
+          prev
+            ? { ...prev, products: [...prev.products, ...result.collection.products] }
+            : result.collection
+        );
+        setHasNextPage(result.hasNextPage);
+        setCursor(result.endCursor);
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Load more failed');
+    } finally {
+      setLoading(false);
+    }
+  }, [handle, cursor, hasNextPage, loading, options.first, options.sortKey, options.reverse, filtersKey]);
+
+  return { collection, loading, error, hasNextPage, fetchMore, refetch: fetchCollection };
 }

hooks/use-shopify-products.ts

@@ -42,6 +42,10 @@ export interface Product {
   description?: string;
   descriptionHtml?: string;
   handle: string;
+  vendor?: string;
+  productType?: string;
+  tags?: string[];
+  availableForSale?: boolean;
   images: {
     edges: Array<{
       node: ProductImage;

hooks/use-shopify-search.ts

@@ -0,0 +1,178 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { shopifyFetch } from '@/services/shopify/client';
+import { GET_SEARCH_QUERY } from '@/graphql/products';
+import type { Product } from '@/hooks/use-shopify-products';
+
+export type SortOption =
+  | 'RELEVANCE'
+  | 'BEST_SELLING'
+  | 'NEWEST'
+  | 'PRICE_ASC'
+  | 'PRICE_DESC'
+  | 'TITLE_ASC';
+
+export interface SearchFilters {
+  q?: string;
+  availability?: boolean;
+  productTypes?: string[];
+  vendors?: string[];
+  tags?: string[];
+  colors?: string[];
+  styles?: string[];
+  sizes?: string[];
+  materials?: string[];
+  minPrice?: number | null;
+  maxPrice?: number | null;
+  metafields?: { namespace: string; key: string; value: string }[];
+  sort?: SortOption;
+}
+
+export interface SearchFacets {
+  productTypes: string[];
+  vendors: string[];
+  tags: string[];
+}
+
+function resolveSortKey(sort: SortOption): { sortKey: string; reverse: boolean } {
+  switch (sort) {
+    case 'BEST_SELLING': return { sortKey: 'BEST_SELLING', reverse: false };
+    case 'NEWEST':       return { sortKey: 'CREATED_AT',   reverse: true  };
+    case 'PRICE_ASC':    return { sortKey: 'PRICE',        reverse: false };
+    case 'PRICE_DESC':   return { sortKey: 'PRICE',        reverse: true  };
+    case 'TITLE_ASC':    return { sortKey: 'TITLE',        reverse: false };
+    default:             return { sortKey: 'RELEVANCE',    reverse: false };
+  }
+}
+
+export function buildShopifyQuery(filters: SearchFilters): string {
+  const parts: string[] = [];
+
+  if (filters.q?.trim()) parts.push(filters.q.trim());
+
+  if (filters.availability === true) parts.push('available_for_sale:true');
+
+  if (filters.productTypes?.length) {
+    const clause = filters.productTypes.map((t) => `product_type:"${t}"`).join(' OR ');
+    parts.push(filters.productTypes.length > 1 ? `(${clause})` : clause);
+  }
+
+  if (filters.vendors?.length) {
+    const clause = filters.vendors.map((v) => `vendor:"${v}"`).join(' OR ');
+    parts.push(filters.vendors.length > 1 ? `(${clause})` : clause);
+  }
+
+  if (filters.tags?.length) {
+    const clause = filters.tags.map((t) => `tag:"${t}"`).join(' OR ');
+    parts.push(filters.tags.length > 1 ? `(${clause})` : clause);
+  }
+
+  for (const [option, values] of [
+    ['color', filters.colors],
+    ['style', filters.styles],
+    ['size', filters.sizes],
+    ['material', filters.materials],
+  ] as const) {
+    if (values?.length) {
+      const clause = values.map((v) => `variant.option.${option}:"${v}"`).join(' OR ');
+      parts.push(values.length > 1 ? `(${clause})` : clause);
+    }
+  }
+
+  if (filters.minPrice != null) parts.push(`variants.price:>=${filters.minPrice}`);
+  if (filters.maxPrice != null) parts.push(`variants.price:<=${filters.maxPrice}`);
+
+  if (filters.metafields?.length) {
+    for (const mf of filters.metafields) {
+      parts.push(`metafield.${mf.namespace}.${mf.key}:"${mf.value}"`);
+    }
+  }
+
+  return parts.join(' ');
+}
+
+async function fetchProducts(vars: {
+  first: number;
+  query: string;
+  sortKey: string;
+  reverse: boolean;
+  after?: string | null;
+}) {
+  const res = await shopifyFetch({
+    query: GET_SEARCH_QUERY,
+    variables: { first: vars.first, query: vars.query, sortKey: vars.sortKey, reverse: vars.reverse, after: vars.after ?? null },
+  });
+  return {
+    products: res.data.products.edges.map((e: { node: Product }) => e.node) as Product[],
+    hasNextPage: res.data.products.pageInfo.hasNextPage as boolean,
+    endCursor: res.data.products.pageInfo.endCursor as string | null,
+  };
+}
+
+export function useShopifySearch(filters: SearchFilters, { first = 24 }: { first?: number } = {}) {
+  const [products, setProducts] = useState<Product[]>([]);
+  const [facets, setFacets] = useState<SearchFacets>({ productTypes: [], vendors: [], tags: [] });
+  const [loading, setLoading] = useState(true);
+  const [hasNextPage, setHasNextPage] = useState(false);
+  const [cursor, setCursor] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const textQuery = filters.q?.trim() ?? '';
+  const productQuery = buildShopifyQuery(filters);
+  const { sortKey, reverse } = resolveSortKey(filters.sort ?? 'RELEVANCE');
+
+  // Fetch facets from unfiltered (text-only) result so sidebar options don't narrow
+  useEffect(() => {
+    let cancelled = false;
+    fetchProducts({ first: 100, query: textQuery, sortKey: 'RELEVANCE', reverse: false })
+      .then(({ products: p }) => {
+        if (cancelled) return;
+        setFacets({
+          productTypes: [...new Set(p.map((x) => x.productType).filter(Boolean))].sort() as string[],
+          vendors:      [...new Set(p.map((x) => x.vendor).filter(Boolean))].sort() as string[],
+          tags:         [...new Set(p.flatMap((x) => x.tags ?? []))].sort() as string[],
+        });
+      })
+      .catch(() => {});
+    return () => { cancelled = true; };
+  }, [textQuery]);
+
+  // Fetch products with all active filters
+  useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    setError(null);
+    fetchProducts({ first, query: productQuery, sortKey, reverse })
+      .then(({ products: p, hasNextPage: hnp, endCursor: ec }) => {
+        if (cancelled) return;
+        setProducts(p);
+        setHasNextPage(hnp);
+        setCursor(ec);
+      })
+      .catch((e) => {
+        if (!cancelled) setError(e instanceof Error ? e.message : 'Search failed');
+      })
+      .finally(() => { if (!cancelled) setLoading(false); });
+    return () => { cancelled = true; };
+  }, [productQuery, sortKey, reverse, first]);
+
+  const fetchMore = async () => {
+    if (!cursor || !hasNextPage || loading) return;
+    setLoading(true);
+    try {
+      const { products: more, hasNextPage: hnp, endCursor: ec } = await fetchProducts({
+        first, query: productQuery, sortKey, reverse, after: cursor,
+      });
+      setProducts((prev) => [...prev, ...more]);
+      setHasNextPage(hnp);
+      setCursor(ec);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Load more failed');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return { products, facets, loading, error, hasNextPage, fetchMore };
+}

index.html

@@ -1,21 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>React Editor — Shopify Demo</title>
-    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
-    <link
-      rel="stylesheet"
-      href="https://esm.sh/@reacteditor/core@0.0.10/dist/index.css"
-    />
-    <link
-      rel="stylesheet"
-      href="https://esm.sh/@reacteditor/plugin-ai@0.0.3/styles.css"
-    />
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>

next-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+import "./.next/dev/types/routes.d.ts";
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

next.config.ts

@@ -0,0 +1,10 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  reactStrictMode: true,
+  typescript: {
+    ignoreBuildErrors: true,
+  },
+};
+
+export default nextConfig;

package.json

@@ -2,16 +2,13 @@
   "name": "react-editor-demo",
   "version": "1.0.0",
   "private": true,
-  "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "next dev",
-    "build": "vite build",
+    "build": "next build",
-    "preview": "vite preview",
+    "start": "next start",
-    "start": "vite preview"
+    "lint": "next lint"
   },
   "dependencies": {
-    "@ai-sdk/anthropic": "^3.0.74",
-    "@ai-sdk/react": "^3.0.177",
     "@base-ui/react": "^1.4.1",
     "@fontsource-variable/geist": "^5.2.8",
     "@radix-ui/react-accordion": "^1.2.11",
@@ -28,23 +25,23 @@
     "@radix-ui/react-switch": "^1.2.5",
     "@radix-ui/react-tabs": "^1.1.12",
     "@radix-ui/react-tooltip": "^1.2.7",
-    "@reacteditor/core": "0.0.12",
+    "@reacteditor/core": "0.0.30",
-    "@reacteditor/field-google-fonts": "^0.0.1",
+    "@reacteditor/field-google-fonts": "^0.0.3",
-    "@reacteditor/field-shopify": "^0.0.1",
+    "@reacteditor/field-shopify": "^0.0.2",
-    "@reacteditor/plugin-ai": "^0.0.4",
+    "@reacteditor/plugin-ai": "^0.0.7",
-    "@reacteditor/plugin-media": "^0.0.1",
+    "@reacteditor/plugin-media": "^0.0.4",
-    "@reacteditor/plugin-tailwind-cdn": "^0.0.2",
+    "@reacteditor/plugin-tailwind-cdn": "^0.0.3",
     "@shopify/storefront-api-client": "^1.0.0",
     "@tailwindcss/postcss": "^4.1.11",
-    "ai": "^6.0.175",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "embla-carousel-react": "^8.6.0",
     "framer-motion": "^12.16.0",
     "lucide-react": "^1.14.0",
+    "next": "16.2.6",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
-    "react-router": "^7.0.0",
+    "react-router": "^7",
     "tailwind-merge": "^3.5.0",
     "tailwindcss": "^4.1.11",
     "tw-animate-css": "^1.4.0",
@@ -55,8 +52,6 @@
     "@types/node": "^22.0.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
-    "@vitejs/plugin-react": "^4.3.4",
+    "typescript": "^5.5.4"
-    "typescript": "^5.5.4",
-    "vite": "^6.0.0"
   }
 }

react-editor.config.tsx

@@ -1,88 +0,0 @@
-import {
-  createFieldShopifyProduct,
-  createFieldShopifyCollection,
-} from "@reacteditor/field-shopify";
-
-import { navigationEditor } from "@/components/navigation/navigation.editor";
-import { footerEditor } from "@/components/footer/footer.editor";
-
-import { heroEditor } from "@/components/hero/hero.editor";
-import { bannerEditor } from "@/components/landing/banner.editor";
-
-import { createFeaturedProductEditor } from "@/components/commerce/featured-product.editor";
-import { createProductsGridEditor } from "@/components/commerce/products-grid.editor";
-import { createProductsCarouselEditor } from "@/components/commerce/products-carousel.editor";
-import { collectionGridEditor } from "@/components/commerce/collection-grid.editor";
-import { createCollectionEditor } from "@/components/commerce/collection.editor";
-import { createProductDetailsEditor } from "@/components/commerce/product-details.editor";
-import { createRecommendedProductsEditor } from "@/components/commerce/recommended-products.editor";
-
-import { featuresEditor } from "@/components/features/features.editor";
-import { testimonialsEditor } from "@/components/testimonials/testimonials.editor";
-import { imageGalleryEditor } from "@/components/landing/image-gallery.editor";
-import { newsletterCtaEditor } from "@/components/landing/newsletter-cta.editor";
-import { logosEditor } from "@/components/logos/logos.editor";
-import { ctaEditor } from "@/components/cta/cta.editor";
-import { faqEditor } from "@/components/faq/faq.editor";
-
-import Root from "@/config/root";
-import type { UserConfig } from "@/config/types";
-import { initialData } from "@/config/initial-data";
-
-export type CreateConfigOptions = {
-  domain: string;
-  token?: string | null;
-};
-
-export function createConfig({ domain, token }: CreateConfigOptions): UserConfig {
-  const productField = createFieldShopifyProduct({
-    storeDomain: domain,
-    storefrontAccessToken: token ?? undefined,
-  }) as any;
-  const collectionField = createFieldShopifyCollection({
-    storeDomain: domain,
-    storefrontAccessToken: token ?? undefined,
-  }) as any;
-
-  return {
-    root: Root,
-    categories: {
-      navigation: { title: "Navigation" },
-      hero: { title: "Hero & Banners" },
-      commerce: { title: "Commerce" },
-      content: { title: "Content" },
-      footer: { title: "Footer" },
-    },
-    components: {
-      navigation: navigationEditor,
-      hero: heroEditor,
-      banner: bannerEditor,
-      "featured-product": createFeaturedProductEditor({ productField }),
-      "products-grid": createProductsGridEditor({ collectionField }),
-      "products-carousel": createProductsCarouselEditor({ collectionField }),
-      "collection-grid": collectionGridEditor,
-      collection: createCollectionEditor({ collectionField }),
-      "product-details": createProductDetailsEditor({ productField }),
-      "recommended-products": createRecommendedProductsEditor({ productField }),
-      features: featuresEditor,
-      testimonials: testimonialsEditor,
-      "image-gallery": imageGalleryEditor,
-      "newsletter-cta": newsletterCtaEditor,
-      logos: logosEditor,
-      cta: ctaEditor,
-      faq: faqEditor,
-      footer: footerEditor,
-    } as any,
-  };
-}
-
-function toBase64(s: string): string {
-  if (typeof btoa === "function") return btoa(unescape(encodeURIComponent(s)));
-  return Buffer.from(s, "utf8").toString("base64");
-}
-
-export const componentKey = toBase64(
-  `commerce-redesign-${JSON.stringify({ initialData })}`,
-);
-
-export default createConfig;

services/media-adapter.ts

@@ -5,7 +5,7 @@ import type {
 } from "@reacteditor/plugin-media";
 
 const MEDIA_BASE = "https://www.frontend-ai.com";
-const MEDIA_API_KEY = (import.meta.env.VITE_API_KEY as string | undefined) ?? "";
+const MEDIA_API_KEY = process.env.NEXT_PUBLIC_API_KEY ?? "";
 
 export const frontendAiMediaAdapter: MediaAdapter = {
   fetchList: async ({ query, cursor, signal }) => {

src/App.tsx

@@ -1,106 +0,0 @@
-import { useCallback, useMemo, useRef, useState } from "react";
-import { App as ReactEditorApp } from "@reacteditor/core";
-import "@reacteditor/core/react-editor.css";
-import createTailwindCdnPlugin from "@reacteditor/plugin-tailwind-cdn";
-import { mediaPlugin } from "@reacteditor/plugin-media";
-import "@reacteditor/plugin-media/styles.css";
-import { aiPlugin } from "@reacteditor/plugin-ai";
-import "@reacteditor/plugin-ai/styles.css";
-import { createConfig } from "@/react-editor.config";
-import { ShopifyProvider } from "@/contexts/shopify-context";
-import { frontendAiMediaAdapter } from "@/services/media-adapter";
-import { Loader } from "@/components/ui/loader";
-import schemaJson from "../app.schema.json";
-
-const AI_API_KEY = (import.meta.env.VITE_API_KEY as string | undefined) ?? "";
-
-type Pages = Record<string, { root: any; content: any[] }>;
-
-const SHOPIFY_DOMAIN =
-  (import.meta.env.VITE_SHOPIFY_DOMAIN as string | undefined) ?? "mock.shop";
-const STOREFRONT_TOKEN =
-  (import.meta.env.VITE_SHOPIFY_STOREFRONT_ACCESS_TOKEN as
-    | string
-    | undefined) ?? "";
-
-function readPathname() {
-  if (typeof window === "undefined") return "/";
-  const p = window.location.pathname;
-  return p === "" ? "/" : p;
-}
-
-export default function App() {
-  const pages = schemaJson as Pages;
-  const [currentPath, setCurrentPath] = useState<string>(readPathname);
-  const [isPublishing, setIsPublishing] = useState(false);
-  const latestDataRef = useRef<any>(null);
-
-  const handleChange = useCallback((data: any) => {
-    latestDataRef.current = data;
-  }, []);
-
-  const config = useMemo(
-    () =>
-      createConfig({
-        domain: SHOPIFY_DOMAIN,
-        token: STOREFRONT_TOKEN || null,
-      }),
-    [],
-  );
-
-  const handlePublish = useCallback((data: any, route?: string) => {
-    console.log(data);
-    setIsPublishing(true);
-    if (typeof window !== "undefined" && window.parent !== window) {
-      window.parent.postMessage(
-        { type: "PUBLISH", data: { data, route } },
-        "*",
-      );
-    }
-    setTimeout(() => setIsPublishing(false), 1000);
-  }, []);
-
-  const plugins = useMemo(
-    () => [createTailwindCdnPlugin()],
-    [pages, currentPath, handlePublish],
-  );
-
-  return (
-    <div className="h-screen w-screen">
-      <ShopifyProvider domain={SHOPIFY_DOMAIN} token={STOREFRONT_TOKEN}>
-        <ReactEditorApp
-          config={config as any}
-          pages={pages as any}
-          currentPath={currentPath}
-          plugins={plugins}
-          iframe={{ enabled: true }}
-          ui={{ navBarVisible: false, leftSideBarVisible: false }}
-          onPublish={handlePublish}
-          onChange={handleChange}
-          overrides={{
-            header: ({ children }: any) => (
-              <div className="flex items-center justify-between gap-2 border-b border-gray-200 bg-white px-4 py-2">
-                <div className="flex flex-1 items-center gap-2">{children}</div>
-                <button
-                  type="button"
-                  disabled={isPublishing}
-                  onClick={() => {
-                    handlePublish(latestDataRef.current, currentPath);
-                  }}
-                  className="inline-flex items-center justify-center rounded-md bg-black px-4 py-1.5 text-sm font-medium text-white hover:bg-gray-800 disabled:cursor-not-allowed disabled:opacity-60"
-                >
-                  {isPublishing ? "Saving..." : "Save"}
-                </button>
-              </div>
-            ),
-          }}
-        />
-      </ShopifyProvider>
-      {isPublishing && (
-        <div className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/30">
-          <Loader size={32} />
-        </div>
-      )}
-    </div>
-  );
-}

src/main.tsx

@@ -1,10 +0,0 @@
-import React from "react";
-import { createRoot } from "react-dom/client";
-import App from "./App";
-import "./globals.css";
-
-createRoot(document.getElementById("root")!).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-);

src/vite-env.d.ts

@@ -1,10 +0,0 @@
-/// <reference types="vite/client" />
-
-interface ImportMetaEnv {
-  readonly VITE_SHOPIFY_DOMAIN?: string;
-  readonly VITE_SHOPIFY_STOREFRONT_ACCESS_TOKEN?: string;
-}
-
-interface ImportMeta {
-  readonly env: ImportMetaEnv;
-}

tsconfig.json

@@ -1,29 +1,46 @@
 {
   "compilerOptions": {
     "target": "ES2022",
-    "useDefineForClassFields": true,
+    "lib": [
-    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+      "ES2022",
+      "DOM",
+      "DOM.Iterable"
+    ],
     "module": "ESNext",
     "moduleResolution": "Bundler",
-    "allowImportingTsExtensions": true,
     "resolveJsonModule": true,
     "isolatedModules": true,
     "moduleDetection": "force",
     "noEmit": true,
     "jsx": "react-jsx",
+    "incremental": true,
     "strict": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
     "allowJs": true,
-    "types": ["node", "vite/client"],
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "types": [
+      "node"
+    ],
     "baseUrl": ".",
     "paths": {
-      "@/*": ["./*"],
+      "@/*": [
-      "~/*": ["./*"]
+        "./*"
+      ],
+      "~/*": [
+        "./*"
+      ]
+    },
+    "plugins": [
+      {
+        "name": "next"
       }
+    ]
   },
   "include": [
-    "src",
+    "next-env.d.ts",
+    "app",
     "api",
     "components",
     "config",
@@ -33,8 +50,15 @@
     "lib",
     "services",
     "vendor",
-    "react-editor.config.tsx",
+    "next.config.ts",
-    "vite.config.ts"
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
   ],
-  "exclude": ["node_modules", "dist"]
+  "exclude": [
+    "node_modules",
+    "dist",
+    ".next"
+  ]
 }

vite.config.ts

@@ -1,23 +0,0 @@
-import { defineConfig, loadEnv } from "vite";
-import react from "@vitejs/plugin-react";
-import path from "node:path";
-
-export default defineConfig(({ mode }) => {
-  const env = loadEnv(mode, process.cwd(), "");
-  for (const k of Object.keys(env)) {
-    if (process.env[k] === undefined) process.env[k] = env[k];
-  }
-
-  return {
-    plugins: [react()],
-    resolve: {
-      alias: {
-        "@": path.resolve(__dirname, "."),
-        "~": path.resolve(__dirname, "."),
-      },
-    },
-    server: {
-      port: 3001,
-    },
-  };
-});