Weaverse LogoWeaverse
Paul Phan
12 mins read

So You Want To Get A CMS for Your Shopify Headless Storefront?

If you’re here, you’re likely looking for a headless CMS solution, so I won’t bore you with the regurgitated content on what is headless commerce, or its benefits. You’re here because you know the power of headless - whether it’s about snappy perform...
#shopify#headless-cms
So You Want To Get A CMS for Your Shopify Headless Storefront?
Photo by Niklas Ohlrogge on Unsplash

If you’re here, you’re likely looking for a headless CMS solution, so I won’t bore you with the regurgitated content on what is headless commerce, or its benefits. You’re here because you know the power of headless - whether it’s about snappy performance, bespoke user interfaces, or integrating cutting-edge web technologies. So I’ll try to be concise and straight to the point.

When looking for a Shopify Headless CMS, it’s important to be clear about how you’d go headless with Shopify. There are 02 ways:

  • Using Shopify’s APIs: These let your custom front end communicate smoothly with Shopify’s robust back end.

  • Frameworks like Hydrogen: Shopify’s own framework for building web storefronts that are fast, dynamic, and tailored to your brand.

There are 02 ways to go headless with Shopify, let’s take a closer look at both of them.

Going Headless With Shopify: Using Storefront API

The Storefront API is one of the cornerstones of Shopify's headless offerings. It opens the door to the full spectrum of Shopify's commerce capabilities necessary for creating engaging buyer experiences. This includes everything from optimized carts and product collection pages to search functionalities and advanced pricing options. What makes the Storefront API particularly powerful is its framework-agnostic nature, meaning it can integrate with any development tools you prefer, such as Next.js, Gatsby, or Astro - or any CMS you prefer.

Take Kotn, an online clothing retailer, as an example. They used the Storefront API with Next.js to combine two separate online stores into one smooth operation. This setup allowed them to add a new content management system, custom product pages, and a unique checkout experience, showcasing their brand's uniqueness while Shopify handled the standard e-commerce features.

This API is designed to deliver lightning-fast experiences across all devices and channels, optimizing even the biggest sales events without any performance throttling. It operates on a global scale, deployed to the edge, ensuring quick load times without rate limits, and serving a wide range of client requests.

Going Headless With Shopify: Using Storefront API

For those looking for a more structured approach, Shopify offers Hydrogen and Oxygen, its official development stack for building dynamic and scalable headless commerce sites. Hydrogen is built on the React-based Remix framework, known for its ease of use and high-performance standards. This setup includes features like Optimistic UI and Nested Routes, which enhance the user experience by making interactions feel swift and smooth.

  • Hydrogen offers a suite of optimized components and hooks that are pre-configured for seamless integration with Shopify’s APIs. This "opinionated" tech stack means that while it guides you toward best practices, it remains flexible enough to allow integration with your existing tools and services.

  • Oxygen, on the other hand, is Shopify’s hosting solution, designed to deploy Hydrogen stores rapidly. It features a global distribution network, ensuring your site is served as close to your customers as possible, which enhances site speed and reliability. Oxygen is included at no additional cost in Shopify plans, supporting your development efforts by reducing overheads while ensuring peak performance globally.

Together, Hydrogen and Oxygen provide a powerful duo for you to launch high-performing online stores quickly. For example, the collaboration between Patta and Tommy Hilfiger on a headless commerce platform showcased a 90s hip-hop culture-themed e-commerce experience that was set up in just two weeks, demonstrating the speed and agility of Shopify’s headless solutions.

However, due to the nascent state of Hydrogen, the number of integrated CMS might be more limited. We'll talk more about that later.

First, how do you choose the right Shopify Headless CMS?

II. How To Choose The Right Headless CMS

