Weaverse LogoWeaverse
All ArticlesPaul Phan
12 mins read

Weaverse 2025 Year in Review

2025 wasn't about incremental updates. It was about fundamental reinvention. We migrated to React Router v7, giving you faster builds and better developer experience. We shipped visual data binding without code, so merchants can connect dynamic data ...
#-hydrogen-#shopify#weaverse
Table of Contents

2025 wasn't about incremental updates. It was about fundamental reinvention.

We migrated to React Router v7, giving you faster builds and better developer experience. We shipped visual data binding without code, so merchants can connect dynamic data with a click. We launched multi-project architecture for A/B testing and seasonal campaigns. We rebuilt our Studio interface from zero with dark mode and modern design. We integrated React 19 and TailwindCSS v4, keeping you on the cutting edge.

And we did it all while supporting thousands of production stores processing millions in transactions.

This is the story of how we transformed Weaverse from a visual builder into the definitive platform for modern Shopify development.

Q2: The Foundation (May-June)

Weaverse v5.0.0: The React Router v7 Revolution

May 2025 marked our biggest architectural shift ever. We completely migrated from Remix to React Router v7, aligning with Shopify Hydrogen's evolution and React's future.

Why This Mattered:

  • Enhanced Performance: Faster builds, better tree-shaking, optimized bundles

  • Superior DX: Improved HMR, TypeScript integration, clearer error messages

  • Future-Ready: Aligned with React 19 and the modern web platform

  • Type Safety: Generated route types with npx react-router typegen

The Migration Path:

  • Fresh start via GitHub template for new projects

  • In-place migration guide for existing stores

  • Legacy v4.x support maintained for Remix users

  • v5.0.0+ became the foundation for everything that followed

Before: Remix (Manual Types)

// app/routes/products.$handle.tsx
import type { LoaderFunctionArgs } from "@remix-run/node";
import { json } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";
// ❌ Manual type definitions - error-prone
type LoaderData = {
product: { id: string; title: string; price: string };
};
export const loader = async ({ params }: LoaderFunctionArgs) => {
const product = await getProduct(params.handle); // ❌ handle could be undefined
return json<LoaderData>({ product }); // ❌ Must use json() wrapper
};
export default function ProductPage() {
const { product } = useLoaderData<LoaderData>(); // ❌ Type assertion needed
return <h1>{product.title}</h1>;
}

After: React Router v7 (Auto-Generated Types)

// app/routes/products.$handle.tsx
import type { Route } from "./+types/products.$handle";
// ↑ Auto-generated types specific to THIS route
export const loader = async ({ params }: Route.LoaderArgs) => {
const product = await getProduct(params.handle); // ✅ handle is typed as string
return { product }; // ✅ Direct return - no wrapper needed
};
export default function ProductPage({ loaderData }: Route.ComponentProps) {
const { product } = loaderData; // ✅ Fully typed from loader
return <h1>{product.title}</h1>;
}
AspectRemixReact Router v7
Type SourceManual definitionsAuto-generated
Param Typesstring \/ undefinedExact from URL
Loader Returnjson<T>() wrapperDirect return
Data AccessuseLoaderData<T>()loaderData prop

Pilot Theme v5.0.0: React 19 Integration

Alongside the platform migration, Pilot theme evolved:

  • React 19 native integration with modern SEO components

  • Enhanced ref handling eliminating forwardRef complexity

  • Improved component architecture for better maintainability

  • Hydrogen 2025.7.0 compatibility for latest Shopify features

June: Modern Tooling & Experience

Before: TailwindCSS v3

/* tailwind.config.js - Complex JavaScript config */
module.exports = {
content: ['./app/**/*.{js,ts,jsx,tsx}'],
theme: {
extend: {
colors: {
primary: '#3b82f6',
secondary: '#10b981',
},
fontFamily: {
sans: ['Inter', 'sans-serif'],
},
},
},
plugins: [require('@tailwindcss/forms')],
};
/* globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
/* ❌ Custom utilities require @layer */
@layer utilities {
.text-balance {
text-wrap: balance;
}
}

After: TailwindCSS v4

