Weaverse LogoWeaverse
All ArticlesPaul Phan
7 mins read

The Future of Building with Shopify: Hydrogen and AI

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 ...
#ecommerce#shopify
Table of Contents

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.

Weaverse

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.

Reactions

Like
Love
Celebrate
Insightful
Cool!
Thinking

Join the Discussion

Continue Reading

More insights from the Weaverse team

Shopify Storefront MCP Is Live — What It Means for Headless Commerce in 2026

Shopify Storefront MCP Is Live — What It Means for Headless Commerce in 2026

Shopify Storefront MCP Is Live — What It Means for Headless Commerce in 2026 Shopify just shipped the Hydrogen Winter 2026 Edition, and buried in the release notes is a feature that changes how AI interacts with ecommerce: Storefront MCP. MCP (Model Context Protocol) is the emerging standard for AI agents to interact with external systems. Shopify's implementation means AI assistants can now wire directly into your Hydrogen storefront — query real-time product data, manage carts, guide checkout — all through structured APIs. Here's what's live now: 1. Storefront MCP AI agents built directly into Hydrogen storefronts. Real-time product data, cart management, checkout guidance. This is the infrastructure layer for agentic commerce — not a chatbot widget, but a protocol for AI assistants that shop on behalf of customers. → https://shopify.dev/docs/apps/build/storefront-mcp 2. Shopify Catalog Your headless store becomes discoverable by ChatGPT, Perplexity, and other AI shopping tools. When a customer asks an AI assistant to "find me the best running shoes under $150," your products can be in that answer set. → https://help.shopify.com/en/manual/promoting-marketing/seo/shopify-catalog 3. Dev MCP Cursor, Claude, and other AI coding tools now have native Hydrogen documentation access. Better code suggestions, less hallucination, faster storefront builds. → https://shopify.dev/docs/apps/build/devmcp Why this matters now The "agentic commerce" shift is arriving in March 2026. But the winners won't be brands with the best AI marketing — they'll be brands with storefronts AI can actually interact with. Hydrogen + React Router + Oxygen is purpose-built for this: Structured Storefront API responses AI can parse Edge-deployed sub-1000ms TTFB for AI-referred traffic Full control over JSON-LD and machine-readable markup Liquid themes require HTML parsing, slower response times, and offer limited structured data control. The question for 2026 It's not "do I need headless?" It's "is my storefront AI-ready?" At Weaverse, we've been building for this moment — visual editing for Hydrogen that doesn't sacrifice the developer control you need to wire up Storefront MCP and AI agents properly. The future isn't "website as database." It's structured backend for AI + compelling frontend for humans. Build for both. → https://weaverse.io FAQ What is Storefront MCP? MCP (Model Context Protocol) is a standardized way for AI agents to interact with external systems. Shopify's Storefront MCP lets AI assistants query your Hydrogen store's product data, manage carts, and guide checkout through structured APIs. How is this different from a chatbot? Chatbots are frontend widgets that interact with customers. Storefront MCP is infrastructure — AI agents can interact with your store's data and commerce logic directly, enabling deeper integration with AI shopping assistants like ChatGPT and Perplexity. Do I need to be on Hydrogen to use this? Storefront MCP is designed for Hydrogen and headless storefronts. Liquid themes can benefit from Shopify Catalog (AI discoverability) but lack the structured API access that makes MCP powerful. When is this available? Storefront MCP, Shopify Catalog, and Dev MCP are all live now as part of the Hydrogen Winter 2026 Edition. How do I get started? If you're already on Hydrogen, review your Storefront API implementation and ensure your product data is complete. For teams considering the move, now is the time to evaluate Hydrogen's advantages for the agentic commerce era. Sources Shopify Storefront MCP Documentation Shopify Catalog Help Center Dev MCP Documentation Hydrogen Winter 2026 Update

By Paul Phan
Read

Why Your Shopify Storefront Needs to Be AI-Ready Right Now