Choosing the right headless CMS for your Shopify store can feel like picking out a new smartphone—there are a ton of options, each with its own bells and whistles. Here’s how you can navigate this without getting lost in the tech jargon.

  • Integration with Shopify: First things first, make sure the CMS plays nice with Shopify. It needs to snugly fit with Shopify’s APIs so that things like your product info, customer data, and orders flow seamlessly between the CMS and Shopify. This integration is crucial because it ensures that updates on one end automatically sync across the board, keeping your store's front and back ends on the same page.

  • Technical Complexity: Headless CMS platforms vary wildly in how tech-heavy they are. Some are plug-and-play, while others might require a PhD in computer science (just kidding, but only sort of). Consider your team's tech skills when choosing a CMS. If tweaking HTML sounds daunting, look for a CMS with a friendly user interface and lots of support resources.

  • Higher Initial Costs: Going headless isn’t cheap—at least initially. Because you're custom-building parts of your site, you might need to invest more upfront, especially if you’re hiring developers to set things up. However, think of it as an investment; a well-set-up headless CMS can save you money in the long run by making your site faster, more flexible, and easier to update.

  • Integration Challenges with Third-party Apps: Remember all those Shopify apps you love? Integrating them with a headless CMS can be tricky. Some apps are designed to work with Shopify’s standard front end and might not function as expected in a headless environment. Before committing to a CMS, check which apps are compatible and whether you’ll need to find alternatives.

  • Scalability: Think about where you want your business to be in the next few years. The CMS you choose should be able to scale with your business. This means it should handle increased traffic and content without a hitch. Check if the CMS can manage a growing product database without affecting the speed or user experience of your site.

  • Security Features: Security is non-negotiable, especially in e-commerce. A headless CMS should offer robust security features to protect both your data and your customer’s information. Look for CMS platforms that provide regular updates, strong data encryption, and compliance with international security standards like GDPR.

  • Developer Community and Support: A strong developer community can be a lifesaver, especially when you run into technical issues or want to add custom features. A CMS with an active community means you’ll find plugins, tools, and troubleshooting advice readily available. Also, check the kind of support offered by the CMS provider—24/7 support can be crucial for businesses operating in multiple time zones.

  • Content Workflow and Collaboration Features: If you have a team handling content, the CMS should have tools that facilitate collaboration. Look for features like multi-user roles and permissions, workflow management, and real-time editing capabilities. These features can greatly enhance productivity and ensure that content updates are seamless and error-free.

  • SEO Capabilities: Since organic search is a major traffic driver for most e-commerce sites, your headless CMS should be strong on SEO. This includes SEO-friendly URL structures, easy sitemap generation, and the ability to customize meta tags without needing to dive into the code.

  • Customizability and Extensibility: Can you tweak it to fit the specific needs of your business? Check if it allows for the integration of custom code or if it supports the APIs of third-party services you might want to use. The ability to extend the functionality of your CMS as your business evolves is crucial.

  • Multilingual and Multi-regional Support: If you're planning to sell globally - which is often the case with Shopify, your CMS should be up to the task of handling multiple languages and regional differences seamlessly. Look for a CMS that not only supports translation but also localizes content according to different regions. This includes adjusting the layout, currency, and even content based on local market preferences and legal requirements.

  • API Flexibility and Robustness: The API is the backbone of a headless CMS, facilitating all interactions between your front end and the back end. Ensure that the CMS offers comprehensive API documentation and robust endpoints that cover all potential needs, from basic content retrieval to complex interactions. Flexible APIs allow for more creative front-end experiences and integration with other business systems.

  • E-commerce Specific Features: Given that you're operating within Shopify's ecosystem, it's beneficial to select a CMS that offers features specifically tailored for e-commerce. This includes support for product variations, dynamic pricing models, and inventory management integration. A CMS with strong e-commerce capabilities can provide a more cohesive user experience and streamline backend management.

Choosing a headless CMS isn’t just about going with the most popular or cutting-edge option. It’s about finding the right fit for your business needs, technical capabilities, and budget. Think carefully about what you need your CMS to do, and choose one that will help your store thrive without causing a headache.

10 Headless CMS for Shopify

When you’re deep into the Shopify game and looking to go headless, picking the right CMS is more about aligning with your business strategy than just going with the biggest name out there. Here’s a rundown on some of the top players in the headless CMS market:

1. Weaverse

Weaverse is the right CMS for you - if you go headless with Shopify Hydrogen.

As the first CMS built native for Hydrogen, Weaverse comes with a familiar visual editor on top of Hydrogen. With Weaverse, developers can use Weaverse SDKs to build reusable, customizable Hydrogen themes, and share them with non-technical merchants for code-free editing.

Using a visual editor just like Online Store 2.0, non-technical users can use sections, drag and drop, edit content, add text, add animations, and enrich their headless storefronts.

  • Pros:

    • Native integration with Hydrogen.

    • Intuitive editing experience, making it easier for everyone to manage and edit content.

    • SDKs and templates to facilitate easy development of reusable components.

    • Flexible route structure that allows for custom nested pages.

    • Custom markets and localization features.

  • Cons: Relatively new so more mature functionalities are still in development.

2. Contentful

Contentful is a favorite among developers for its flexibility and scalability. It's known for its robust APIs and a strong emphasis on delivering digital experiences across multiple channels, especially suited for enterprises that need a complex, multi-integrated environment.

  • Pros: Highly customizable, strong integration capabilities, extensive API support.

  • Cons: Can be complex to set up, has relatively higher costs, and may require experienced developers.

2. Prismic

Prismic offers a more streamlined, user-friendly interface that's great for teams looking for a simpler, more straightforward CMS experience without sacrificing functionality.

  • Pros: User-friendly interface, custom type builder for structured content, built-in preview capabilities.

  • Cons: Limited built-in e-commerce-specific features, less control over complex integrations compared to some rivals.

3. ButterCMS

ButterCMS is a good option for those who want an all-in-one CMS that offers marketing-oriented features alongside content management. It’s designed to be plug-and-play, which can be a major time-saver.

  • Pros: Easy to use for marketers and developers alike, SEO features built-in, fast content delivery.

  • Cons: Less flexibility for deeply custom applications, may not scale as well as more robust platforms.