/* app.css - Pure CSS config */
@import "tailwindcss";
@theme {
--color-primary: #3b82f6;
--color-secondary: #10b981;
--font-sans: "Inter", sans-serif;
}
/* ✅ Direct CSS - no @layer needed */
.text-balance {
text-wrap: balance;
}
AspectTailwindCSS v3TailwindCSS v4
ConfigJavaScript filePure CSS @theme
Setup3 directives + configSingle @import
Custom Utils@layer utilities {}Direct CSS
Build Speed~800ms~150ms (5x faster)
Bundle SizeLargerSmaller (better tree-shaking)

TailwindCSS v4 Integration:

  • Faster builds for your projects

  • Smaller CSS bundles for faster page loads

  • Better autocomplete in your editor

  • More powerful design tokens

Studio Experience Improvements:

  • New documentation feedback system - tell us what's unclear

  • Faster blog content loading in the editor

  • Enhanced color picker with better UX

  • Streamlined content management workflows

  • Function-based schema conditions for dynamic components

Q3: The Experience (July-September)

August: Studio Reimagined

Every pixel reconsidered. Every interaction refined.

Complete Interface Redesign:

  • Modern, accessible navigation architecture

  • Enhanced project dashboard with horizontal cards

  • Dark mode throughout the entire platform

  • Real-time changelog integration

  • Animated welcome banners with actionable information

  • Error pages that actually guide instead of frustrate

Performance Wins:

  • 60% faster Studio loading times

  • Simplified architecture with cleaner data flows

  • Enhanced mobile preview accuracy

  • Responsive design that actually responds

AI Assistant Evolution

Improved Reliability:

  • Conversations persist across sessions - no more lost context

  • Better error handling and recovery

  • Seamless integration with your development workflow

Coming Soon:

  • AI-powered code generation for components

  • Natural language content editing for merchants

  • Intelligent design suggestions

September: Commerce Features Perfected

Judge.me Reviews Integration:

  • New JudgemeReviewsBadge component

  • Enhanced review form UI

  • Seamless theme integration

  • Improved rating displays

Combined Listings Support:

  • Multi-product bundle management

  • Intelligent product grouping

  • Advanced filtering respecting relationships

  • Enhanced discovery patterns

Modular Product Architecture:

  • Standalone ProductTitle, ProductVendor, ProductPrices components

  • Flexible featured products system

  • Reusable product information modules

  • Better separation of concerns

Pilot v6.0.0 Released:

  • Removed React forwardRef (React 19 native refs)

  • Zustand state management integration

  • Judge.me component restructure

  • Enhanced cart functionality

Q4: The Breakthrough (October-December)

October: Data Connectors - The Game Changer

This was the breakthrough feature of 2025.

Visual Data Binding Without Code:

Before Data Connectors, binding dynamic data required writing code. Now? Click a database icon.

What Changed:

  • Click-to-Connect UI: Select data from products, collections, pages visually

  • Real-time Preview: See your data bindings instantly

  • Third-party APIs: Integrate external data sources

  • No Code Required: Merchants can build dynamic content themselves

The Performance Story:

  • 91% faster data connector operations

  • Optimized cache strategies

  • Enhanced API worker architecture

  • Intelligent proxy handling

What This Means for You:

  • Merchants can build dynamic content without developer help

  • Faster data loading with smart caching

  • Better TypeScript support for fewer bugs

  • Complete documentation for all features

New Documentation Platform

Launched docs.weaverse.io - documentation that actually helps:

  • Fast, powerful search - find answers instantly

  • Clear navigation structure

  • Up-to-date React 19 code examples

  • Better troubleshooting guides

  • Syntax-highlighted code with copy buttons

  • Step-by-step deployment guides (including Cloudflare Workers)

Pilot v7.0.0: Routes Migration

October's Second Major Release:

  • Migration to routes.ts configuration

  • Manual route control for complex applications

  • Enhanced type generation

  • Better route organization

// app/routes.ts - Full control over your routes
import { type RouteConfig } from "react-router";
import { flatRoutes } from "@react-router/fs-routes";
export default [
// Auto-discover routes from the file system
...await flatRoutes(),
// Manual API routes for custom endpoints
{ path: "/api/wishlist", file: "./routes/api.wishlist.ts" },
{ path: "/api/reviews", file: "./routes/api.reviews.ts" },
// Override specific routes when needed
{ path: "/collections/:handle", file: "./routes/collection.tsx" },
{ path: "/products/:handle", file: "./routes/product.tsx" },
] satisfies RouteConfig;

Why This Matters:

  • Full control over route configuration for complex apps

  • Better type safety prevents routing bugs

  • Easier to understand and maintain route structure