Why Your Shopify Storefront Needs to Be AI-Ready Right Now Breaking: Shopify just emailed merchants that ChatGPT integration is coming "later in March." Buyers will find your products and complete purchases inside ChatGPT. But here's what most people missed: OpenAI simultaneously scaled back Instant Checkout. Purchases now redirect to your storefront. That changes everything. What just happened Two signals, one story: Shopify Agentic Storefronts — confirmed launch in March. Your products become discoverable and purchasable inside ChatGPT. OpenAI's checkout pivot — no more seamless Instant Checkout. AI sends buyers to merchant storefronts to close the deal. Harley Finkelstein called this "the transformation of a lifetime" at Upfront Summit LA on March 16. The implication: AI will drive high-intent traffic to your storefront. Whether you convert them depends on how AI-ready your store is. Why headless wins this shift Here's the technical reality most merchants don't understand: AI agents don't browse like humans. They don't see your beautiful Liquid theme. They parse structured data. When ChatGPT recommends your product and the buyer clicks through, what happens next depends on your architecture: Liquid ThemeHydrogen Headless HTML parsing requiredDirect Storefront API access Slower TTFBEdge-deployed on Oxygen Limited structured dataFull JSON-LD control Customer account frictionNative Customer Account API AI-referred traffic is high intent. These aren't browsers. These are buyers who've already decided. A slow, unoptimized Liquid store wastes that intent. The developer checklist for AI-readiness If you're building on Shopify in 2026, here's what "AI-ready" actually means: 1. Structured product data (metafields) AI agents parse metafields to understand your products. If your specs live only in HTML descriptions, AI can't read them. Action: Move critical product data to metafields. Use standard namespaces (custom.specs, custom.materials, etc.). 2. JSON-LD schema markup Google's crawlers aren't the only consumers of structured data anymore. AI agents rely on schema.org markup to understand your catalog. Action: Implement Product, Offer, and Organization schema. Validate with Google's Rich Results Test. 3. Sub-1000ms TTFB on mobile AI-referred buyers expect instant loads. If your Liquid theme takes 3+ seconds, you've lost them before they see your product. Action: Audit Core Web Vitals. Consider Hydrogen + Oxygen for AI-critical traffic paths. 4. Customer Account API readiness AI-assisted purchases still require authentication. Legacy customer accounts create friction. The new Customer Accounts system is built for this world. Action: Migrate from legacy customer accounts. Enable multipass for seamless AI-to-storefront handoffs. What OpenAI's pullback really means The Instant Checkout retreat isn't a failure. It's a recognition: Merchant storefronts matter. AI can find products. It can compare specs. It can build carts. But the final purchase decision—trust, brand experience, upsells—still happens on your turf. This is good news for serious merchants. It means: You control the conversion experience You own the customer data You can optimize for AI-referred traffic specifically But only if your storefront is built for it. The hidden risk: AI-referred traffic is unforgiving Here's what keeps me up at night: AI-referred buyers have zero patience. They didn't come from Google search, slowly evaluating options. They came from ChatGPT, where an AI already narrowed their choices. By the time they hit your store, they're ready to buy. If your store: Takes 3+ seconds to load Has broken mobile navigation Requires account creation before checkout Can't handle high-intent traffic spikes You don't just lose a sale. You waste the most valuable traffic source emerging in 2026. What to do right now This week: Audit your mobile load speed Check metafield coverage on top 20 products Validate JSON-LD schema This month: Test your Storefront API response times Review Customer Accounts migration status Evaluate Hydrogen for AI-critical paths This quarter: Build AI-readiness into your 2026 roadmap Consider headless for high-intent landing experiences Implement proper analytics for AI-referred traffic attribution The bigger picture Agentic commerce isn't coming. It's here. Shopify's integration with ChatGPT is just the start. Google, Meta, and every major platform are building AI shopping experiences. The question isn't whether AI will drive commerce traffic. It's whether your storefront is ready to receive it. The merchants who win in 2026 won't just have great products. They'll have infrastructure designed for an AI-first shopping journey—structured data, fast APIs, and storefronts that convert high-intent AI referrals. Don't optimize for yesterday's traffic. Build for tomorrow's. Ready to audit your storefront's AI-readiness? Talk to Weaverse. FAQ When does Shopify Agentic Storefronts launch? Shopify emailed merchants it will arrive "later in March 2026." Does this work with Liquid themes? Technically yes, but Liquid themes face structural limitations (parsing requirements, TTFB, structured data control) that Hydrogen headless storefronts don't have. What happened to OpenAI Instant Checkout? OpenAI scaled back the feature. AI-assisted purchases now redirect to merchant storefronts rather than completing inside ChatGPT. Is this only for Shopify Plus? No, Agentic Storefronts will be available to all Shopify merchants, though implementation complexity varies by plan. How do I track AI-referred traffic? Implement UTM parameters and proper attribution. Shopify hasn't released specific AI referral tracking yet, but standard analytics with custom segments can help. Sources TechCrunch: Shopify and OpenAI agentic commerce Modern Retail: Agentic storefronts explained Shopify Changelog: Upcoming features Ringly: Agentic commerce analysis

