Weaverse Blog
Insights, tutorials, and updates from the Weaverse team.
Insights, tutorials, and updates from the Weaverse team.
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.
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
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.
Agentic Commerce in 2026: What Shopify Merchants Need to Know About ACP and UCP AI-assisted buying is no longer hypothetical. In 2026, commerce is shifting from search and click to ask and buy. For Shopify merchants, that means your storefront is no longer just a website — it’s a machine-readable commerce surface that AI agents can query and transact against. The Shift: from search UX to agent UX Traditional ecommerce optimization focused on: PDP design Checkout friction SEO rankings Agentic commerce adds a new layer: Structured product data API reliability Protocol compatibility If agents can’t parse your catalog cleanly, they’ll route buyers elsewhere. The Two Protocols: ACP and UCP ACP (Agentic Commerce Protocol) ACP powers AI-native buying flows like ChatGPT commerce integrations, including in-chat purchasing experiences. Source: https://openai.com/index/buy-it-in-chatgpt/ Docs: https://developers.openai.com/commerce/ UCP (Universal Commerce Protocol) UCP is positioned as a shared protocol direction for broader AI-discoverable commerce surfaces, including Google/Shopify ecosystem momentum. Source: https://www.htt.it/en/agentic-ecommerce-acp-ucp-shopify-ai-commerce/ Source: https://wearepresta.com/shopify-ucp-how-to-implement-2026-guide/ Context: https://shopify.com/news/ai-commerce-at-scale Practical merchant view: ACP and UCP are not mutually exclusive. ACP helps with AI-native checkout channels; UCP-style readiness helps with cross-agent discoverability. Opportunity: new demand channels AI agents are becoming a new demand interface between users and merchants. That changes where conversion starts. Instead of: user lands on homepage → browses → compares It becomes: user asks assistant → agent evaluates merchant data → transaction decision This rewards merchants with: clean catalog schema strong availability/pricing consistency dependable APIs Cost structure: what to watch In AI-assisted checkout channels, economics can include: platform/agent commission layers payment processing (e.g., Stripe rails) Exact percentages vary by channel and configuration, so merchants should model margin impact per channel before scaling. 4-step action plan for Shopify + Hydrogen merchants Normalize product data Standardize titles, attributes, variants, inventory, and pricing logic. Publish machine-readable commerce surfaces Prepare manifests/feeds/endpoints for agent parsing as standards mature. Harden API flows Keep product, cart, pricing, and availability APIs fast and predictable. Instrument conversion by channel Track AI-assisted sessions and compare CPA/margin vs paid channels. Why this matters for Weaverse users Hydrogen merchants are already API-first — that’s an advantage. At Weaverse, we’re aligning theme architecture for both human storefront conversion and AI-agent readability. Agentic commerce is still evolving, but the preparation window is now. Sources https://openai.com/index/buy-it-in-chatgpt/ https://developers.openai.com/commerce/ https://www.htt.it/en/agentic-ecommerce-acp-ucp-shopify-ai-commerce/ https://wearepresta.com/shopify-ucp-how-to-implement-2026-guide/ https://shopify.com/news/ai-commerce-at-scale
Shopify’s 2026 Headless Priority: Migrate Customer Accounts, Upgrade Checkout, Then Scale with AI Simulation Most teams are still executing headless in the wrong order. They start with a full rebuild, spend months on architecture, then discover their biggest risks were in customer accounts, checkout behavior, and release reliability. In 2026, Shopify’s platform signals point to a better sequence: Migrate risk-first flows (customer accounts) Capture conversion wins (PDP + checkout) Maintain reliability under release velocity (Hydrogen ops discipline) Add AI simulation/testing loops (after core flows are stable) Why Sequence Matters More Than Ambition A big-bang transformation looks strategic, but it often delays learning and increases production risk. A partial-headless operating model usually wins faster: stabilize critical flows first ship measurable conversion improvements second scale experimentation third This gives teams momentum without sacrificing reliability. Signal #1: Legacy Customer Accounts Are Deprecated Customer account migration is no longer optional planning work. If account flows remain fragile, every release carries hidden conversion and support risk. Operational implication: treat account migration as a reliability milestone, not a backlog task. Source: https://shopify.dev/changelog/legacy-customer-accounts-are-deprecated Signal #2: Accelerated Checkout Is Expanding on PDP Checkout capability is moving closer to product discovery paths. That means faster opportunities for measurable conversion lift if teams can ship safely. Operational implication: prioritize PDP/checkout experiments where impact is direct and measurable. Source: https://shopify.dev/changelog/accelerated-checkout-now-supports-addons-from-the-product-page Signal #3: Hydrogen Release Velocity Still Rewards Disciplined Ops Hydrogen continues to ship reliability/security updates and workflow improvements. Operational implication: teams need a repeatable weekly upgrade/testing process instead of ad hoc updates. Source: https://github.com/Shopify/hydrogen/releases.atom Signal #4: AI Simulation Is Becoming a Practical Layer AI-native testing and recommendation systems are moving from concept to practical workflow patterns. Operational implication: AI loops become high leverage only after core account/checkout flows are stable. Sources: https://shopify.engineering/simgym https://shopify.engineering/generative-recommendations A Practical 2-Week Execution Model Week 1 — Risk First complete customer account migration scope run account + checkout edge-case QA define rollback plans for high-risk flows Week 2 — Conversion Second ship 1–2 high-impact PDP/checkout experiments instrument conversion metrics and guardrail alerts run post-release reliability checks Week 3+ — AI Loops Third add simulation/testing workflows accelerate iteration cadence with tighter feedback cycles keep release quality gates fixed The Storefront Ops Layer (Non-Negotiable) To absorb platform changes without breaking revenue, teams need: fixed weekly release cadence pre-release QA gates (PDP → cart → checkout, account paths) rollback-safe releases shared runbooks for upgrades and migrations clear ownership across engineering + growth Without this ops layer, every update feels risky. With it, release velocity compounds. Where Weaverse Fits Hydrogen provides flexibility. Weaverse helps teams operationalize that flexibility: reusable section architecture for faster iteration safer workflows for non-dev merchandising teams structured collaboration between engineering and growth release-friendly storefront operations instead of one-off page work Final Take In 2026, headless advantage is not just about who can build faster. It’s about who can operate faster with lower risk: migrate critical flows early ship conversion wins continuously add AI loops on top of stable foundations That is the execution order that compounds. Sources Legacy customer accounts deprecated: https://shopify.dev/changelog/legacy-customer-accounts-are-deprecated Accelerated checkout add-ons on PDP: https://shopify.dev/changelog/accelerated-checkout-now-supports-addons-from-the-product-page Hydrogen releases: https://github.com/Shopify/hydrogen/releases.atom SimGym: https://shopify.engineering/simgym Generative recommendations: https://shopify.engineering/generative-recommendations
Hydrogen 2026.1: What You Need to Know About the API Update Shopify released Hydrogen 2026.1.0, aligning with their quarterly API release cycle. Most changes are additive, but there's one breaking change that requires immediate attention if you have custom cart discount logic. Developer reviewing Hydrogen 2026.1 API updates The Breaking Change The cartDiscountCodesUpdate mutation now requires the discountCodes argument. Before (Implicit) cartDiscountCodesUpdate(cartId: $cartId) After (Explicit) cartDiscountCodesUpdate( cartId: $cartId discountCodes: [] # Required field ) Release planning timeline for quarterly API versions What Else Changed Hydrogen 2026.1.0 updates both: Storefront API → 2026-01 Customer Account API → 2026-01 This is a quarterly version update aligned with Shopify's API release schedule. Action Items Update packages to Hydrogen 2026.1.0 Search codebase for cartDiscountCodesUpdate mutations Add explicit discountCodes argument to all calls Test cart discount functionality Official Changelogs For complete details, review: Storefront API 2026-01 Changelog Customer Account API 2026-01 Changelog Bottom Line 10-minute fix if you have custom discount code logic. Otherwise, smooth upgrade. The migration is straightforward but critical if your store uses programmatic discount code management. Don't skip testing cart functionality after the upgrade. Building with Hydrogen? Weaverse helps you ship faster with AI-powered theme development. Get started.
For Theme Developers Remove Legacy Liquid Files Migrating from legacy customer accounts to modern account flows Delete these files from your theme: templates/customers/login.liquid templates/customers/register.liquid templates/customers/account.liquid Use the New Web Component <!-- Replace legacy login forms with: --> <shopify-account></shopify-account> The shopify-account web component handles: Login/register flows Password reset Account management Multi-factor authentication Migration checklist and phased rollout planning For App Developers Use Customer Account UI Extensions If your app interacts with customer accounts, migrate to UI extensions: // extension.toml [[extensions.targeting]] target = "customer-account.profile.block-render" // React extension export default function ProfileBlock() { const { customer } = useApi() return ( <BlockStack> <Text>Loyalty Points: {customer.metafields.loyalty.points}</Text> </BlockStack> ) } Stats: 800+ apps already migrated. Don't get left behind. For Custom Storefronts (Hydrogen) Use Customer Account API import { useCustomerAccount } from '@shopify/hydrogen' export function AccountPage() { const { customer, accessToken, logout } = useCustomerAccount() if (!customer) { return <LoginButton /> } return ( <div> <h1>Welcome, {customer.firstName}</h1> <button onClick={logout}>Sign out</button> </div> ) } Migration Steps Update to Hydrogen 2026.x (includes Customer Account API) Replace legacy auth flows with useCustomerAccount hook Test OAuth flow with new customer accounts Remove legacy session handling code Why Migrate? FeatureLegacyNew MFAManualBuilt-in PasswordlessNoYes Single sign-onLimitedFull OAuth Session securityBasicEnhanced Mobile experiencePoorNative Checklist [ ] Audit themes for legacy customer templates [ ] Replace forms with shopify-account component [ ] Update apps to use UI extensions [ ] Migrate Hydrogen to Customer Account API [ ] Test all auth flows [ ] Remove legacy session code Need help migrating? Weaverse can modernize your storefront in days, not months.
React Router 7.13.1: URL Masking for Modal PDPs in Hydrogen URL masking for modal navigation in React Router 7.13.1 The Problem You want a product quick-view modal that: Opens on top of your collection page Shows a shareable URL (/products/sneakers) Keeps the collection visible in the background Works with deep links and browser history Until now, this required manual backgroundLocation management—a clunky pattern that felt like fighting the framework. Route and URL strategy planning for shareable modal states The Solution React Router 7.13.1 introduces unstable_mask on <Link>. First-class URL masking for Framework/Data Mode. // routes/collection.tsx export default function Collection({ loaderData }) { return ( <div className="collection-grid"> {loaderData.products.map((product) => ( <Link key={product.id} to={`/collection?product=${product.id}`} // Router state unstable_mask={`/products/${product.handle}`} // Browser URL > <ProductCard product={product} /> </Link> ))} {/* Modal overlay */} {loaderData.modalProduct && ( <dialog open> <ProductQuickView product={loaderData.modalProduct} /> </dialog> )} </div> ) } How It Works Router navigates to /collection?product=123 (internal state) Browser shows /products/sneakers (masked URL) Deep link /products/sneakers works normally (mask stripped on SSR) Back button closes modal, restores collection Detecting Masked State import { useLocation } from 'react-router' function ProductModal() { const location = useLocation() // Are we in a modal context? if (location.unstable_mask) { return <ModalProduct /> } // Direct navigation - full page return <FullProductPage /> } Hydrogen Use Cases Modal PDPs from collection grids Image galleries with shareable URLs Cart quick-edit from checkout Filter previews without navigation Important Notes Marked unstable - API may change before stabilization SPA only - Mask removed during SSR (deep links work normally) Requires React Router 7.13.1+ in your Hydrogen project Upgrade npm install react-router@latest
How to Add Shopify's New <shopify-account> Component to Your Hydrogen Storefront Shopify just dropped official docs for the <shopify-account> web component — a native way to let customers sign in directly from your Hydrogen storefront without leaving the page. Implementing the shopify-account component in Hydrogen storefronts If you've ever wrestled with Hydrogen's Customer Account API setup, this is the simplest auth flow you've seen yet. Account migration planning worksheet and implementation flow What Is the <shopify-account> Component? It's a Storefront Web Component that handles the full customer sign-in flow. Drop it in your header, pass two tokens, and your customers get a seamless login experience — all without custom auth routes. Two tokens required: public-access-token → from PUBLIC_STOREFRONT_API_TOKEN in your .env customer-access-token → from the Customer Account API after authentication Prerequisites Before you start: Hydrogen storefront deployed to Oxygen (Getting started guide) Customer Account API configured (Tutorial here) Storefront API permissions in Shopify Admin: unauthenticated_read_customers unauthenticated_read_content unauthenticated_read_product_listings Step 1: Load the Account Component Bundle The bundle isn't included in the default Hydrogen scaffold. Load it via CDN in /app/root.jsx: import { Script } from '@shopify/hydrogen'; // Inside <head> of Layout component: <Script src="https://cdn.shopify.com/storefront/web-components/account.js" /> Step 2: Update /app/root.jsx Loader Pass both publicAccessToken and customerAccessToken down to child components: export async function loader({ context }) { const { storefront, customerAccount } = context; // Get public storefront token const publicAccessToken = context.env.PUBLIC_STOREFRONT_API_TOKEN; // Get customer token (if authenticated) const customerAccessToken = await customerAccount.getAccessToken(); return defer({ publicAccessToken, customerAccessToken, // ...other loader data }); } Step 3: Update PageLayout.jsx Pass the tokens through to your layout and add proper TypeScript types: // Add to @property JSDoc near bottom of file: // * @property {string} publicAccessToken // * @property {string} customerAccessToken Step 4: Replace the Sign In Button in Header.jsx Swap the default "Sign In" link for the <shopify-account> component: function HeaderCtas({ publicAccessToken, customerAccessToken }) { return ( <nav> <shopify-account sign-in-url="/account/login" public-access-token={publicAccessToken} customer-access-token={customerAccessToken} /> {/* Cart icon, etc. */} </nav> ); } Note: sign-in-url should point to your authorization request page — default is /account/login in Hydrogen. Step 5: Upgrade for Better Login UX (Hydrogen ≥ 2025.7.3) If you're on @shopify/hydrogen 2025.7.3+, update /app/routes/account_.login.jsx to use the improved login options: // Use the new login() options for better UX const loginUrl = await customerAccount.login({ // Additional options now available }); Check the full API docs for all available options. Styling The component is fully stylable via CSS. Refer to the Storefront Web Components docs for CSS custom properties. Important: No Localhost Support The Customer Account API doesn't work on localhost. You'll need to deploy to Oxygen to test: shopify hydrogen deploy Test on your production URL after deployment. Why This Matters for Weaverse Users If you're building a Weaverse-powered Hydrogen store, this component drops directly into your theme's header section. No custom auth logic needed. Coming soon: Native <shopify-account> support in Weaverse sections — stay tuned. TL;DR StepFileAction 1root.jsxLoad CDN bundle + pass tokens from loader 2PageLayout.jsxThread tokens to child components 3Header.jsxReplace Sign In with <shopify-account> 4account_.login.jsxUpdate if on Hydrogen ≥ 2025.7.3 Official docs: https://shopify.dev/docs/storefronts/headless/bring-your-own-stack/hydrogen-with-account-component
Using Shopify CLI for Bulk Operations (New Feature) Shopify CLI 3.90.1 introduces powerful new commands that let you execute Admin API queries, mutations, and bulk operations directly from your terminal. Bulk operations workflow in Shopify CLI This is a game-changer for developers who need to script and automate data operations without building custom tooling. Practical terminal-first workflow for release operations New Commands Standard API Queries shopify app execute 'query { shop { name } }' Run any GraphQL query or mutation against the Admin API. Bulk Operations # Start a bulk query shopify app bulk execute 'query { products(first: 1000) { edges { node { id title } } } }' # Watch progress synchronously shopify app bulk execute 'query { ... }' --watch # Check status of running operation shopify app bulk status # Cancel an operation shopify app bulk cancel Why This Matters Before: Bulk operations required: Custom scripts with polling logic Error handling for long-running jobs Complex state management Now: One CLI command Optional --watch flag makes it synchronous Perfect for automation and scripting Practical Use Cases 1. Data Migration Export all products to JSON in one command: shopify app bulk execute 'query { products(first: 10000) { edges { node { id title handle } } } }' --watch > products.json 2. Bulk Updates Update pricing across thousands of variants: shopify app bulk execute 'mutation { productVariantsBulkUpdate(...) { ... } }' 3. AI Coding Agents This is perfect for AI tools like Cursor, Claude, or GitHub Copilot. They can now query and manipulate dev stores without building custom integrations. 4. Scheduled Scripts Use in cron jobs for daily operations: # Daily inventory sync at 6 AM 0 6 * * * shopify app bulk execute 'query { inventoryItems(first: 1000) { ... } }' --watch > /var/log/inventory.json 5. CI/CD Pipelines Integrate bulk operations into your deployment workflow: Pre-deploy data validation Post-deploy data seeding Automated testing with real data Pro Tips Use --watch when you need results immediately (scripts, CI/CD) Combine with jq for powerful JSON processing Perfect for one-off fixes without building full apps Great for prototyping bulk operations before implementing in code Example: Bulk Tag Sync shopify app bulk execute ' mutation bulkOperationRunMutation( $mutation: MutationQuery! $input: BulkOperationInput! ) { bulkOperationRunMutation(mutation: $mutation, input: $input) { bulkOperation { id status } userErrors { field message } } } ' --watch What This Unlocks This feature removes the friction from bulk operations: ✅ No custom polling scripts ✅ No complex state management ✅ Easy automation with cron/CI ✅ AI agents can work with store data ✅ Quick one-off data fixes Learn More For complete documentation, see: Admin API exploration via CLI Bulk Operations Guide Community Announcement Bottom Line This is one of those quality-of-life improvements that makes development significantly easier. If you work with Shopify data at scale, add these commands to your toolkit. Building with Hydrogen? Weaverse helps you ship faster with AI-powered theme development. Get started.
Shopify's New 16KB Metafield Limit: Migration Guide Shopify announced a new 16KB limit for metafield writes starting API version 2026-04. Large metafields hurt storefront performance, and this change enforces best practices. Storage dashboard showing 16KB metafield warning Good news: Existing large metafields remain readable across all API versions. You won't lose data. Bad news: If your app writes >16KB to a single metafield, it will break on API 2026-04+. Example workflow for splitting large metafield content Who's Affected? Check if your app stores: Large JSON blobs in metafields Base64-encoded images or files Long-form content or HTML Logs or analytics data If you're storing more than 16KB in a single metafield, you need to migrate. Migration Strategies 1. Use Metaobjects (Recommended) Metaobjects are designed for complex structured data. Instead of stuffing everything in one metafield, use metaobject references. // Before: Large metafield product.metafields.custom.config = { huge: 'json blob' } // After: Metaobject reference const config = await createMetaobject({ type: 'product_config', fields: { /* structured data */ } }) product.metafields.custom.configRef = config.id Benefits: Better performance More organized data structure Easier to query and filter No size limits 2. Split Across Multiple Metafields Break large datasets into smaller chunks. // Before: One large metafield metafield.value = JSON.stringify(hugeObject) // >16KB // After: Multiple smaller metafields metafield_1.value = JSON.stringify(partOne) metafield_2.value = JSON.stringify(partTwo) 3. Use the Files API For large content (images, documents, long text), use the Files API and store the reference URL in a metafield. 4. Use List Metafields If you're storing multiple values, Shopify's list metafields handle arrays natively without size bloat. Timeline Now: Audit your metafield usage Before April 2026: Complete migration for any >16KB writes API 2026-04+: Limit enforced Quick Audit Script Run this to find large metafields in your app: curl -X POST https://your-store.myshopify.com/admin/api/2026-01/graphql.json \ -H "X-Shopify-Access-Token: $TOKEN" \ -d '{"query":"{ metafields(first: 100) { edges { node { namespace key value } } } }"}' \ | jq '.data.metafields.edges[] | select(.node.value | length > 16000)' Additional Resources Shopify has improved other data platform features to help: Higher metaobject entry limits Increased metafield definition limits per resource Limits apply separately per app (not tied to shop limits) For more guidance, see Data modeling with metafields and metaobjects. Bottom Line If you're not writing >16KB to single metafields, you're fine. If you are, migrate to metaobjects (best option) or split the data across multiple fields. This is a performance optimization that benefits everyone. Plan your migration early. Building with Hydrogen? Weaverse helps you ship faster with AI-powered theme development. Get started.
Introducing Growth and Scale: Weaverse's New Pricing for 2026 As a founder, I've learned that pricing should tell a story—and that story should be about you, not us. Today, I'm excited to announce our new pricing structure: Pay-As-You-Go, Growth, and Scale. They're the result of listening closely to how our customers are building, what they need as they expand, and where we need to invest to support their ambitions. For two years, we've watched merchants build incredible headless storefronts on Weaverse. We've seen stores grow from thousands of monthly visitors to hundreds of thousands. We've seen merchants push our platform further than we expected—and we wanted our pricing to reflect that reality. Why We're Evolving Our Pricing Growth is messy. Your store might handle 50,000 monthly views today and 500,000 next year. We wanted a pricing structure without hard walls—one that lets you start lean and scale smoothly without friction. We also listened to what matters most: flexibility and support. Merchants told us that as they scale, they need more than features—they need reliability, faster response times, and room to grow without worrying about hitting limits. Our new plans directly address that feedback. By introducing PAYG, Growth, and Scale, we're creating a natural progression that matches your business stage. You can start where you need to be, grow without friction, and access the support tier that makes sense for your operation. Importantly, we're being transparent about why the plans cost what they do. Growth and Scale include substantially more infrastructure investment per customer—more capacity, faster processing, priority support—and we're pricing them to reflect that reality while staying competitive in the market. We're not the cheapest option, but we're designed to be the right option for merchants building seriously. Our New Pricing Plans Pay-As-You-Go (PAYG) — Usage-Based PAYG is built for merchants who want full flexibility without commitment. You're getting: Usage-based billing — only pay for what you use, no wasted capacity Full Weaverse features — access to all design and optimization tools Standard support — reach our team when you need them No monthly minimum — perfect for testing, seasonal stores, or variable traffic Who's it for? New stores launching, seasonal businesses, or merchants who want to test Weaverse without committing to a fixed plan. Growth Plan — $59/month Growth is built for merchants doing serious volume. You're getting: 500,000 monthly view credits — enough for stores handling meaningful traffic without compromise Priority support — reach our team faster when you need them All Growth features — full access to Weaverse's design and optimization tools Predictable pricing — know exactly what you'll pay each month Who's it for? Growing stores that are scaling beyond initial launch. You're handling 200K–500K monthly views and need breathing room to expand without hitting limits. Scale Plan — $299/month Scale is for established merchants running high-volume operations. You get: 3,000,000 monthly view credits — handle enterprise-level traffic without constraints Premium support — dedicated support priority and faster response times All Scale features — white-glove support, custom integrations, and advanced optimization Built for enterprise — infrastructure designed for the biggest operations Who's it for? Established merchants with high-traffic storefronts generating 500K+ monthly views. You need reliability, speed, and a team that understands your operation. Quick Comparison PlanMonthly CostView CreditsSupport LevelBest For PAYGUsage-basedPay per useStandardTesting, seasonal, variable traffic Growth$59/month500,000PriorityGrowing stores, 200K–500K views/month Scale$299/month3,000,000PremiumEnterprise, 500K+ views/month Choosing the Right Plan for Your Store The honest answer: look at your traffic and your growth trajectory. Launching or testing? Start with PAYG. Only pay for what you use, no commitment. Getting 200K–500K views monthly? Growth is your spot. Better capacity, priority support, and room to expand. Running 500K+ views or managing high-volume operations? Scale gives you the infrastructure and support to handle anything. Still not sure? Think about this: What's the cost of slowdowns or support delays if your store goes down during peak sales? What's the value of priority support when you need it? If that cost is more than the difference between plans, upgrade. FAQ Can I switch between plans later? Yes. Upgrade or downgrade anytime, and billing adjusts on your next cycle. No penalties. What are view credits? View credits represent the monthly capacity of your storefront—how many visitor interactions your site can handle. One view credit = one page view. If you exceed your monthly allotment, we don't cut you off; we just notify you and work with you on next steps. It's transparent, not punitive. How does PAYG billing work? You're charged based on actual usage at the end of each billing cycle. No monthly minimum, no wasted capacity. Great for stores with variable or unpredictable traffic. When should I switch from PAYG to Growth? When your monthly usage consistently approaches or exceeds the equivalent of Growth plan cost ($59), it makes sense to lock in the fixed rate for predictability and priority support. How do I know which plan I actually need? Check your Weaverse analytics dashboard for your typical monthly views, then match that to a plan with headroom for growth. Our support team is also here to help—just ask. Ready to Explore? If you're already with us, you're set—just keep building. If you're new to Weaverse, now's a great time to start. These plans are designed around real customer needs, and that means you can trust that what you're paying for actually matters. View Our Pricing Plans — Find the tier that fits your store. Questions? Contact Our Team — We're here to help you choose and get started. —Paul, Founder & CEO, Weaverse P.S. Thank you to every merchant building with Weaverse. Your feedback shaped this announcement. Keep building fast, beautiful, and scalable storefronts.
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. https://www.youtube.com/watch?v=gdmy8yUPlmg 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 https://www.youtube.com/watch?v=ZzV2Mk599es 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 https://www.youtube.com/watch?v=ZzV2Mk599es&t=22 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 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 Documentation: Complete guides and API references Pilot Theme Guide: Theme customization Migration Guide: Upgrade to v5+ CLI Reference: Command-line tools GitHub: Open source SDKs and templates Slack Community: Connect with developers Support: Get help from our team 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.
Someone once told me, “You don’t really need your website to go that fast.” I knew what they meant. I’d just spent five seconds waiting for Song for the Mute’s homepage to load. By any standard metric, that’s slow. But I didn’t care. When you’re browsing one of the coolest brands on the internet, and you really want to buy, you’re not timing it. You’re in it. You’re immersed. You’re seeing poetry, storytelling, and fashion blending perfectly together! But most stores aren’t Song for the Mute. And if your brand doesn’t have that kind of magnetic pull yet, performance matters — a lot. Google called it out years ago in their “Milliseconds Make Millions” report. Even today, 82% of users say slow speeds affect their purchasing decisions, and a 1-second improvement in page speed can yield an extra $7,000/day for a $100k/day site. Things haven’t changed. Now, if you're using a traditional Shopify theme, built on Liquid and your site feels sluggish, your first instinct might be to install a performance app. Don’t. Most of them do more harm than good. Others might suggest going headless. I build for Shopify Hydrogen, and even I’ll say this: don’t rush. Can Shopify Liquid Perform Well? Absolutely. Shopify published their own study in late 2023 showing that Liquid storefronts outperform most ecommerce platforms in Core Web Vitals. As of September 2023, 59.5% of Shopify sites passed all CWV thresholds, a stat that continues to climb. Even large-scale merchants like Rothy’s, Rad Power Bikes, and Dollar Shave Club use Liquid and still hit performance benchmarks. Surprisingly, Liquid even outperforms most headless implementations. Shopify found that many SSR frameworks — the ones powering most headless setups — had fewer sites passing Core Web Vitals compared to Liquid. Hydrogen ranked second, but there’s still a gap. So why invest millions in building Hydrogen? Just why? Hydrogen vs Liquid/Shopify Themes A Rebuttal Against Liquid First, I have to say that it might be hard to compare apples to apples in this case, mainly because the data in Shopify’s benchmark focuses on real storefronts using Hydrogen. Many of these early adopters built custom experiences without performance best practices. In contrast, Liquid storefronts benefit from: Years of optimization by Shopify's core teams Default themes like Dawn that are tightly optimized A templating model that constrains performance pitfalls Hydrogen, on the other hand, gives full freedom. Yes, this freedom cuts both ways; it brings performance potential and risk of poor implementation. Hydrogen storefronts can match or exceed Liquid performance when built well. Shopify’s own documentation even notes: “Some routes in the Hydrogen demo store template saw their load time cut in half” after optimizing GraphQL queries. Hydrogen is built on React Server Components (RSC) and uses Vite for ultra-fast development. Shopify chose this stack specifically because: RSC reduces client JS bundle size significantly Pages stream in progressively with lower Time to First Byte (TTFB) Data fetching is done on the server, not in the client render phase You get full control. You also get full responsibility. That’s why some Hydrogen stores load in half the time, and others fall flat. When Should You Consider Hydrogen? Page speed shouldn’t be the only factor in deciding between Shopify Hydrogen and Liquid. The real choice comes down to how much control you need over your storefront experience. If you’re planning to run A/B tests, personalize content, or build dynamic user interfaces, you’ll hit the limits of Liquid fast. Hydrogen is built for that kind of flexibility. It’s designed for brands that want to iterate quickly, experiment often, and optimize every touchpoint. On the other hand, Liquid works well for stores that prioritize simplicity and stability. Its guardrails are a strength if your store setup is relatively fixed, maybe with just a few campaign landing pages here and there. Use Hydrogen if: Your store has 500+ SKUs or 100K+ visits/month, and you’re seeing speed decline. You need to launch experiences that your theme can’t handle: multi-currency PWA, AR tools, immersive UIs. Your team (or agency) is fluent in React and headless workflows Stick with Liquid if: You’re validating a new product or category All your needs are covered within the theme editor, and your site already performs well You don’t have the engineering support to maintain a custom frontend The TL;DR In short, Liquid gives you structure. Hydrogen gives you freedom. Choose based on how far you plan to push your storefront. How To Build Hydrogen Storefronts Faster? One of the biggest reasons developers hesitate to go headless is that it breaks the visual editing experience. The Shopify Theme Editor disappears. Content teams are locked out. Everything becomes a Jira ticket. Weaverse fixes that. With Weaverse Hydrogen, developers can build Hydrogen themes and components via an SDK, expose them in a familiar drag-and-drop editor, just like Shopify Theme Editor, and let content teams reuse, remix, and publish without touching code. And it's only getting easier. With Weaverse AI, the gap between idea and execution shrinks dramatically. Developers will soon be able to turn Figma design into Hydrogen landing pages using Weaverse and Figma MCP. Merchants will soon be able to edit their Hydrogen storefronts using a natural language interface. If you’re interested in Weaverse AI, let me know here, and I’ll reach out once it’s ready!
Building An Online Store: Then & Now Let’s start with a story. A history lesson, perhaps. It is 1999. Your boss tells you the company needs an online store. You nod gravely and call your web guy. He nods back and disappears for six months. You don’t hear from him again until he returns with 10,000 lines of spaghetti PHP, a MySQL database held together with duct tape, and a shopping cart that breaks when you add more than three items. You launched anyway. The homepage has dancing gifs. The checkout form requires 12 fields. Half of your customers abandon their carts. You get one sale a day. But hey you’re a dot-com entrepreneur now. It is 2007. Your boss tells you the company needs an online store. You go to Magento and download the open-source package. You spin up a server, start following a forum thread with 43 pages titled “Help: Checkout Broken!” and spend the next few weeks configuring payment gateways, plugins, cron jobs, and SSL certificates. You hire a developer to customize the theme. He hardcodes your logo into the footer and disappears. You hire another developer to undo what the first one did. The store launches. It’s not great, but it works. Kind of. At least until the next security update. It is 2016. Your boss tells you the company needs an online store. You open Shopify. It takes you 45 minutes to get to your first product page. You feel powerful. You don’t need a developer. You need a laptop and a credit card. You buy a theme. You connect Stripe. You install a bunch of apps that each solve one extremely specific thing: reviews, popups, upsells, abandoned cart reminders, shipping rate calculators, order printers, email sequences, and chat widgets. It’s a Frankenstein monster of app integrations, but it’s yours. You ship. You sell. You sleep. Sort of. Then the cracks start showing. You want to customize the checkout? Sorry, you need Plus for that. You want a multilingual storefront with dynamic pricing across geographies? Maybe hire an agency. You want to build a branded mobile experience that feels native? Time to hire a dev again. It is 2023. Your boss tells you the company needs an online store and he needs it to be butterfly, fast, and performant. You’re familiar with React and you think Shopify's built-in functionalities are still pretty good, so you decide to build with Shopify Hydrogen. It’s Shopify’s answer to headless. It’s powerful. It lets your developers do things that Liquid never could. Your storefront looks stunning with buttery transitions and personalized landing pages. And still, your performance scores are through the roof. You’ve replaced four apps with custom code. But it also demands more. You’re writing GraphQL queries, managing server components, and wrestling with route loaders and caching strategies. Now your team is busy maintaining a headless stack, they barely have time to explain. What used to take hours now takes days. What used to take days now takes a roadmap. Everything is beautiful and nothing is simple. It is 2026. Your boss tells you the company needs an online store. You open Figma. Then you open Weaverse. You type something like: “Turn this Figma design into a Weaverse page. Five products. Ships worldwide. Prioritize mobile. Feels editorial.” You watch as the layout comes to life. The hero image loads before you finish your sentence. You adjust it with a message: “Make it taller. Add motion.” You change the font. You swap the checkout flow. You personalize the homepage with a prompt. It’s Hydrogen underneath, but you don’t feel it. The complexity of headless is still there. But it’s abstracted away from you, turned into something anyone can use. The future isn’t Hydrogen or AI. It’s Hydrogen plus AI. That’s how Weaverse AI is being built. And this time, everything is possible and simple. Introducing Weaverse AI, The First AI Store Builder for Shopify Hydrogen In 2022, Shopify launched Hydrogen, a React-based framework for building highly customizable, interactive, and high-performance storefronts for Shopify stores. Weaverse was created 6 months later. For years, we’ve been focused on one thing: helping Shopify merchants build better storefronts, faster. Before Hydrogen, that meant delivering Liquid-based themes that looked great out of the box and were easy to use. But Liquid has limits. Custom layout logic often requires installing third-party apps. Dynamic sections depend on metafield hacks. Over time, these workarounds pile up, slowing down performance and restricting flexibility. When Hydrogen became available, we saw a better path forward. Weaverse Hydrogen is our response: a platform that brings Hydrogen’s flexibility into a merchant-friendly environment. With Weaverse Hydrogen, developers can build Hydrogen themes and components via the SDK, make them configurable in the visual editor, and let content teams reuse and remix them across storefronts. Merchants can drag and drop prebuilt components into a Hydrogen-powered store, preview changes in real time, and deploy to Oxygen or locally with ease. It felt like Shopify Theme Editor, but as powerful as Hydrogen can be. Now we’re taking the next step with Weaverse AI. What Is Weaverse AI and What Can It Do? Weaverse AI helps developers, agencies, and merchants build Shopify Hydrogen stores faster using a natural language interface. Imagine describing the section you want—“three columns with product cards and buy buttons”—and it generates it. Upload a Figma file, and it scaffolds a matching theme. You start with a prompt and end with a shoppable page. This is where Weaverse AI leads. There are two major pieces behind this shift: 1/ Weaverse AI Assistant (inside Weaverse theme customizer): Merchants and marketers can build and update Hydrogen pages using natural language. Want a new banner? Change layout? Update styling? Just ask. Generated sections can be promoted to the component library and reused across the organization. 2/ Weaverse MCP (Model-Component-Pipeline): Developers can go from Figma to Hydrogen in one conversation. Unlike black-box generators, the output is developer-friendly, inspectable, and structured around Hydrogen code. Every section is visible to merchants, editable in the GUI, and tweakable by devs. AI defines schema, default values, and preview logic for seamless editing. For Developers: Build Less, Deliver More Faster Prototyping and Development: Weaverse AI speeds up development. Instead of building boilerplate sections from scratch, developers can scaffold pages from Figma designs and let AI handle the repetitive work. You focus on what matters: performance, business logic, and standout features. In practice, a developer could sketch out a site structure in Weaverse’s visual builder and let AI fill in the gaps, achieving in a day what might have taken a week. Less Maintenance Works: AI assistants can handle routine updates or bulk changes across a site. For example, if a client wants to change all CTA buttons to a different style, an AI could execute that change across the codebase. It’s easier to keep the storefront fresh and updated without a continuous manual slog. For Agencies: Faster Builds, Better Margin Higher Throughput, Shorter Timelines: With AI generating first drafts and a visual tool (Weaverse Theme Customizer) enabling rapid tweaks, projects that took months can now ship in weeks, without cutting corners. This means agencies can handle more clients in parallel or offer faster turnarounds, increasing their capacity and revenue potential. Custom for Everyone: Because baseline development is faster, agencies can spend more time on strategy, branding, and customization for each client. It becomes feasible to offer truly bespoke designs to even smaller clients, since the heavy lifting (coding the theme) is largely automated. Even small clients can afford something custom. AI removes the overhead, so you can offer premium service without premium dev hours. Productized Packages: Offer AI-assisted setup packages, budget Hydrogen builds, or retainers focused on optimization instead of maintenance. You move from vendor to strategic partner. For Merchants: More Control, Less Waiting No-code Visual Editing: Merchants can finally have the best of both worlds: the flexibility and speed of a custom headless site, and the ease-of-use of a Shopify page builder. You can launch landing pages, rearrange product sections, or update content without waiting on a dev. The builder is visual and intuitive, and the AI assistant can guide or even generate entire sections for you Faster Iteration. A/B test homepages. Add new sections for a campaign. Update product grids before lunch. With Hydrogen’s speed and AI’s flexibility, iteration is instant. You just chat. Lower Overhead. Reduce dependency on developers for day-to-day changes. Let AI help with SEO, performance suggestions, or layout fixes. You run a modern, high-converting store without needing a tech team on call.