November: Multi-Project Architecture

Project Hierarchy & Variants - MAJOR FEATURE:

Create store variants for:

  • A/B Testing: Test designs without affecting production

  • Seasonal Campaigns: Holiday themes with easy rollback

  • Multi-market Support: Different content per region

  • Automatic Inheritance: Content flows from parent projects

Enhanced Dashboard:

  • Horizontal card layout for better information density

  • Variant switcher for quick project navigation

  • Search and filter capabilities

  • Improved project management workflow

Pilot v7.1.x: Cart Revolution

The Complete Cart Experience:

  • Discount Codes: Apply promotional codes at checkout

  • Gift Cards: Full gift card support and balance tracking

  • Cart Notes: Customer instructions and special requests

  • Featured Products: Cross-sell opportunities on cart page

  • Enhanced Input Components: Better form UX throughout

Additional Improvements:

  • Catch-all route for better 404 handling

  • Enhanced spinner and loading states

  • Improved banner components

  • Better product review forms

December: Performance & Polish

Platform-Wide Speed Improvements:

  • Faster page loads across Studio

  • Optimized data fetching for smoother editing

  • Better caching for instant content updates

  • Reduced loading times throughout the platform

The Developer Experience Revolution

React 19 Integration

// app/routes/products.$handle.tsx
import { ProductSEO } from "~/components/seo";
export default function ProductPage({ loaderData }: Route.ComponentProps) {
const { product } = loaderData;
return (
<>
{/* ✅ React 19: Meta tags hoist to <head> automatically */}
<ProductSEO
title={product.title}
description={product.description}
image={product.featuredImage.url}
price={product.price}
availability={product.availableForSale}
/>
{/* ✅ Structured data for Google rich snippets */}
<script type="application/ld+json">
{JSON.stringify(product.jsonLd)}
</script>
<main>
<h1>{product.title}</h1>
<p>{product.price}</p>
</main>
</>
);
}

Weaverse projects run on React 19 from day one:

  • Built-in SEO components: BlogSEO, ProductSEO, DocumentHead - SEO handled automatically

  • Smart meta tag management: No more manual meta tag juggling

  • OpenGraph & Twitter Cards: Social sharing works perfectly

  • Performance improvements: React 19's automatic optimizations

Better Developer Tools

Smarter Project Creation:

  • Interactive CLI guides you through setup

  • Choose your template with detailed descriptions

  • Clear error messages when something goes wrong

  • Immediate next steps after creation

Enhanced TypeScript Experience:

  • Better autocomplete in your editor

  • Clearer error messages

  • Fewer type-related bugs

  • Smarter IDE integration

Infrastructure & Deployment

Cloudflare Workers Support

Cloudflare Workers deployment architecture

November brought comprehensive Cloudflare Workers deployment:

  • Complete deployment guide in documentation

  • Edge-first architecture support

  • Enhanced caching at the edge

  • Global performance improvements

Hydrogen Alignment

Maintained perfect alignment with Shopify Hydrogen evolution:

  • Hydrogen 2025.1.x: Single fetch, B2B methods stabilization

  • Hydrogen 2025.5.0-2025.7.0: React Router v7 migration

  • Gift card removal: New cart APIs

  • Order filtering: Enhanced customer account features

  • @defer directive: Performance optimizations

Security & Reliability

  • Enhanced error boundaries across all components

  • Better validation and link checking

  • Improved content security policies

  • Comprehensive logging and monitoring

  • Real-time usage tracking for enterprise

By The Numbers

What You Got

  • 3 Major Pilot Theme Versions: v5.0.0, v6.0.0, v7.0.0 with cumulative improvements

  • 50+ New Features: New capabilities shipping every month

  • Complete Documentation Rewrite: docs.weaverse.io with better search and examples

  • Multi-Project Architecture: A/B testing and variants for everyone

Speed Improvements You'll Notice

  • 60% Faster Studio Loading: Get to work faster

  • 91% Faster Data Connectors: Dynamic content loads instantly

  • Smaller Bundles: Your stores load faster for customers

  • Edge Deployment: Global performance with Cloudflare Workers

Developer Experience Wins

  • React 19 from Day One: Stay ahead of the curve

  • Better TypeScript Support: Fewer bugs, better autocomplete

  • Modern Documentation: Find answers faster

  • Interactive CLI: Easier project setup

Community Highlights