By Paul Phan
Read

Shopify’s CEO Used a Coding Agent to Make Liquid 53% Faster — What That Means for Shopify Teams

Shopify’s CEO Used a Coding Agent to Make Liquid 53% Faster — What That Means for Shopify Teams When Shopify CEO Tobi Lütke shared that work on Liquid had delivered 53% faster parse + render and 61% fewer allocations, the obvious takeaway was simple: Liquid just got faster. That matters. But the bigger signal is more important: AI coding agents are now producing meaningful improvements inside mature commerce infrastructure. This was not a toy demo or a greenfield side project. It was a serious optimization effort on one of Shopify’s most battle-tested open-source systems — with public benchmarks, a real pull request, and dozens of iterative experiments behind it. For Shopify teams, that is the real story. The takeaway is not just that Liquid got faster. It is that the workflow behind the gain — benchmarks, tests, and agent-driven experimentation — is becoming a practical advantage for teams building across the Shopify stack. Shopify CEO Tobi Lütke publicly shared the Liquid performance work via X, while the linked pull request documents the result: 53% faster parse + render and 61% fewer allocations. The more interesting takeaway is not the headline number alone — it is that AI-assisted optimization is now working on production-grade commerce infrastructure. Source: Tobi Lütke on X and Shopify’s public Liquid PR #2056. The actual news The public Liquid pull request shows a serious optimization effort: 93 commits around 120 autonomous experiments 53% faster parse + render 61% fewer allocations This was not magic. It was a disciplined workflow: define the benchmark give the agent a measurable target let it test many ideas quickly keep the safety net tight with tests That combination matters. The AI did not replace engineering judgment. It accelerated the search space. And that is exactly why this is a bigger story than “Liquid got faster.” Why this matters beyond Liquid Liquid is one of the most mature codebases in the Shopify world. It has been touched by hundreds of contributors, hardened over years, and optimized in ways most teams never reach. So when a coding agent still manages to find meaningful gains there, it tells us something important: AI-assisted optimization is no longer theoretical. It works best when three things already exist: a strong test suite a clear benchmark a codebase worth improving That applies far beyond Liquid. It applies to: Shopify themes Hydrogen storefronts internal apps data transformation pipelines storefront rendering bottlenecks ecommerce developer tooling In other words, this is not just a Ruby templating story. It is a workflow story. The real unlock is not “AI writes code.” It is faster experimentation against benchmarks and tests. Liquid is not dead. Shopify is still investing in it There is a lazy narrative in headless commerce that goes something like this: Liquid is legacy. Hydrogen is the future. Reality is more useful than that. Shopify is still clearly investing in Liquid because Liquid still powers a massive share of real storefronts. Faster Liquid benefits merchants immediately. It improves the baseline for Online Store 2.0 teams. And it reminds everyone that themes are still the default for a reason: simpler operations lower implementation cost fewer moving parts stronger guardrails That matters. For many brands, the right answer in 2026 is still not “go headless.”It is “make the current storefront better.” This update strengthens that case. What Hydrogen teams should learn from this If you work on Hydrogen, the lesson is not “Liquid won.” The lesson is: the cost of optimization is changing. Hydrogen still gives teams things Liquid cannot easily match: more custom UX control richer interactive storefront patterns deeper architectural flexibility better fit for complex multi-surface commerce experiences stronger alignment with custom React workflows That has not changed. But this story does highlight a new reality: Teams that know how to combine benchmarks + tests + agents will improve faster than teams that do not. That matters just as much in Hydrogen as it does in Liquid. Because the bottleneck for many headless teams is not just framework choice.It is iteration speed. How fast can you: identify a real bottleneck test a hypothesis run experiments safely keep code quality high ship improvements without blowing up the roadmap AI agents are getting very good at exactly that layer of work. The real takeaway: Liquid vs Hydrogen is still the wrong fight A lot of Shopify discourse still wants a clean winner. Liquid or Hydrogen.Themes or headless.Simple or modern. That framing misses the point. The more useful mental model is: Liquid gives you guardrails Hydrogen gives you leverage AI lowers the cost of improving both That is the shift. For a standard storefront with a small team, Liquid remains the safer default.For teams that need custom experiences, deeper control, or more ambitious frontend capability, Hydrogen can still be the right move. But now there is a new force compressing the gap: AI-assisted development is making optimization cheaper on both sides. That does not erase tradeoffs.It just changes the economics of improvement. The story is bigger than Liquid vs Hydrogen. AI is lowering the cost of improving both. What Shopify teams should do now Instead of treating this story as a Liquid-vs-Hydrogen argument, use it as a prompt to improve your own workflow. If you are on Liquid Do this first: audit app bloat review script load trim media weight benchmark core templates identify repeated render bottlenecks Then ask: what can be measured clearly? what can be tested safely? where can agents help us search for improvements faster? You may not get a 53% gain. But you may find meaningful wins that were too tedious to chase manually. If you are on Hydrogen Do not dismiss this as irrelevant because it happened in Liquid. Instead ask: where are our real rendering bottlenecks? what parts of the storefront are slow but measurable? what repetitive optimization work keeps getting deprioritized? do we have the tests and benchmarks needed to let agents help? The teams that benefit most from coding agents will not just be the teams with the newest stack. They will be the teams with the clearest feedback loops. Why this matters for modern Shopify teams At Weaverse, we care about Hydrogen because merchants need more than raw frontend flexibility. They need a way to move faster without turning every storefront change into a developer bottleneck. That is why this moment matters. The future is not just “AI writes code.” The future is: better workflows tighter feedback loops safer experimentation faster implementation lower cost of iteration across the storefront stack That applies whether you are optimizing Liquid or building on Hydrogen. And it is exactly why the best Shopify teams in 2026 will not just choose the right stack. They will choose the right development system. Final thought Tobi’s Liquid optimization story is not just impressive because of the number. It is impressive because it shows what happens when AI is used the right way: clear goal measurable target strong tests lots of rapid experimentation That pattern is bigger than Liquid. It is a preview of how serious Shopify teams will build and optimize from here. The future is not Liquid versus Hydrogen. It is teams using AI to make both better. FAQ Does this mean Liquid is better than Hydrogen? No. It means Liquid is still improving, and that AI-assisted optimization can create real gains in mature systems. Hydrogen still makes sense for teams that need more control, flexibility, and custom UX. Does this prove AI can optimize production code safely? It shows AI can contribute meaningfully when the workflow is disciplined. The key ingredients are benchmarks, tests, and human review. Why does this matter for Shopify merchants? Because the economics of improvement are changing. Teams may be able to ship better performance and faster iterations without needing the same amount of manual optimization effort. What should merchants do right now? If you are on Liquid, improve the existing storefront before assuming headless is necessary. If you are on Hydrogen, invest in stronger benchmarks and test coverage so your team can use agents safely and effectively. What is the bigger strategic takeaway? The biggest shift is not one framework beating another. It is that AI is reducing the cost of experimentation across the Shopify stack. Sources Tobi Lütke on X Shopify/liquid PR #2056 Simon Willison: 53% faster parse+render, 61% fewer allocations

By Paul Phan
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.