Weaverse Blog
Insights, tutorials, and updates from the Weaverse team.
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.
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.
Headless Commerce: Pros, Cons and Things No One Really Tell You
Ever heard of J.C. Penney? Of course, you don’t. They filed for bankruptcy in 2020, even though they used to compete against Nike. But here’s the thing: while Nike was sprinting ahead with cutting-edge digital strategies, J.C. Penney was still trying to figure out how to tie its digital shoelaces. In 2017, Nike decided to up their game by adopting a headless commerce architecture. This move allowed them to create ultra-customized digital experiences, launching sleek mobile apps, integrating AR, and seamlessly connecting their online and offline worlds. Meanwhile, J.C. Penney—bless their hearts—stuck with their traditional, all-in-one e-commerce platform. It’s the digital equivalent of showing up to a marathon in flip-flops. Their rigid infrastructure couldn’t keep up with modern consumer demands, and as Nike’s sales soared, J.C. Penney was left watching from the sidelines. Even though headless commerce wasn’t the silver bullet for Nike, it was certainly part of it. By 2020, the outcome was as predictable as a Nike swoosh: Nike was dominating the digital space, while J.C. Penney was filing for bankruptcy. This is one of the many benefits of headless commerce - among other things - it allows you to turn your vision into reality. Benefits of Headless Commerce and Why It Matters Flexibility and Customization One of the standout benefits of headless commerce is its ability to offer unparalleled flexibility and customization for your e-commerce platform. (Example below: Ghanda headless website is built with Next.Js) Imagine trying to run a modern website with a one-size-fits-all template—it's like trying to squeeze into a pair of jeans two sizes too small. Headless commerce liberates you from these constraints by decoupling the front-end user experience from the back-end infrastructure. This means you can use any framework or technology you prefer—React, Angular, Vue.js, you name it—to create a digital storefront that truly reflects your brand’s personality. But the benefits don’t stop at aesthetics. With headless commerce, you can build and iterate on your customer experiences without having to worry about the limitations of traditional, monolithic systems. Want to launch a personalized shopping app that looks nothing like your main website? Go ahead. Need to integrate an AR feature that lets customers try on shoes virtually? No problem. The decoupled nature of headless commerce allows you to experiment and innovate quickly, without the fear of breaking your entire ecommerce platform. This flexibility isn’t just a luxury—it’s a necessity in today’s fast-paced digital landscape. Consumer behaviors and preferences change rapidly, and businesses that can’t keep up risk being left behind. With headless commerce, you’re not just keeping up—you can proactively lead the pack, offering tailored, engaging experiences that set you apart from the competition. Scalability and Integration Headless commerce isn’t just about looking good—it’s about growing smart. One of its most powerful benefits is the ability to scale seamlessly and integrate with just about anything. Think of it as the Swiss Army knife of ecommerce architectures. Whether you want to expand your online presence with a mobile app, dive into VR/AR shopping experiences, or connect your e-commerce platform with physical POS systems, headless commerce has you covered, easily. (Example below: Timothy London headless storefront, built with Shopify Hydrogen and Weaverse) In a traditional setup, scaling often feels like trying to add floors to a house of cards—one wrong move, and the whole thing could collapse. But with headless commerce, your back-end operations remain robust as you build and expand your front-end experiences. This means you can introduce new features, enter new markets, or even overhaul your entire customer interface without disrupting the core functionality of your business. Integration is another benefit as you can easily plug in various third-party tools, APIs, and services that enhance your ecommerce capabilities. Whether it’s integrating with a CRM system for personalized marketing, connecting to a CMS for content management, or incorporating AI-driven product recommendations, headless commerce makes it all possible without the headaches of traditional ecommerce platforms. Faster Speed To Market for Marketing Team Managing content and commerce on a traditional, monolithic ecommerce platform might feel like juggling while riding a bicycle. Everything is so tightly integrated that a change in one area often causes a domino effect, leading to unintended consequences across your entire site. In a headless architecture, your content management system (CMS) and your ecommerce platform operate independently. This decoupling allows you to update, manage, and customize your content without worrying about breaking the ecommerce functionality, or vice versa. (Example below: StackedFarm headless storefront, built with Next.js) Your content team can work on the front end, rolling out updates and creating new pages, while your developers continue to focus on backend operations—both teams moving at their own pace without stepping on each other’s toes. This separation not only makes content management fosters better collaboration across your teams. Developers can focus on building robust e-commerce functionalities, while marketers and content creators can design and implement customer-facing content without the fear of technical setbacks. It’s like having your cake and eating it too—except this cake is made of streamlined workflows and happy, productive teams. Improved Performance Have you ever bounced off a website just because it takes too much time to load? I bet you have. All of us suffer from slow webpage at one point. Slow load times are a one-way ticket to abandoned carts and frustrated customers. Headless commerce allows you to fine-tune your website’s performance without getting tangled up in the complexities of the back-end systems. You can implement advanced techniques like server-side rendering, caching, and content delivery networks (CDNs) to ensure that your pages load at lightning speed, no matter where your customers are located. (Example below: Atoms headless storefront, built with Shopify Hydrogen) Moreover, because the front-end is independent, you can optimize it specifically for performance, without worrying about how those changes might impact back-end operations. Whether you’re handling a surge in holiday traffic or rolling out a new feature, your site’s speed and responsiveness remain intact, leading to higher customer satisfaction and better business outcomes. Future-Proofing Today’s cutting-edge technology can quickly become tomorrow’s outdated relic. 05 years ago AI-writing tools seemed like futuristic technology, now it seems like pen and paper. This is why future-proofing your digital infrastructure is crucial. Headless commerce excels in this area, providing the flexibility and adaptability needed to keep your business at the forefront of industry trends. (Example below: Silvercore headless storefront, built with Shopify Hydrogen) As the front-end and back-end are decoupled, you can easily swap out or upgrade individual components without disrupting your entire system. You can easily experiment with a new front-end framework, or integrate an AI-driven recommendation engine, with minimal risk and effort. This adaptability ensures that your e-commerce platform remains robust and competitive, regardless of how the digital landscape shifts. Instead of being locked into a monolithic system that becomes increasingly difficult to modify, headless commerce empowers you to stay agile, respond to market changes, and continuously evolve your digital strategy. It’s like having a crystal ball for your business—one that ensures you’re always ready for whatever the future holds. Omni-channel Selling Expectations are only getting higher from here on. Customers expect a seamless shopping experience whether they’re browsing on their laptop, swiping on their phones, or even interacting with your brand through a voice assistant. With headless commerce, you can design a cohesive customer journey that moves fluidly from one touchpoint to another. Whether your customers start their journey on a social media platform, continue it on a mobile app, and finish it on your website, headless commerce ensures that each of these interactions feels like part of a unified experience. This is possible because the API-driven architecture of headless commerce allows you to easily connect and synchronize various front-end interfaces, maintaining data consistency and functionality across all channels. Moreover, as new channels emerge—like AR/VR, IoT devices, or the next big social platform—you can quickly integrate these into your existing ecosystem without overhauling your entire commerce infrastructure. (Example below: Denim Tears headless storefront, built with Shopify Hydrogen) For more headless commerce website example, check out this article. Headless Commerce Is Not A Silver Bullet While headless commerce offers a host of benefits, it’s not without its challenges. Transitioning to a headless architecture can be complex and, if not managed carefully, can lead to significant drawbacks that may outweigh the advantages for some businesses. Here’s a closer look at some of the most common pitfalls and cons associated with headless commerce. 1. High Initial Costs and Complexity Unlike traditional e-commerce platforms that come as all-in-one solutions, headless commerce requires separate front-end and back-end systems to be developed, integrated, and maintained. This often means higher initial investment in both time, talent and money. Businesses may need to hire or train specialized developers who are proficient in multiple languages and frameworks to manage the decoupled systems. Additionally, the complexity of managing multiple systems can be overwhelming. Without a tightly integrated platform, businesses must ensure that their front-end and back-end are always in sync, which can require significant development resources and ongoing maintenance. This is particularly challenging for smaller businesses that may not have the same level of technical expertise or budget as larger enterprises. That said, while complexity is indeed a challenge, for businesses that need to differentiate themselves through unique customer experiences, this complexity is a worthy trade-off. Moreover, I believe that as the ecosystem matures, more tools and frameworks are emerging to simplify these processes (like Weaverse), reducing the complexity over time. 2. Increased Management Overhead The flexibility and customization are great, but they come at a price: increased management overhead. Updates and changes to one system often require careful coordination with the other. This can lead to more complicated workflows and the need for extensive testing to ensure that new features or updates don’t break existing functionality. Additionally, because headless commerce typically involves using multiple third-party tools and services, businesses need to manage these integrations closely. Each tool or service may have its own set of updates, security patches, and compatibility issues, which can add to the overall workload for your IT team. 3. Longer Development Times While headless commerce enables greater customization, it can also result in longer development times, especially during the initial setup phase. Traditional e-commerce platforms often come with built-in templates and features that can be deployed quickly, whereas headless commerce requires a custom front-end to be built from scratch. This process can be time-consuming, particularly if your development team is not familiar with the chosen frameworks or if they encounter unforeseen technical challenges. That said, newer technologies like Shopify Hydrogen has greatly shorten development times with better framework, and more robust toolings. 4. Learning Curve and Developer Experience While headless commerce offers great potential, the learning curve can be steep, especially with newer tools like Hydrogen and Remix. These tools are still evolving, and developers sometimes encounter unexpected issues, particularly with deployment and compatibility. The complexity of integrating various tools and frameworks into a cohesive system can be daunting, especially for developers who are new to headless commerce or those who are accustomed to more straightforward, traditional ecommerce platforms. That said, this learning curve, while steep, also equips developers with modern, in-demand skills that are highly valuable in today’s job market. As headless commerce becomes more prevalent, the initial investment in learning these new technologies can pay off in terms of both career development and the ability to deliver more complex e-commerce solution. 5. Loss of Built-In Features By going headless, businesses often lose access to the pre-built features and integrations that come with traditional e-commerce platforms. For example, Shopify’s Liquid-based themes offer a range of built-in functionalities and integrations that are not immediately available in a headless setup. This means that businesses may need to invest additional time and resources to rebuild or re-integrate these features manually. Yet, as the headless ecosystem continues to grow, more third-party integrations and tools are becoming available to bridge these gaps, making it easier to replicate and even enhance the functionalities offered by traditional platforms. For example, Weaverse, a visual editor for Shopify Hydrogen storefronts, offers the same variety of templates and pre-built features so that developers can build headless stores as fast as building regular Shopify storefronts. Final Words The decision to go headless should be based on your specific business needs and goals. If you’re looking to innovate and future-proof your ecommerce platform, the benefits can far outweigh the downsides. For me, it’s about weighing these factors and deciding what’s best for your business both now and in the long run. And if you're looking for the fastest way to build headless storefronts using Shopify Hydrogen, check out Weaverse. (I work here ;)).
Going Headless With Shopify: How Much Does It Cost?
Going headless is pricey. We all know it. It’s more pricey than having a regular Shopify store with out-of-the-box features. But how much exactly? Let’s get straight to the point here. First, you need to break down the setup cost for a Shopify headless storefront. I. Initial Setup Costs Breakdown To go headless, you’d need the right tech stack. Here’s the typical tech stack of a headless Shopify store: Platform: Shopify ($25 - $2000) Frontend: Hydrogen ($0) CMS: Weaverse + MetaObjects (if needed) ($12-$250) Deployment: Oxygen ($0) Filter & Search: Shopify Predictive Search & Filter ($0) Analytics: GA, Pixel, Clarity, Plausible Additional Apps: Reviews, Support (CRM), CX, Email, Filter, Subscription. ($1,000-$10,000) Now let’s break further the cost for each of these components. 1. Shopify Subscription Yes, with Hydrogen and Oxygen, you can go headless even when you’re on Shopify regular tiers. Shopify offers several subscription tiers: Basic Shopify ($25 per month): This plan is suitable for small businesses just starting out but has limitations in API call capacity and feature set. Shopify ($79 per month): A mid-tier plan that offers more features and higher API limits, suitable for growing businesses. Advanced Shopify ($299 per month): Ideal for larger businesses needing advanced reporting and more significant API usage. Shopify Plus ($2,000+ per month): The go-to choice for most headless implementations. It provides unlimited API calls, advanced customization options, and priority support. This plan is crucial for businesses looking to fully leverage the capabilities of headless commerce, ensuring a smooth and efficient operation Most merchants who go headless go with Advanced Shopify or Shopify Plus - which is a necessity for accessing advanced features and ensuring you have unlimited API calls. The starting cost is $2,000 per month. This subscription acts as the gateway to the full potential of your headless setup, providing the essential infrastructure and support you need to start building your custom front-end experience. 2. Frontend: Hydrogen In case you don’t know, Hydrogen is Shopify’s headless stack engineered for performance and UI flexibility. It’s a Remix-based framework that helps developers build custom storefronts quickly and efficiently. Using Hydrogen, merchants can create content-rich and dynamic shopping experiences without being tied to Shopify's traditional front-end limitations. Hydrogen allows you to leverage modern development tools and frameworks, ensuring your site is fast, scalable, and performant. It also provides built-in components and hooks that simplify common tasks, making the development process smoother and faster. And the best part? It’s free. 3. Visual CMS (Weaverse) + Metaobjects Hydrogen is great - but it lacks a visual preview and a theme customizer, one that’s similar to Online Store 2.0, for easy content editing. There are plenty of CMS that are well-integrated with Shopify Hydrogen (i.e.: Storyblok or Sanity - both of which start at $99/month ), however, Weaverse is the only visual CMS that’s native to Hydrogen, without the huge price tag. Weaverse starts at only $12/month and is priced by traffic. Even when your store has over 1M traffic, it only costs you around $100 - no more than Sanity’s starter plan. With Weaverse, you can use SDKs, pre-made Hydrogen themes, and a visual editor to launch Shopify headless stores faster. Meanwhile, non-technical team members can easily edit content and design using a familiar section-based editor. (Imagine Online Store 2.0, but for Hydrogen instead). MetaObjects further complements this setup by providing structured content types within Shopify. They enable you to create reusable content blocks, which can be used across various pages and products, making it easier to maintain consistency and efficiency. You can update a MetaObject once and have it reflected wherever it’s used across your site. 4. Deployment: Oxygen Oxygen is Shopify’s global hosting solution, designed to work with Hydrogen for easy deployment and scaling of your headless storefront. Oxygen is completely free to use with Shopify plans. It ensures that your storefront is hosted on a global CDN, providing fast load times and high availability regardless of where your customers are located. This seamless integration with Hydrogen simplifies the process of deploying and managing your custom storefront. 5. Analytics: Google Analytics Tools like Google Analytics, Facebook Pixel, Microsoft Clarity, and Plausible provide necessary insights and data for optimizing your store’s performance and user experience. These tools often have free tiers with optional premium features. Google Analytics, for instance, helps track user interactions, providing valuable data to improve marketing strategies and user experience. 6. Additional Apps Review Apps: Needed for building trust with customers, review apps allow customers to leave feedback on products, which can significantly influence purchasing decisions. CRM/Customer Support: CRM tools help manage customer interactions and ensure a seamless support experience. Email Management: Tools for handling email campaigns and customer communication are vital for maintaining engagement and driving sales. Of course, these are only the essential apps. The cost of these additional apps can range from $1,000 to $10,000, depending on the features and service providers you choose. 7. Deployment Development costs represent a significant part of your initial investment. Agencies can charge anywhere from $100,000 to $500,000 for a complete headless Shopify project, covering design, development, and testing. Alternatively, an in-house team offers more control but requires substantial investment in salaries, training, and development tools. These costs are essential for creating a robust, customized storefront that meets your business needs and provides a superior customer experience. 8. Ongoing Maintenance Costs Once your headless setup is live, ongoing maintenance is essential to keep everything running smoothly. This includes: Regular Updates: Both frontend and backend updates to ensure security, performance, and compatibility with new features. Bug Fixes and Optimizations: Addressing any issues that arise and optimizing the site for better performance and user experience. Additional Feature Development: As your business grows, you might need new features, which requires additional development time and resources. These maintenance activities typically cost between $5,000 and $20,000 per month, depending on the complexity of your setup and the level of support required. Conclusion Based on the breakdown above, going headless with Shopify would cost you anywhere from $2000 to $100,000, depending on your requirements and the scale of your project. However, its worth noting that going headless with Shopify has become a lot more affordable in recent years. You can easily go headless with a basic stack (Hydrogen + Oxygen + a Visual CMS like Weaverse), which would cost you around $2000 - given that you have some experience with React. When planning your headless development plan, you also need to take into account the following costs. Key Considerations Before Going Headless With Shopify (Beyond Just Costs) Technical Expertise and Resources A headless setup isn’t for the faint-hearted. You’ll need a team that knows its way around modern web technologies like React (which Hydrogen uses) and can handle API integrations. If your current crew isn’t up to speed, you might have to hire new talent or bring in an agency. Both options can get pricey. Business Needs and Objectives Even though Shopify makes it a lot more affordable to go headless, you’d still need to ask yourself if going headless aligns with your business goals. If you’re feeling constrained by your current setup and need advanced customizations or better performance, headless could be the answer. But if your current setup is doing just fine and you don’t need those extra bells and whistles, it might be more hassle than it’s worth. Flexibility and Customization One of the big draws of headless commerce is the ability to create a unique shopping experience. You can tailor every aspect of your site to fit your brand perfectly. But remember, this flexibility means ongoing development work. Your team needs to be ready for the constant updates and tweaks that come with maintaining a custom setup. Integration Capabilities Think about the tools you currently use. Some might not play nice with a headless setup, meaning you’ll need custom integration solutions. Check how your CRM, marketing automation tools, and other essential services will work in a headless environment to avoid any nasty surprises. Future Scalability Consider your long-term plans. A headless setup is great for scalability, letting you add new features and sales channels as your business grows. If you’re planning significant expansion or need to frequently update your site, headless commerce could provide the flexibility and scalability you need. Risk Management Lastly, don’t forget about the risks. Moving to a headless setup means you’ll rely more on developers, and you might face some downtime during the transition. Managing a decoupled system can be tricky, so plan carefully, choose reliable partners, and set aside a contingency budget for any bumps in the road. Time to Market Switching to a headless setup can be time-consuming. It involves extensive planning, development, and testing phases before you can go live. If your business needs to launch quickly or adapt to market changes rapidly, consider whether you can afford the time investment. A prolonged development cycle could delay your go-to-market strategy and impact your revenue targets. Final Words In short, going headless is resource-consuming, yet, with the recent innovations, the cost is going down. I believe that going headless will soon be as affordable as using Shopify out-of-the-box features, but at the end of the day, you still have to ask yourself - does this make your beer taste better? Godspeed, and happy selling!
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 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. https://youtu.be/s-47dgkrQns 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.
The Best Headless Shopify Examples For Inspiration (Updating)
I. Shopify, Without Headless We all know and love Shopify. Over the relentless march of time (the one concept even the best DTC brands cannot make a quick sale of), Shopify has proved itself not just capable of survival - the competition between eCommerce platforms has always been tough - but a master of evolution, a sort of eCommerce Darwin’s dream, deftly adapting to the ever-shifting desires and needs of their eCommerce merchants. However, Shopify has its limitations, which is in the name of Liquid. Shopify Liquid, despite being the current backbone of all Shopify websites, has some major drawbacks and limitations. 1.1. Vendor lock-in risk Liquid theme binds your code to Shopify - so if you want to migrate to a different system, good luck. The liquid is (seemingly) built under the assumption that companies won’t evolve because it makes the e-commerce platform the hub around which the whole apparatus of success spins. When brands have to change their platform, the entire system might go to waste - translating into the loss of resources: thousands of hours and hundreds of thousands of dollars down the drain. 1.2. Customization with Liquid in the background takes a toll on developers The available options with Liquid are severely limited, whereas installing apps may incur additional fees and hamper performance. You can use additional app scripts, but they can conflict with your theme code, which results in even more redundant and non-reusable code. Any developer with a DRY mindset (don’t repeat yourself) would hate it. 1.3. The need for better performance optimization. The liquid is a backend template language used for static content generation, therefore if you want to make a website more interactive and responsive, you have to use an additional 3rd script, and this guarantees to put a brake on your site’s loading speed. The most fundamental drawback is that Liquid is a template language. A template language is always a tough nut to crack. Custom databases and complex logic become more formidable to implement. I remember reading this somewhere on Shopify Reddit - which perfectly captures the biggest drawback of Liquid: “Liquid theme restricts you to how and what you can develop. Do you want to create a single-page application? No. Perhaps a progressive web application? No. Is it possible to unit-test your markup? Again, no! Even custom URLs are not an option.” The engineering wizards at Shopify were acutely aware of these drawbacks - they must have been because they did come up with a plan, a brilliant one at that: Shopify Hydrogen II. Shopify, After Headless, With Hydrogen Shopify Hydrogen is a new programming language specifically designed to improve the performance and scalability of Shopify stores. With Hydrogen, developers, and merchants can build headless storefronts the way they dream of. Hydrogen is intended to be a replacement for Liquid - and Shopify is pushing for it with vigor. They acquired the community-favorite RemixJS and planned to use it to enhance Hydrogen’s stability and performance. They brought it to market with ferocity and convinced even the biggest Consumer brands - like Allbirds, Tommy Hilfiger, or ButcherBox - to adopt it. With the Remix team at Shopify, developers building on Shopify will benefit from new tools that they will love, and merchants will see custom storefronts that are faster than ever with an improved Hydrogen product. The Remix open-source community will have a strong sponsor and supporter they can trust to enable the framework to accelerate its roadmap, with the knowledge that they can bet on the framework for the long run. While Hydrogen is focused on commerce, Remix is focused lower in the stack, and will continue to be a general web solution that scales from content through commerce and all the way to apps. Shopify will use Remix across many projects where it makes sense, and you can expect to see more of our developer platform with first-class Remix support over time. The possibilities with Hydrogen are abundant: Developers can create fully custom websites with access to the controllers and models, making complex logic and third-party service requests possible. Hydrogen also does not tightly couple code to the Shopify platform, meaning businesses can change platforms without having to start from scratch. Better Flexibility: Hydrogen enables developers to create a single-page application, a progressive web application, and to unit-test their code. It also supports custom URLs and has better performance than Liquid. Enhanced performance: Hydrogen is optimized for performance and is able to handle large volumes of traffic more efficiently than Liquid. This means that stores built with Hydrogen may load faster and be more responsive. Better error handling: Hydrogen has improved error handling and debugging capabilities, making it easier to identify and fix problems with your store. Improved developer experience: Hydrogen is designed to be easier to learn and use than Liquid, which should make it easier for developers to build and maintain Shopify stores. As Shopify developers, I wager we’re at the threshold of a complete disruption - the eCommerce equivalent of transitioning from horse-drawn vehicles to automobiles. And using Hydrogen, merchants and brands have already incredible shopping experiences - those that are story-infused, blazing-fast, and unbelievably frictionless. Still, you might wonder, what Shopify Headless is even good for. If you're still on the fence, this checklist might be helpful. III. Common Headless Use Cases Headless commerce presents various use cases that address the limitations of traditional e-commerce platforms: Rapid Experimentations, Without Losing Performance: A/B testing and dynamic content are a vital part of the eCommerce experience. They can make, or break sales. The server-side capabilities and caching of Hydrogen can allow merchants to have a lot of A/B testing and dynamic, personalized content without sacrificing performance and speed. Immersive Product Visualization: Traditional site designs often limit how your products are presented to shoppers. With headless, you can incorporate features like 360-degree views, AR, and other interactive elements - without fear of losing speed - and offer a more immersive customer experience. Improved Site Performance: Over time, every Shopify storefront can suffer from performance issues due to accumulated custom code and plugins. A headless approach maintains a clean codebase, leading to better maintainability and faster development cycles. Composable Commerce: Headless architecture supports composable commerce, meaning you can integrate various services like CDN for images, Cloudflare for scripts, and Algolia for search functionalities, enhancing site speed and user experience. Localization and Personalization: Headless platforms can dynamically serve localized content and personalized experiences by leveraging frontend frameworks and global server networks. Unified Customer Experience: Full control over the front end allows businesses to tailor the shopping experience to their brand and customer needs without backend constraints. AI Integration: Easily integrate AI and machine learning models to provide personalized shopping experiences, chatbots, recommendation engines, and more, all facilitated by the API-driven nature of headless commerce. 25 Best Headless Shopify Examples 1. Victoria Beckham Beauty: Immersive Fashion with Headless Architecture Victoria Beckham Beauty presents itself as a paradigm of luxury and clean beauty. By going headless, it has effectively merged e-commerce capabilities with an elegant, narrative-driven design to align with its brand ethos and luxury offerings. With Shopify Headless, Victoria Beckham Beauty can achieve: Enhanced Speed and Performance: By adopting a headless architecture through Contentful and Netlify, alongside Shopify Plus, Victoria Beckham Beauty has significantly improved its site's performance. This transformation has led to a faster digital experience, critical for maintaining customer engagement and reducing bounce rates. More Flexibility: VBB leveraged the headless approach for greater control and speed, enabling rapid changes and updates to the site without backend dependencies. This adaptability helps them launch promotional campaigns and product launches a lot quicker. Seamless Integrations: Utilizing the Jamstack architecture, Victoria Beckham Beauty has streamlined its build and deployment processes. Integration of various services like Contentful and Shopify Plus into the Netlify platform has created a high-performing, interactive site that supports the brand's innovative and luxurious image. 2. Bols: Crafting Rich Customer Experiences Bols, known for its rich heritage in liqueur and spirits, leverages the flexibility of Shopify's headless architecture to boost its online presence. With Shopify Headless, Bols was able to achieve: Increased Page Loading Speed: Implementing headless architecture has resulted in a 50% increase in page loading times, significantly enhancing user experience. Customized Content-Rich Experience: The headless approach has granted Bols complete control over its storefront, enabling a content-rich browsing experience for customers. Global Expansion: The flexibility provided by headless commerce has supported Bols in its mission to expand direct-to-consumer sales globally. 3. Denim Tears: Crafting Cultural Narratives To maintain its narrative-driven approach and integrate diverse multimedia content seamlessly, Denim Tears went headless with Shopify. By taking full advantage of Hydrogen, Denim Tears can showcase cultural stories through fashion, requiring a platform that supports rich, immersive storytelling. With Shopify Headless, Denim Tears was able to achieve: Rich Storytelling: Enhanced content display capabilities, supporting their unique brand storytelling. Enhanced User Experience: Fast, responsive, and interactive site elements that engage users deeply with the brand’s heritage. 4. Atoms: Personalized Shopping Made Easy With Headless, Atoms was able to focus on comfort and customization, offering unique shoe designs that cater to individual preferences. Going headless with Shopify, Atoms was able to achieve: Customization at Scale: Efficient management of varied product options and user preferences. Streamlined User Journeys: Smooth, intuitive shopping experiences tailored to individual needs and behaviors. For the full case study, read it here. 4. Half Helix: Helping Merchants Innovate Half Helix is a group of passionate designers, developers, and technologists committed to building modern, thoughtful digital experiences in an ever-changing world. By leveraging Shopify's headless capabilities, Half Helix can achieve better customization and more scalability in their tech stack. Innovative Solutions and Customizations: The agency has utilized headless commerce to provide unique, tailored e-commerce experiences, showcasing their capability to adapt and innovate in the digital space. Scalability and Efficiency: The adoption of headless architectures typically results in scalable and efficient digital platforms, though specific results for Half Helix were not detailed. 5. Boretti: Streamlining Luxury Kitchen Experience Boretti is renowned for its high-end kitchen appliances and culinary products, offering an elegant online platform to match its luxury goods. To match the sophisticated nature of its products and clientele, Boretti required a flexible, high-performing website that could offer a bespoke user experience, reflecting the brand's high quality and attention to detail. Naturally, they went for headless Shopify to achieve: Dynamic User Experiences: The headless approach would enable Boretti to offer personalized shopping experiences, with tailored recommendations and interactive product displays. Scalability and Integration: Headless architecture would allow for easier updates and integrations, keeping the site current with the latest e-commerce trends and customer demands. 6. Nour Hammour: Tailoring Luxury eCommerce Fashion Nour Hammour offers a curated selection of luxury leather jackets and fashion pieces, each crafted with care and precision. Known for its bespoke products, Nour Hammour needed a digital presence that could offer personalized experiences and showcase its fashion items in high detail. With Headless, Nour Hammour was able to achieve: Improved Site Interactivity and Engagement: By adopting a headless approach, Nour Hammour could create more interactive and engaging product pages, enhancing the shopping experience. Faster Market Adaptation: The flexibility of a headless system would allow Nour Hammour to quickly adapt online content and marketing strategies to the fast-paced fashion industry. For the full case study, read it here. 7. Isle USA: Pioneering Adventure Isle USA is dedicated to providing high-quality paddleboards and accessories, catering to outdoor enthusiasts and adventure seekers. To cater to a diverse range of customers and outdoor activities, Isle required a dynamic website capable of offering detailed product information, guides, and an engaging shopping experience. And they achieved it with Shopify Headless: Rich Content Delivery: Utilizing headless commerce, Isle USA could effectively manage and deliver rich content such as video tutorials, adventure guides, and detailed product specs. Operational Efficiency: The headless architecture would streamline content updates and product management, allowing Isle to efficiently respond to seasonal trends and customer needs. 8. Splits59: Enhancing Fitness Fashion Splits59 offers fashionable, high-performance activewear designed to support and inspire women in their fitness journeys. With a focus on high-energy, dynamic fitness attire, Splits59 required a website that could match the brand's vibrant style and need for high functionality. With Shopify, Splits59 was able to achieve: Seamless Shopping Experience: By adopting headless commerce, Splits59 could provide a fluid, user-friendly shopping experience, catering to customers looking for fitness wear that meets their style and performance needs. Dynamic Content and Interaction: The headless approach enables Splits59 to offer dynamic content such as fitness tips, product launches, and interactive sizing guides. Market Agility: Headless commerce would allow for rapid updates and personalization, essential for keeping pace with the fast-moving fitness and fashion sectors. 9. Magda Butrym: Redefining Luxury Fashion Magda Butrym offers luxury fashion pieces that combine modern design with traditional craftsmanship, appealing to a discerning global clientele. To showcase its detailed, high-end products and provide an exclusive shopping experience, Magda Butrym required a sophisticated, flexible e-commerce platform. With Headless, they was able to do so: Elevated Brand Presentation: A headless approach would allow Magda Butrym to create a unique and immersive online environment that reflects the brand's luxury and quality. Global Customer Reach: With headless commerce, Magda Butrym could easily manage international content and sales, catering to a global audience while maintaining localized experiences. Innovative Shopping Features: The brand could implement advanced features such as virtual try-ons or personalized styling advice, enhancing the online shopping experience for luxury fashion consumers. 10. Chubbies: Championing Weekend Wear with Headless Shopify Chubbies has carved out a unique niche in the men's fashion industry, specializing in vintage-inspired shorts. Their mission is to promote the weekend lifestyle, encouraging relaxation and fun. Given their rapid growth and distinctive brand identity, Chubbies needed a robust e-commerce solution to manage increasing traffic and provide a seamless, engaging user experience. A headless architecture would allow them to scale effectively while maintaining their unique brand voice and marketing strategies. With Headless, Chubbies was able to support a brand's rapid growth: Significant Sales Growth: Adopting Shopify Plus and a headless approach contributed to a 50% year-over-year sales growth, demonstrating the effectiveness of their digital strategy. Expanded Community Reach: Their approach helped grow their email list to 1.5 million and social media following to over 2 million, illustrating the power of their brand and lifestyle messaging. For more detailed insights, you might want to explore Shopify's case study on Chubbies. 11. Veloretti: Revolutionizing Urban Cycling Veloretti, an Amsterdam-based brand, is known for its hand-crafted, affordable bicycles. They aimed to elevate their digital presence with the launch of their first electric bike and a complete rebranding of their flagship store. The transition to headless commerce allowed Veloretti to enhance overall performance and operational flexibility. This was crucial as they moved into the electric bike market and needed a platform that could handle complex product configurations and provide a seamless user experience. 12. Paul Valentine: Elevating Luxury E-commerce with Headless Paul Valentine, a German-based premium jewelry and accessory brand, recognized the need to expand its reach internationally. This ambition required a scalable and flexible digital infrastructure to accommodate various international markets effectively. The primary motivation for Paul Valentine's shift towards headless commerce was to manage multiple online stores across different regions efficiently. Traditional e-commerce platforms could not provide the level of customization and scalability needed for their global expansion. Headless commerce offered them the opportunity to localize content for different markets while maintaining a cohesive brand experience across all digital touchpoints. With Headless, Paul Valentine brand achieved: International Expansion: Paul Valentine successfully established five international stores across Europe and North America, tailoring each to cater to local preferences and languages, effectively making the brand accessible in 131 countries through 20 global web stores. Customization and Localization: The headless model allowed Paul Valentine to offer a personalized shopping experience for various markets, accommodating different languages and cultural nuances, which is critical for luxury brands aiming to provide superior customer service. Infrastructure Management: By adopting a headless approach with Shopify Plus, Paul Valentine was able to streamline the management of its different global stores, enhancing operational efficiency and user experience. 13. Blume: Revolutionizing Skincare through Headless Commerce Blume stands out in the beauty industry for its focus on authentic self-care, destigmatizing topics like acne and puberty, and promoting eco-friendly products. Their online platform is designed to engage a community, especially targeting Gen Z and millennials with relatable content and products. With Headless, Blume was able to: Handle diverse and dynamic content tailored to their audience. Integrate various third-party applications seamlessly. Provide a personalized shopping experience across multiple channels. Quickly adapt to market trends and customer feedback, enhancing their brand's agility.
Weaverse Weekly #2: Good founders know when to start. Great founders know when to quit.
Hello hello, welcome back to another edition of Weaverse Weekly. How was your BFCM? A rush of adrenaline? Ecstatic? Euphoric? Anyway, I hope you have taken enough rest before the Christmas/Year End sales season surged in! Oh and in case you haven’t heard, here are some interesting stats about our BFCM season this year: Total GMV was $4.1B up by 22% from last year. Peak sales per minute: $4.2 million at 12:01 PM EST on Nov. 24. Hottest product categories: apparel and accessories, health and beauty, and home and garden. Average cart price: $108.12 ($107.53 on a constant currency basis). Cross-border orders represented 15% of all global orders. 17,500+ entrepreneurs made their first sale on Shopify. More than 55,000 merchants had their highest-selling day ever on Shopify. But that was last month, and I think we agree: the past is over. This week, I’ve got you an interesting story on how founders quit, how B2B is becoming the biggest eCommerce opportunity in 2024, and an exciting product update, and more! Read on! Deploying your Shopify Hydrogen to Weaverse, without touching code [No-code speedrun]: Deploy the Shopify Hydrogen project to Vercel and customize it with Weaverse. https://www.youtube.com/watch?v=gCKq5dB95uw The Best Writing About Headless, WebDev, and Everything In Between Hot Take: B2B is the biggest commerce opportunity of 2024, by Bobby Morrison, Chief Revenue Officer at Shopify How developers fight for users, by Coding Horror React Server Components on the Remix roadmap, by Ryan Florence - Co-founder at Remix Guide to fast websites with Next.js, by Seif Ghezala - Co-founder at Tinloof So you want to become a Hydrogen Developer? The best Shopify Headless storefronts to learn from - by me! Good founders know when to start. Great founders know when to quit. In 2008, Stewart Butterfield - Flickr’s co-founder, left Yahoo after selling Flickr to Yahoo for $25M just one year earlier. He went on and founded Tiny Speck, a gaming company. Its first product was a massively ambitious open-world game called Glitch. The company raised $17.5 million from venture investors including Andreessen Horowitz and Accel. They launched the game publicly on September 27, 2011. By November 2012, the game had a devoted following of about five thousand diehard users, who were playing at least twenty hours a week. And it was well-deserving: Glitch looked amazing, had a vivid storyline, and was ahead of its time. The problem? It had trouble monetizing. Their loyal users, who paid a monthly subscription fee, represented less than 5% of more than a hundred thousand users who signed up to try out the game for free. Over 95% of new users played Glitch for less than seven minutes and never returned. Stewart’s team did what any team would do: a new, more aggressive marketing plan. More ads. More affiliate spending. Anything to get more eyeballs. And it worked. In the last week of the campaign, they got 10.000 new users. The number of super hard-core players - those who played at least five days a week, had been growing by over 6% per week. It was their greatest growth ever. Life was good. At that time, Glitch was well-capitalized with $6 million in the bank. Yet, on Monday morning the following week, Stewart sent an email to his investors that started with, “I woke up this morning with the dead certainty that Glitch was over.” He went on to quit Glitch, and offered to return the remaining capital to investors. “Wait, what does this have to do with a newsletter on Shopify and Headless?” - you asked. We’ll get to that later, but in case you haven't realized yet: The Shopify ecosystem is one of the most dynamic, most competitive environments there are. Shopify App Market is hyper-competitive Merchants’ needs are ever-evolving, technologies change every day, and copycats and competitors spring up like mushrooms after rain. To survive and thrive in the ecosystem, you need to practice mental time travel and know when to quit. Just like what Stewart did. Stewart quit because he was able to peek into the future, and he saw that the probability was too high that the game would become a money pit. Tiny Speck experienced a surge in new accounts for Glitch, yet to break even, Stewart saw a future where they would have to sustain week-over-week growth of 7% for 31 weeks just to break even. This assumed new users would convert to paying customers at historical rates, a doubtful prospect as more eyeballs often lead to lower-quality users, especially in gaming. Worse, over time, paid ads would saturate the core gaming audience, and their potential for new users would depend on people with little background or interest in online gaming, which would further lower conversion rates. The entire growth of Glitch would depend on throwing money to acquire vast numbers of new, yet lower-quality, accounts. The math just didn’t work. So there he went. When Stewart Butterfield walked away from Glitch, he freed himself up to develop another product, which he promptly did. He toyed with the potential of turning an internal communications system into a standalone productivity tool. The tool combined the best parts of email, instant messaging, and texting, allowing team members to communicate in real-time and share documents and other materials. Everybody at the company loved it. Everybody who knew about it loved it. Within two days of quitting, his team was moving on with this new thing, including the investors who decided to roll their capital into this new product. When they used it at Tiny Speck, it didn’t even have a name. On November 14, Butterfield came up with a code name for the tool, based on the acronym for “Searchable Log of All Conversation and Knowledge.” SLACK. The rest, as you know, is history. Out of all the Shopify founders I work with, the great ones quit quite a lot of things, but they never rest. They quit, to start better things. They’re able to do so because like Butterfield, they practice mental time travel, and they think about future expected value: They ask themselves “Does the course of action I’m considering (either a new course of action or continuing the status quo) have a positive expected value?” They compare that expected value with the expected value of all other possible options. Because time, attention, and money are limited resources, if they figure out that another path carries a higher expected value, then they will switch lanes. Here’s another useful heuristic that Ron Conway - founder of SV Angel - used at his VC to help founders get better at quitting: He asks them what success would look like over the next few months. He asks them for specifics, which allows him to sit down with the founder and set performance benchmarks that would signal that the company is heading in the right direction. After an agreed period, he revisits those benchmarks with founders and, if the venture is falling short, thinks about shutting it down. What Ron Conway offers to founders is essentially a new perspective - the type of perspective that we might have trouble seeing when we’re in it. As founders, you and I, we’re gritty by nature. We build our company brick by brick. We own it. We put tremendous time, effort, and money into it. We’ve sacrificed so much. It becomes part of our identity. This is exactly why it’s sometimes hard for us to see that quitting is not abandoning, but rather a calibrated decision-making that allows us to effectively react to new information. We just don’t often see the decision-making part in quitting. So if there’s one thing you can take away from this piece is that quitting not abandoning. It’s informed venturing. That's all for this week :) See you next year, I guess. If you like Weaverse Weekly, tag someone you know who would like this, I'd really appreciate it!
Shopify Hydrogen vs. Online Store 2.0: A Case Study
Made a quick comparison between two 9-figure DTC brands. One uses OS 2.0, the other uses Hydrogen. And let me tell you, the technology gap is wide! The former runs on OS 2.0 and also use more than 40 different tech stack, frameworks, and add-ons. On the contrary, the latter, powered with Hydrogen, uses just a dozen apps and frameworks. This is where the gap comes from. If you’re a developer like me, you’d shake your heads. The common truism among developers is that using more apps doesn’t make your website better and that more apps just means more code which will inevitably slow down your website. In theory, it should be easy to optimize: you only use necessary apps. However, app sprawling creeps in. And it creeps in fast. One great thing about Shopify is that it has a robust app ecosystem. You can find an app for everything. Choices are abundant. In the ideal world, you just need to install every app you like and add every bell and whistle you need. In reality, however, every new app might herald a new conflict. A page design app might antagonize a review app. A loyalty app might clash with another email app. These face-offs are inevitable. Shopify apps vary greatly in coding style and use different libraries for the same function. There’s no universal framework. There’s no unified approach. They’re designed to support different kinds of themes or apps, so they work well only if you use them within what they’re designed for. In short, it’s hard to quash conflicts when using OS 2.0, so app sprawling leads to code extravagance and a turtle-paced website. You can try to minimize the conflict, and you can make some quick fixes to your app, but at the end of the day, this is, for lack of a better word, a fool's errand. I’ve built Shopify apps for 06 years and worked with 100,000+ Shopify stores, and conflict management remains one of my biggest headaches. Unless you vacuum-seal your app and put it in a bytes-perfect environment, conflict happens. Or until you use Hydrogen. Hydrogen is Shopify’s direct response to this quagmire. As a React framework, Hydrogen brings together the infrastructure of the entire Shopify platform, along with rich components, into a foundation that makes it easy to build a web frontend optimized for commerce. Using Hydrogen also means getting the best out of Remix so developers can ship out websites that load fast, stay fast, and become more dynamic the more the buyer interacts with it. I bet on Hydrogen as the future of Shopify. But we’re a still long way from here. Hydrogen is still effortful to use. You need more developers and more development resources. Building it without sweating money and time is one headache. Handing it off to end users is another thing. I know this, as one of the earliest users of Hydrogen. This is why I created Weaverse - a native theme customizer for the Hydrogen storefront. Check it out. https://youtu.be/aQZdQ17kF1U P/s: Here's a fun fact. The Hydrogen website can get even faster and better if using Weaverse, as we have already supported the native Hydrogen Image component, instead of using external image sources as in this photo.
What A Book Store Tells Us About The Future Of eCommerce
In 2020, everyone talked about how eCommerce spells doom for brick-and-mortar stores. We were wrong. 02 years later, foot traffic is up again, and the in-store shopping experience is making a strong comeback. If you need an example, just look at Barnes and Noble. In 2022, Barnes & Noble is making an admirable turnaround after a long period of decline. When all of the technological flavors of the year are in trouble - Mass layoff at Meta, Salesforce, Amazon, Netflix stock plummeted by 50%, Crypto is entering its winter - Barnes, and Noble is still making bank, they even planned to open 30 new stores. So what was their secret sauce? There was no secret sauce. Barnes and Noble had been struggling for quite a while - bearing a heavy brunt in the transition to online shopping and ebook reading for the last 10 years. They failed to catch up and the shadow of Amazon Books was too big to escape from. They tried making their own ebook readers (The Nook): Failed. Selling greeting cards and toys: Failed. Launching a restaurant chain (Barnes and Noble Kitchen): Failed, again. They came within a whisker of a complete collapse in 2018 when they had to fire 1800 full-time employees and suffered an $18 million loss. Its share price was down by over 80%. It was a disastrous era. But they managed to turn it around. Ted Gioia wrote an excellent case study on B&N’s strategy so I’m not going to regurgitate the entire thing here - I encourage you to read his substack post in full. Here’s a quick summary of B&N’s strategy, and spoiler: it's beautifully elegant. Empower booksellers: B&N lets booksellers select displayed books - instead of having an iron fist on which books are displayed. B&N’s new CEO - James Daunt - explained: “Staffs are now in control of their own shops. [..] Hopefully, they’re enjoying their work more. They’re creating something very different in each store.” Understand buyers: Daunt also made it his north star goal to create an environment that’s intellectually satisfying —and not in a snobbish way, but in the sense of feeding your mind. It was a big success. Ted ended the case study with a lesson about “love what you do” - but I don’t entirely agree with him. Love for books was vital - but not enough - the remarkable turnaround of B&N represents a bigger change in shopping behaviors post-pandemic: The craving for genuine interaction. A brick-n-mortar store provides something eCommerce storefronts can’t (at least for now): the experience of being physically immersed in a space designed for your interest: fascinating curation of books that are well-displayed + the element of human understanding coming from the booksellers themselves - empowered to choose the books. Look at this photo and you tell me you can get this kind of atmosphere and vibe from an online store? Shopify Plus’s Commerce Trend 2023 also told the same story: A physical presence can supercharge an online one by doubling as an interactive billboard that builds customer trust. Brands get on average 37% more web traffic the quarter after opening a new physical store. "Online and offline are effectively one continuous experience,” says Shopify director of product retail and messaging, Arpan Podduturi. “Very few people walk into a retail store without having done their homework. They usually started on their phone. They're following some brand and they go into stores with purpose.” So what’s next? Physical and digital retail is no longer separate lanes of business. Retail is going nowhere. More streamlining will be needed to unify both in-store and online shopping experiences. And to have complete creative control across all your touch-points - in-store or online - for a cohesive, purpose-driven customer experience, you'd probably need headless commerce. But that’s the story for another day.
Goodbye Liquid. Hello Hydrogen
82% of Shopify partners on Experts Marketplace specialize in custom storefronts and custom theme development. The market is crammed. But if you’re finding your edge as a Shopify developer/web agency, here’s how you can do it (or what I’d do). The short answer: By learning Hydrogen. The “Why” is fairly obvious - if you’re been in the space long enough. Shopify Liquid has some major drawbacks and limitations: The risk of vendor lock-in is significant. Liquid theme binds your code to Shopify - so if you want to migrate to a different system, good luck. Liquid is (seemingly) built under the assumption that companies won’t evolve because it makes the e-commerce platform the hub around which the whole apparatus of success spins. When brands have to change their platform, the entire system might go to waste - translating into the loss of resources: thousands of hours and hundreds of thousands of dollars Customization with Liquid in the background can take a toll on developers. The available options with Liquid are severely limited, whereas installing apps may incur additional fees and hamper performance. You can use additional app scripts, but they can conflict with your theme code, which results in even more redundant and non-reusable code. Any developer with a DRY mindset (don’t repeat yourself) would hate it. Another stumbling block is the need for better performance optimization. Liquid is a backend template language used for static content generation - so if you want to make a website more interactive and responsive, you have to use an additional 3rd script, which guarantees to put a brake on your site’s loading speed. And the most fundamental drawback is that Liquid is a template language - making it challenging to develop. Custom databases and complex logic are tough nuts to crack. I remember reading this somewhere on Shopify Reddit - which perfectly captures the biggest drawback of Liquid: “Liquid theme restricts you to how and what you can develop. Do you want to create a single-page application? No. Perhaps a progressive web application? No. Is it possible to unit-test your markup? Again, no! Even custom URLs are not an option.” The engineering wizards at Shopify must have been aware of these drawbacks - because they have been actively working on Shopify Hydrogen - a new programming language that was specifically designed to improve the performance and scalability of Shopify stores. Hydrogen is intended to be a replacement for Liquid - and Shopify is pushing for it with vigor. They recently acquired the community-favorite RemixJS and plan to use it to improve Hydrogen’s stability and performance. And this is from Shopify’s Press Release:Remix Joins Shopify To Push Web Forward, written by VP of Engineering at Shopify themselves: With the Remix team at Shopify, developers building on Shopify will benefit from new tools that they will love, and merchants will see custom storefronts that are faster than ever with an improved Hydrogen product. The Remix open-source community will have a strong sponsor and supporter they can trust to enable the framework to accelerate its roadmap, with the knowledge that they can bet on the framework for the long run. While Hydrogen is focused on commerce, Remix is focused lower in the stack, and will continue to be a general web solution that scales from content through commerce and all the way to apps. Shopify will use Remix across many projects where it makes sense, and you can expect to see more of our developer platform with first-class Remix support over time. I can tell you from my own experience - the possibilities with Hydrogen are abundant: Developers can create fully custom websites with access to the controllers and models, making complex logic and third-party service requests possible. Hydrogen also does not tightly couple code to the Shopify platform, meaning businesses can change platforms without having to start from scratch. Better Flexibility: Hydrogen enables developers to create a single-page application, a progressive web application, and to unit-test their code. It also supports custom URLs and has better performance than Liquid. Enhanced performance: Hydrogen is optimized for performance and is able to handle large volumes of traffic more efficiently than Liquid. This means that stores built with Hydrogen may load faster and be more responsive. Better error handling: Hydrogen has improved error handling and debugging capabilities, making it easier to identify and fix problems with your store. Improved developer experience: Hydrogen is designed to be easier to learn and use than Liquid, which should make it easier for developers to build and maintain Shopify stores. As Shopify developers, I wager we’re at the threshold of a complete disruption - the eCommerce equivalent of transitioning from horse-drawn vehicles to automobiles. I’ll leave it to you to decide what to do next, but for me, I’d better run.