Open Source Contributions

  • Weaverse SDKs: Fully open source on GitHub

  • Pilot Theme Template: Community contributions welcome

  • Documentation: Open for improvements and corrections

  • Issue Resolution: Active community support

Developer Ecosystem

  • Migration from Discord to Slack: Better community organization

  • Enhanced Support Channels: Human help when you need it

  • GitHub Discussions: Long-form technical conversations

  • Code Examples: Real-world implementation patterns

What's Next: 2026 Preview

AI-Powered Development

Building on the AI improvements we made in 2025:

  • AI Code Generation: Generate components from descriptions

  • Content Assistance: Natural language content editing for merchants

  • Smart Suggestions: Intelligent design and optimization recommendations

  • Automated Quality Checks: AI-powered validation and testing

Advanced Commerce Features

  • Enhanced Personalization: Dynamic content based on customer behavior

  • Advanced Analytics: Built-in performance tracking and insights

  • Multi-currency Optimization: Better international commerce support

  • Subscription Management: Native subscription product support

Platform Expansion

  • New Theme Templates: More design options out of the box

  • Component Marketplace: Share and discover custom components

  • Integration Ecosystem: Pre-built connectors for popular services

  • Enterprise Features: Advanced team collaboration tools

Performance & Scale

  • Edge-First Everything: Cloudflare Workers by default

  • Instant Page Loads: Advanced caching strategies

  • Build Optimization: Even faster development cycles

  • Global CDN: Performance improvements worldwide

Start Building The Future

Every improvement from 2025 is live. Every feature is ready. Every optimization is active.

Get Started Today

For New Projects:

npx @weaverse/cli@latest create --template=pilot

For Existing Projects:

  • Updates are live in Weaverse Studio now

  • Migration guides available at docs.weaverse.io

  • SDK updates via standard package manager workflows

What You Get

  • Pilot Theme v7.1.x: Complete cart features, modular architecture

  • SDK v5.9.x: Multi-project support, enhanced caching

  • Data Connectors: Visual data binding without code

  • Project Variants: A/B testing and multi-market support

  • React 19 + React Router v7: Modern foundation

  • TailwindCSS v4: Next-generation styling

  • Cloudflare Workers: Edge deployment ready

Resources

Thank You

To our community of developers, merchants, and partners who pushed us to build better, ship faster, and never settle for incremental when transformational was possible.

2025 was about rebuilding the foundation. 2026 is about what we build on top of it.


Key Releases Timeline

May 2025

  • Weaverse v5.0.0 - React Router v7 migration

  • Pilot v5.0.0 - React 19 integration

  • Complete platform architecture overhaul

June 2025

  • TailwindCSS v4 integration for faster builds

  • Enhanced schema validation with function-based conditions

  • Studio improvements (documentation feedback, color picker, content management)

August 2025

  • Complete Studio interface redesign

  • AI assistant improvements

  • Enterprise features (usage tracking, billing transparency)

  • Enhanced mobile experience

September 2025

  • Pilot v6.0.0 - Zustand state, removed forwardRef

  • Judge.me reviews integration enhancements

  • Combined Listings support

  • Modular product page architecture

October 2025

  • Data Connectors v5.5.0 - VISUAL DATA BINDING

  • Pilot v7.0.0 - routes.ts migration

  • New documentation platform (docs.weaverse.io)

  • 91% performance improvement in data operations

November 2025

  • Project Hierarchy & Variants - MULTI-PROJECT ARCHITECTURE

  • Enhanced dashboard with variant switcher

  • Pilot v7.1.x - cart features (discounts, gift cards, notes)

  • Cloudflare Workers deployment guide

December 2025

  • Platform-wide performance improvements

  • Faster page loads and data fetching

  • Enhanced caching for instant updates

  • Foundation for 2026 AI features


Questions about 2025 updates or planning for 2026? Reach out at support@weaverse.io or join our Slack community.

The future of headless commerce isn't coming. It's here.

Reactions

Like
Love
Celebrate
Insightful
Cool!
Thinking

Join the Discussion

Continue Reading

More insights from the Weaverse team

Agentic Commerce on Shopify: How to Make Your Hydrogen Store AI-Agent-Ready in 2026

Agentic Commerce on Shopify: How to Make Your Hydrogen Store AI-Agent-Ready in 2026