4. Sanity

Sanity stands out with its real-time collaboration tools and fully customizable editor that can be tailored to exact project requirements. It’s particularly good for teams that need to manage content collaboratively in real time.

  • Pros: Highly customizable, real-time collaboration, portable text editor.

  • Cons: Steeper learning curve, pricing can escalate as usage increases.

5. Strapi

Open-source and developer-focused, Strapi gives full control over the API and admin panel. It's a strong choice for tech-savvy teams looking to build a bespoke e-commerce experience from the ground up.

  • Pros: Full control over customization, strong community support, cost-effective.

  • Cons: Requires more technical expertise, self-hosting means handling your own updates and security.

6. Storyblok

Storyblok shines with its visual editor that allows marketers to see content changes in real-time. It's especially useful for teams that require a more intuitive content creation process.

  • Pros: Visual editing interface, robust plugin system, strong multi-language support for global businesses.

  • Cons: Custom layouts can require more development time, and its unique block structure may have a learning curve for new users.

7. Ghost

Ghost is a sleek, minimalist CMS focused on blogging and publishing but has been adapted for various uses, including e-commerce through integrations like Shopify.

  • Pros: Simple and intuitive user interface, SEO optimized out of the box, fast content delivery.

  • Cons: Primarily focused on blogging, less native e-commerce functionality, limited extensibility for complex store setups.

8. GraphCMS

GraphCMS offers a strong GraphQL-based headless CMS that allows developers to build and deploy content-rich applications faster.

  • Pros: Utilizes GraphQL for efficient data fetching, scalable content infrastructure, good for dynamic content applications.

  • Cons: GraphQL knowledge required, may be complex for teams new to headless CMS.

9. PayloadCMS

PayloadCMS is an open-source, JavaScript-based CMS built on Node.js and React. It stands out for its flexibility and ease of use, particularly for developers who want to build custom applications.

  • Pros: Highly customizable, strong REST and GraphQL APIs, built-in authentication and access control features. PayloadCMS is particularly noted for its developer-friendly setup that allows for extensive customizations without requiring a lot of boilerplate code.

  • Cons: Being relatively new, it might not have as large a community or as many ready-to-use plugins as more established CMS platforms. The open-source nature means support can largely depend on community contributions.

Challenges and Pitfalls When Using Headless CMS for Your Shopify Stacks

Switching to a headless CMS architecture with Shopify comes with a host of advantages, but it’s not without its hurdles. Knowing these challenges can help you prepare better and avoid common pitfalls:

Technical Barriers

One of the biggest challenges of moving to a headless CMS is the technical complexity involved. Unlike traditional CMS setups, headless architectures require a good grasp of both frontend and backend development practices. This can be a significant barrier for teams with little technical expertise.

Additionally, going headless with Hydrogen would require a solid team of Remix/Hydrogen developers. Most Shopify devs know Liquid better, so this could be a big technical hurdle.

Syncing data between Shopify and the headless CMS can lead to issues like outdated product information or pricing discrepancies if not handled correctly. According to the DEV Community, maintaining consistent data across platforms requires careful setup of webhooks and API calls (DEV Community).

Cost Considerations

The initial setup for a headless CMS can be pricey. This is because it often involves custom development work to integrate the headless CMS with your existing systems, such as Shopify.

While the upfront cost is higher, the scalability and flexibility offered by a headless CMS can lead to cost savings in the long run through improved website performance and customer experience.

Integration Challenges with Shopify Apps

Shopify store owners often rely on a variety of apps to add functionality to their stores. When switching to a headless CMS, you may find that some Shopify apps don't work as expected, or at all, without substantial modification.

Popular apps for reviews upsells, or customer loyalty programs may need custom development to function properly in a headless environment. This is due to the different ways these apps interact with the Shopify frontend, which might be bypassed or altered in a headless setup.

Ending Note

As I built PageFly - #1 Shopify Page Builder, and now building Weaverse - the first theme customizer for Shopify Hydrogen, I understand how hard it is to choose the right CMS. It's not simply about how many features a CMS has - it's about whether the tool fits into your process, your organizational behavior, your culture, your existing tech stack. I hope what I shared here can be of help, and if you want to connect, hit me up on Linkedin.

Join the Discussion

Continue Reading

More insights from the Weaverse team

Weaverse 2025 Year in Review

Weaverse 2025 Year in Review

2025 wasn't about incremental updates. It was about fundamental reinvention. We migrated to React Router v7, giving you faster builds and better developer experience. We shipped visual data binding without code, so merchants can connect dynamic data 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.

By Paul PhanRead
Building A Blazing Fast Shopify Store: Liquid or Hydrogen?

Building A Blazing Fast Shopify Store: Liquid or Hydrogen?

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!

By Paul PhanRead
The Future of Building with Shopify: Hydrogen and AI

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 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.

By Paul PhanRead

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.