Agentic Commerce on Shopify: How to Make Your Hydrogen Store AI-Agent-Ready in 2026 AI agents are no longer just helping customers research products. They’re starting to shop for them. That changes what it means to optimize a Shopify storefront in 2026. If a customer asks ChatGPT, Gemini, Copilot, or Perplexity to find the best product for a need, the winning store may not be the one with the prettiest homepage. It may be the one with the cleanest product data, the clearest schema, and the most machine-readable storefront. Shopify sees where this is going. Agentic Storefronts are now live. Universal Commerce Protocol (UCP), co-developed with Google, gives merchants a new path to become discoverable and transactable in AI-driven buying flows. For Hydrogen teams, this shift is not a threat. It is an advantage. Because headless storefronts already separate presentation from data, they are in a better position to serve both humans and machines—if the implementation is done right. The shift: from browse-first to ask-first commerce Traditional ecommerce assumes a human visits your site, clicks around, compares options, reads reviews, and decides. Agentic commerce compresses that flow. Now the customer says: Find me leather boots under $300 Compare the best protein powders without artificial sweeteners Reorder the best moisturizer I bought last time An AI agent handles discovery, comparison, filtering, and, increasingly, transaction steps. In that world, your storefront still matters for human trust and conversion. But your discoverability layer changes completely. Instead of competing only on: branding design merchandising ad creative you also compete on: structured product attributes variant completeness stable identifiers machine-readable policy and offer data feed quality schema quality storefront and API reliability If AI systems cannot parse your catalog confidently, they will simply recommend someone else. Why Shopify merchants should care now This is not theoretical anymore. Shopify has already started building for agentic commerce through: Agentic Storefronts Shopify Catalog UCP stronger machine-readable commerce surfaces improved developer tooling around modern Hydrogen builds The strategic message is clear: commerce interfaces are expanding beyond the browser. Your customer may still buy from a human-facing storefront. But the path to that purchase may begin inside an AI interface that never sees your hero banner, campaign landing page, or carefully tuned homepage flow. That means the old optimization stack is incomplete. A store can look premium and still be invisible to AI-driven discovery. The real bottleneck: bad product data Most merchants do not have an AI-readiness problem. They have a product data discipline problem. This is where many catalogs break down: vague product titles inconsistent variant naming missing GTINs incomplete metafields missing dimensions, materials, or care specs untyped custom data weak or missing Product schema broken canonical relationships across variants For humans, you can sometimes get away with that. For AI systems, you usually cannot. Agents work better when they can rely on structured, typed, normalized inputs. That includes: brand product type size color material dimensions availability price condition fulfillment details review signals return policies If those fields are incomplete, the agent has less confidence. Less confidence means less visibility. Why Hydrogen stores have an architectural advantage Hydrogen teams are better positioned than legacy storefront teams for one reason: the architecture already separates content and data from presentation. That matters because AI readiness is mostly about the quality of the data layer. A well-built Hydrogen store can: output clean JSON-LD from server-rendered routes expose typed metafield data consistently support structured product and collection pages generate machine-readable manifests and feed layers keep storefront UX flexible without compromising data integrity In other words, Hydrogen makes it easier to build a storefront that works for humans on the surface and machines underneath. That is exactly the direction commerce is heading. Where Weaverse fits This is also why Weaverse has a natural position in the shift to agentic commerce. The real opportunity is not choosing between beautiful storefronts for humans and structured storefronts for machines. The opportunity is building both from the same source of truth. With the right Weaverse implementation, teams can: keep merchant-friendly visual editing preserve a structured section architecture flow metafield data into storefront rendering support stronger schema outputs reduce the gap between merchandisers and developers That matters because AI readiness cannot depend on engineers manually patching every product page forever. The system has to be maintainable by the actual team running the store. The 2026 AI-agent-readiness checklist for Shopify + Hydrogen teams If you want your storefront to stay visible in AI-driven shopping flows, start here: 1. Tighten product titles Every title should clearly communicate: brand product type key differentiator Avoid vague naming. Keep titles precise and scannable. 2. Complete variant-level data Every variant should have: accurate size, color, and material data availability price SKU GTIN where applicable 3. Populate critical metafields At minimum, make sure structured data exists for: material dimensions weight care instructions certifications compatibility or use case shipping or fulfillment constraints where relevant 4. Implement JSON-LD properly Support: Product Offer ProductGroup where relevant review and aggregate rating where valid 5. Clean up internal product data logic Make sure data is consistent across: PDP collection cards search results feeds structured data outputs 6. Enable Shopify’s discovery surfaces Where relevant, prepare for: Shopify Catalog Agentic Storefront pathways UCP-compatible discovery patterns as they mature 7. Validate what machines actually see Do not just inspect the page visually. Test structured outputs and rich result eligibility. The mistake merchants will make A lot of brands will hear “agentic commerce” and respond with content theater. They will publish hot takes, add “AI-ready” to landing pages, and bolt on a chatbot. But that is not the hard part. The hard part is cleaning the data model. Because AI visibility is not a branding claim. It is an operational outcome. The winners will be the teams that treat: product data schema identifiers merchandising structure storefront architecture as revenue infrastructure. Final takeaway The future of commerce is not humans versus AI. It is structured backend for machines and compelling frontend for humans. That is the middle ground Shopify is moving toward. And it is exactly where Hydrogen and Weaverse can win. If your storefront cannot pass the AI-agent parse test, you will lose demand long before a customer ever reaches your site. Want to make your Hydrogen store AI-agent-ready without sacrificing visual control? Build it with Weaverse. Start free at https://weaverse.io.

By Paul Phan
Read
ChatGPT Quit Agentic Commerce. That Doesn't Mean You Should.

ChatGPT Quit Agentic Commerce. That Doesn't Mean You Should.

ChatGPT Quit Agentic Commerce. That Doesn't Mean You Should. Two posts this week confirm the same signal: Juozas Kaziukėnas: ChatGPT is abandoning agentic commerce after 5 months. Users researched products but didn't buy through the chatbot. Kelly Goetsch: OpenAI is losing ground to Anthropic and deprioritizing commerce because enterprise commerce is harder than they expected. The headlines say "AI commerce is failing." The real story is more nuanced. Why They Retreated Agentic commerce — AI agents that discover, compare, and complete purchases on behalf of users — hit three hard walls: 1. Catalog Normalization Is Brutal Product data (pricing, inventory, variants, availability) needs to be: Standardized across every retailer Constantly updated in real-time Accurate enough for AI to trust Only Google Shopping has done this at scale. ChatGPT couldn't. 2. Trust Gap: Research ≠ Purchase Users were happy to research products inside ChatGPT. But when it came time to buy, they didn't trust the chatbot with payment. This isn't a ChatGPT problem — it's a user behavior problem. Facebook Shops and Google's "Buy with Google" hit the same wall. 3. Fraud and Error Safeguards Commerce and payment firms need real safeguards against: AI initiating fraudulent transactions AI making erroneous purchases Liability when something goes wrong These safeguards don't exist yet at scale. Without them, platforms retreat to just driving traffic to retailer sites. What They're Not Saying This is a pause, not a permanent retreat. Kelly Goetsch explicitly predicts: "they'll re-prioritize commerce in a few months once they figure out the infrastructure layer." Juozas Kaziukėnas frames it as lack of conviction: Chinese AI platforms like Alibaba's Qwen are spending hundreds of millions to force the behavior change. ChatGPT gave up too early. Either way, they'll be back. The question is: will your store be ready? The Infrastructure Layer Wins Long-Term When AI platforms return to agentic commerce, the stores that win won't be the ones with the prettiest themes or the best brand storytelling. They'll be the ones with: Structured product data that agents can read and reason about Clean APIs that don't break under automation Checkout flows with real safeguards and clear liability boundaries Machine-readable manifests (like UCP's ucp.json) that broadcast capabilities to agents This is exactly what Hydrogen + Storefront API architectures are built for. Why Hydrogen Teams Have a Structural Advantage Monolithic Liquid stores have product data trapped in rendered HTML. AI agents have a hard time reasoning over server-rendered markup. Hydrogen stores built on the Storefront API already expose: Structured, queryable product data Stable cart and checkout mutations Clean authentication via Customer Account API Market-aware URLs for localized experiences Adding UCP support or similar agent-ready layers is an extension of the architecture, not a rewrite. What You Should Do While Big Platforms Regroup 1. Audit your data layer Can an AI agent query your product catalog via clean API? Or is your data trapped in theme templates? 2. Check your checkout safeguards Do you have clear boundaries for what automated systems can and can't do? Fraud detection? Liability clarity? 3. Make your capabilities machine-readable If you're on Hydrogen, you're most of the way there. The next step is declaring your capabilities in a format agents can discover. 4. Don't wait for platforms to figure it out The stores that win agentic commerce won't be the ones who waited for ChatGPT to solve catalog normalization. They'll be the ones who made their data clean, their APIs stable, and their checkout safe — before the next platform tries again. The Honest Take Agentic commerce is harder than the hype. The platforms with the biggest AI models just hit the wall. But the infrastructure layer still wins. If your store is machine-readable, API-first, and checkout-safe, you become the integration backbone for whichever platform eventually cracks it. The platforms quit early. That doesn't mean you should. Sources Juozas Kaziukėnas on ChatGPT abandoning agentic commerce: https://www.linkedin.com/posts/juozas_chatgpt-is-abandoning-agentic-commerce-its-activity-7435308306329473025-Ncy0 Kelly Goetsch on OpenAI deprioritizing commerce: https://www.linkedin.com/posts/kellygoetsch_feels-like-openai-is-quickly-losing-ground-activity-7435323329483460608-GgKK Shopify headless architecture: https://shopify.dev/docs/storefronts/headless

By Paul Phan
Read
How to Set Up Color Swatches in Your Shopify Hydrogen Store

How to Set Up Color Swatches in Your Shopify Hydrogen Store

How to Set Up Color Swatches in Your Shopify Hydrogen Store If you're building a Hydrogen storefront with variant-heavy catalogs, swatches are one of the highest-impact UX improvements you can ship quickly. This guide walks through the full implementation path from Shopify Admin setup to production-ready React components. Color swatches transform the shopping experience by allowing customers to visualize product variants at a glance. Instead of reading through dropdown menus, customers see the actual colors—making purchase decisions faster and more intuitive. In this comprehensive tutorial, we'll walk through implementing color swatches in a Shopify Hydrogen store, from configuring the data in Shopify Admin to rendering the swatches in your React components using the modern optionValues API (released in 2024-07). Part 1: Setting Up Swatches in Shopify Admin Step 1: Access Product Variant Options Log in to your Shopify Admin Navigate to Products → Select a product with color variants Scroll to the Variants section Click Edit Options next to the "Color" option Step 2: Configure Swatch Data For each color value, you can set: Swatch TypeWhen to UseExample Solid Color (Hex)Single, uniform colors#FF0000 for Red Image UploadPatterns, textures, gradientsPlaid, Leopard print, Tie-dye Named ColorStandard CSS colors"Navy", "Tomato", "Teal" Best Practices for Swatch Configuration ✅ Use Hex Codes for Accuracy: #1E3A8A is more reliable than color names ✅ Optimize Swatch Images: Keep them under 200x200px ✅ Consistent Naming: Use "Navy Blue" across all products, not sometimes "Navy" ✅ Fallback Ready: If no hex is set, the code will attempt to parse the option name as a color Part 2: Querying Swatch Data with GraphQL The optionValues API Shopify's Storefront API provides the optionValues field—a dedicated, efficient way to fetch product option data including swatches. GraphQL Fragment Add this fragment to your app/graphql/fragments.ts: fragment ProductOption on ProductOption { name optionValues { name firstSelectableVariant { id availableForSale price { amount currencyCode } image { url altText } } swatch { color image { previewImage { # Optimize: Resize swatch images server-side url(transform: { width: 100, height: 100, crop: CENTER }) altText } } } } } Key fields: swatch.color: Hex code (e.g., #FF5733) swatch.image.previewImage: Optimized image for patterns/textures firstSelectableVariant: First available variant with this option—critical for navigation Using the Fragment in Product Queries query Product($handle: String!) { product(handle: $handle) { id title options { ...ProductOption } variants(first: 100) { nodes { id availableForSale selectedOptions { name value } } } } } Part 3: Building the React Components 1. Color Utility Functions Create helpers to handle edge cases like light colors on white backgrounds. // app/utils/colors.ts import { colord } from "colord"; /** * Validates if a string is a parseable color * Supports hex, RGB, HSL, and named colors */ export function isValidColor(color: string): boolean { return colord(color).isValid(); } /** * Detects if a color is "light" (brightness > threshold) * Used to add borders to white/cream/yellow swatches */ export function isLightColor(color: string, threshold = 0.8): boolean { const c = colord(color); return c.isValid() && c.brightness() > threshold; } Install the dependency: npm install colord 2. Swatch Component Create a reusable swatch component with local type definitions: // app/components/product/ProductOptionSwatches.tsx import { Image } from "@shopify/hydrogen"; import { cn } from "~/utils/cn"; import { isLightColor, isValidColor } from "~/utils/colors"; // Define types locally for better portability export type SwatchOptionValue = { name: string; selected: boolean; // Computed prop available: boolean; // Computed prop swatch?: { color?: string | null; image?: { previewImage?: { url: string; altText?: string | null; } | null; } | null; } | null; }; type SwatchProps = { optionValues: SwatchOptionValue[]; onSelect: (value: SwatchOptionValue) => void; }; export function ProductOptionSwatches({ optionValues, onSelect }: SwatchProps) { return ( <div className="flex flex-wrap gap-3"> {optionValues.map((value) => ( <SwatchButton key={value.name} value={value} onClick={() => onSelect(value)} /> ))} </div> ); } function SwatchButton({ value, onClick }: { value: SwatchOptionValue; onClick: () => void; }) { const { name, selected, available, swatch } = value; const hexColor = swatch?.color || name; // Fallback to name const image = swatch?.image?.previewImage; return ( <button type="button" disabled={!available} onClick={onClick} title={name} className={cn( "size-8 overflow-hidden rounded-full transition-all", "outline-1 outline-offset-2", selected ? "outline outline-gray-900" : "outline-transparent hover:outline hover:outline-gray-400", !available && "opacity-50 cursor-not-allowed diagonal-strike" )} > {image ? ( <Image data={image} className="h-full w-full object-cover" width={32} height={32} sizes="32px" /> ) : ( <span className={cn( "block h-full w-full", (!isValidColor(hexColor) || isLightColor(hexColor)) && "border border-gray-200" )} style={{ backgroundColor: hexColor }} > <span className="sr-only">{name}</span> </span> )} </button> ); } 3. Diagonal Strike-Through for Unavailable Variants Add this CSS utility to your app/styles/app.css: .diagonal-strike { position: relative; } .diagonal-strike::after { content: ""; position: absolute; inset: 0; background: linear-gradient( to bottom right, transparent calc(50% - 1px), #999 calc(50% - 1px), #999 calc(50% + 1px), transparent calc(50% + 1px) ); pointer-events: none; } 4. Using the Component In your route file, map the raw GraphQL data to the SwatchOptionValue type by calculating selected and available status. // app/routes/products.$handle.tsx import { useNavigate, useLoaderData } from "@remix-run/react"; import { ProductOptionSwatches, type SwatchOptionValue } from "~/components/product/ProductOptionSwatches"; export default function ProductPage() { const { product, selectedVariant } = useLoaderData<typeof loader>(); const navigate = useNavigate(); // 1. Find the color option const colorOption = product.options.find( (opt) => ["Color", "Colors", "Colour", "Colours"].includes(opt.name) ); // 2. Map raw data to component props // We need to calculate 'selected' and 'available' based on current context const swatches: SwatchOptionValue[] | undefined = colorOption?.optionValues.map((value) => { // Check if this is the currently selected value const isSelected = selectedVariant?.selectedOptions.some( (opt) => opt.name === colorOption.name && opt.value === value.name ); return { ...value, selected: !!isSelected, available: !!value.firstSelectableVariant?.availableForSale, }; }); const handleSwatchSelect = (value: SwatchOptionValue) => { // Navigate to the corresponding variant URL if (value.firstSelectableVariant) { navigate(`?variant=${value.firstSelectableVariant.id.split('/').pop()}`, { preventScrollReset: true, replace: true }); } }; return ( <div> {colorOption && swatches && ( <div className="space-y-2"> <h3 className="font-medium">Color: {selectedVariant?.selectedOptions.find(o => o.name === colorOption.name)?.value}</h3> <ProductOptionSwatches optionValues={swatches} onSelect={handleSwatchSelect} /> </div> )} </div> ); } Final checklist Before shipping, verify: Swatch data is configured for every color option in Shopify Admin Variant availability is reflected visually (disabled + strike-through) Light colors have visible borders Swatch images are optimized and transformed server-side URL/state updates correctly when users change swatches With this setup, shoppers can scan options faster, reduce misclicks, and reach purchase decisions with less friction.

By Lee
Read

Never miss an update

Subscribe to get the latest insights, tutorials, and best practices for building high-performance headless stores delivered to your inbox.

Join the community of developers building with Weaverse.