[{"_1":2,"_555":-5,"_556":-5},"loaderData",{"_3":4,"_43":44,"_55":56},"root",{"_5":6,"_7":8,"_32":33,"_40":-5,"_41":42},"theme","light","ENV",{"_9":10,"_11":10,"_12":13,"_14":15,"_16":17,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_28":29,"_30":31},"APP_HOST","https://studio.weaverse.io","STUDIO_HOST","WEAVERSE_VERSION","2026.2.5","WEAVERSE_API_BASE","https://api.weaverse.io","INSTAGRAM_APP_ID","547536757354795","GOOGLE_MAP_API_KEY","AIzaSyDzcJKZQmEP1R_QBynvkGYmpmDB49KnbG4","GITHUB_APP_SLUG","weaverse","GITHUB_APP_CLIENT_ID","Iv1.63a47f56e3d95bec","FIGMA_CLIENT_ID","ccPQHWPpfvLCuJMgdbCb3J","ENABLE_TEST_CHARGE",false,"SHOPIFY_CLIENT_ID","ac3a622e2dda88f820915fd1a828b643","NODE_ENV","production","flags",{"_34":35,"_36":27,"_37":27,"_38":35,"_39":27},"isProduction",true,"isDevelopment","isStudio","isBot","isEditor","sessionId","consentData",["P",42],"routes/www/_layout",{"_45":46,"_47":48},"authorizedAppData",["P",46],"honeypotInputProps",{"_49":50,"_51":52,"_53":54},"nameFieldName","email_confirm","validFromFieldName","from__confirm","encryptedValidFrom","/kCQyl3yUrCSlRzd676vrUMbRGADmB5r+WC+tGUfU5nUhieZPvoLPoc=","routes/www/blogs/all/index",{"_57":58,"_544":545,"_550":551},"allPosts",[59,85,100,111,124,136,148,159,172,185,197,208,219,231,242,256,268,280,292,303,314,327,339,350,361,372,384,397,408,419,431,442,453,464,475,487,498,510,521,532],{"_60":61},"node",{"_62":63,"_64":65,"_66":67,"_68":69,"_70":71,"_72":73,"_76":77,"_80":81,"_84":-5},"id","698308ee47c9cf9080d39808","publishedAt","2026-02-04T08:53:02.854Z","title","Weaverse's New Pricing Plans for 2026","slug","weaverse-new-pricing-plans-for-2026","readTimeInMinutes",5,"content",{"_74":75},"text","Introducing Growth and Scale: Weaverse's New Pricing for 2026\n\nAs a founder, I've learned that pricing should tell a story—and that story should be about you, not us. Today, I'm excited to announce our new pricing structure: Pay-As-You-Go, Growth, and Scale. They're the result of listening closely to how our customers are building, what they need as they expand, and where we need to invest to support their ambitions.\nFor two years, we've watched merchants build incredible headless storefronts on Weaverse. We've seen stores grow from thousands of monthly visitors to hundreds of thousands. We've seen merchants push our platform further than we expected—and we wanted our pricing to reflect that reality.\nWhy We're Evolving Our Pricing\nGrowth is messy. Your store might handle 50,000 monthly views today and 500,000 next year. We wanted a pricing structure without hard walls—one that lets you start lean and scale smoothly without friction.\nWe also listened to what matters most: flexibility and support. Merchants told us that as they scale, they need more than features—they need reliability, faster response times, and room to grow without worrying about hitting limits. Our new plans directly address that feedback.\nBy introducing PAYG, Growth, and Scale, we're creating a natural progression that matches your business stage. You can start where you need to be, grow without friction, and access the support tier that makes sense for your operation.\nImportantly, we're being transparent about why the plans cost what they do. Growth and Scale include substantially more infrastructure investment per customer—more capacity, faster processing, priority support—and we're pricing them to reflect that reality while staying competitive in the market. We're not the cheapest option, but we're designed to be the right option for merchants building seriously.\n\nOur New Pricing Plans\nPay-As-You-Go (PAYG) — Usage-Based\nPAYG is built for merchants who want full flexibility without commitment. You're getting:\n\nUsage-based billing — only pay for what you use, no wasted capacity\n\nFull Weaverse features — access to all design and optimization tools\n\nStandard support — reach our team when you need them\n\nNo monthly minimum — perfect for testing, seasonal stores, or variable traffic\n\n\nWho's it for? New stores launching, seasonal businesses, or merchants who want to test Weaverse without committing to a fixed plan.\n\nGrowth Plan — $59/month\nGrowth is built for merchants doing serious volume. You're getting:\n\n500,000 monthly view credits — enough for stores handling meaningful traffic without compromise\n\nPriority support — reach our team faster when you need them\n\nAll Growth features — full access to Weaverse's design and optimization tools\n\nPredictable pricing — know exactly what you'll pay each month\n\n\nWho's it for? Growing stores that are scaling beyond initial launch. You're handling 200K–500K monthly views and need breathing room to expand without hitting limits.\n\nScale Plan — $299/month\nScale is for established merchants running high-volume operations. You get:\n\n3,000,000 monthly view credits — handle enterprise-level traffic without constraints\n\nPremium support — dedicated support priority and faster response times\n\nAll Scale features — white-glove support, custom integrations, and advanced optimization\n\nBuilt for enterprise — infrastructure designed for the biggest operations\n\n\nWho's it for? Established merchants with high-traffic storefronts generating 500K+ monthly views. You need reliability, speed, and a team that understands your operation.\nQuick Comparison\n\n\n\n\nPlanMonthly CostView CreditsSupport LevelBest For\n\n\n\nPAYGUsage-basedPay per useStandardTesting, seasonal, variable traffic\n\nGrowth$59/month500,000PriorityGrowing stores, 200K–500K views/month\n\nScale$299/month3,000,000PremiumEnterprise, 500K+ views/month\n\n\n\nChoosing the Right Plan for Your Store\nThe honest answer: look at your traffic and your growth trajectory.\n\nLaunching or testing? Start with PAYG. Only pay for what you use, no commitment.\n\nGetting 200K–500K views monthly? Growth is your spot. Better capacity, priority support, and room to expand.\n\nRunning 500K+ views or managing high-volume operations? Scale gives you the infrastructure and support to handle anything.\n\n\nStill not sure? Think about this: What's the cost of slowdowns or support delays if your store goes down during peak sales? What's the value of priority support when you need it? If that cost is more than the difference between plans, upgrade.\nFAQ\nCan I switch between plans later? Yes. Upgrade or downgrade anytime, and billing adjusts on your next cycle. No penalties.\nWhat are view credits? View credits represent the monthly capacity of your storefront—how many visitor interactions your site can handle. One view credit = one page view. If you exceed your monthly allotment, we don't cut you off; we just notify you and work with you on next steps. It's transparent, not punitive.\nHow does PAYG billing work? You're charged based on actual usage at the end of each billing cycle. No monthly minimum, no wasted capacity. Great for stores with variable or unpredictable traffic.\nWhen should I switch from PAYG to Growth? When your monthly usage consistently approaches or exceeds the equivalent of Growth plan cost ($59), it makes sense to lock in the fixed rate for predictability and priority support.\nHow do I know which plan I actually need? Check your Weaverse analytics dashboard for your typical monthly views, then match that to a plan with headroom for growth. Our support team is also here to help—just ask.\n\nReady to Explore?\nIf you're already with us, you're set—just keep building. If you're new to Weaverse, now's a great time to start. These plans are designed around real customer needs, and that means you can trust that what you're paying for actually matters.\nView Our Pricing Plans — Find the tier that fits your store.\nQuestions? Contact Our Team — We're here to help you choose and get started.\n\n—Paul, Founder & CEO, Weaverse\nP.S. Thank you to every merchant building with Weaverse. Your feedback shaped this announcement. Keep building fast, beautiful, and scalable storefronts.\n\n","author",{"_78":79},"name","Paul Phan","coverImage",{"_82":83},"url","https://cdn.hashnode.com/res/hashnode/image/stock/unsplash/Xn5FbEM9564/upload/906958988bd80493cdc3b5619297b90f.jpeg","series",{"_60":86},{"_62":87,"_64":88,"_66":89,"_68":90,"_70":91,"_72":92,"_76":94,"_80":95,"_84":97},"695e31654dbaaae1e214ea96","2026-01-07T10:11:49.824Z","Weaverse 2025 Year in Review","weaverse-2025-year-in-review",12,{"_74":93},"\n2025 wasn't about incremental updates. It was about fundamental reinvention.\nWe 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.\nAnd we did it all while supporting thousands of production stores processing millions in transactions.\nThis is the story of how we transformed Weaverse from a visual builder into the definitive platform for modern Shopify development.\nhttps://www.youtube.com/watch?v=gdmy8yUPlmg\n \nQ2: The Foundation (May-June)\nWeaverse v5.0.0: The React Router v7 Revolution\nMay 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.\nWhy This Mattered:\n\nEnhanced Performance: Faster builds, better tree-shaking, optimized bundles\n\nSuperior DX: Improved HMR, TypeScript integration, clearer error messages\n\nFuture-Ready: Aligned with React 19 and the modern web platform\n\nType Safety: Generated route types with npx react-router typegen\n\n\nThe Migration Path:\n\nFresh start via GitHub template for new projects\n\nIn-place migration guide for existing stores\n\nLegacy v4.x support maintained for Remix users\n\nv5.0.0+ became the foundation for everything that followed\n\n\nBefore: Remix (Manual Types)\n// app/routes/products.$handle.tsx\nimport type { LoaderFunctionArgs } from \"@remix-run/node\";\nimport { json } from \"@remix-run/node\";\nimport { useLoaderData } from \"@remix-run/react\";\n\n// ❌ Manual type definitions - error-prone\ntype LoaderData = {\n product: { id: string; title: string; price: string };\n};\n\nexport const loader = async ({ params }: LoaderFunctionArgs) => {\n const product = await getProduct(params.handle); // ❌ handle could be undefined\n return json({ product }); // ❌ Must use json() wrapper\n};\n\nexport default function ProductPage() {\n const { product } = useLoaderData(); // ❌ Type assertion needed\n return

{product.title}

;\n}\n\nAfter: React Router v7 (Auto-Generated Types)\n// app/routes/products.$handle.tsx\nimport type { Route } from \"./+types/products.$handle\";\n// ↑ Auto-generated types specific to THIS route\n\nexport const loader = async ({ params }: Route.LoaderArgs) => {\n const product = await getProduct(params.handle); // ✅ handle is typed as string\n return { product }; // ✅ Direct return - no wrapper needed\n};\n\nexport default function ProductPage({ loaderData }: Route.ComponentProps) {\n const { product } = loaderData; // ✅ Fully typed from loader\n return

{product.title}

;\n}\n\n\n\n\n\nAspectRemixReact Router v7\n\n\n\nType SourceManual definitionsAuto-generated\n\nParam Typesstring \\/ undefinedExact from URL\n\nLoader Returnjson() wrapperDirect return\n\nData AccessuseLoaderData()loaderData prop\n\n\nPilot Theme v5.0.0: React 19 Integration\nAlongside the platform migration, Pilot theme evolved:\n\nReact 19 native integration with modern SEO components\n\nEnhanced ref handling eliminating forwardRef complexity\n\nImproved component architecture for better maintainability\n\nHydrogen 2025.7.0 compatibility for latest Shopify features\n\n\nJune: Modern Tooling & Experience\nBefore: TailwindCSS v3\n/* tailwind.config.js - Complex JavaScript config */\nmodule.exports = {\n content: ['./app/**/*.{js,ts,jsx,tsx}'],\n theme: {\n extend: {\n colors: {\n primary: '#3b82f6',\n secondary: '#10b981',\n },\n fontFamily: {\n sans: ['Inter', 'sans-serif'],\n },\n },\n },\n plugins: [require('@tailwindcss/forms')],\n};\n\n/* globals.css */\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n/* ❌ Custom utilities require @layer */\n@layer utilities {\n .text-balance {\n text-wrap: balance;\n }\n}\n\nAfter: TailwindCSS v4\n/* app.css - Pure CSS config */\n@import \"tailwindcss\";\n\n@theme {\n --color-primary: #3b82f6;\n --color-secondary: #10b981;\n --font-sans: \"Inter\", sans-serif;\n}\n\n/* ✅ Direct CSS - no @layer needed */\n.text-balance {\n text-wrap: balance;\n}\n\n\n\n\n\nAspectTailwindCSS v3TailwindCSS v4\n\n\n\nConfigJavaScript filePure CSS @theme\n\nSetup3 directives + configSingle @import\n\nCustom Utils@layer utilities {}Direct CSS\n\nBuild Speed~800ms~150ms (5x faster)\n\nBundle SizeLargerSmaller (better tree-shaking)\n\n\nTailwindCSS v4 Integration:\n\nFaster builds for your projects\n\nSmaller CSS bundles for faster page loads\n\nBetter autocomplete in your editor\n\nMore powerful design tokens\n\n\nStudio Experience Improvements:\n\nNew documentation feedback system - tell us what's unclear\n\nFaster blog content loading in the editor\n\nEnhanced color picker with better UX\n\nStreamlined content management workflows\n\nFunction-based schema conditions for dynamic components\n\n\nQ3: The Experience (July-September)\nAugust: Studio Reimagined\nhttps://www.youtube.com/watch?v=ZzV2Mk599es\n \nEvery pixel reconsidered. Every interaction refined.\nComplete Interface Redesign:\n\nModern, accessible navigation architecture\n\nEnhanced project dashboard with horizontal cards\n\nDark mode throughout the entire platform\n\nReal-time changelog integration\n\nAnimated welcome banners with actionable information\n\nError pages that actually guide instead of frustrate\n\n\nPerformance Wins:\n\n60% faster Studio loading times\n\nSimplified architecture with cleaner data flows\n\nEnhanced mobile preview accuracy\n\nResponsive design that actually responds\n\n\n\nAI Assistant Evolution\nImproved Reliability:\n\nConversations persist across sessions - no more lost context\n\nBetter error handling and recovery\n\nSeamless integration with your development workflow\n\n\nComing Soon:\n\nAI-powered code generation for components\n\nNatural language content editing for merchants\n\nIntelligent design suggestions\n\n\nSeptember: Commerce Features Perfected\n\nJudge.me Reviews Integration:\n\nNew JudgemeReviewsBadge component\n\nEnhanced review form UI\n\nSeamless theme integration\n\nImproved rating displays\n\n\nCombined Listings Support:\n\nMulti-product bundle management\n\nIntelligent product grouping\n\nAdvanced filtering respecting relationships\n\nEnhanced discovery patterns\n\n\nModular Product Architecture:\n\nStandalone ProductTitle, ProductVendor, ProductPrices components\n\nFlexible featured products system\n\nReusable product information modules\n\nBetter separation of concerns\n\n\nPilot v6.0.0 Released:\n\nRemoved React forwardRef (React 19 native refs)\n\nZustand state management integration\n\nJudge.me component restructure\n\nEnhanced cart functionality\n\n\nQ4: The Breakthrough (October-December)\nOctober: Data Connectors - The Game Changer\nhttps://www.youtube.com/watch?v=ZzV2Mk599es&t=22\n \nThis was the breakthrough feature of 2025.\nVisual Data Binding Without Code:\nBefore Data Connectors, binding dynamic data required writing code. Now? Click a database icon.\nWhat Changed:\n\nClick-to-Connect UI: Select data from products, collections, pages visually\n\nReal-time Preview: See your data bindings instantly\n\nThird-party APIs: Integrate external data sources\n\nNo Code Required: Merchants can build dynamic content themselves\n\n\nThe Performance Story:\n\n91% faster data connector operations\n\nOptimized cache strategies\n\nEnhanced API worker architecture\n\nIntelligent proxy handling\n\n\n\nWhat This Means for You:\n\nMerchants can build dynamic content without developer help\n\nFaster data loading with smart caching\n\nBetter TypeScript support for fewer bugs\n\nComplete documentation for all features\n\n\nNew Documentation Platform\n\nLaunched docs.weaverse.io - documentation that actually helps:\n\nFast, powerful search - find answers instantly\n\nClear navigation structure\n\nUp-to-date React 19 code examples\n\nBetter troubleshooting guides\n\nSyntax-highlighted code with copy buttons\n\nStep-by-step deployment guides (including Cloudflare Workers)\n\n\nPilot v7.0.0: Routes Migration\nOctober's Second Major Release:\n\nMigration to routes.ts configuration\n\nManual route control for complex applications\n\nEnhanced type generation\n\nBetter route organization\n\n\n// app/routes.ts - Full control over your routes\nimport { type RouteConfig } from \"react-router\";\nimport { flatRoutes } from \"@react-router/fs-routes\";\n\nexport default [\n // Auto-discover routes from the file system\n ...await flatRoutes(),\n\n // Manual API routes for custom endpoints\n { path: \"/api/wishlist\", file: \"./routes/api.wishlist.ts\" },\n { path: \"/api/reviews\", file: \"./routes/api.reviews.ts\" },\n\n // Override specific routes when needed\n { path: \"/collections/:handle\", file: \"./routes/collection.tsx\" },\n { path: \"/products/:handle\", file: \"./routes/product.tsx\" },\n] satisfies RouteConfig;\n\nWhy This Matters:\n\nFull control over route configuration for complex apps\n\nBetter type safety prevents routing bugs\n\nEasier to understand and maintain route structure\n\n\nNovember: Multi-Project Architecture\n\nProject Hierarchy & Variants - MAJOR FEATURE:\nCreate store variants for:\n\nA/B Testing: Test designs without affecting production\n\nSeasonal Campaigns: Holiday themes with easy rollback\n\nMulti-market Support: Different content per region\n\nAutomatic Inheritance: Content flows from parent projects\n\n\nEnhanced Dashboard:\n\nHorizontal card layout for better information density\n\nVariant switcher for quick project navigation\n\nSearch and filter capabilities\n\nImproved project management workflow\n\n\n\nPilot v7.1.x: Cart Revolution\nThe Complete Cart Experience:\n\n\nDiscount Codes: Apply promotional codes at checkout\n\nGift Cards: Full gift card support and balance tracking\n\nCart Notes: Customer instructions and special requests\n\nFeatured Products: Cross-sell opportunities on cart page\n\nEnhanced Input Components: Better form UX throughout\n\n\nAdditional Improvements:\n\nCatch-all route for better 404 handling\n\nEnhanced spinner and loading states\n\nImproved banner components\n\nBetter product review forms\n\n\nDecember: Performance & Polish\nPlatform-Wide Speed Improvements:\n\nFaster page loads across Studio\n\nOptimized data fetching for smoother editing\n\nBetter caching for instant content updates\n\nReduced loading times throughout the platform\n\n\nThe Developer Experience Revolution\nReact 19 Integration\n// app/routes/products.$handle.tsx\nimport { ProductSEO } from \"~/components/seo\";\n\nexport default function ProductPage({ loaderData }: Route.ComponentProps) {\n const { product } = loaderData;\n\n return (\n <>\n {/* ✅ React 19: Meta tags hoist to automatically */}\n \n\n {/* ✅ Structured data for Google rich snippets */}\n \n\n

{product.title}

{product.price}

\n \n );\n}\n\nWeaverse projects run on React 19 from day one:\n\nBuilt-in SEO components: BlogSEO, ProductSEO, DocumentHead - SEO handled automatically\n\nSmart meta tag management: No more manual meta tag juggling\n\nOpenGraph & Twitter Cards: Social sharing works perfectly\n\nPerformance improvements: React 19's automatic optimizations\n\n\nBetter Developer Tools\nSmarter Project Creation:\n\nInteractive CLI guides you through setup\n\nChoose your template with detailed descriptions\n\nClear error messages when something goes wrong\n\nImmediate next steps after creation\n\n\nEnhanced TypeScript Experience:\n\nBetter autocomplete in your editor\n\nClearer error messages\n\nFewer type-related bugs\n\nSmarter IDE integration\n\n\nInfrastructure & Deployment\nCloudflare Workers Support\n\nNovember brought comprehensive Cloudflare Workers deployment:\n\nComplete deployment guide in documentation\n\nEdge-first architecture support\n\nEnhanced caching at the edge\n\nGlobal performance improvements\n\n\nHydrogen Alignment\nMaintained perfect alignment with Shopify Hydrogen evolution:\n\nHydrogen 2025.1.x: Single fetch, B2B methods stabilization\n\nHydrogen 2025.5.0-2025.7.0: React Router v7 migration\n\nGift card removal: New cart APIs\n\nOrder filtering: Enhanced customer account features\n\n@defer directive: Performance optimizations\n\n\nSecurity & Reliability\n\nEnhanced error boundaries across all components\n\nBetter validation and link checking\n\nImproved content security policies\n\nComprehensive logging and monitoring\n\nReal-time usage tracking for enterprise\n\n\nBy The Numbers\n\nWhat You Got\n\n3 Major Pilot Theme Versions: v5.0.0, v6.0.0, v7.0.0 with cumulative improvements\n\n50+ New Features: New capabilities shipping every month\n\nComplete Documentation Rewrite: docs.weaverse.io with better search and examples\n\nMulti-Project Architecture: A/B testing and variants for everyone\n\n\nSpeed Improvements You'll Notice\n\n60% Faster Studio Loading: Get to work faster\n\n91% Faster Data Connectors: Dynamic content loads instantly\n\nSmaller Bundles: Your stores load faster for customers\n\nEdge Deployment: Global performance with Cloudflare Workers\n\n\nDeveloper Experience Wins\n\nReact 19 from Day One: Stay ahead of the curve\n\nBetter TypeScript Support: Fewer bugs, better autocomplete\n\nModern Documentation: Find answers faster\n\nInteractive CLI: Easier project setup\n\n\nCommunity Highlights\n\nOpen Source Contributions\n\nWeaverse SDKs: Fully open source on GitHub\n\nPilot Theme Template: Community contributions welcome\n\nDocumentation: Open for improvements and corrections\n\nIssue Resolution: Active community support\n\n\nDeveloper Ecosystem\n\nMigration from Discord to Slack: Better community organization\n\nEnhanced Support Channels: Human help when you need it\n\nGitHub Discussions: Long-form technical conversations\n\nCode Examples: Real-world implementation patterns\n\n\nWhat's Next: 2026 Preview\n\nAI-Powered Development\nBuilding on the AI improvements we made in 2025:\n\nAI Code Generation: Generate components from descriptions\n\nContent Assistance: Natural language content editing for merchants\n\nSmart Suggestions: Intelligent design and optimization recommendations\n\nAutomated Quality Checks: AI-powered validation and testing\n\n\nAdvanced Commerce Features\n\nEnhanced Personalization: Dynamic content based on customer behavior\n\nAdvanced Analytics: Built-in performance tracking and insights\n\nMulti-currency Optimization: Better international commerce support\n\nSubscription Management: Native subscription product support\n\n\nPlatform Expansion\n\nNew Theme Templates: More design options out of the box\n\nComponent Marketplace: Share and discover custom components\n\nIntegration Ecosystem: Pre-built connectors for popular services\n\nEnterprise Features: Advanced team collaboration tools\n\n\nPerformance & Scale\n\nEdge-First Everything: Cloudflare Workers by default\n\nInstant Page Loads: Advanced caching strategies\n\nBuild Optimization: Even faster development cycles\n\nGlobal CDN: Performance improvements worldwide\n\n\nStart Building The Future\nEvery improvement from 2025 is live. Every feature is ready. Every optimization is active.\nGet Started Today\nFor New Projects:\nnpx @weaverse/cli@latest create --template=pilot\n\nFor Existing Projects:\n\nUpdates are live in Weaverse Studio now\n\nMigration guides available at docs.weaverse.io\n\nSDK updates via standard package manager workflows\n\n\nWhat You Get\n\nPilot Theme v7.1.x: Complete cart features, modular architecture\n\nSDK v5.9.x: Multi-project support, enhanced caching\n\nData Connectors: Visual data binding without code\n\nProject Variants: A/B testing and multi-market support\n\nReact 19 + React Router v7: Modern foundation\n\nTailwindCSS v4: Next-generation styling\n\nCloudflare Workers: Edge deployment ready\n\n\nResources\n\nDocumentation: Complete guides and API references\n\nPilot Theme Guide: Theme customization\n\nMigration Guide: Upgrade to v5+\n\nCLI Reference: Command-line tools\n\nGitHub: Open source SDKs and templates\n\nSlack Community: Connect with developers\n\nSupport: Get help from our team\n\n\nThank You\nTo our community of developers, merchants, and partners who pushed us to build better, ship faster, and never settle for incremental when transformational was possible.\n2025 was about rebuilding the foundation. 2026 is about what we build on top of it.\n\n\nKey Releases Timeline\nMay 2025\n\nWeaverse v5.0.0 - React Router v7 migration\n\nPilot v5.0.0 - React 19 integration\n\nComplete platform architecture overhaul\n\n\nJune 2025\n\nTailwindCSS v4 integration for faster builds\n\nEnhanced schema validation with function-based conditions\n\nStudio improvements (documentation feedback, color picker, content management)\n\n\nAugust 2025\n\nComplete Studio interface redesign\n\nAI assistant improvements\n\nEnterprise features (usage tracking, billing transparency)\n\nEnhanced mobile experience\n\n\nSeptember 2025\n\nPilot v6.0.0 - Zustand state, removed forwardRef\n\nJudge.me reviews integration enhancements\n\nCombined Listings support\n\nModular product page architecture\n\n\nOctober 2025\n\nData Connectors v5.5.0 - VISUAL DATA BINDING\n\nPilot v7.0.0 - routes.ts migration\n\nNew documentation platform (docs.weaverse.io)\n\n91% performance improvement in data operations\n\n\nNovember 2025\n\nProject Hierarchy & Variants - MULTI-PROJECT ARCHITECTURE\n\nEnhanced dashboard with variant switcher\n\nPilot v7.1.x - cart features (discounts, gift cards, notes)\n\nCloudflare Workers deployment guide\n\n\nDecember 2025\n\nPlatform-wide performance improvements\n\nFaster page loads and data fetching\n\nEnhanced caching for instant updates\n\nFoundation for 2026 AI features\n\n\n\nQuestions about 2025 updates or planning for 2026? Reach out at support@weaverse.io or join our Slack community.\nThe future of headless commerce isn't coming. It's here.\n",{"_78":79},{"_82":96},"https://cdn.hashnode.com/res/hashnode/image/stock/unsplash/dOfRbfIQJOQ/upload/92ddec5a33bbdaeaf47a54214169c9f9.jpeg",{"_68":98,"_78":99},"popular","Popular",{"_60":101},{"_62":102,"_64":103,"_66":104,"_68":105,"_70":71,"_72":106,"_76":108,"_80":109,"_84":-5},"685c11a8b82fe5f6793a3044","2025-06-25T15:11:36.134Z","Building A Blazing Fast Shopify Store: Liquid or Hydrogen?","speed-performance-liquid-vs-hydrogen",{"_74":107},"Someone once told me, “You don’t really need your website to go that fast.” I knew what they meant.\nI’d just spent five seconds waiting for Song for the Mute’s homepage to load. By any standard metric, that’s slow. But I didn’t care. When you’re browsing one of the coolest brands on the internet, and you really want to buy, you’re not timing it. You’re in it. You’re immersed. You’re seeing poetry, storytelling, and fashion blending perfectly together!\n\nBut most stores aren’t Song for the Mute. \nAnd if your brand doesn’t have that kind of magnetic pull yet, performance matters — a lot. Google called it out years ago in their “Milliseconds Make Millions” report. Even today, 82% of users say slow speeds affect their purchasing decisions, and a 1-second improvement in page speed can yield an extra $7,000/day for a $100k/day site. Things haven’t changed. \nNow, if you're using a traditional Shopify theme, built on Liquid and your site feels sluggish, your first instinct might be to install a performance app. \nDon’t. Most of them do more harm than good. Others might suggest going headless. I build for Shopify Hydrogen, and even I’ll say this: don’t rush.\nCan Shopify Liquid Perform Well?\nAbsolutely. Shopify published their own study in late 2023 showing that Liquid storefronts outperform most ecommerce platforms in Core Web Vitals. \nAs of September 2023, 59.5% of Shopify sites passed all CWV thresholds, a stat that continues to climb. \n\nEven large-scale merchants like Rothy’s, Rad Power Bikes, and Dollar Shave Club use Liquid and still hit performance benchmarks.\nSurprisingly, Liquid even outperforms most headless implementations. Shopify found that many SSR frameworks — the ones powering most headless setups — had fewer sites passing Core Web Vitals compared to Liquid. Hydrogen ranked second, but there’s still a gap. \n\nSo why invest millions in building Hydrogen? \nJust why?\nHydrogen vs Liquid/Shopify Themes\nA Rebuttal Against Liquid\nFirst, I have to say that it might be hard to compare apples to apples in this case, mainly because the data in Shopify’s benchmark focuses on real storefronts using Hydrogen. Many of these early adopters built custom experiences without performance best practices. In contrast, Liquid storefronts benefit from:\n\nYears of optimization by Shopify's core teams\n\nDefault themes like Dawn that are tightly optimized\n\nA templating model that constrains performance pitfalls\n\n\nHydrogen, on the other hand, gives full freedom. \nYes, this freedom cuts both ways; it brings performance potential and risk of poor implementation. Hydrogen storefronts can match or exceed Liquid performance when built well. Shopify’s own documentation even notes:\n“Some routes in the Hydrogen demo store template saw their load time cut in half” after optimizing GraphQL queries. \nHydrogen is built on React Server Components (RSC) and uses Vite for ultra-fast development. Shopify chose this stack specifically because:\n\nRSC reduces client JS bundle size significantly\n\nPages stream in progressively with lower Time to First Byte (TTFB)\n\nData fetching is done on the server, not in the client render phase\n\n\nYou get full control. You also get full responsibility. That’s why some Hydrogen stores load in half the time, and others fall flat. \nWhen Should You Consider Hydrogen?\nPage speed shouldn’t be the only factor in deciding between Shopify Hydrogen and Liquid. The real choice comes down to how much control you need over your storefront experience.\nIf you’re planning to run A/B tests, personalize content, or build dynamic user interfaces, you’ll hit the limits of Liquid fast. Hydrogen is built for that kind of flexibility. It’s designed for brands that want to iterate quickly, experiment often, and optimize every touchpoint.\nOn the other hand, Liquid works well for stores that prioritize simplicity and stability. Its guardrails are a strength if your store setup is relatively fixed, maybe with just a few campaign landing pages here and there.\nUse Hydrogen if:\n\nYour store has 500+ SKUs or 100K+ visits/month, and you’re seeing speed decline. \n\nYou need to launch experiences that your theme can’t handle: multi-currency PWA, AR tools, immersive UIs. \n\nYour team (or agency) is fluent in React and headless workflows \n\n\nStick with Liquid if:\n\nYou’re validating a new product or category All your needs are covered within the theme editor, and your site already performs well\n\nYou don’t have the engineering support to maintain a custom frontend \n\n\nThe TL;DR\nIn short, Liquid gives you structure. Hydrogen gives you freedom. Choose based on how far you plan to push your storefront.\nHow To Build Hydrogen Storefronts Faster?\nOne of the biggest reasons developers hesitate to go headless is that it breaks the visual editing experience. The Shopify Theme Editor disappears. Content teams are locked out. Everything becomes a Jira ticket.\nWeaverse fixes that.\nWith Weaverse Hydrogen, developers can build Hydrogen themes and components via an SDK, expose them in a familiar drag-and-drop editor, just like Shopify Theme Editor, and let content teams reuse, remix, and publish without touching code. \nAnd it's only getting easier.\nWith Weaverse AI, the gap between idea and execution shrinks dramatically. Developers will soon be able to turn Figma design into Hydrogen landing pages using Weaverse and Figma MCP. Merchants will soon be able to edit their Hydrogen storefronts using a natural language interface. \nIf you’re interested in Weaverse AI, let me know here, and I’ll reach out once it’s ready!\n",{"_78":79},{"_82":110},"https://cdn.hashnode.com/res/hashnode/image/stock/unsplash/ZbFoi92fyzY/upload/5c41fb22e76256d5b8820e645c7a4f96.jpeg",{"_60":112},{"_62":113,"_64":114,"_66":115,"_68":116,"_70":117,"_72":118,"_76":120,"_80":121,"_84":123},"6858369eb43d20e572641c64","2025-06-21T17:00:00.000Z","The Future of Building with Shopify: Hydrogen and AI","shopify-hydrogen-ai-natural-language",7,{"_74":119},"Building An Online Store: Then & Now\nLet’s start with a story. A history lesson, perhaps.\nIt 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.\nYou 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.\n\nIt is 2007.\nYour 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.\nYou 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.\n\nIt 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.\nYou 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.\nIt’s a Frankenstein monster of app integrations, but it’s yours. You ship. You sell. You sleep. Sort of.\nThen 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.\nIt 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.\nBut 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.\n\nIt is 2026. Your boss tells you the company needs an online store. You open Figma. Then you open Weaverse.\nYou type something like:\n“Turn this Figma design into a Weaverse page. Five products. Ships worldwide. Prioritize mobile. Feels editorial.”\nYou 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.\nIt’s Hydrogen plus AI.\nThat’s how Weaverse AI is being built. And this time, everything is possible and simple.\nIntroducing Weaverse AI, The First AI Store Builder for Shopify Hydrogen\nIn 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.\nFor years, we’ve been focused on one thing: helping Shopify merchants build better storefronts, faster.\nBefore 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.\nWhen 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.\nWith 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.\n\nNow we’re taking the next step with Weaverse AI.\nWhat Is Weaverse AI and What Can It Do?\nWeaverse AI helps developers, agencies, and merchants build Shopify Hydrogen stores faster using a natural language interface.\nImagine 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.\nThere are two major pieces behind this shift:\n1/ 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.\n\n2/ 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.\nFor Developers: Build Less, Deliver More\nFaster 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.\nLess 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.\nFor Agencies: Faster Builds, Better Margin\nHigher 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.\nCustom 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.\nProductized Packages: Offer AI-assisted setup packages, budget Hydrogen builds, or retainers focused on optimization instead of maintenance. You move from vendor to strategic partner.\nFor Merchants: More Control, Less Waiting\nNo-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\nFaster 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.\nLower 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.\n",{"_78":79},{"_82":122},"https://cdn.hashnode.com/res/hashnode/image/stock/unsplash/uAvq7gFQecc/upload/ebbe575135d879757f94e62b9ce10944.jpeg",{"_68":98,"_78":99},{"_60":125},{"_62":126,"_64":127,"_66":128,"_68":129,"_70":130,"_72":131,"_76":133,"_80":134,"_84":-5},"67055372e0308882c090f307","2024-10-08T15:44:50.797Z","Weaverse Pricing Update - More Free Usage, More Flexibility","weaverse-pricing-update-more-free-usage",2,{"_74":132},"Building a brand is tough.\nYou’re constantly juggling priorities, from sales and marketing to product development—and everything costs money.\nWhen you’re starting, every penny matters. Your burn rate matters. As a startup ourselves, we understand this deeply.\nWeaverse is designed to help you build headless storefronts faster, bringing your vision to life. But we also know that’s only part of the equation. You need time and resources to truly scale and grow.\nThis is why we released a new pricing update to offer our users more flexibility to grow, to scale, to win - without losing sleep over your burn rate.\nHere’s what’s new\n\nNew Pay-As-You-Go Plan: Replacing our Free Plan, this option is ideal for those just starting out. You now get 10,000 free view credits (twice the previous 5,000!). Only pay as your store grows—simple, flexible, and effective.\n\nIntroducing Grow Plan: Tailored for growing businesses. For $29/month, you get 200,000 view credits, along with a Service Level Agreement (SLA) and guaranteed response time to ensure your store runs smoothly even as you scale.\n\nIntroducing Scale Plan: Designed for high-traffic stores. At $199/month, you’ll get 1.5 million view credits and priority access to our upcoming features, including Localization, A/B Testing, and Scheduling.\n\n\n\nWhat About Current Paid Users?\nDon’t worry, you’re covered. The new pricing doesn’t affect existing paid users. If you’re already on a legacy business plan, you can switch to any of the new plans with the same add-on pricing: $1 for every 10,000 views.\nNot Sure What View Credits Are?\nView credits are counted each time a page on your Hydrogen theme is viewed, whether it’s a first-time visit or a repeat view. This ensures that our pricing is directly linked to how much value you’re getting from Weaverse.\nFor more details, check out our pricing page here. If you have any questions or concerns, just drop me a message on Linkedin!\n",{"_78":79},{"_82":135},"https://cdn.hashnode.com/res/hashnode/image/stock/unsplash/VMKBFR6r_jg/upload/d034e38ae85cf1f56e128e00b6c89eca.jpeg",{"_60":137},{"_62":138,"_64":139,"_66":140,"_68":141,"_70":142,"_72":143,"_76":145,"_80":146,"_84":-5},"66d86bcdd0d3a204dfe1aed1","2024-09-04T14:16:45.157Z","Shopify Tech Stack: A Developer’s Guide (2024)","shopify-tech-stack",19,{"_74":144},"Imagine building a rocket.\nYou don’t just grab a lawnmower engine, some duct tape, and hope for the best. No, you start with the blueprint, meticulously choosing each part—the thrusters, the fuel tanks, the guidance systems. Every piece has a purpose, and if one component is off, the whole thing could explode on the launchpad. The same goes for building an online store on Shopify. The tech stack you choose is like your rocket’s engine—it determines whether you’ll soar to success or crash and burn. You need the right thrusters (think of this as your core framework—hello, Liquid). Then, you need the fuel that powers it (your backend logic and APIs), then the advanced guidance systems, which keep everything on track (we’re talking about your frontend apps and frameworks). Finally, you need the structural integrity to hold it all together—this is where scalability, security, and performance come in. It’s a complicated process, but when done right, it’s nothing short of a marvel.\nShopify is the go-to platform for millions of online stores, and for good reason. It’s powerful, flexible, and built to scale. But here’s the catch: as a developer, you’ve got to pick the right tools to unlock its full potential. Otherwise, you might find yourself trying to pilot a jet engine with bicycle gears. Not a great plan.\nThis guide is your roadmap to navigating Shopify’s tech stack. We’ll cover everything from the tried-and-true Liquid framework, which has been powering Shopify stores for years, to the shiny new Hydrogen headless commerce solution that’s got everyone talking. Whether you’re a seasoned pro or just dipping your toes into the Shopify waters, understanding these tools will make all the difference.\nCore Technologies in Shopify's Tech Stack\nBuilding a Shopify store is like assembling a high-performance vehicle; each component plays a critical role in ensuring everything runs smoothly. Here’s a breakdown of the core technologies that form the backbone of Shopify’s tech stack:\n1. Liquid\nLiquid is Shopify’s proprietary templating language, and it’s been the bedrock of Shopify theme development for years. Think of Liquid as the engine that powers your store’s visual presentation. It dynamically loads content on your storefront, making it possible to create custom themes that cater to your unique brand.\nLiquid is particularly powerful because it allows developers to build complex, highly customized pages without needing to dive deep into backend code. It’s a logic-based language that enables you to pull data from Shopify’s database and display it in a way that’s tailored to your store’s needs.\nUse Cases:\n\nCustom Themes: Build unique storefronts with tailored designs.\n\nDynamic Content: Load products, collections, and customer information in real time.\n\nFlexibility: Modify existing themes or create new ones from scratch.\n\n\n2. Hydrogen & Remix\nAs Shopify moves into the future, Hydrogen is becoming the new star of its tech stack. Shopify Hydrogen is a React-based framework that supports headless commerce, allowing developers to build highly dynamic, fast, and customized storefronts.\nUnlike traditional setups, Hydrogen enables decoupling the frontend from the backend, giving developers more freedom to create unique experiences without being tied to Shopify’s standard themes. Paired with Remix, a full-stack web framework, Hydrogen offers tools to build high-performance, SEO-friendly pages that load quickly and handle complex interactions smoothly.\nUse Cases:\n\nHeadless Commerce: Build custom storefronts that are independent of the backend.\n\nDynamic User Experiences: Create rich, interactive user interfaces.\n\nPerformance Optimization: Improve site speed and scalability.\n\n\nShopify Hydrogen is ideal for stores that need to scale quickly or offer unique shopping experiences. Take a look at this case study.\nhttps://www.youtube.com/watch?v=sygn1JnzlT8\n \n3. Shopify APIs\nShopify’s APIs are the backbone of its flexibility. They allow developers to interact with Shopify’s platform programmatically, enabling custom app development, integrations, and automations.\nKey APIs:\n\nAdmin API: Manage your store’s backend operations, such as orders, products, and inventory.\n\nStorefront API: Access product information, collections, and customer data to create custom storefronts.\n\nPartner API: Integrate with Shopify’s partner ecosystem for billing, app management, and more.\n\n\nThese APIs are essential for developers looking to extend Shopify’s functionality beyond what’s available out of the box. They’re powerful tools for creating custom apps that meet specific business needs.\n4. Shopify CLI\nShopify Command Line Interface (CLI) is a game-changer for developers, streamlining the development process by allowing you to manage your project from the terminal. It’s packed with commands that make it easier to create new projects, themes, and apps without leaving your development environment.\nTools & Commands:\n\nTheme Development: Generate new themes and sync changes with your Shopify store in real-time.\n\nApp Development: Scaffold new apps with all the necessary files and configurations.\n\nDeployment: Easily push updates to your live store.\n\n\nShopify CLI is a must-have for any developer looking to speed up their workflow and reduce manual tasks.\nYou can learn more about the CLI and how to use it in your projects by visiting Shopify’s CLI documentation.\nCore Use Cases a Shopify Tech Stack Needs to Handle\nWhen building a robust eCommerce store on Shopify, it's essential to consider the various core use cases your tech stack must address. These use cases span from basic operations like payment processing to more complex needs like analytics and email management. Understanding which functions Shopify handles natively and where third-party apps come into play is crucial for creating an efficient and scalable store.\n1. Payment Processing\nShopify’s Solution: Shopify natively handles payment processing through its integrated gateway, Shopify Payments. It supports major credit cards, Apple Pay, Google Pay, and local payment methods, depending on the region. Shopify Payments simplifies the checkout process by keeping everything within the platform, ensuring a seamless and secure transaction experience.\nWhen You Need Third-Party Apps: For stores needing advanced payment solutions, such as subscription billing or alternative payment methods not supported by Shopify Payments, third-party apps like ReCharge (for subscriptions) or PayPal integrations are essential. These apps extend Shopify’s capabilities, allowing merchants to offer flexible payment options to their customers.\nhttps://www.youtube.com/watch?v=plkkLsxSEWU\n \n2. Accounting\nShopify’s Solution: While Shopify provides basic reporting and financial summaries, it lacks a full-fledged accounting system. It offers an overview of sales, taxes, and expenses but does not handle more detailed accounting tasks like managing ledgers or tracking expenses in detail.\nWhen You Need Third-Party Apps: For comprehensive accounting, integrating with apps like QuickBooks or Xero is necessary. These apps sync with Shopify to automatically import sales data, manage expenses, and generate financial reports. They also help with tax calculations and compliance, making them invaluable for businesses looking to maintain accurate financial records.\n3. Shipping and Fulfillment\nShopify’s Solution: Shopify offers built-in shipping and fulfillment options, including real-time shipping rates, label printing, and integration with major carriers like UPS, USPS, and DHL. It also provides inventory management features to track stock levels and manage orders.\nWhen You Need Third-Party Apps: For more complex shipping needs, such as international shipping or managing multiple warehouses, apps like ShipStation or Easyship provide advanced features. These apps offer multi-carrier shipping, automate label printing, and even handle customs documentation, making them ideal for businesses with high-volume or global shipping requirements.\nhttps://youtu.be/VB6HcbDx1Bg\n \n4. Analytics and Reporting\nShopify’s Solution: Shopify includes basic analytics and reporting features that cover sales, traffic, and customer behavior. Shopify Plus users have access to more advanced analytics, including custom reports and deeper insights into customer segments.\nIn Shopify Summer Edition 24, Shopify also announced a plan for a new in-app analytics product.\nhttps://www.youtube.com/watch?v=Ls_bbvO7bc8&pp=ygURc2hvcGlmeSBhbmFseXRpY3M%3D\n \nWhen You Need Third-Party Apps: To dive deeper into analytics, especially for stores focused on data-driven decisions, tools like Looker and Google Analytics are essential. Google Analytics provides granular insights into site performance and user behavior, while Looker offers advanced analytics capabilities for more actionable insights.\n5. Email Management\nShopify’s Solution: Shopify includes basic email functionality, such as order confirmations and shipping notifications. However, it does not offer robust email marketing tools.\nWhen You Need Third-Party Apps: For comprehensive email management, apps like Mailchimp or Omnisend are crucial. These tools allow you to create targeted email campaigns, automate follow-ups, and segment your audience for personalized messaging. They integrate seamlessly with Shopify, ensuring your marketing efforts are aligned with your store’s data.\n6. Customer Relationship Management (CRM)\nShopify’s Native Solution: Shopify provides basic customer management tools, allowing you to view customer profiles, track purchase history, and segment your customer base.\nWhen You Need Third-Party Apps: For more comprehensive CRM capabilities, integrating with tools like HubSpot or Salesforce is crucial. These platforms offer detailed customer insights, lead management, and advanced segmentation, enabling more personalized marketing and sales strategies.\nhttps://youtu.be/PnRHwPP6NLY\n \n7. Inventory Management\nShopify’s Native Solution: Shopify’s built-in inventory management is suitable for basic needs, allowing you to track stock levels, set up alerts for low inventory, and manage product variants.\nWhen You Need a Third-Party App: If your store has a complex inventory structure or multiple sales channels, third-party apps like TradeGecko (now QuickBooks Commerce) or Skubana offer more robust inventory management solutions. These tools provide features like multi-warehouse management, demand forecasting, and automatic reordering.\nHere's a quick resource to get you started.\nhttps://www.youtube.com/watch?v=LtYD3E_ur2g&pp=ygUcc2hvcGlmeSBpbnZlbnRvcnkgbWFuYWdlbWVudA%3D%3D\n \n8. Customer Support\nShopify’s Native Solution: Shopify includes basic customer support tools, such as order tracking and a simple contact form. However, these tools may not be enough for businesses that require more sophisticated support systems.\nWhen You Need a Third-Party App: For advanced customer support, apps like Gorgias or Zendesk are recommended. These platforms offer live chat, ticketing systems, automated responses, and integration with social media channels, ensuring that you can provide comprehensive support across multiple platforms.\n9. Sales Channels\nShopify’s Native Solution: Shopify allows you to sell across multiple channels, including Facebook, Instagram, and Amazon, directly from the Shopify admin. This native functionality is powerful for omnichannel sales strategies.\nWhen You Need a Third-Party App: While Shopify’s built-in tools are strong, apps like ChannelAdvisor or Sellbrite offer more advanced features for managing sales across numerous channels, such as detailed analytics, bulk listing tools, and automated order routing.\n10. Frontend Customization\nShopify’s Native Solution: Shopify’s themes, powered by the Liquid templating language, allow for a high degree of customization directly within the platform using Online Store 2.0.\n\nWhen You Need a Third-Party App: For those looking to push the boundaries of frontend design, tools like Shogun or PageFly offer drag-and-drop builders that make it easier to create custom pages without diving into the code. These apps are ideal for creating landing pages, product pages, or other unique layouts that go beyond Shopify’s default capabilities.\nBest Shopify Apps for Your Shopify Tech Stack\nSelecting the right apps can significantly enhance the functionality of your Shopify store. Here’s a rundown of the best apps for each core use case:\n1. Payment Processing\n\nReCharge: Ideal for subscription-based businesses, ReCharge allows you to manage recurring billing directly through Shopify. It supports various payment gateways and offers robust tools for managing customer subscriptions.\n\nPayPal: While Shopify supports PayPal natively, integrating PayPal’s advanced tools can enhance checkout flexibility, especially for businesses targeting international markets.\n\n\n2. Accounting\n\nQuickBooks Online: This app integrates seamlessly with Shopify, allowing for automated sales tracking, expense management, and financial reporting. It’s perfect for businesses that need detailed accounting records.\n\nXero: Another excellent option for accounting, Xero offers real-time data syncing with Shopify, making it easy to keep your books up-to-date and accurate.\n\n\n3. Shipping and Fulfillment\n\nShipStation: ShipStation integrates with multiple carriers, allowing you to manage all your shipping needs from one dashboard. It offers automation features that streamline the fulfillment process, from label printing to shipment tracking.\n\nEasyship: This app is perfect for businesses that ship internationally. Easyship provides real-time shipping rates, handles customs documentation, and offers detailed tracking information for customers.\n\n\n4. Analytics and Reporting\n\nGoogle Analytics: This is a must-have for any eCommerce store. Google Analytics provides detailed insights into your store’s traffic, user behavior, and conversion rates, helping you make data-driven decisions.\n\nKlaviyo: For email marketing analytics, Klaviyo is unmatched. It integrates with Shopify to track customer behavior and optimize your email campaigns for better engagement and higher conversion rates.\n\n\n5. Email Management\n\nMailchimp: One of the most popular email marketing platforms, Mailchimp allows you to create and automate email campaigns. It integrates with Shopify to sync customer data, making segmentation and targeting easy.\n\nOmnisend: This app offers more advanced features like SMS marketing, automation workflows, and detailed performance analytics, making it a powerful tool for managing all aspects of your email marketing.\n\n\n6. Customer Relationship Management (CRM)\n\nHubSpot: This app is perfect for businesses that need a full-featured CRM solution. HubSpot allows you to manage customer data, automate marketing, and track interactions across multiple channels.\n\nPrivy: Focused on growing your email list and converting visitors into customers, Privy offers tools for email capture, email marketing, and even text message marketing.\n\n\n7. Inventory Management\n\nTradeGecko (now QuickBooks Commerce): For businesses with complex inventory needs, TradeGecko provides features like multi-warehouse management, demand forecasting, and automatic reordering.\n\nSkubana: This app helps you streamline your operations by unifying your inventory, orders, and sales channels. It’s ideal for businesses that sell across multiple platforms like Amazon, eBay, and Shopify.\n\nStock Sync: If you’re looking for a more budget-friendly option, Stock Sync helps you update product stock levels automatically by syncing with your suppliers.\n\n\n8. Customer Support\n\nGorgias: This is the go-to app for managing customer support across multiple channels. Gorgias integrates with email, live chat, and social media, allowing you to resolve customer issues quickly and efficiently.\n\nZendesk: Another industry leader, Zendesk offers comprehensive support solutions, including ticketing systems, live chat, and automation tools.\n\nTidio: If you’re looking for a user-friendly live chat option, Tidio is an excellent choice. It integrates with Shopify and provides AI-powered chatbots to automate customer interactions.\n\n\n9. Sales Channels\n\nChannelAdvisor: This app helps you manage sales across various platforms, including Amazon, eBay, Walmart, and Google Shopping. It’s ideal for large businesses with complex sales strategies.\n\nSellbrite: A simpler alternative to ChannelAdvisor, Sellbrite enables you to manage inventory, orders, and listings across multiple marketplaces from a single dashboard.\n\nCodisto: If you’re focused on Amazon and eBay, Codisto provides a robust integration with Shopify, allowing you to sync listings, orders, and inventory with ease.\n\n\n10. Frontend Customization\n\nShogun: This drag-and-drop builder makes it easy to create custom landing pages, product pages, and blog posts without touching a line of code. Shogun is perfect for businesses looking to create unique, on-brand designs.\n\nPageFly: Another powerful page builder, PageFly offers a wide range of customization options and integrates seamlessly with Shopify’s themes.\n\nGemPages: If you’re looking for an affordable but robust page builder, GemPages is a great option. It offers drag-and-drop functionality and advanced customization options, making it a solid choice for any store.\n\n\nAdvanced Shopify Development Strategies\nOnce you've got the basics down, it's time to level up your Shopify development game. Advanced strategies allow you to create more sophisticated, scalable, and efficient stores that stand out in the crowded eCommerce landscape. Let’s dive into some key areas where you can enhance your Shopify projects:\n1. Custom App Development\nCreating custom apps tailored to specific business needs can significantly extend Shopify’s functionality. Whether it’s integrating with external systems, automating workflows, or adding unique features, custom apps provide the flexibility that off-the-shelf solutions might lack.\nSteps to Develop a Custom App:\n\nDefine the Purpose: Clearly outline what problem your app will solve or what functionality it will add.\n\nChoose the Right API: Utilize Shopify’s Admin API or Storefront API depending on your app’s requirements.\n\nSet Up Development Environment: Use Shopify CLI to scaffold your app, ensuring you have all the necessary tools and dependencies.\n\nDevelop and Test: Build your app using frameworks like Node.js or Ruby on Rails, and thoroughly test it in Shopify’s development store environment.\n\nDeploy and Maintain: Once tested, deploy your app and keep it updated with new features and security patches.\n\n\nBest Practices:\n\nSecurity First: Always prioritize data security and comply with Shopify’s security guidelines.\n\nUser-Friendly Design: Ensure your app is intuitive and easy to use for merchants.\n\nScalability: Design your app to handle growth, both in terms of user base and functionality.\n\n\n2. Theme Customization\nWhile Shopify’s themes offer a great starting point, customizing them can help your store better reflect your brand and meet specific business needs. Advanced theme customization goes beyond simple tweaks, allowing for deep modifications that enhance functionality and user experience.\nTechniques for Advanced Customization:\n\nLiquid Mastery: Deepen your understanding of Liquid to create dynamic, data-driven templates.\n\nCSS and JavaScript Enhancements: Use modern CSS frameworks like Tailwind or JavaScript libraries like React to add interactive elements and improve the visual appeal.\n\nIntegrate Third-Party Services: Incorporate services like animation libraries, advanced form builders, or custom sliders to enhance functionality.\n\nOptimize for Performance: Minimize load times by optimizing images, leveraging lazy loading, and using efficient coding practices.\n\n\nTools and Resources:\n\nTheme Kit: A powerful tool for managing and deploying theme changes.\n\nShopify Polaris: Shopify’s design system that provides guidelines and components for creating cohesive and user-friendly interfaces.\n\n\n3. Testing and Deployment\nEnsuring your apps and themes work flawlessly before they go live is crucial for maintaining a professional and reliable store. Robust testing and streamlined deployment processes help catch bugs early and ensure smooth updates.\nTesting Strategies:\n\nAutomated Testing: Implement automated tests for your codebase using tools like Jest for JavaScript or RSpec for Ruby.\n\nManual Testing: Perform thorough manual testing to catch issues that automated tests might miss, focusing on user experience and edge cases.\n\nStaging Environments: Use Shopify’s development stores to create staging environments where you can test changes without affecting the live store.\n\n\nDeployment Best Practices:\n\nVersion Control: Use Git or another version control system to manage your codebase and track changes.\n\nContinuous Integration/Continuous Deployment (CI/CD): Set up CI/CD pipelines to automate testing and deployment, ensuring that updates are consistently and reliably pushed to production.\n\nRollback Plans: Always have a rollback plan in place in case something goes wrong during deployment, allowing you to quickly revert to a stable version.\n\n\nEssential Tools:\n\nGitHub Actions: For automating your CI/CD workflows.\n\nShopify Theme Inspector: To analyze and optimize your theme’s performance.\n\n\n4. Performance Optimization\nA fast-loading store not only improves user experience but also boosts your SEO rankings and conversion rates. Optimizing performance involves a combination of best coding practices, efficient asset management, and leveraging Shopify’s infrastructure.\nhttps://youtu.be/6FnZ7e9Ibbw\n \nKey Optimization Techniques:\n\nMinimize HTTP Requests: Reduce the number of resources loaded on each page by combining files and using sprites for images.\n\nOptimize Images: Compress images without sacrificing quality using tools like ImageOptim or Shopify’s built-in image compression.\n\nLeverage Caching: Utilize browser caching and Shopify’s CDN to serve assets quickly to users around the globe.\n\nCode Splitting: Break down your JavaScript into smaller chunks that can be loaded on demand, improving initial load times.\n\n\nMonitoring and Tools:\n\nGoogle PageSpeed Insights: Analyze and get recommendations for improving your store’s performance.\n\nShopify Analytics: Use Shopify’s built-in analytics to monitor load times and identify performance bottlenecks.\n\n\n5. Security and Compliance\nMaintaining a secure store is paramount to protect both your business and your customers. Adhering to best security practices and compliance standards ensures trust and reliability.\nSecurity Best Practices:\n\nUse HTTPS: Ensure your store uses HTTPS to encrypt data transmitted between your site and your users.\n\nRegular Updates: Keep your apps, themes, and dependencies up to date to protect against vulnerabilities.\n\nAccess Controls: Implement strict access controls and use Shopify’s user roles to limit access to sensitive information.\n\n\nCompliance Considerations:\n\nGDPR and CCPA: Ensure your store complies with data protection regulations like GDPR and CCPA by implementing proper data handling and privacy policies.\n\nPCI Compliance: If you’re handling payments directly, ensure you meet PCI compliance standards to protect cardholder data.\n\n\nTools and Resources:\n\nShopify Security Documentation: Stay informed about the latest security practices and updates from Shopify.\n\nThird-Party Security Apps: Consider using apps like Rewind for backups and Locksmith for advanced access controls.\n\n\nShopify Headless Tech Stack\nRemember the spaceship earlier? Now let’s say you’re a genius, and you find the previous instructions too limiting - so you ditch the manual and build your own custom starship. You want this thing to fly faster, look cooler, and maybe even shoot lasers.\nThat’s essentially what you’re doing when you opt for a headless architecture with Shopify: you’re building a custom spaceship that’s designed to blast off into the eCommerce stratosphere.\nCore Concepts of Shopify’s Headless Tech Stack\nIn the traditional eCommerce world, your front end (the shiny part that customers see) and your backend (where the data magic happens) are bundled together like peas in a pod. But in a headless setup, you separate the two:\n\nHydrogen: Shopify’s React-based framework, the engine room of your new spaceship. Hydrogen comes with pre-built components and hooks that make building fast, interactive user interfaces feel like a breeze. Think of it as the framework that helps you create a frontend experience that’s not just functional but downright slick.\n\nStorefront API: Storefront API lets you pull in product data, manage customer interactions, and handle orders, all without ever needing to touch the backend directly. It’s fast, flexible, and just what you need to keep everything running smoothly on your custom-built front end.\n\nRemix: Remix is a full-stack web framework that pairs perfectly with Hydrogen, helping you manage data loading, form handling, and routing—all while making sure your user experience is out of this world.\n\nGraphQL: Lastly, there’s GraphQL, the hyper-efficient fuel that powers your Storefront API. It allows you to request exactly the data you need—no more, no less—which keeps your site speedy and your customers happy.\n\n\nhttps://youtu.be/IHYlfEiTf3g\n \nAdvantages of Shopify’s Headless Tech Stack\nSo, why go through all this trouble of unbundling and reassembling your eCommerce spaceship?\n\nCustomization: You’re no longer bound by Shopify’s theme framework. Want your store to look like a futuristic eCommerce wonderland? No problem. Using cutting-edge frontend technologies like React, Vue.js, or Angular, you can design anything you imagine.\n\nPerformance: A faster spaceship means happier passengers, and in eCommerce, speed is everything. Headless setups can drastically improve your site’s performance by leveraging server-side rendering (SSR) and static site generation (SSG). This means your pages load quicker, which is a win-win for user experience and SEO.\n\nScalability: A headless architecture makes it easier to scale, whether you’re handling a Black Friday-level traffic surge or adding new features. You’re not constrained by the typical platform limitations, so your growth potential is practically limitless.\n\nMulti-Channel Integration: Think of headless commerce as your universal docking system. It allows your Shopify backend to power any number of frontends—whether it’s a mobile app, a kiosk, or even a smart fridge (hey, we’re dreaming big here). This multi-channel flexibility is key in today’s omnichannel world.\n\n\n\n💡\nWeaverse is a theme customizer built for Shopify Hydrogen. With Weaverse, Shopify developers can cut down development time with reusable components and pre-made themes. Using a visual editor, non-technical users can easily iterate their websites without writing code or constantly seeking developer assistance.\n\n\nChallenges and Considerations\nOf course, no epic space journey is without its challenges:\n\nDevelopment Complexity: A headless setup isn’t for the faint of heart. It’s more complex to develop and maintain, requiring a higher level of technical expertise—especially in frontend technologies and API integrations.\n\nCost: All that extra customization and flexibility? It comes at a price. Headless solutions can be more expensive to implement and maintain, so it’s important to weigh the benefits against the added costs.\n\nSEO Considerations: While a headless setup can turbocharge your site speed, it can also complicate SEO. Search engines need to be able to crawl and index your content effectively, which requires careful planning and implementation.\n\n\nGetting Started with Shopify’s Headless Tech Stack\nReady to launch your eCommerce spaceship? Here’s how to get started:\n\nExplore Hydrogen: Check out Hydrogen and its capabilities. Shopify’s Hydrogen documentation is a great place to start.\n\nLeverage the Storefront API: Familiarize yourself with the Storefront API and GraphQL by diving into Shopify’s API documentation.\n\nPlan Your Architecture: Before you blast off, plan your architecture carefully. Consider how you’ll manage data fetching, routing, and user experience. Tools like Remix can simplify some of these challenges, but a solid plan is essential.\n\nConsider the Costs and Benefits: Weigh the pros and cons of going headless. If your store needs advanced customization, high performance, and multi-channel capabilities, headless commerce could be your ticket to the stars. Just make sure you’re prepared for the complexity and costs involved.\n\n\n",{"_78":79},{"_82":147},"https://cdn.hashnode.com/res/hashnode/image/stock/unsplash/87hFrPk3V-s/upload/14c54df167266ee4b1ae9ad6edec04f0.jpeg",{"_60":149},{"_62":150,"_64":151,"_66":152,"_68":153,"_70":91,"_72":154,"_76":156,"_80":157,"_84":-5},"66d289e85d726e815f2977ef","2024-08-31T03:11:36.801Z","70-Point Checklist for B2B eCommerce Features","b2b-ecommerce-website-features",{"_74":155},"Hello, this is Paul at Weaverse, a Shopify Hydrogen theme customizer.\nAfter building a bunch of B2B Shopify stores, we quickly saw how different it is from B2C. But there's no clear guide to help developers and merchants align on what needs to be built, what’s essential, and what’s just nice to have. Most of the resources I found are just checklists for top B2B eCommerce platforms, not about building B2B stores.\nSo, I created one, aiming to keep it as clear and structured as possible.\nThat said, there's definitely (a lot!) room for improvement. I might have missed some features here and there. This doc is open for your feedback—let’s turn this checklist into a solid open-source resource. I'd love to hear your thoughts!\n🧑‍💻 User Roles and Permission\n\n💡\nSupport easy account creation and allow for multiple users with different roles within the same company account.\n\n\n\nQuickly sign up (e.g.: one-click signup) and create business accounts with comprehensive profiles and robust account management tools. (Via Customer Account API if your online store is on Shopify)\n\nCustomize branding and design across their account pages.\n\nCreate and manage different user roles and permissions (e.g.: buyers, managers, admins). Customers can add different users to their accounts and assign specific roles and permissions. This flexibility would allow them to effectively develop workflows aligned with their business processes. (optional)\n\nAllow multiple users to log in under one account, share order histories, and see what everyone in the account is doing.\n\nEach user has their own account but can view Order Histories shared by the managing Company.\n\nAllow multiple users to create their own accounts, but can\n\nEnable sales to place orders on behalf of customers within the admin or the online store.\n\n\n\n🗿Self-Service Buying Experience\nYou don’t want to treat your B2B websites as a catalog and take orders via phone or fax.\nThe whole point of having an eCommerce B2B website is to simplify the buying process, eliminating the cumbersome steps often found in traditional B2B purchasing. So, you want to ensure the platform supports 24/7 self-serve options for customers to place orders, manage their accounts, and access order history.\nThis section is designed to align with a simplified version of the shopper's journey on the website.\n\nSearch the store for items using SKU, product parts, or fuzzy search.\n\nFuzzy search allows for misspellings or typos to still yield relevant results (e.g., typing “sprung” will return results for \"spring\").\n\nPredictive search offers a drop-down with the best matching products, similar to Google.\n\nShoppers can refine search results by child categories, facets, flags, or tags (e.g., by brand) using checkboxes.\n\n\n\nQuick order button on each search result that allows shoppers to add an item to the cart without having to go to the product page.\n\nSee up-to-date stock and inventory information.\n\nSee prices with GST included or excluded for both B2C and B2B customers.\n\nSharable product info, ability to email a product page or the info about a product easily to the purchasing team/ other buyer stakeholders.\n\nEasily request quotes for custom products or quantities.\n\nPlace bulk orders through CSV file uploads for large-scale transactions.\n\nHave the option to mix and match products to reach the required quantities for wholesale orders. (Optional)\n\nSee location-specific information for shipping, tax, and currencies at checkout.\n\nSee lead time for made-to-order products.\n\nVault a credit card for immediate payment or future use.\n\nView order history and tracking - customizable by user roles and permissions.\n\nSave important SKUs to a list for easy finding later.\n\nSee a list of SKUs most recently purchased for easy placement of a new order.\n\nReorder quickly using a previous order to build a new cart and place an order.\n\nSet automatic reordering - support for recurring orders with flexible frequency options.\n\nSet up alerts for order status, stock availability, and promotions.\n\nBackordering capability. Customers can either request an alert when items are back in stock or place a backorder, so the item is automatically shipped once it's available again.\n\n\n\n🖼️ Personalization and Customization\nYour B2B website should allow you to offer personalized buying experiences, such as custom catalogs, product displays, and pricing.\nThe checklist below outlines the merchant-side/admin capabilities needed to create these tailored experiences for your shoppers.\n📡 Product Display\n\nCreate custom forms and checkout fields tailored to specific customer needs and different scenarios.\n\nProvide customized product catalogs for different customers or customer groups.\n\nDefine and display how products can be purchased (e.g., by case or unit) and set minimum/maximum order quantities. Rules can vary by customer group.\n\nAdd custom flags (e.g., “SALE”, “NEW”) on product images.\n\nProducts can appear in multiple categories, with the top category’s URL used for SEO purposes.\n\nAutomatic related products/up-selling/cross-selling based on category, flags, or keywords.\n\nDifferent layouts for product pages and quick order pop-ups based on product types.\n\nMultiple images and PDFs (e.g., instructions, brochures, safety data sheets) on product pages.\n\nAbility to place any component (e.g., videos, accordions, tabs, related product carousels) on product pages.\n\nOptional custom inquiry forms on product pages.\n\nInclude item weights in product data to support shipping and fulfillment pricing based on weight.\n\nAbility to hide prices and the add-to-cart button for visitors who are not logged in or belong to restricted groups.\n\nAbility to display custom product information, including but not limited to:\n\nQuantity price break tables.\n\nRecommended retail prices.\n\nQuantity price break percentage savings.\n\nNumber of units per pack.\n\nPrice per unit (e.g., $2.50 per meter for a 50-meter roll).\n\nPrice notes (e.g., “Buy 20 to get a full carton”).\n\n\n\n\n💵 Pricing & Quoting\n\nOffer tiered pricing based on user roles or purchase volume.\n\nAbility to set different MOQs for different customer groups/product categories.\n\nSet quantity thresholds where discounts apply for volume orders, either on a single product or across multiple products.\n\nSchedule sales with specific start and end dates, and apply them to different customer groups.\n\nIssue promotional pricing effectively, such as for overstock or clearance where products need to be moved quickly.\n\n\n🛫 Checkout & Payment\nYou almost won your customers - now is the time to make checkout and payment as convenient as possible.\nLet your customers pay however they prefer while ensuring payment collection is effortless for you. Here are some payment capabilities you should be looking for.\n\nSupport for various payment methods, including credit cards, purchase orders, and bank transfers.\n\nRole-based checkout customization (e.g., approval workflows, specific payment methods).\n\nPayment terms tailored to customers (e.g., due on fulfillment net 30, net 60).\n\nMulti-currency support and tax handling based on customer location.\n\nShipping options and taxes are calculated at checkout based on customer location.\n\nDivide an order into multiple payments, such as a deposit/balance scenario, or bill in increments over time as needed. (Deposit and balance billing).\n\nSet custom payment terms for each customer, allowing them to buy now and pay later. Easily track which orders are paid, open, or overdue. (Net Terms - Buy Now, Pay Later)\n\nSet credit limits for each account, letting customers buy now and pay later up to the approved amount. (Lines of credit).\n\nOptions to get store credit instead of cash refunds to handle returns.\n\nAutomated payment reminders and invoice management.\n\nAllows customers to view past orders, payment history, and outstanding payments on orders.\n\nAllows customers to reference PO numbers included on past orders.\n\nAutomated payment reminders and invoice management.\n\nRemind customers to return and complete their purchase if they leave items in their cart.\n\n\n🛳️ Shipping and Delivery\n\nCustomizable shipping methods based on customer group.\n\nAdvanced shipping cost calculators (e.g., based on size, quantity, or distance).\n\nClick and Collect options with real-time branch stock integration.\n\nSpecific delivery date selection.\n\nShipping options and taxes are calculated at checkout based on customer location.\n\nAccurate delivery updates using data from third-party logistics (3PL) systems.\n\nSupport for multiple shipping addresses and \"Care of\" delivery options.\n\nReal-time tracking information for orders.\n\nOption for automated return processes\n\n\n\n🧩 Integration\n\nIntegrate with ERP systems for order management and inventory control.\n\nAdvanced product information can be pulled from ERP (e.g., product images, specs).\n\nSynchronization of customer data, including pricing, orders, and inventory.\n\n\n\nIntegrate with Account Receivable automation tools for e-invoice/statements.\n\nConnect with CRM systems to manage customer relationships effectively.\n\nIntegrate with third-party logistics (3PL) systems for accurate delivery updates.\n\nIntegration with marketing automation tools for better campaign management.\n\nSupport for multiple payment gateways to offer flexible payment options.\n\n\n\n🔏 Security & Compliance\n\nGranular access controls and user permission management\n\nMeet industry standards in compliance and security (PCI DSS, GDPR, SOC 2)\n\n\n\n🍊FAQ: B2B eCommerce Websites and Platforms\nWhat's The Difference Between B2B & B2C eCommerce\nB2B eCommerce (Business-to-Business) is where companies sell products or services to other businesses online. While it might sound similar to B2C (Business-to-Consumer) eCommerce, where companies sell directly to individual customers, the two are quite different. Here’s why:\n\nBuyer Motivation:\n\nB2C: Buyers are driven by emotions, brand loyalty, and instant gratification. Think about buying a new pair of shoes because you like how they look.\n\nB2B: Buyers are focused on practicality, cost-effectiveness, and long-term value. For example, a company purchasing office supplies will consider the best price, quality, and vendor reliability.\n\n\n\nTransaction Complexity:\n\nB2C: Transactions are usually straightforward, involving a single payment and shipping address.\n\nB2B: Transactions are more complex, often requiring customized pricing, bulk orders, multiple approvals, and extended payment terms.\n\n\n\nDecision-Making Process:\n\nB2C: Decisions are often made quickly, sometimes impulsively.\n\nB2B: Decisions involve multiple stakeholders and a thorough evaluation process, focusing on what will benefit the business in the long run.\n\n\n\nPlatform Features:\n\nB2C: Platforms prioritize user-friendly interfaces, quick checkout processes, and personalized marketing.\n\nB2B: Platforms need to support features like role-based access, advanced search, bulk ordering, and integration with ERP systems.\n\n\n\n\nWhat Are The Most Best B2B eCommerce Platforms?\nMagento Commerce\n\nWhy it’s great: Magento is known for its flexibility and extensive customization options. It’s a powerful platform that supports complex pricing models, multiple storefronts, and robust integrations with ERP and CRM systems. Magento is ideal for large enterprises that need a highly customizable solution.\n\nWho it’s for: Best suited for large/enterprise businesses with specific needs and the technical capability to manage and customize the platform.\n\nLimitations: Magento’s flexibility comes at a cost—it's resource-intensive. Setting up and maintaining a Magento store requires significant technical expertise and a strong IT team, which can be a barrier for smaller businesses. Additionally, it can be costly, both in terms of initial setup and ongoing maintenance.\n\n\nOroCommerce\n\nWhy it’s great: OroCommerce is built specifically for B2B eCommerce, offering features like multi-organization management, personalized catalogs, and advanced workflow automation. It also provides a strong focus on account management, which is critical in B2B environments.\n\nWho it’s for: Designed for mid to large-sized businesses looking for a platform with a strong B2B focus.\n\nLimitations: While powerful, OroCommerce can be overwhelming due to its complexity. It’s best suited for mid to large-sized businesses with the resources to manage its extensive features. The learning curve can be steep, and the platform may be overkill for smaller or simpler B2B operations.\n\n\nShopify Plus\n\nWhy it’s great: Shopify Plus combines ease of use with powerful B2B features, including seamless integration with major ERP systems and support for complex pricing models. It’s highly scalable and flexible, making it suitable for businesses of all sizes, and it doesn’t require extensive technical know-how to manage.\n\nWho it’s for: Ideal for businesses that want a balance between ease of use and advanced features without needing extensive technical resources.\n\nLimitations: Shopify Plus, while easy to use, has limitations in terms of customization compared to platforms like Magento. Businesses with highly specific needs may find Shopify Plus less flexible. Additionally, transaction fees and app costs can add up, making it more expensive as your business scales.\n\n\nBigCommerce\n\nWhy it’s great: BigCommerce offers robust B2B capabilities, including advanced search functions, bulk pricing, and multi-storefront management. Its strong API allows easy integration with other business tools, which is a big plus for tech-savvy businesses.\n\nLimitations: BigCommerce, while powerful, can be less intuitive for non-technical users. The platform's built-in features are strong, but the limited selection of third-party apps compared to Shopify may require custom development to meet specific needs, potentially increasing costs.\n\n\nSalesforce Commerce Cloud\n\nWhy it’s great: Salesforce Commerce Cloud provides a comprehensive suite of B2B features, including AI-driven personalization, powerful customer insights, and seamless integration with Salesforce’s CRM. It’s perfect for businesses that are already using Salesforce and want to leverage its full ecosystem.\n\nWho it’s for: Best for businesses that are deeply invested in the Salesforce ecosystem and need a platform that integrates tightly with their existing CRM.\n\nLimitations: Salesforce Commerce Cloud can be expensive, particularly for small to mid-sized businesses. It’s also highly complex, requiring significant time and expertise to implement and manage. Companies not already invested in the Salesforce ecosystem might find this platform unnecessarily complicated and costly.\n\n\nWhat Are The Common Features of B2B eCommerce Website?\n\nCustomized Pricing and Catalog Management:\n\nWhy it matters: B2B transactions often involve negotiated pricing and exclusive product catalogs. Unlike B2C, where prices are usually fixed and visible to everyone, B2B platforms must support contract-based pricing, volume discounts, and even personalized product catalogs based on the customer’s profile.\n\nHow it works: The platform should allow businesses to create custom price lists and catalogs for different clients or business units. This level of personalization helps cater to the unique needs of each customer, ensuring they see only what’s relevant to them.\n\n\n\nBulk Ordering and Quick Reordering:\n\nWhy it matters: Businesses often purchase in large quantities, and they need a quick way to reorder the same items regularly. The ability to handle bulk orders seamlessly is crucial for B2B eCommerce.\n\nHow it works: Features like multi-SKU cart additions and one-click reordering streamline the purchasing process, making it easier for businesses to manage their inventories without hassle.\n\n\n\nAccount Management and User Roles:\n\nWhy it matters: B2B platforms often serve large organizations with multiple departments and decision-makers. Different users within a company may have different roles and permissions.\n\nHow it works: The platform should allow for role-based access control, meaning different users can have different permissions based on their role within the company. For example, a procurement officer might place orders, while a financial controller approves them.\n\n\n\n\n📚 Further Resources\n\nhttps://www.shopify.com/plus/guides/b2b-ecommerce-checklist\n\nhttps://www.shopify.com/enterprise/blog/b2b-ecommerce-features-wholesale\n\n\n",{"_78":79},{"_82":158},"https://cdn.hashnode.com/res/hashnode/image/stock/unsplash/dI-aXC7DWpQ/upload/7cfa03790d4e4e03a8635332964899a2.jpeg",{"_60":160},{"_62":161,"_64":162,"_66":163,"_68":164,"_70":165,"_72":166,"_76":168,"_80":169,"_84":171},"66c1d18f0a4e671df4ac0436","2024-08-18T10:48:47.070Z","Headless Commerce: Pros, Cons and Things No One Really Tell You","benefits-of-headless-commerce",10,{"_74":167},"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.\nBut 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.\nIn 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.\n\nMeanwhile, 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.\nBy 2020, the outcome was as predictable as a Nike swoosh: Nike was dominating the digital space, while J.C. Penney was filing for bankruptcy.\nThis is one of the many benefits of headless commerce - among other things - it allows you to turn your vision into reality.\nBenefits of Headless Commerce and Why It Matters\nFlexibility and Customization\nOne of the standout benefits of headless commerce is its ability to offer unparalleled flexibility and customization for your e-commerce platform.\n(Example below: Ghanda headless website is built with Next.Js)\n\nImagine 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.\nBut the benefits don’t stop at aesthetics.\nWith headless commerce, you can build and iterate on your customer experiences without having to worry about the limitations of traditional, monolithic systems.\nWant to launch a personalized shopping app that looks nothing like your main website? Go ahead.\nNeed to integrate an AR feature that lets customers try on shoes virtually? No problem.\nThe decoupled nature of headless commerce allows you to experiment and innovate quickly, without the fear of breaking your entire ecommerce platform.\nThis 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.\nScalability and Integration\nHeadless commerce isn’t just about looking good—it’s about growing smart.\nOne 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.\n(Example below: Timothy London headless storefront, built with Shopify Hydrogen and Weaverse)\n\nIn 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.\nIntegration 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.\nFaster Speed To Market for Marketing Team\nManaging content and commerce on a traditional, monolithic ecommerce platform might feel like juggling while riding a bicycle.\nEverything is so tightly integrated that a change in one area often causes a domino effect, leading to unintended consequences across your entire site.\nIn 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.\n(Example below: StackedFarm headless storefront, built with Next.js)\n\nYour 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.\nThis 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.\nImproved Performance\nHave 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.\nSlow 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.\n(Example below: Atoms headless storefront, built with Shopify Hydrogen)\n\nMoreover, 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.\nFuture-Proofing\nToday’s cutting-edge technology can quickly become tomorrow’s outdated relic.\n05 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.\n(Example below: Silvercore headless storefront, built with Shopify Hydrogen)\n\nAs 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.\nThis 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.\nIt’s like having a crystal ball for your business—one that ensures you’re always ready for whatever the future holds.\nOmni-channel Selling\nExpectations are only getting higher from here on.\nCustomers 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.\nMoreover, 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.\n(Example below: Denim Tears headless storefront, built with Shopify Hydrogen)\n\nFor more headless commerce website example, check out this article.\nHeadless Commerce Is Not A Silver Bullet\nWhile 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.\nHere’s a closer look at some of the most common pitfalls and cons associated with headless commerce.\n1. High Initial Costs and Complexity\nUnlike 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.\nAdditionally, the complexity of managing multiple systems can be overwhelming.\nWithout 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.\nThat 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.\n2. Increased Management Overhead\nThe 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.\nAdditionally, because headless commerce typically involves using multiple third-party tools and services, businesses need to manage these integrations closely.\nEach 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.\n3. Longer Development Times\nWhile headless commerce enables greater customization, it can also result in longer development times, especially during the initial setup phase.\nTraditional 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.\nThat said, newer technologies like Shopify Hydrogen has greatly shorten development times with better framework, and more robust toolings.\n4. Learning Curve and Developer Experience\nWhile 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.\nThat 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.\n5. 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.\nYet, 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.\nFor 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.\n\nFinal Words\nThe 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.\nAnd if you're looking for the fastest way to build headless storefronts using Shopify Hydrogen, check out Weaverse. (I work here ;)).\n",{"_78":79},{"_82":170},"https://cdn.hashnode.com/res/hashnode/image/stock/unsplash/uClWT7DDpb8/upload/9bcaf357d856fa73e83133be83c87fd4.jpeg",{"_68":98,"_78":99},{"_60":173},{"_62":174,"_64":175,"_66":176,"_68":177,"_70":178,"_72":179,"_76":181,"_80":182,"_84":184},"66b77c171ad8a7364b0707aa","2024-08-10T14:41:27.770Z","Going Headless With Shopify: How Much Does It Cost?","shopify-headless-pricing",8,{"_74":180},"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?\nLet’s get straight to the point here. First, you need to break down the setup cost for a Shopify headless storefront.\nI. Initial Setup Costs Breakdown\nTo go headless, you’d need the right tech stack. Here’s the typical tech stack of a headless Shopify store:\n\nPlatform: Shopify ($25 - $2000)\n\nFrontend: Hydrogen ($0)\n\nCMS: Weaverse + MetaObjects (if needed) ($12-$250)\n\nDeployment: Oxygen ($0)\n\nFilter & Search: Shopify Predictive Search & Filter ($0)\n\nAnalytics: GA, Pixel, Clarity, Plausible\n\nAdditional Apps: Reviews, Support (CRM), CX, Email, Filter, Subscription. ($1,000-$10,000)\n\n\nNow let’s break further the cost for each of these components.\n1. Shopify Subscription\nYes, with Hydrogen and Oxygen, you can go headless even when you’re on Shopify regular tiers. Shopify offers several subscription tiers:\n\nBasic Shopify ($25 per month): This plan is suitable for small businesses just starting out but has limitations in API call capacity and feature set.\n\nShopify ($79 per month): A mid-tier plan that offers more features and higher API limits, suitable for growing businesses.\n\nAdvanced Shopify ($299 per month): Ideal for larger businesses needing advanced reporting and more significant API usage.\n\nShopify 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\n\n\nMost 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.\n2. Frontend: Hydrogen\nIn 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.\nUsing 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.\nAnd the best part? It’s free.\n3. Visual CMS (Weaverse) + Metaobjects\nHydrogen 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.\nWeaverse 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.\nWith 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).\nMetaObjects 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.\n4. Deployment: Oxygen\nOxygen 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.\n5. Analytics: Google Analytics\nTools 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.\n6. Additional Apps\n\nReview Apps: Needed for building trust with customers, review apps allow customers to leave feedback on products, which can significantly influence purchasing decisions.\n\nCRM/Customer Support: CRM tools help manage customer interactions and ensure a seamless support experience.\n\nEmail Management: Tools for handling email campaigns and customer communication are vital for maintaining engagement and driving sales.\n\n\nOf 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.\n7. Deployment\nDevelopment costs represent a significant part of your initial investment.\nAgencies 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.\n8. Ongoing Maintenance Costs\nOnce your headless setup is live, ongoing maintenance is essential to keep everything running smoothly. This includes:\n\nRegular Updates: Both frontend and backend updates to ensure security, performance, and compatibility with new features.\n\nBug Fixes and Optimizations: Addressing any issues that arise and optimizing the site for better performance and user experience.\n\nAdditional Feature Development: As your business grows, you might need new features, which requires additional development time and resources.\n\n\nThese 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.\nConclusion\nBased 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.\nWhen planning your headless development plan, you also need to take into account the following costs.\nKey Considerations Before Going Headless With Shopify (Beyond Just Costs)\nTechnical Expertise and Resources\nA headless setup isn’t for the faint-hearted.\nYou’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.\nBusiness Needs and Objectives\nEven 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.\nIf 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.\nFlexibility and Customization\nOne 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.\nBut 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.\nIntegration Capabilities\nThink 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.\nFuture Scalability\nConsider 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.\nRisk Management\nLastly, 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.\nTime to Market\nSwitching 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.\nFinal Words\nIn 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?\nGodspeed, and happy selling!\n",{"_78":79},{"_82":183},"https://cdn.hashnode.com/res/hashnode/image/stock/unsplash/8fDhgAN5zG0/upload/8d7face0bd3208c0d7cc0e82a12d805e.jpeg",{"_68":98,"_78":99},{"_60":186},{"_62":187,"_64":188,"_66":189,"_68":190,"_70":191,"_72":192,"_76":194,"_80":195,"_84":-5},"66b77819b5da3c8a6e864ab9","2024-08-10T14:24:25.366Z","Shopify Headless Checkout vs Checkout Extensibility: Which One Is Right For You?","shopify-headless-checkout",11,{"_74":193},"Ten years ago, if you were running an online store, your website was like a tightly packed suitcase. Everything was crammed together, and if you wanted to change one thing, you had to unpack and repack the whole thing. This was the era of monolithic eCommerce platforms. They were all-in-one solutions, but they were also rigid and inflexible.\nToday, you have headless commerce. Imagine your online store as a modular wardrobe instead of a packed suitcase. You can change your shirt without touching your pants. Headless checkout is a key part of this trend. It separates the front-end (what customers see) from the back end (where the transactions happen).\nWith headless checkout, the checkout and payment processes are separated from the back-end of an online store. This allows for “on the spot” purchasing across multiple touchpoints, such as a promotional email, sponsored article, social post, a QR code at an event, and much more. Using headless checkout, online shoppers can fully complete a retail transaction without having to go to your eCommerce website at all.\n\nFor example, let’s say Tom is scrolling through his Instagram feed. He sees a post from your brand about a limited-time offer on his favorite product. He is ready to buy. Without headless checkout, it might go like this:\n\nHe clicks on the “Buy now” link in the Instagram post.\n\nThe link opens his default browser, landing on your eCommerce website.\n\nHe has to find the product that is on sale and add it to her cart.\n\nThen he has to type in her name, credit card, and billing address, and possibly even reenter shipping information and details.\n\nIf he is on a mobile device, she has to do this all on a tiny screen, making it an even worse experience—possibly so bad she abandons her cart and forgets about the sale.\n\n\nWith headless checkout, the experience is much smoother:\n\nTom clicks the “Buy now” link in the Instagram post.\n\nA seamless checkout window pops up directly within Instagram.\n\nHis payment and shipping details are pre-filled from her saved preferences.\n\nShe completes the purchase in just a few taps, without ever leaving Instagram.\n\n\nWhat makes this all possible? APIs. The unsung heroes of headless checkout. They act like translators, allowing different parts of your system to communicate smoothly.\nFor example, when a customer clicks \"buy,\" an API call sends this information from the front-end to the back-end, where the transaction is processed. This seamless integration ensures that the user experience remains smooth and uninterrupted, even as you make changes or add new features.\nAPIs also enable integration with third-party services like payment gateways, inventory management systems, and customer relationship management (CRM) tools. This means you can pick and choose the best tools for your business without being locked into a single platform’s ecosystem.\nNow, if you’re putting together a pitch, a slide deck to convince your CFO that you need a budget for headless checkout, you’d love this section.\nWhen You Need Headless Checkout\nExtensive Customization and Personalization\nWith headless checkout, you’re not confined to the templates and limitations of a traditional platform. You can design your checkout process from scratch, incorporating unique features that set your store apart. This allows you to easily add new features to your checkout page like a one-click purchase button, a loyalty program, or build and integrate your own shipping insurance add-on to their checkout.\nThat said, you also need to be aware of the cost that comes with customization. In an episode of the 2X eCommerce Podcast, Simone Martinelli, Founder and CEO of Volume, shared:\n\nMany businesses underestimate the ongoing maintenance costs of a highly customized headless setup. It's not just about the initial implementation; it's about the long-term commitment to keeping everything running smoothly\"\n\n\nFor example, Lululemon customized their checkout page with Shipping and Gift Options.\nSnappy Experience\nA snappier experience means happier customers and higher conversion rates. You don’t want to lose a customer at the checkout step, it’s like getting people to your shop and slamming the door in their faces. Headless checkout can significantly improve load times as the front end can be optimized independently, reducing the amount of data that needs to be processed and delivered.\nThis is especially important when shoppers now have the habit of purchasing on mobile.\nDuring an interview on The E-commerce Toolbox: Expert Perspectives, Dan Wardle, VP of Sales at Noibu, emphasized the necessity of a performant, mobile-first approach.\n\nIf you're not designing your headless checkout for mobile first, you're already behind. Over 70% of our clients see more than half their conversions coming from mobile devices\n\nFlexibility and Scalability\nHeadless checkout offers the scalability to handle increased traffic and transactions without compromising performance.\nFor example, Best Buy uses headless commerce to handle high traffic during peak shopping seasons like Black Friday. The decoupled architecture allows them to scale their systems effortlessly, ensuring that their site remains fast and responsive even under heavy loads.\nOne noteworthy mention is that with headless checkout, you have the flexibility to run more A/B testing.\nThis flexibility enables businesses to experiment with different checkout designs and features, optimizing for the highest conversion rates without disrupting the overall system.\nMore Checkout Touchpoints\nWith headless checkout, customers aren’t limited to buying just from your e-commerce website. They buy your products or services wherever and whenever they’re ready. You can place a checkout button on several touchpoints with just a short block of code.\nThis omnichannel capability ensures a consistent and seamless shopping experience, no matter where your customers are. For example, Canadian minimalist luggage retailer Monos employs headless checkout to provide a consistent shopping experience across multiple channels. This allowed them to streamline their checkout across the different online stores.\nImplementation Considerations\nTechnical Requirements\nImplementing headless checkout isn't a plug-and-play solution. You’ll need a solid understanding of APIs, front-end frameworks like React or Vue.js, and back-end systems. Additionally, a robust content management system (CMS) that supports headless architecture, such as Strapi or Contentful, can be incredibly helpful. Ensure your team is well-versed in these technologies or consider hiring experts to guide the process.\nPrivacy and Compliance Requirements\nEveryone wants to sell globally, but this comes with a caveat. Different countries have different rules about data and privacy. Take GDPR (General Data Protection Regulation) here in Europe, for example. It’s one of the strictest regulations out there.\nWith headless checkout, you’re decoupling the front-end from the back-end, which means customer data could be scattered across multiple locations and applications. This isn’t just a technical challenge; it’s a regulatory minefield. You’ll need to scrutinize how customer data is transferred and stored at every step of the buying process. And it doesn’t stop there.\nIf you’re integrating with third-party applications and tools, you need to ensure these vendors can handle customer data compliantly. If they can’t, you might have to find specific vendors for global transactions that meet data privacy, security, and other compliance requirements. It’s like being a chef who not only has to cook the meal but also ensures every ingredient meets the highest safety standards.\nPerformance Overhead\nHeadless checkout relies heavily on APIs. API calls are the lifeblood of your checkout process, handling everything from inventory management to pricing calculations and payment processing.\nBut here’s the rub: the more features and options you offer in your checkout process, the more API calls you end up making. Each of these calls has to travel over a network, which can slow down your entire system. It’s like trying to have a conversation in a crowded room; the more people talking, the harder it is to hear. Too many API calls can bog down your checkout performance, turning a seamless experience into a sluggish ordeal.\nHeadless Checkout vs Checkout Extensibility\nOf course, with Shopify being as innovative as they have always been, you might not need to go headless to bring a customized checkout experience.\nCheckout Flexibility brings merchants the benefits of headless checkout, but in a way that’s app-based, easily upgraded, and optimized for high performance. One of its standout features is its seamless integration with Shop Pay. Shop Pay is an accelerated checkout option that offers customers a faster way to buy your products and services. Imagine your customers breezing through checkout with just a few clicks, thanks to Shop Pay’s streamlined process.\nCheckout Extensibility also offers no-code customization options, perfect for those who want to tweak their checkout process without diving into the complexities of coding. Using apps and branding tools, you can easily make adjustments to fit your brand’s aesthetic and functional needs.\nFor those with technical resources, Shopify’s collection of components and APIs offers the ability to build bespoke checkout experiences. You can create a tailored checkout flow that meets your specific requirements, providing a unique and engaging experience for your customers.\n\nFor example, Snow, the leading dental care brand, customized their check-out page with social proof.\nCheckout Extensibility also comes with this nifty “Buy Now” feature to add purchasing options to multiple channels outside of your eCommerce website. With a quick snippet of embed code, you can drop a “Buy Now” button into a blog post, email, or social media post. This gives your customers a faster, simpler way to purchase, no matter where they are. It’s like setting up mini checkout counters all over the internet, making it incredibly convenient for your customers to buy from you.\nThat’s said, there are some essential differences between headless checkout and checkout extensibility.\n\n\n\n\nFeatureHeadless CheckoutCheckout Extensibility\n\n\n\nArchitectureDecouples the front-end from the back-end, allowing for complete customization of the user interface and experience.Provides a suite of tools and APIs to customize the checkout process within the Shopify ecosystem, maintaining a connection to the back-end.\n\nCustomizationAllows for extensive customization of the checkout experience, including the ability to integrate with various front-end technologies like React or Vue.js.Offers no-code and low-code customization options through apps and APIs, enabling merchants to modify the checkout process without deep technical expertise.\n\nFlexibilityHighly flexible, enabling businesses to create unique, tailored checkout experiences across multiple touchpoints such as social media, QR codes, and more.Focused on enhancing the Shopify checkout process, allowing for custom logic, branding, and additional functionalities through a sandboxed environment.\n\nIntegrationUses APIs to connect the front-end with the back-end, allowing seamless integration with third-party services like payment gateways, tax engines, and inventory systems.Integrates seamlessly with Shop Pay and other Shopify services, ensuring a consistent and secure checkout experience.\n\nPerformanceCan potentially introduce performance overhead due to the need to manage multiple systems and ensure effective communication between them.Designed to be performant and secure, with customizations running in a sandbox to prevent performance degradation.\n\nMaintenanceRequires ongoing maintenance and updates to ensure all components work together smoothly, which can be resource-intensive.Easier to maintain as it leverages Shopify’s infrastructure, with updates and optimizations handled by Shopify.\n\nComplianceBusinesses must ensure compliance with privacy laws like GDPR and CCPA independently, which can be complex.Shopify handles much of the compliance burden, making it easier for merchants to adhere to privacy and security regulations.\n\nUse CasesIdeal for businesses that need full control over the checkout experience and want to integrate with various digital touchpoints.Best suited for businesses looking to enhance their Shopify checkout process with additional features and customizations without extensive development.\n\n\nExamples of Headless Checkout/Checkout Extensibility\n1. Monos\nMonos, a Canadian minimalist luggage retailer, moved to a headless approach using Shopify Checkout Extensibility. This allowed them to streamline their checkout across different online stores and offer new features like one-page checkout, discount combinations, and pre-orders.\nRead more about this case study here.\n2. Hismile\nHismile is an Australian-based brand, notable for teeth whitening and oral hygiene products that bring fun, flavor, color, and excitement to an otherwise uninspired oral care industry.\nWith Checkout extensibility, Hismile's checkout now processes a thousand orders in minutes, stress-free, easily handling peak traffic with the speed and reliability that customers expect.\nRead more about how Hismile uses Checkout Extensibility here.\n3. Lululemon\nLululemon takes advantage of headless checkout to create a unique and streamlined checkout process. They can easily integrate features like one-click purchases and loyalty program rewards, providing a seamless and engaging shopping experience for their customers.\nThis customization has helped Lululemon build a loyal customer base and drive repeat purchases.\n4. SaturdayClub\nHeadquartered in Singapore, SaturdayClub is a fashion retailer that perfectly balances style and ease, offering chic designs to modern muses. Their curated mix of versatile staples, wardrobe essentials, and statement pieces are both current and timeless.\nSaturdayClub used the Shopify Plus Checkout Extensibility feature to seamlessly add new third-party payment gateway solutions, giving customers in different international markets more choices when buying from the brand. This added flexibility has been particularly important in markets like Malaysia, where sales have surged.\nMore details about SaturdayClub’s checkout extensibility use case here.\n5. RUDIS\nRUDIS is a top sports brand dedicated to empowering wrestlers with high-quality gear and apparel. Known for their commitment to performance, innovation, and the wrestling community, RUDIS delivers top-tier products that boost athletic excellence and inspire confidence on and off the mat.\nThanks to Shopify’s checkout extensibility, RUDIS optimized their buy stack with engaging content and simplified the purchase workflow, contributing to an impressive 80% revenue growth.\n6. En Gold\nEn Gold is a distinguished Australian brand that specializes in thoughtfully designed, timeless furniture and home decor.\nWith Checkout Extensibility, En Gold effectively handled the problem of underestimating shipping costs for large orders, ensuring customers are charged accurately. They also improved customer service by customizing the checkout process and collecting more customer information.\nBy creating a blended storefront, En Gold expanded its B2B operations while easily managing both DTC and B2B sales. They were able to introduce tiered discounts, offering bigger savings to larger B2B buyers, which they expect will boost their total B2B sales\n",{"_78":79},{"_82":196},"https://cdn.hashnode.com/res/hashnode/image/stock/unsplash/1wKvDk3P5PQ/upload/3a365b6c9c4d65cc69a803e1040484a5.jpeg",{"_60":198},{"_62":199,"_64":200,"_66":201,"_68":202,"_70":117,"_72":203,"_76":205,"_80":206,"_84":-5},"66a5c17ee194f46a2164d682","2024-07-28T03:56:46.986Z","How Brand42 Launches Timothy London’ Storytelling-Infused Storefront with Weaverse & Hydrogen","brand42-timothy-london-case-study",{"_74":204},"It is a truth universally acknowledged that a brand in possession of a great vision must be in need of a stellar digital experience.\nSuch was the case with Timothy London, a premium British travel goods brand, and their vision to immerse their customers into their world with beautiful storytelling and aesthetic finesse. It was an ambitious vision, by all means. This was where Brand42, a prominent London-based design and digital agency, came into play.\n\nAbout Brand 42\nBrand42 is a prominent London-based design and digital agency, well-known for delivering strategic branding solutions to premium brands like BBC, Johnnie Walker, Rakuten, and Top Gear. At the heart of their success is the innovative One-Team Approach.\nWith the One-Team Approach, Brand42 seamlessly integrates its creative and development teams from the outset, fostering a collaborative environment where developers contribute to functional decision-making early in the process. This ethos of collaboration enables Brand42 to deliver tailored, innovative solutions that transform their clients’ visions into immersive realities, driving impactful results.\n\nBrand42’s commitment to customization is further exemplified by its technology-agnostic approach. They don't limit themselves to specific stacks like WordPress or Shopify. Instead, they choose the best tools for the job. For the Timothy London project, Brand42 knew that the complex requirements and unique brand personality required a headless approach.\nThe Challenges: Steep learning curve and Herculean development effort\nTimothy London is building a one-of-a-kind brand for travelers. They combine superior design and engineering excellence to bring out a product that can truly be THE travel companion of a lifetime - offering comfort, ease of use, utility, and just a bit of flair, wherever the travelers go. With its new website, the brand wanted to find a way to translate these unique physical qualities into the digital space.\nIt’s a challenging goal for Brand42. How do you tell such a unique story in the digital space while keeping the shopping experience fast and functional, optimized for both desktop and mobile, supporting videos and 3D images, and enabling discovery through movement?\nThe answer is headless, and to be more precise,Shopify Hydrogen.\nYet, going headless is not the silver bullet. Despite how feature-rich and powerful Hydrogen is, it wasn’t all smooth sailing for the Brand42 team. They found quite a learning curve with Hydrogen and Remix as this is their first project using this framework. Additionally, the nascent state of Hydrogen meant a limited availability of 3rd-party apps and plugins. This meant they had to develop a lot of features from scratch.\nSecondly, Brand42 development team also found Shopify Hydrogen to be particularly quite limited in the setup of page layouts, hindering their efforts to achieve a more flexible, fluid design layout that they’ve planned, for example, Hydrogen lacked the drag-and-drop module functionality that they are accustomed to in other Content Management Systems. In an ideal world, they should have the best of both worlds - the performance and extensibility of Hydrogen, and the user-friendliness that comes with a drag-n-drop editing experience.\nTurned out the ideal world is just one app away.\n\nWithout Weaverse, we feel like Hydrogen was in beta.\n— Harry F. Senior Designer at Brand42\n\nThey discovered Weaverse while researching alternatives that offered more flexibility than Shopify’s rigid structure. Weaverses allows development teams to build Hydrogen stores much faster by providing SDKs and pre-made templates, while also supporting a drag-and-drop framework, allowing Brand42’s clients considerable control over their content without the usual constraints.\n\nThe Solution: Weaverse, the first theme customizer for Hydrogen\nBrand42 chose Weaverses as it’s the only solution on the market that could offer what they needed to meet project requirements:\n\nA more CMS-like content editing experience within Shopify Hydrogen, which made it easier for everyone to manage and edit content.\n\nSDKs and templates to facilitate easy development of components and seamless integration with Shopify's backend.\n\nFlexible route structure that allows for custom nested pages, aligning perfectly with child pages in the site structure.\n\nCustom markets and localization features, including an automatic copy-to-locale functionality developed at the development team's request.\n\n\nThese unique advantages made Weaverse the ideal solution for the Timothy website project. But that’s not all. What stood out to Brand42 was Weaverse's integrated support - echoing their own One Team Approach ethos.\n\nWhen I found you guys, you only had one review. Five stars, but it’s just one review and for me, it was a bit suspicious.\nBut when I started and got all this kind of support to make all these pages really manageable, to build something new and custom, it made me feel confident that it’s possible to deliver this project.\n— Jev S., Senior Web Developer\n\nWeaverse team provided a dedicated Slack channel, offering quick problem-solving, continuous support, and 24/7 assistance. This close collaboration helped Brand42 quickly fix bugs, implement custom features on time, and stress-test new functionalities, allowing them to achieve the client’s requirements and meet deadlines.\n\nOur experience working with Weaverse has been excellent!\nWhat stood out to me very often when you're working with software as a service providers is that it can feel a bit like a faceless organization. There's no point of contact that you can get hold of. It was quite the opposite with you guys. You were quite happy to have face to face interactions, put a name to a support issue and were reactive in terms of requests.\nThere are other CMS we've used, and if you find a bug and it gets logged in the pipeline for 12 months before they'll even look at it. But it’s completely different with Weaverse. I think even the communication chain went from Jamie or I saying to Jev, can we achieve this? And then Jev saying, I'll speak to Paul. And then within 10 minutes or so we have a response, which was just unheard of in terms of our support response that we've been used to.\n— Jamie H. Project Director at Brand42\n\nThe Result: Elevated brand experience went live in time for the international product launch\nWith Weaverse, building a Hydrogen storefront was faster and easier.\nBrand42 team was able to streamline their workflow using Weaverse components. Additionally, they could easily improve the quality of their page layouts to match designs, thanks to Weaverse’s intuitive drag-and-drop functionality. This resulted in the successful launch of Timothy London’s storefront. The new website is fast, interactive, and pixel-perfect. The shopping experience feels immersive and smooth, allowing users to explore and discover the products effortlessly.\n\nWe've experienced major improvements in efficiency and productivity with Weaverse. The Pilot theme provided an excellent foundation for developing our Hydrogen theme, which saved us valuable time and effort!\n[..]\nWe're very satisfied with our experience with Weaverse and certainly recommend their services. We look forward to continuing our collaboration to further enhance Timothy's website and for future projects.\n— Jev S., Senior Web Developer\n\n\nFor development agencies like Brand42, diplomacy is of utmost importance.\nClients might change their minds, ask for last-minute iterations, or see a different option. The success of a development agency depends on how flexible it can adapt to these requests and feedback.\nAs an award-winning design agency, Brand42 team wants to manage clients’ expectations with tact and diplomacy. For that, they need a design tool that’s flexible enough, and Weaverse fits nicely into this vision. Weaverse allows the design team to quickly iterate the website in response to clients’s feedback, making it easier for the strategy team to live up to client expectations and build a long-term relationship.\n\nAs an agency, we like to be quite flexible.\nSometimes when a client changes their mind, or wants to see a different option, or wants to iterate, we won’t say no. We're not the sort of agency that says no, or brings out a timesheet to review and say why we're not going to do that.\nSo having the tools that allowed us to react to some of that feedback through the course of the project was really useful, especially when it doesn't limit the design team in terms of how they can respond to that feedback. From a client management perspective, it allows us to kind of live up to what our clients expect from us.\n— Jamie H. Project Director at Brand42\n\n",{"_78":79},{"_82":207},"https://cdn.hashnode.com/res/hashnode/image/stock/unsplash/45Z6hW1dQMI/upload/fca5686aa2a27c213c84dd81dbc78f26.jpeg",{"_60":209},{"_62":210,"_64":211,"_66":212,"_68":213,"_70":178,"_72":214,"_76":216,"_80":217,"_84":-5},"6672f12f1cfdbe1d781ef1e2","2024-06-19T14:54:39.954Z","How Hydrogen Inherits Shopify's Power Of Platform","shopify-hydrogen-power-of-platform",{"_74":215},"Hello hello friends of Weaverse, how are you doing?\nI can’t believe it’s been 02 months since our last newsletter. Between building new Hydrogen themes, releasing new features, and talking to customers (did I mention I love talking to our users?) - I barely had time to write.\nThis month’s update is all about new feature releases, interesting stories and (hopefully) insightful take on the Shopify ecosystem.\n✍🏻 The Best Writing About Headless, WebDev, and Everything In Between\n\nTobi Lütke: The Trust Battery, from The Knowlege Project Podcast\n\nSo you think you can build a dropdown? from Pedro Duarte, NextJS Conference 2021\n\nDon’t live with broken windows: On good code/bad code, from Frontend at Scale\n\nAn Interactive Guide to CSS Container Queries, from Ahmad Shadeed\n\n\n🌍 Global Sections\nGlobal Section is now available in Weaverse.\nYou can now easily create reusable content and use it across your Hydrogen storefront. When an edit is needed, just update your Global section once and it will propagate the changes everywhere on the site!\n\n🎨 Hydrogen Themes for Health and Beauty\nA little while back, we launched our Pilot Theme, a Hydrogen theme that's designed as a starting point for your own Shopify Hydrogen storefront. I believe one of the biggest hurdles for Hydrogen's wider adoption is the lack of theme starters. Additionally, if we want Liquid developers to get on board with Hydrogen, we need to make the switch as smooth as possible.\nSo I built Pilot. And we didn’t stop there. We’ve just launched another new Hydrogen theme, tailored for Health and Beauty brands. It’s called Naturelle. Check out the demo here.\n\nNaturelle is designed for Health & Beauty brands\nAnd we're not stopping here either. ;)\nMore Hydrogen themes are coming, designed to bring the same UI excellence, flexibility, performance, and accessibility you love from the Dawn theme. The only difference is that now you can use it with Hydrogen storefronts.\n\n🌊 How Hydrogen Inherits Shopify Power of Platform\nLet’s travel back to the past. The year is 2006.\nIn 2006, Amazon had over 13,000 employees. It was growing fast. It expanded its product range - adding electronics and general merchandise. It introduced new services like Amazon Prime, which offered expedited shipping for a small annual fee. The company reported net sales of $10.71 billion, a 26% increase from $8.49 billion in 2005. Operating income for the year was $389 million, and its net income was $190 million. In 2006, Amazon was already a dominant force in eCommerce.\nMeanwhile, Shopify was still unknown to most. It had only been founded in the previous years and had not yet made a significant impact on the industry.\nIt was a risky move, entering the same market as Amazon. Unlike Amazon, which operated as a massive online marketplace, Shopify provided a platform for small businesses to create their own online stores and sell directly to consumers. This approach requires a leap of faith because when you build tools for small businesses to go online, you must have faith that some of these businesses will survive and be able to pay you. You had to have even more faith when the statistics showed that 90% of businesses went under in their first 02 years.\nYet, this is the faith that Tobi Lutke, Daniel Weinand, and Scott Lake had when they founded Shopify. It’s precisely the power of Shopify.\nAggregator vs Platform. Amazon vs Shopify.\nIn his 2019 blog post on Amazon and Shopify, Ben Thompson at The Stratechery defines Amazon as an aggregator, whereas Shopify is a platform.\nAggregators are companies that control distributions. They’re the heavyweights of their industries, competing predictably and systematically. They compete systematically and predictably. They have at least one of seven Competitive Powers - scale economies, network economies, cornered resources, switching costs, branding, and process powers.\nThey’re the likes of Google, Airbnb, Netflix, Uber and Amazon. And they all share 03 key characteristics:\n\nThey have a direct relationship with users, whether through payments, accounts, or regular usage.\n\nThey incur zero marginal costs for serving users—digital goods often mean no production, distribution, or transaction costs.\n\nThey operate demand-driven multi-sided networks with decreasing acquisition costs. For example, as users flock to Amazon for superior discovery and curation, merchants join to meet demand, creating a virtuous cycle that lowers customer acquisition costs over time. Consequently, Amazon enjoys winner-take-all effects, continually increasing their value to users - lower shipping cost, faster shipping time - and making it difficult for competitors to lure them away.\n\n\nIn short, Aggregators are nightmares to compete against. But Shopify managed to pull it off.\nIf you think Shopify doesn’t compete against Amazon, then you might be mistaken.\n\nShopify positioned itself at the opposite trench of Bezos’ arm of techno-capitalists.\nAmazon, thriving off a COVID-19 boom, prioritizes the customer above all, even if it means alienating small businesses by copying their products or inviting new competition to lower prices and speed up shipping. Shopify, however, is all about the merchants, showing in their famous tagline “Commerce for everyone” and “making entrepreneurship cool”. If Amazon’s obsession with customer service and endless selection makes it the “everything store,” Shopify wants to be the everywhere store.\n\n“Amazon is trying to build an empire, and Shopify is trying to arm the rebels”\n\nAmazon allegedly saw the threat, and had its own Shopify in 2015, called Webstore. 80.000 companies used Webstore to power their online presence. Bezos could crush Shopify if he wanted to, given the financial and engineering power it had. Yet, the problem is that the premise of Webstore contradicted Amazon’s oft-cold, ruthless attitude towards merchants - which resulted in poorly designed products that eventually pushed its users (merchants) away.\nIn their column on Shopify vs. Amazon, Bloomberg reported:\n\n\"Amazon execs from that time admit that the Webstore service wasn’t very good, and its sales were dwarfed by all the rich opportunities the company was seeing in its global marketplace, where customers shop on Amazon, not on merchant websites.\nAt the time, the company was also developing house brands such as Amazon Basics, and Webstore sellers had to get comfortable with the possibility that the tech giant might see their success and knock off their best products. It was a “fox-in-the-henhouse problem. Merchants were sleeping with one eye open,” says a former Amazon executive who worked on Webstore, who spoke on condition of anonymity because he wasn’t authorized to speak publicly about the issue.\"\n\nThe Power of Platform\nUnlike Amazon, there’s nothing to buy on Shopify.com. Instead, millions of third-party merchants use Shopify to power their online stores. These merchants handle customer acquisition, product differentiation, and sales through their unique strategies.\nThe magic of Shopify is in its diversity and the collective success of its merchants. A high churn rate among merchants means low entry barriers, driving innovation and increasing the chances of capturing successful businesses. Shopify benefits from its merchants’ success without risking individual failures. A high churn rate can be both a positive and negative signal: the easier it is to start an e-commerce business on Shopify, the more failures there will be, but also a higher likelihood of capturing successes.\nIn a sense, Shopify is like an incubator.\n\nShopify even made its own short film celebrating Shopify entrepreneurs\nShopify’s model leverages the best of modularity—diversity and competition across the value chain—aligning everyone’s incentives. Every referral partner, developer, theme designer, and now 3PL provider competes narrowly while ensuring Shopify’s broad success because a bigger pie means bigger slices for everyone. This is how Shopify can be Amazon’s biggest competitor in the long run, while being a company Amazon can’t compete with. Amazon seeks customers and brings suppliers and merchants onto its platform on its terms. Shopify, meanwhile, empowers merchants to differentiate themselves, bearing no risk if they fail. “Amazon is trying to build an empire, Shopify is trying to arm the rebels.” Lütke remarked on this competition a few years ago.\nThat said, it’s tough to claim rebel status with a Death Star-sized market cap. To keep the rebel spirit alive, Lütke needs to make Shopify invaluable to the larger retailers and DTC brands while supporting smaller ones struggling with supply chain issues and inflation.\nThis is where Hydrogen comes in.\nHow Hydrogen Inherits The Power Of Platform\nShopify's Hydrogen aims to bring headless commerce to everyone. That’s the vision, anyway. Making it a reality will take some time.\nIn truth, 80% of merchants don’t need headless Shopify stores. A native Shopify setup, powered with third-party apps, is more than enough for merchants to make their beer taste better. Headless commerce is better suited for enterprise merchants with the resources and engineering skills to implement it properly. These are the merchants who care deeply about UI excellence and storytelling, have specific data integration or performance needs, or are committed to creating omnichannel or personalized shopping experiences.\nHydrogen provides a set of standards for eCommerce that reduce the risk of making bad decisions, because great flexibility often comes with great responsibility, especially with Webdev at enterprise scale. You can still be flexible, but Hydrogen reduces the overhead of making those technical decisions upfront significantly, making it easier for larger merchants to quickly launch their online stores without sacrificing flexibility or customization.\nWith Hydrogen, Shopify can finally be a platform for all - from small merchants to enterprise businesses.\n\nBranding is important for enterprises. With Hydrogen, they can build an elevated brand experience, differentiating themselves with unique UI designs and personalized customer journeys, something that a traditional setup might not easily allow, while still being able to get the full benefits from Shopify's backend.\n\nThe time to launch can be a lot faster. Just like Shopify makes it easy for small businesses to start with minimal risk, Hydrogen provides a set of standards that streamline decision-making when it comes to complex webdev setups. It cuts down the overhead of building custom solutions from scratch, offering flexible yet structured tools that can adapt to various needs.\n\nOne of Shopify’s biggest strengths as a platform is its vast ecosystem of third-party apps and services. Hydrogen inherits this power of the platform, allowing seamless integration with 3rd party tools. Whether it’s advanced analytics, marketing automation, or custom checkout experiences, Hydrogen ensures that merchants can leverage the best tools they want to use - Shopify or not, without sacrificing flexibility or performance.\n\n\n\nI’d like to end this article with my usual disclaimer: I’m an advocate of Hydrogen, so my argument can be flawed. If so, comment down below, I’m excited to learn other perspectives!\nThat’s all for this week.\nUntil I see you again, take care.\n",{"_78":79},{"_82":218},"https://cdn.hashnode.com/res/hashnode/image/stock/unsplash/WEME5LOrLpE/upload/8db5d9e7a7c8fe92351b2b32a46a48ea.jpeg",{"_60":220},{"_62":221,"_64":222,"_66":223,"_68":224,"_70":91,"_72":225,"_76":227,"_80":228,"_84":230},"66642387d0db2edf905d4376","2024-06-08T09:25:27.069Z","So You Want To Get A CMS for Your Shopify Headless Storefront?","shopify-headless-cms",{"_74":226},"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.\nWhen looking for a Shopify Headless CMS, it’s important to be clear about how you’d go headless with Shopify. There are 02 ways:\n\nUsing Shopify’s APIs: These let your custom front end communicate smoothly with Shopify’s robust back end.\n\nFrameworks like Hydrogen: Shopify’s own framework for building web storefronts that are fast, dynamic, and tailored to your brand.\n\n\nThere are 02 ways to go headless with Shopify, let’s take a closer look at both of them.\nGoing Headless With Shopify: Using Storefront API\nThe 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.\nTake 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.\n\nThis 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.\nGoing Headless With Shopify: Using Storefront API\nFor 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.\n\nHydrogen 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.\n\nOxygen, 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.\n\n\nTogether, 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.\n\nHowever, due to the nascent state of Hydrogen, the number of integrated CMS might be more limited. We'll talk more about that later.\nFirst, how do you choose the right Shopify Headless CMS?\nII. How To Choose The Right Headless CMS\nChoosing 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.\n\nIntegration 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.\n\nTechnical 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.\n\nHigher 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.\n\nIntegration 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.\n\nScalability: 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.\n\nSecurity 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.\n\nDeveloper 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.\n\nContent 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.\n\nSEO 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.\n\nCustomizability 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.\n\nMultilingual 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.\n\nAPI 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.\n\nE-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.\n\n\nChoosing 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.\n10 Headless CMS for Shopify\nWhen 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:\n1. Weaverse\nWeaverse is the right CMS for you - if you go headless with Shopify Hydrogen.\nAs 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.\n\nUsing 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.\n\nPros:\n\nNative integration with Hydrogen.\n\nIntuitive editing experience, making it easier for everyone to manage and edit content.\n\nSDKs and templates to facilitate easy development of reusable components.\n\nFlexible route structure that allows for custom nested pages.\n\nCustom markets and localization features.\n\n\n\nCons: Relatively new so more mature functionalities are still in development.\n\n\n2. Contentful\nContentful 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.\n\nPros: Highly customizable, strong integration capabilities, extensive API support.\n\nCons: Can be complex to set up, has relatively higher costs, and may require experienced developers.\n\n\n\n2. Prismic\nPrismic offers a more streamlined, user-friendly interface that's great for teams looking for a simpler, more straightforward CMS experience without sacrificing functionality.\n\n\nPros: User-friendly interface, custom type builder for structured content, built-in preview capabilities.\n\nCons: Limited built-in e-commerce-specific features, less control over complex integrations compared to some rivals.\n\n\n3. ButterCMS\nButterCMS 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.\n\nPros: Easy to use for marketers and developers alike, SEO features built-in, fast content delivery.\n\nCons: Less flexibility for deeply custom applications, may not scale as well as more robust platforms.\n\n\n\n4. Sanity\nSanity 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.\n\n\nPros: Highly customizable, real-time collaboration, portable text editor.\n\nCons: Steeper learning curve, pricing can escalate as usage increases.\n\n\n5. Strapi\nOpen-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.\n\n\nPros: Full control over customization, strong community support, cost-effective.\n\nCons: Requires more technical expertise, self-hosting means handling your own updates and security.\n\n\n6. Storyblok\n\nStoryblok 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.\n\nPros: Visual editing interface, robust plugin system, strong multi-language support for global businesses.\n\nCons: Custom layouts can require more development time, and its unique block structure may have a learning curve for new users.\n\n\n7. Ghost\nGhost is a sleek, minimalist CMS focused on blogging and publishing but has been adapted for various uses, including e-commerce through integrations like Shopify.\n\nPros: Simple and intuitive user interface, SEO optimized out of the box, fast content delivery.\n\nCons: Primarily focused on blogging, less native e-commerce functionality, limited extensibility for complex store setups.\n\n\n8. GraphCMS\nGraphCMS offers a strong GraphQL-based headless CMS that allows developers to build and deploy content-rich applications faster.\nhttps://youtu.be/s-47dgkrQns\n \n\nPros: Utilizes GraphQL for efficient data fetching, scalable content infrastructure, good for dynamic content applications.\n\nCons: GraphQL knowledge required, may be complex for teams new to headless CMS.\n\n\n9. PayloadCMS\nPayloadCMS 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.\n\n\nPros: 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.\n\nCons: 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.\n\n\nChallenges and Pitfalls When Using Headless CMS for Your Shopify Stacks\nSwitching 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:\nTechnical Barriers\nOne 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.\nAdditionally, 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.\nSyncing 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).\nCost Considerations\nThe 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.\nWhile 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.\nIntegration Challenges with Shopify Apps\nShopify 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.\nPopular 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.\n\nEnding Note\nAs 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.\n",{"_78":79},{"_82":229},"https://cdn.hashnode.com/res/hashnode/image/stock/unsplash/j-0olYcaihg/upload/2df295a2c084f977fde64dd69bd21ee6.jpeg",{"_68":98,"_78":99},{"_60":232},{"_62":233,"_64":234,"_66":235,"_68":236,"_70":117,"_72":237,"_76":239,"_80":240,"_84":-5},"6642d66f1d6fb5c19f24dd40","2024-05-14T03:11:43.643Z","So You Want To Become A Shopify Hydrogen Developer?","how-to-become-shopify-hydrogen-developer",{"_74":238},"So you want to become a Shopify Hydrogen developer?\nAre you sure?\nAre you really, really sure?\nIf you say yes, then welcome aboard. Your journey starts here. :)\nAbout Shopify Hydrogen\nShopify launched Hydrogen in late 2021 as part of its strategic shift towards composable, headless commerce. The goal is straightforward: casting bigger nets to catch bigger fishes - B2B merchants, Shopify Plus, enterprises whose needs and requirements often go beyond the capabilities of Shopify.\nHydrogen is a React framework, designed specifically for building custom storefronts on Shopify. It’s an indirect answer to the nagging question: How can merchants use Shopify’s Storefront API to create custom storefronts without losing the benefits of a Liquid-based storefront?\nHydrogen contains a framework and a library of components, hooks, and utilities:\n\nHydrogen framework: Hydrogen provides a Vite plugin that offers server-side rendering (SSR), hydration middleware, and client component code transformations.\n\nHydrogen components, hooks, and utilities: Hydrogen includes components, hooks, and utilities that support features and concepts that exist in Shopify. They're accessible, performant, and ready for use. They also help to reduce the initial complexity and boilerplate needed for building a custom storefront.\n\n\nIn 2022, Shopify acquired Remix, taking Hydrogen to a whole new level.\n\n\nSpeed Boost: Remix is known for its expert handling of data loading. This means Shopify Hydrogen can run a lot faster. This is important for eCommerce businesses where speed can make or break.\n\nEnhanced Routing and Error Handling: Remix's robust routing capabilities and sophisticated error handling are integrated into Hydrogen. This allows developers to create a smoother, more reliable, more immersive shopping experience.\n\nEdge Computing: Remix allows developers to run on the edge, inside service workers, letting apps run closer to users, speeding things up big time.\n\nEasier for Developers: Remix makes building websites simpler, so developers can spend more time on making unique features rather than wrestling with code.\n\nStrong Community Support: With Shopify's backing, Remix will get more resources, meaning more features and improvements. This is great news for everyone using Hydrogen.\n\n\nWait, you wonder, “Does this mean I need to learn React?”\nYes, that’s the short answer. To be a Shopify developer, learn React.\nThat's it. But if you're interested in where to learn, what to learn, to become a Shopify Hydrogen developer. Read don't.\nUnderstand The Difference Between Hydrogen and Liquid\nNow I’m assuming that you already know Liquid - the standard templating language of Shopify. If not, then I advise you to learn Liquid first.\nIt’s easy to learn and gives you the fundamentals to build and develop a functional Shopify store. With Liquid, you can handle 80% (my estimation) of regular use cases with Shopify.\nThe primary difference between Hydrogen and Liquid lies in their approach and technology.\n\nLiquid is a server-side templating language used for Shopify's traditional themes. It integrates directly into Shopify's servers, rendering HTML that's sent to the user's browser. It’s great for standard storefronts where you only need basic features - but its extensibility, flexibility, and customizability might fall short when you need to design a more tailored customer experience.\n\nHydrogen, as afore-introduced, is a React-based framework for headless storefronts. It follows the concept of headless commerce: the front end and back end don’t have to be stuck together, which means you can play around a lot more with the site’s look and feel without messing with the core commerce functions. Hydrogen is all about giving developers the freedom to use modern JavaScript and React tech to build exactly what they need. Whether it’s fetching data right where you need it or managing state more efficiently, Hydrogen lets developers customize deeply, without the rigidity of traditional templating.\n\n\nAnd of course, Hydrogen is much harder to learn.\nHow To Become A Shopify Developer\n1. Get Comfortable with React\nFirst things first, Hydrogen is built on React and Remix, so you need a solid grip on them. If you're unfamiliar with React, that’s where you should start. Understand the basics like components, props, state management, and hooks. These are crucial because Hydrogen leverages these concepts heavily.\nHere are some resources for you to start:\n\nWhich JS Framework is best?\n\nOfficial React Getting Started Tutorial\n\nThe Beginners Guide to React\n\n\nYou also need to be knowledgeable in advanced web development concepts (both Frontend and Backends), including\n\nVersion Control Systems: Version control systems allow you to track changes to your codebase/files over time. Visit the following resources to learn more: Git and Github full course\n\nAdvanced CSS: A CSS framework provides the user with a fully functional CSS stylesheet, allowing them to create a web page by simply coding the HTML with appropriate classes, structure, and IDs\n\nCSS Preprocessors Explained\n\nSass, BEM, & Responsive Design\n\nWhat are the benefits of using a CSS framework\n\nTailwind CSS Crash Course\n\n\n\nNode.js: Node.js is an open-source and cross-platform JavaScript runtime environment. It is a popular tool for almost any kind of project! Visit the following resources to learn more:\n\nHow Node.js Works?\n\nNPM Crash Course\n\nNode.js Full Course for Beginners\n\nHow to build a REST API with Node js & Express\n\n\n\nDatabase: A database is an organized collection of structured information, or data, typically stored electronically in a computer system. A database is usually controlled by a database management system (DBMS). Visit the following resources to learn more:\n\nGetting Started with MongoDB & Mongoose\n\nLearn Prisma In 60 Minutes\n\n\n\nTypescript: TypeScript is a statically typed programming language that is a superset of JavaScript. It was developed and maintained by Microsoft. TypeScript was created to address the challenges of building large-scale JavaScript applications and add optional type annotations, classes, interfaces, and other features to the language. Learn more from the following links:\n\nOverview of TypeScript\n\nTypeScript Crash Course\n\n\n\n\n\n2. Understand Shopify Headless Commerce\nGet to know how APIs work, especially Shopify’s Storefront API, which you’ll use to fetch product info, manage carts, and handle checkouts.\nIn 2024, Shopify launched not just one, but 04 dedicated courses on Shopify Headless. To take this course, you should have a working knowledge of React, JavaScript, CSS, HTML, Node.js, consuming APIs using GraphQL, frontend and backend logic, clean and reusable coding (modular), frontend experience, web-based user interface knowledge, API architecture knowledge, GitHub and GitHub Actions experience.\nCheck out the course here\n\n💡\nRead more: The best Shopify Headless storefronts (and what makes them great)\n\n\n\n3. Learn Hydrogen Core Concepts\nOnce you’re comfortable with React and the idea of headless commerce, start exploring Hydrogen-specific features. Hydrogen uses React Server Components, which allow for rendering on the server side, helping your sites load faster and run smoother.\nYou’ll also want to understand concepts like state management in a distributed system, handling server-side logic, and optimizing performance with edge computing.\nCheck out Hydrogen docs here: Shopify Hydrogen | Getting Started\nOr you can take Shopify's course on building a custom storefront with Hydrogen, where you'll learn:\n\nGraphiQL best practices\n\nHow to use product pages, collection pages, and cart pages with Hydrogen\n\nEverything in between\n\n\n\n4. Build Something\nThe best way to learn? Build something. Start with something simple like a custom product gallery or an interactive cart. Shopify provides a starter template that’s perfect for getting your feet wet. Tinker with it, break it, fix it—get hands-on.\nCheck out these Shopify Hydrogen demos to learn more about how other developers built their Hydrogen storefronts.\n5. Stay Updated and Join the Community\nShopify is constantly updating Hydrogen, adding new features, and improving performance. Keep an eye on their dev blogs, attend webinars, and participate in community forums or GitHub discussions.\nThe more you engage, the quicker you’ll learn and the better developer you’ll become. :)\n\n💡\nIf you want to catch the latest news on Headless and Hydrogen, check out this guy. :)\n\n\n6. Learn from Others\nCheck out projects other developers have built with Hydrogen. Many share their code on GitHub or write about their experiences in blogs. Learning from real-world applications can give you insights into the platform's best practices and creative uses.\nYou can join Shopify Dev Discords, #building-custom-storefronts channel to ask questions, learn from others, and generally just have fun with Hydrogen :)\n\nWell, that’s all. The final step you can do is just to build it. Make mistakes and learn from them. Godspeed!\n",{"_78":79},{"_82":241},"https://cdn.hashnode.com/res/hashnode/image/stock/unsplash/5Mj4PO7KIFc/upload/ad7e94bf2786062da9e397cc98247abd.jpeg",{"_60":243},{"_62":244,"_64":245,"_66":246,"_68":247,"_70":191,"_72":248,"_76":250,"_80":251,"_84":253},"663b993d824bf8a92d190a5b","2024-05-08T15:24:45.155Z","The Best Shopify Hydrogen Demo To Learn From","best-shopify-hydrogen-demo",{"_74":249},"About Shopify Hydrogen\nHydrogen is Shopify’s React framework for building custom storefronts, and it’s designed to help enterprises/Plus merchants extend their standard Shopify setup.\nBefore Hydrogen, merchants had two choices: use Shopify's default framework, which wasn't flexible enough, or build from scratch with other frameworks that were often too rigid and heavy. Merchants, especially Plus and Enterprises, wanted to use Shopify's tech to build something unique but didn't want to lose the perks of the built-in Shopify features. Hydrogen was Shopify’s answer to help merchants keep those perks while breaking new ground with custom designs.\nWith Hydrogen, Shopify Engineering team chose to create something different. It's built on dynamic, cutting-edge tech like React Server Components, making it easier and faster for developers to create and iterate without the heavy lifting typically involved. From the get-go, Hydrogen is designed to tackle the common problems merchants face—like performance issues, scaling, and creating a seamless user experience—right out of the box. Here’s the lowdown on Hydrogen and its key tech choices:\n\nReact: At its core, Hydrogen uses React to keep your UI interactive and responsive. It’s all about delivering a smooth experience to your customers no matter how complex your storefront gets.\n\nVite: Hydrogen integrates Vite, which steps up as a faster, more modern alternative to older bundling tools. It's chosen for its quick rebuilds and fast hot module replacement, keeping your development speedy and efficient.\n\nTailwind CSS: For styling, Hydrogen brings Tailwind CSS into the mix. It allows for rapid UI development with its utility-first approach, making it a breeze to apply styles directly in your markup.\n\n\nSince launching the initial GitHub repo on April 1, 2021, the Hydrogen team rolled out over 1,200 pull requests and 3,000 commits. Hydrogen is now used in production at Allbirds, Atoms, Chubbies, and Shopify itself. The Hydrogen npm package is downloaded more than 70,000 times each month.\nIn the recent Shopify Winter 2024, Shopify announced that they'd be releasing over 20 new Hydrogen features, showing its commitment to providing a robust framework that handles the complexities of modern e-commerce so developers can focus on crafting unique user experiences without sweating the technical stuff.\nKey Features of Shopify Hydrogen\nShopify Hydrogen is packed with features designed to streamline the development of high-performing, custom storefronts. Here’s a look at some of the standout features that make Hydrogen a powerful choice for developers:\n\nReact Server Components: Hydrogen utilizes React Server Components for efficient data fetching and rendering. This means your server can send HTML directly to the browser without waiting for all the JavaScript to download and execute, speeding up the initial load time and enhancing the overall user experience.\n\nIntegrated Development Environment (IDE) Features: Hydrogen supports advanced IDE features like TypeScript, IntelliSense, and in-IDE linting. These tools help catch errors early, suggest code completions, and ensure code quality, which is a big plus during development.\n\nEdge Rendering: Hydrogen's architecture supports rendering at the edge, closer to the user's location. This reduces latency, improves load times, and ensures your application scales efficiently across global audiences.\n\nSEO Optimizations: Built with SEO in mind, Hydrogen includes features like automated sitemap generation, robots.txt, and server-side rendering, which help improve the visibility of your storefront on search engines. This is crucial for driving organic traffic to your store.\n\nFlexible Integration with Third-Party Apps: Whether you need analytics tools, customer support widgets, or any other third-party service, Hydrogen makes integration seamless. Its flexible architecture allows you to plug in various APIs and apps to enhance the functionality of your storefront without compromising on performance.\n\n\nThese are just some highlight features of Hydrogen, for more details, check out Hydrogen docs.\n20 Shopify Hydrogen Demo\n1. Shopify Official Demo on Stackblitz\n\n2. Pilot, by Weaverse\nPilot is the first Shopify Hydrogen theme, created exclusively for Shopify Hydrogen storefront. Imagine Dawn, but instead of Shopify Liquid, it’s for Shopify Hydrogen. Check out the demo store here: Pilot.weaverse.io\nWith Pilot Theme, developers can:\n\nClone and customize Pilot for your own or your client’s headless Hydrogen store.\n\nUse Pilot as a launching pad to build your own unique headless theme - with its own distinct identity and functionality.\n\nLeverage Pilot's components for their own theme, or a client's theme.\n\n\n\nThis Pilot theme( and demo store, by extension) is designed with the fundamental principles that make the Dawn theme so exceptional in the first place: Performance - every aspect of Pilot was constructed with performance in mind, Accessibility - Pilot is designed for everyone, following Shopify's accessibility practices, and Design - combining flexibility and user-friendliness to eliminate technical obstacles associated with Hydrogen.\n3. Naturelle, by Weavere\nCheck out the demo store for Naturelle here: Naturelle Demo Store.\nNaturelle is the second demo store, and the second Hydrogen theme developed by Weaverse, designed exclusively for brands in Health and Beauty niche.\n\n4. Owen, by Truestorfront\nThis Shopify Hydrogen demo store is powered by Owen, a premier Shopify Hydrogen theme developed by Bavaan team. Owen offers a comprehensive set of features and components tailored to the needs of headless commerce - including, but not limited to:\n\nConversion-focused page elements like Product Comparison, Shoppable Images, Product Bundling, Product Reviews, etc. Basically, all that merchants ask for.\n\nSupport for multiple languages and currencies. SEO-Friendly. Device-responsive and mobile-first design.\n\nSeamless integration with Sanity and Strapi (headless CMS), Vercel (complete toolkit for Web), and Algolia (e-Commerce search trends).\n\n\n\n5. Shopify Supply\nShopify Supply is a platform designed to celebrate and support the commerce community by collaborating with Shopify merchants to offer products like digital counters and unique clothing designs. Shopify Supply also runs on Hydrogen.\n\n6. Linkpop\nTogether with Shopify Supply, Linkpop was one of the first Shopify products that were powered with Hydrogen. As they put it in their Press Release:\n\nDogfooding Hydrogen internally is an important part of building the framework too. Other teams at Shopify have been using Hydrogen in their own products, like Linkpop and Shopify Supply. Putting Hydrogen into production scenarios helped us uncover limitations of our APIs, leading to improvements.\n\n\n7. Akva Demo Store\nAKVA is a customized Hydrogen starter that presents a real-world example of how Sanity and Structured Content can elevate your custom Shopify storefronts.\n\nThis Hydrogen demo uses Sanity Connect (free on the Shopify App Store) to synchronize Shopify products and collection data with Sanity – allowing developers to easily reference products and collections – even within text.\nCheck out the source code for this demo and its custom studio on Github.\n8. Hydrogen Demo Store, from the Hydrogen team\nThis is the official demo storefront for Hydrogen.\n\nDuring Shopify Unite 21, Shopify Founder, Tobi Lutke also uses this demo store to showcase Hydrogen capabilities.\nhttps://youtu.be/a2YSgfwXc9c\n \n9. Nour Hammour\n\"We wanted our clients to immerse themselves into our world through beautiful storytelling. Each page has a subtle surprise that adds a spark to your shopping journey” says Zeina El Zein, Communications and Ecommerce Director at Nour Hammour.\nTo bring this vision to life, Nour Hammour chose Hydrogen which allowed for a fast, functional, and responsive storefront, with strong support for videos and interactive product discovery. Hydrogen also smoothed over any worries about the usual headaches of headless setups, like extra technical complexity, steep costs, or development overhead.\nRead their case study here.\n\n10. Manors Golf\nUsing Shopify’s headless commerce stack Hydrogen and Oxygen, with Sanity on top for CMS, Manors created a performant and engaging store, which significantly improved both customer engagement and conversions.\nLearn more about their tech stack here.\n\n11. Chubbies\nForm Factory - a premier Shopify agency, powered Chubbies with Hydrogen to build a shopping experience that allowed shoppers to browse hundreds of product variants without sacrificing performance.\n\n12. Baboon To The Moon\nBefore Hydrogen, The Baboon team runs an increasingly sluggish operation on a legacy Shopify theme. A complete overhaul was inevitable, and Hydrogen was the best choice.\nWith Shopify Hydrogen, the tech team could leverage Shopify's Oxygen hosting and in-house support - including better dev tools and better additional resources for troubleshooting. Hydrogen helps bring an enriching shopping experience to Baboon To The Moon, allowing for modularity, the ability to manage complex product variants, and customized collection pages. The upgrade also supports advanced features like bundled purchases, dynamic upselling, and scheduled content changes, all while integrating Shopify's CDN for optimized media handling\nRead the full tech stack breakdown here: Baboon to the moon: Hydrogen + Sanity\n\n13. Isle\nDeveloped by Form Factory - a premier Shopify agency, ISLE USA leveraged Hydrogen for better performance without hindering non-technical users from continuously modifying and updating their visually rich shopping experience.\n\n14. Drake Related\nDrake is no stranger to Shopify. He founded October's Very Own (OVO) in 2011 and launched its Shopify store in 2012.\nWith Drake Related, Drake’s vision is to centralize all his projects, promoting brand collaborations through Shopify Collective and Shopify Hydrogen. These tools power a visually stunning digital experience and simplify partnerships and logistics, allowing the team to efficiently manage product collaborations.\n\n15. Denim Tears\nUsing Shopify’s headless commerce stack - Oxygen and Hydrogen, Kamp Grizzly was able to deliver a story-infused, content-rich storefront for Denim Tears, without losing performance. They also managed to save development time by leveraging Hydrogen’s ready-to-use React components, hooks, and utilities.\n\nAs they put it in their case study:\n\nHot reloading made development faster, since we could instantly see their changes, and optimizing the storefront for a fast user experience was simpler with Hydrogen’s combination of caching strategies and streaming server-side rendering with Suspense. Then we could deploy to Oxygen and share their progress with Denim Tears as they worked.\n\nCheck out the full case study here:\nhttps://youtu.be/JgzMcXz5VeU\n \nTakeaway from the best Shopify Hydrogen Demo Stores\nThe Shopify Hydrogen demo stores above provide quick showcases of the capabilities and potential of Hydrogen in creating advanced, custom storefronts. Here’s what you can learn and leverage from these hydrogen demo stores:\n\nComponent Structure: The demo store is built using a series of React components that demonstrate best practices in structuring and organizing code in a Hydrogen project. You can explore components for product listings, individual product pages, carts, and checkout processes—all optimized for performance and scalability.\n\nUI/UX Features: Hydrogen’s demo store includes a variety of user interface and user experience elements designed to enhance shopping experiences. From dynamic product grids and detailed filters to smooth transition animations, the demo provides a practical showcase of what’s possible with Hydrogen.\n\nData Integration: One of the core strengths of Hydrogen is its seamless integration with Shopify’s Storefront API. The demo store utilizes this to fetch real-time data about products, collections, and inventory levels. It’s a great way to see how Hydrogen handles data fetching and rendering on both server and client sides.\n\nCustomization and Flexibility: The demo store also serves as a testament to Hydrogen’s customization capabilities. You can modify the source code to see how changes affect the storefront. This is crucial for developers looking to adapt the demo to their own specific needs or to experiment with different designs and functionalities.\n\nPerformance Insights: With built-in performance optimization features like server-side rendering and edge computing, the demo store is an excellent resource for understanding how to build fast-loading, highly responsive ecommerce sites. Hydrogen’s architecture ensures that the storefront maintains high performance, even under load, which is critical for commercial success.\n\n\nSetting Up a Hydrogen Project\nNow that you’ve a set of Hydrogen demo stores to get inspiration from, let’s get to the real work!\nSetting up a Shopify Hydrogen project is straightforward, making it easy for developers to get started with building custom storefronts. Here’s how to kick off your Hydrogen project:\n\nInstallation: Start by creating a new Hydrogen project. You can do this using Shopify's command line tool. Just run npm create @shopify/hydrogen@latest in your terminal. This command sets up a new Hydrogen project with all the necessary configurations and dependencies.\n\nConfiguration: After installation, configure your environment. This involves setting up environment variables for things like your Shopify Storefront API access. Hydrogen projects require this to fetch data directly from Shopify, which is crucial for populating your storefront with products, collections, and other commerce data.\n\nDevelopment Environment Setup: Hydrogen is built to work with popular development tools. Ensure your local development environment supports Node.js and has access to a good code editor like VS Code, which is highly recommended for its robust support for TypeScript and React.\n\nExploring Starter Templates: Hydrogen offers several starter templates that include everything from basic product listings to complex, fully-featured e-commerce setups. These templates are great for understanding how Hydrogen structures its components and for getting a jump-start on development. Or, if you want something more customized, more extravagant you can build your own Shopify Hydrogen theme using Weaverse. :)\n\nCustomization: Once your project is set up, you can start customizing your storefront. Hydrogen’s flexible component architecture allows you to tailor the user interface to meet your specific design and functionality requirements. You can add or modify components, integrate third-party services, and adjust layouts to fit your brand’s aesthetics.\n\n\nBy following these steps, you’ll have a solid foundation for your custom Shopify storefront. Hydrogen’s setup process helps you get started quickly and supports scaling your project as your needs grow.\n",{"_78":79},{"_82":252},"https://cdn.hashnode.com/res/hashnode/image/stock/unsplash/xFcoLGuhdGs/upload/ddcef37ead7e289f89fc91bdec12abd2.jpeg",{"_68":254,"_78":255},"tutorial","Tutorial",{"_60":257},{"_62":258,"_64":259,"_66":260,"_68":261,"_70":262,"_72":263,"_76":265,"_80":266,"_84":-5},"662f23fd893c77230c3a2b3c","2024-04-29T04:37:17.963Z","Shopify Hydrogen: Everything To Know About This Headless Commerce Framework","shopify-hydrogen",9,{"_74":264},"The Story of Hydrogen\nShopify Hydrogen starts with an empty GitHub repository called Shopify/hydrogen, created on April 1, 2021. It was designed to do what Shopify Liquid can’t.\nLiquid has long been the backbone of countless storefronts, yet, for all its strengths, Liquid presents a host of challenges and limitations that can stifle innovation and flexibility, including:\n\nVendor lock-in: Liquid theme binds your code to Shopify so if you want to migrate to a different system, good luck. This rigidity costs brands not just in terms of potential growth but in hard dollars—rebuilding on a new platform can consume thousands of hours and hundreds of thousands of dollars.\n\nCustomization: Liquid is a template language, designed primarily for static content generation, and falls short when it comes to building dynamic, responsive user experiences expected by today’s online shoppers. Developers find themselves bogged down by the limited customization options that Liquid allows, often leading to additional app scripts, which often conflict with theme code, resulting in even more redundant and non-reusable code. Any developer with a DRY mindset (don’t repeat yourself) would hate it!\n\n\nThe most fundamental drawback is that Liquid is a template language - making it challenging to develop custom storefronts. Custom databases and complex logic are tough nuts to crack. I remember reading this on Shopify Reddit - which perfectly captures the biggest drawback of Liquid:\n\nLiquid 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.\n\nThis is where Hydrogen comes in. As the engineering team at Shopify put it:\n\nWe built Hydrogen to solve a problem merchants—especially larger merchants—were facing: How do I use Shopify’s storefront API to build a custom storefront without losing everything I get for free with a Liquid storefront? \n\nAt its core, Hydrogen is built on the powerful React framework, enabling dynamic, app-like experiences that are fast and responsive right out of the box. This new approach aims to equip merchants, especially those with larger, more complex operations, with the tools to build custom storefronts without losing the foundational benefits that come with traditional Shopify setups.\n\nAtoms is one of the first Shopify brands to go headless with Hydrogen\nHydrogen addresses the weaknesses of Liquid by leveraging the flexibility of React components to allow for truly bespoke e-commerce experiences. It’s designed to handle everything from the presentation layer to integrating with complex backends, providing a cohesive solution that supports rapid development, testing, and scaling. The framework makes it easier to build custom storefronts by providing built-in components for cart and product management, along with advanced features like server-side rendering and automated performance optimization.\nHydrogen's Core Features\nPerformance-First Design\nOne of the biggest selling points of Shopify Hydrogen is its blazing-fast performance. Thanks to server-side rendering and React Server Components, your online store loads super quickly, giving visitors a smooth, lag-free experience. Fast load times aren't just about user satisfaction; they're also key for SEO. Google loves speedy sites and good user experience. According to former Head of SEO at Shopify, Kevin Indig, Google uses clicks and site interaction for ranking.\nClicks here would include CTR, pogo-sticking (users quickly pogo-stick back and forth between search results), and long clicks (users stay on the page for a long time without going back to search results). This finding further reinforces a long-standing SEO best practice is that we should also optimize for engagement, user experience, and site design because these factors would also influence ranking. (See the study)\nDeveloper-Centric Tools\nHydrogen is like a Swiss Army knife for developers. It’s packed with all sorts of tools that make building and managing an online store straightforward. From automatic code splitting to efficient state management, Hydrogen is designed to make developers' lives easier as comes with out-of-the-box features for testing, observing, debugging, and deployment, which also means less time tinkering and more time making your site great.\nhttps://youtu.be/IHYlfEiTf3g\n \nOptimistic UI Updates\nHydrogen incorporates an Optimistic UI pattern, which allows the interface to update instantaneously before server responses are received. This means actions like adding items to the cart feel immediate from a user’s perspective, enhancing the overall shopping experience without waiting for server-side confirmation.\nNested Routing\nShopify Hydrogen also supports nested routing, enabling smoother transitions between pages. This is crucial for e-commerce where shoppers often jump between product listings and detail pages. By only reloading parts of the page that need updating, Hydrogen keeps the user experience fast and fluid.\nEdge Rendering\nHydrogen utilizes edge rendering technology to deliver content closer to the user's location, drastically reducing load times and improving site performance globally. This feature is particularly beneficial for international e-commerce stores that cater to a global audience.\nBuilt-in SEO Enhancements\nWith Hydrogen, SEO is a priority, not an afterthought. It’s designed to ensure that sites built with it are inherently SEO-friendly, from faster load times through server-side rendering to structured data automatically embedded into pages to enhance search engine visibility.\nFlexible Caching Strategies\nHydrogen offers powerful caching capabilities that can be customized based on the specific needs of your store. Whether it’s full-page caching for static content or sophisticated invalidation strategies for dynamic data, Hydrogen provides the tools to optimize cache behavior for maximum performance.\nBuilding with Hydrogen\nSetting up and developing storefronts with Shopify Hydrogen is designed to be straightforward but powerful. First, you need to understand the 03 pillars of a Hydrogen stack.\n\n\n\n\nTechnologyWhat it does\n\n\n\nHydrogenA set of components, utilities, and design patterns that make it easier to work with Shopify APIs. Hydrogen projects are Remix apps that are preconfigured with Shopify-specific features and functionality. Hydrogen handles API client credentials, provides off-the-shelf components that are pre-wired for Shopify API data, and includes CLI tooling for local development, testing, and deployment.\n\nRemixThe open-source React framework that Hydrogen is built on top of. Remix handles routing, data fetching, server-side rendering, UI reactivity, and styling.\n\nOxygenShopify’s global serverless hosting platform, built for deploying Hydrogen storefronts at the edge. Oxygen handles deployment environments, environment variable management, caching, and integration with Shopify’s CDN.\n\n\nFrom this understanding, you’d need to begin with environment setup—Hydrogen requires Node.js (version 16.14.0 or higher) and supports npm, yarn, or pnpm for package management. Installation is as simple as running npm create @shopify/hydrogen@latest, which sets up the initial project structure (GitHub).\nOf course, I’m not trying to reinvent the wheel here. The full tutorial can be found at Shopify Hydrogen docs. Also, check out this tutorial for a quick overview.\nhttps://youtu.be/dTh1esIxw1k\n \nShopify Hydrogen vs NextJS\nShopify Hydrogen is not designed to compete with NextJS, as Bret Little - Shopify’s Staff Software Engineer put it:\n\nYou can use it with Next.js, we have a lot of merchants that are very successful with Next.js. You can use it with Gatsby, you could use it with Vue, you could use it with whatever you want. Hydrogen isn't trying to take away from those options of whatever else you might, if your team really knows Vue really well, why would we say don't use Vue to build an e-commerce site? You can build a very good e-commerce site using a variety of technologies. The whole point of Hydrogen is it's an opinionated way of building commerce on top of the storefront API - very opinionated because you want it to be easy and quick for somebody who maybe doesn't have a huge amount of front-end experience, but they just want to get something going, quick and as fast as possible.\n\nMy advice is that if you’re already on Shopify, use Hydrogen to get the best out of the Shopify ecosystem. However, if you’re considering moving to Shopify, and are on the fence about Shopify Hydrogen and NextJS, here’s a quick comparison.\n\nShopify Hydrogen:\n\nBuilt just for Shopify stores. If your shop runs on Shopify and you're thinking about going headless, this is tailored for you.\n\nOffers built-in components, utilities, and hooks that streamline development by directly interacting with Shopify's Storefront API - which can significantly reduce the development time, as you don’t need to reinvent the wheel for basic eCommerce functionalities like shopping cart management or analytics.\n\n\n\nNext.js:\n\nA general-purpose React framework that’s great for all sorts of web projects, not just eCommerce.\n\nMore freedom for developers to integrate with any backend or third-party services since it’s not tailored to any specific platform like Shopify.\n\nOffers a broader application scope with more mature features. Excel in advanced rendering options like Server-Side Rendering (SSR) and Static Site Generation (SSG), which can significantly improve performance.\n\nHas a massive community comprehensive documentation, and community support making it a reliable choice for developers seeking flexibility and extensive features.\n\n\n\n\nIf you want to read a more detailed comparison, check out this blog post from Clean Commit.\nShopify Hydrogen Limitations\nShopify Hydrogen, despite making great progress in recent months, still has its limitations.\n\nAccessibility: Hydrogen is nowhere as accessible as Shopify Liquid. Even with Hydrogen, implementing a headless architecture is still resource-extensive and expensive. You need a deep pocket. You need engineering power as almost everything needs to be built and maintained by developers, making it harder for the marketing team to create or edit content on the front-end layer.\n\nNo Live Store Preview: At the moment, Hydrogen doesn’t offer a built-in real-time preview of the store you’re building, making it more challenging to implement and collaborate with non-developers (i.e.: Marketing/Sales team who frequently needs to make changes to the website).\n\nHigh learning curve: Many Shopify merchants rely on Liquid themes, which cater to a less technical audience. The leap of complexity between templating via liquid and writing typescript/GraphQl/remix might be too large for most Liquid developers.\n\nReact Server Components: Hydrogen doesn’t produce a static progressive web app (PWA), instead, it operates through Shopify’s server using React Server Components. While this technology is innovative, it has not yet reached widespread adoption among developers.\n\n\nThis is where Weaverse comes into play.\n\nWe asked ourselves the big question: What if building a headless store becomes easier and cheaper? What if having a performant, pixel-perfect storefront is just as easy as making a new website from a free theme? What if we have an Online Store 2.0, but for Hydrogen instead?\nAnd we built it. Weaverse brings you a visual editor on top of Hydrogen:\n\nDevelopers have a launchpad to build Hydrogen storefronts a lot faster, using premade themes and Weaverse SDKs.\n\nNon-developer, non-technical users can easily add or edit the content on their Hydrogen storefronts, without waiting for the developer’s rescue.\n\n\nTake Weaverse for a spin, and see how you like it: studio.weaverse.io\n",{"_78":79},{"_82":267},"https://cdn.hashnode.com/res/hashnode/image/stock/unsplash/0b5g9_pnMqc/upload/96254d794d68a4c180a84fc6764913a9.jpeg",{"_60":269},{"_62":270,"_64":271,"_66":272,"_68":273,"_70":274,"_72":275,"_76":277,"_80":278,"_84":-5},"6628fd7b32ba4c334e3f602b","2024-04-24T12:39:23.092Z","Shopify Hydrogen Analytics got Fixed.","shopify-hydrogen-analytics-got-fixed",3,{"_74":276},"Introduction\nIntegrating analytics tools like Shopify Analytics and Google Tag Manager into Shopify Hydrogen stores has been a technical challenge for many merchants. However, the April 2024 update to Shopify Hydrogen has introduced new features that simplify this process. This blog explores the transformation in analytics integration from before and after the update, offering insights into how these changes can benefit your store.\nChallenges Before the Update\nPrior to the latest update, Shopify Hydrogen users faced several hurdles:\n\nAnalytics Sync Issues: When merchants enabled the Cookie Banner, it led to synchronization problems between the analytics and the store checkout, resulting in data loss.\n\nLack of Native Support: Hydrogen did not offer native support for Cookie Banners, unlike the Liquid Storefront where it is natively integrated.\n\nGuidelines Deficiency: There was a noticeable absence of official guidelines on how to add analytics and cookie banners, forcing many to rely on external platforms like OneTrust or CookieYes.\n\n\nThese issues made it cumbersome for merchants to efficiently track customer behavior and conversions, especially during the critical checkout phase.\nShopify's Solution in the April 2024 Update\nThe April 2024 update has markedly improved the situation by introducing several key enhancements:\n\nNative Component: Shopify introduced a new component that automatically loads the native consent banner and Shopify analytics scripts. This integration ensures that analytics data is consistently captured throughout the customer's journey, including during checkout.\n\nStreamlined Integration Process: The update eliminates the need for third-party cookie banners, as the component is automatically included in the Hydrogen store setup when updated to the latest version.\n\n\nHere’s how you can now integrate this feature into your Hydrogen application:\nexport default function App() {\n const nonce = useNonce();\n const data = useLoaderData();\n\n return (\n \n \n \n \n \n \n \n \n+ \n \n \n \n+ \n \n \n \n \n );\n}\n\nAdditional Resources\nTo assist merchants further, Shopify provides comprehensive guide on how to implement these new features.\nFor more detailed instructions, merchants can refer to the Hydrogen analytics example provided on Shopify's GitHub page.\nDemo\nHere is the Pilot demo after updated to the latest version of Shopify Hydrogen:\n\n\nConclusion\nWith the April 2024 update, Shopify Hydrogen has substantially addressed the integration issues with Shopify Analytics and Google Tag Manager. Although direct support for some third-party tools like Google Tag Manager and Facebook Pixel is still pending, the update significantly eases the analytics setup process, aligning better with merchant needs for comprehensive data tracking.\nFor step-by-step instructions on configuring your store following these updates, check our official setup guide.\n",{"_78":79},{"_82":279},"https://cdn.hashnode.com/res/hashnode/image/stock/unsplash/c9FQyqIECds/upload/a54bdd07afb1997b842607969da909ca.jpeg",{"_60":281},{"_62":282,"_64":283,"_66":284,"_68":285,"_70":191,"_72":286,"_76":288,"_80":290,"_84":-5},"660c23ee54485ff1d9cf9a99","2024-04-02T15:27:42.883Z","Unleash The Power of Exit-intent Popups","unleash-the-power-of-exit-intent-popups",{"_74":287},"\n💡\nThis is a guest post from Fordeer Team.\n\n\nWelcome to the dynamic landscape of online marketing, where maintaining a strategic edge is paramount to achieving success. A notable tool that has garnered significant attention in recent times is the exit-intent popup. If you are not yet acquainted with this transformative strategy, you have arrived at the opportune destination. Within this blog post, Fordeer Team shall meticulously explore the fundamentals of exit-intent popups, elucidating their relevance and delineating how they can enhance the overall performance of your website.\nOverview of Exit-intent Popups\nWhat is an exit intent popup?\nAn \"exit-intent popup\" is a specific type of popup that is triggered when a user shows an intention to leave a webpage or close a tab. This intention is often detected through mouse movement towards the browser's close button or by tracking the user's cursor movements towards the top of the browser window, indicating an attempt to navigate away from the current page. Exit-intent popups are typically used to capture the user's attention at the last moment and present them with a targeted message, offer, or call to action in an attempt to retain their interest or encourage them to take a desired action before leaving the site. They are commonly employed for purposes such as offering discounts, prompting newsletter sign-ups, or providing additional content suggestions.\nHow do exit-intent popups work?\nExit-intent popups work by tracking the movements of the user's cursor on a webpage. When the user's cursor moves towards the top of the browser window, indicating an intention to leave the page (for example, to close the tab or navigate to a different site), the exit-intent popup is triggered, appearing on the screen just before the user exits.\n\nThe detection of exit intent is typically done using JavaScript code that tracks mouse movements and calculates when the cursor is about to leave the viewport, suggesting the user's intention to exit the page. When the exit intent is detected, the JavaScript triggers the display of the exit-intent popup.\nOnce triggered, the exit-intent popup typically appears in the center or bottom corner of the screen, overlaying the webpage content. It may contain a message, offer, subscription form, or any other call to action designed to capture the user's attention and encourage them to stay on the site or take a specific action before leaving.\nExit-intent popups are designed to be non-intrusive and timed strategically to engage users when they are most likely to exit, offering them something of value that may persuade them to stay or explore further. However, it's important to use them judiciously and ensure that the popup content is relevant and valuable to the user to avoid frustrating or alienating visitors.\nThe Power of Exit-intent Popups\nRecovery of abandoned visitors\nImagine you're strolling through a bustling marketplace, casually browsing the array of shops. Suddenly, as you're about to turn away from a storefront, a friendly shopkeeper steps out, offering you an exclusive discount on their latest products. Intrigued, you pause, reconsidering your decision to leave. This scenario mirrors the effectiveness of exit-intent popups in the digital realm.\nExit-intent popups are meticulously crafted to target users displaying signs of departure from a website. Just like that attentive shopkeeper, they seize the opportune moment to capture attention and entice visitors to stay a little longer. By presenting compelling offers, discounts, or incentives at this critical juncture, businesses can effectively re-engage these visitors, preventing them from bouncing away without taking any desired action.\nFor instance, let's consider an online clothing retailer. A visitor navigates to their website, browses through various product pages, but eventually moves towards closing the tab without making a purchase.\nSensing the impending exit, an exit-intent popup gracefully appears, offering a limited-time discount on their next purchase. Intrigued by the enticing offer, the visitor decides to explore further, ultimately making a purchase they may have otherwise abandoned.\nA second chance for conversions\nYou know what? These clever popups also offer a second chance to engage with your visitors just as they're about to leave. Think about it – by providing enticing incentives like discounts, access to exclusive content, or limited-time promotions, you're giving your visitors a reason to stay and explore further.\n\nFor example, let's say you run an online clothing store. A visitor adds items to their cart but hesitates to complete the purchase. Suddenly, an exit-intent popup appears, offering them a 10% discount on their first order if they sign up for your newsletter. Intrigued by the offer, the visitor decides to stay, completes their purchase, and even subscribes to your newsletter for future deals and updates. And with that, you've successfully converted a casual visitor into a loyal customer.\nIn essence, exit-intent popups provide a win-win situation for both you and your visitors. You get a chance to capture leads, subscribers, or customers that might have slipped away otherwise, while your visitors get valuable incentives and offers that enhance their experience with your brand.\nList building and lead generation\nExit-intent popups are invaluable assets for businesses seeking to expand their email lists and cultivate leads. By extending a warm invitation to visitors to subscribe to newsletters or mailing lists just as they're about to depart, businesses open the door to ongoing communication opportunities. Let's delve deeper into why this matters.\nImagine you're a visitor on a skincare website, exploring the latest products and trends. As you wrap up your browsing session, a popup appears, offering you a chance to stay updated with skincare tips, exclusive offers, and product launches by subscribing to the site's newsletter. Intrigued by the prospect of receiving valuable insights directly to your inbox, you decide to sign up.\nIn this scenario, the exit-intent popup not only captures your interest but also initiates a meaningful relationship between you and the skincare brand. Over time, as you receive personalized emails tailored to your skincare concerns and preferences, you feel valued and engaged. Meanwhile, the brand gains a loyal subscriber who is more likely to convert into a paying customer in the future.\nReduced bounce rates\nOne of the standout perks of using exit-intent popups is their knack for reducing bounce rates. Imagine this scenario: a visitor lands on your website, browses for a bit, but then hesitates to take further action. Just as they're about to click away, a strategically timed exit-intent popup appears. It offers them a special discount, a free resource, or perhaps a chance to sign up for exclusive updates. Suddenly, their interest is piqued, and they decide to stick around a little longer.\nBy providing users with these additional options or incentives, businesses can effectively extend their visitors' stay on the site. Instead of exiting immediately, users may choose to explore more pages, delve into other products or services, or even subscribe to newsletters. This prolonged engagement not only reduces bounce rates but also significantly boosts overall interaction with your website.\n\nFor instance, let's say you run an e-commerce store selling skincare products. A visitor lands on your site but seems undecided about making a purchase. Just as they're about to leave, an exit-intent popup appears, offering them a 10% discount on their first order. Intrigued by the offer, the visitor decides to browse through your product catalog a little more. Eventually, they find a few items they like, apply the discount code at checkout, and complete their purchase. Without the timely intervention of the exit-intent popup, this potential customer might have slipped away, resulting in a lost opportunity for both engagement and revenue.\nPersonalized user experience\nExit-intent popups wield significant power due to their knack for delivering a personalized and precisely targeted user experience. Picture this: You're browsing an online store for a new pair of sneakers. As you hover your cursor toward the exit button, a popup appears, offering you a 10% discount on your first purchase.\nIntrigued by the timely offer, you decide to stay a while longer, explore the site further, and eventually make a purchase. This scenario exemplifies how exit-intent popups, by tailoring content and offers to match user preferences or behaviors, can effectively capture attention and prompt desired actions.\nThis personalized approach not only enhances user engagement but also fosters a sense of connection between the business and the customer. When users feel understood and valued, they are more likely to respond positively to the call to action presented in the exit-intent popup.\nMoreover, by analyzing user behavior and preferences, businesses can refine their targeting strategies, ensuring that the content and offers presented in the popups resonate with their audience on a deeper level. For instance, an e-commerce website may customize exit-intent popups based on the products viewed or added to the cart by the user. If a customer has been eyeing a particular item but hesitates to make a purchase, a well-crafted popup offering a limited-time discount or free shipping can nudge them toward conversion.\nYou can integrate content or elements into the pop-up. Nowadays, many popup apps allow you to tell a compelling brand story and have a memorable experience. You can explore our Fordeer: Sales Pop Up - Popups, we help you inspire visitors to FOMO to boost your conversion rates and generate more sales growth trust by showing purchases are being made in real-time and at the visitor counter.\n\nEnhanced eCommerce conversion rates\nIn the e-commerce realm, such strategically-timed exit-intent popups wield immense power. By offering enticing incentives like discounts, free shipping, or exclusive offers at the moment when a potential customer is on the brink of abandoning their cart, businesses can effectively reignite their interest and encourage them to follow through with their purchase.\nThis simple yet effective tactic serves to address common hesitations that shoppers may encounter during the checkout process, such as concerns about pricing or shipping costs. By alleviating these concerns and sweetening the deal with a compelling offer, businesses can significantly reduce cart abandonment rates and boost their conversion rates.\nMoreover, the implementation of exit-intent popups underscores a business's commitment to customer satisfaction and engagement. By proactively engaging with users and offering valuable incentives, businesses demonstrate their dedication to providing a seamless and rewarding shopping experience, thereby fostering trust and loyalty among their customer base.\nBonus: Exit-intent Popups Best Practices\nTiming is everything\nIn the realm of exit-intent popups, timing holds the key to success. It's essential to pinpoint the opportune moment to trigger the popup, typically when the user signals an intent to depart, such as by navigating toward the browser's exit button. However, it's equally important to exercise a degree of restraint. Introducing a slight delay ensures that the popup doesn't disrupt the browsing experience or annoy users who may not be genuinely leaving but rather exploring different options. This delicate balance between timing and subtlety can significantly enhance the effectiveness of exit-intent popups in engaging users and driving desired actions.\nClear call-to-action\n\nIt's imperative to ensure that the Call-to-Action (CTA) button or link stands out prominently and effectively communicates the desired action to users. Utilizing action-oriented language is key in encouraging users to take the next step. Phrases like \"Get Your Discount\" or \"Subscribe Now\" create a sense of urgency and motivation, prompting users to engage with the popup and proceed with the desired action. By making the CTA clear and compelling, you can significantly increase the likelihood of users responding positively to the exit-intent popup and completing the desired action.\nMobile optimization\nYou should ensure a flawless user experience across all devices by optimizing your exit-intent popups for mobile compatibility. It's essential to cater to users browsing on smartphones and tablets, as they make up a significant portion of website traffic. You should take the time to thoroughly test your popups on a range of devices and browsers to guarantee they appear correctly and are effortless to engage with on mobile. By doing so, you'll not only enhance usability but also maximize your chances of capturing users' attention and driving desired actions, regardless of the device they're using.\nA/B testing\nIt's essential to explore various iterations of your exit-intent popups to pinpoint what truly connects with your audience. By conducting experiments with different designs, copywriting styles, offers, and timing strategies, you can fine-tune your approach to achieve optimal performance and elevate conversion rates. This iterative process allows you to gather valuable insights into user preferences and behaviors, empowering you to make informed decisions that drive engagement and enhance the effectiveness of your exit-intent popups.\nCompliance with regulations\nLast but not least, it's imperative to uphold user privacy standards and adhere to pertinent regulations like GDPR or CCPA. This entails transparently communicating the purpose of data collection via the exit-intent popup and offering users a clear option to opt-out if they wish to refrain from participating. By demonstrating a commitment to respecting user privacy and abiding by regulatory requirements, businesses not only foster trust and goodwill among their audience but also mitigate potential legal risks associated with data handling practices.\nOver to you,\nExit-intent popups represent a powerful tool in your digital marketing arsenal. By intelligently engaging users at the moment of departure, you can transform potential losses into valuable opportunities. Whether it's capturing leads, reducing bounce rates, or promoting special offers, exit-intent popups have the potential to enhance your website's performance and contribute to overall business success.\nEmbrace this innovative strategy, and watch as your online presence reaches new heights by following Fordeer’s tips!\n",{"_78":289},"Gus Nguyen",{"_82":291},"https://cdn.hashnode.com/res/hashnode/image/upload/v1712071465753/55b52f9d-a6f7-4606-bc8c-8a6e1ca778fa.png",{"_60":293},{"_62":294,"_64":295,"_66":296,"_68":297,"_70":130,"_72":298,"_76":300,"_80":301,"_84":-5},"660434ecf5acb9a1fb3da7d5","2024-03-27T15:02:04.219Z","Weaverse Pricing Update: More Affordable, Better Flexibility","weaverse-pricing-update-more-affordable-better-flexibility",{"_74":299},"We believe everything about Weaverse should be designed for Scalability and Flexibility. This also includes our pricing model.\nAs Weaverse is trusted by more users, we understand it’s time to make Weaverse more accessible, affordable, and adaptable to your needs. And we’re proud to share that you can now enjoy a new pricing package that’s designed for headless storefronts!\nWhat we changed\n\nPay-As-You-Go Model: Our pricing now operates on a pay-as-you-go model, similar to the one you might have seen at Loops. This approach ensures that you have complete control over your expenses, allowing for more flexible and efficient budgeting.\n\nNew Entry Price: You can start with Weaverse for as low as $12/month. This new entry point makes it easier than ever to see if headless works for you! :)\n\nAdditional Views Package: We understand that your business needs may vary. Hence, we're introducing a more affordable add-on package - only $5 for every 50,000 views. This way, you only pay for what you need, when you need it.\n\nPrice/Views Calculator: To help you understand and estimate your costs, we’ve added a new feature to our pricing page: a price/views calculator. This tool enables you to calculate your expected costs based on the number of views.\n\n\n\nWhat do these changes mean for you?\nThese updates are designed to provide greater flexibility and transparency in how you use and pay for Weaverse. Whether you’re just starting or scaling up, we want to make sure Weaverse pricing model can grow with you. We are continuously listening to your feedback and looking for ways to improve our services and pricing structure. We are committed to providing you with the best experience possible - and these pricing changes are a step forward in that direction.\nThank you for being a part of the Weaverse community. As always, if you have any suggestions for us, we’re all ears!\n",{"_78":289},{"_82":302},"https://cdn.hashnode.com/res/hashnode/image/stock/unsplash/wn57cSQ7VzI/upload/017b4cd82936836b0c8702af3260bf05.jpeg",{"_60":304},{"_62":305,"_64":306,"_66":307,"_68":308,"_70":274,"_72":309,"_76":311,"_80":312,"_84":-5},"65e73ac1dfd19dd62d9a3126","2024-03-05T15:31:13.557Z","Product Updates: Custom URL, Custom Page, Customer Account API, and More","feb-product-updates-custom-url-custom-page-customer-account-api-and-more",{"_74":310},"🏫 How to build a headless storefront with Shopify\nMost devs would tell you that diving into Hydrogen and customizing your Shopify storefront is like climbing a techy mountain – one with steep learning curve.\nBut guess what? That mountain's about to turn into a nice, flat path.\nShopify just published a complete guide to going headless with Shopify, designed specifically for developers. That's right, they're laying out the whole journey, step by step, making that learning curve look more like a stroll.\n\nNo more learning curve excuses! :)\n🤖 Custom Page URL and Custom Page Templates\nWith Shopify, you can’t remove resource markers like pages , or blogs. It’s a minor issue, but strangely enough, it has been one of the most annoying issues with Shopify.\nMerchants have complained about this. They want control over URL structure to create their own taxonomy. This is particularly important when it comes to SEO and advertising:\n\nIn advertising - like Google Ads or Facebook ads, the preference is always to link to yoursite.com/maypromo rather than yoursite.com/pages/maypromo.\n\nIn SEO, link optimization and link depth are important for ranking.\n\n\nWorkaround suggested. Requests submitted. 08 pages of merchants’ complaints, 04 years, and 167 replies later. There’s still no update.\nAs a developer and product manager, I understand - there are always more prioritized features. Issues like this might easily fall off Product Managers’ radars. So we want to make it one step easier: If you have a Shopify Hydrogen store, you can easily create custom URLs for custom pages in Weaverse, using our visual page builder.\n\n🌊 Customer Account in Pilot Theme\nHow many Shopify themes have customer account features? Not many, I’d say. and not free, I’d say.\nOur original vision for Pilot Theme has always been this: The best of Shopify Theme + The best of Hydrogen framework. You have a performant, feature-rich theme without losing the user-friendliness that made the Shopify themes popular.\nThat’s why we've updated our Hydrogen theme with the new Shopify Customer Account API, allowing for passwordless login.\nHere's what it means for customers and developers:\n\nSeamless Authentication: Sign in easily without needing to remember passwords.\n\nData Scoping: Your shopping experience is now more personalized. - Enhanced Security: Your data is safer than ever with additional protection measures. !\n\n\n(In case you don’t remember, Pilot theme is the first Hydrogen theme. Imagine Dawn theme, but for headless Shopify storefronts built with Hydrogen)\n\n⚡ Near-instant HMR When Developing Shopify Apps\nHere's another contribution I've made to Shopify: I've updated the Shopify App Remix template to be compatible with Vite. Now, Shopify developers can experience near-instant HMR while developing Shopify apps ⚡\n\n",{"_78":289},{"_82":313},"https://cdn.hashnode.com/res/hashnode/image/stock/unsplash/0b5g9_pnMqc/upload/a47a61b8488e18e5df80c97d399b4bb0.jpeg",{"_60":315},{"_62":316,"_64":317,"_66":318,"_68":319,"_70":320,"_72":321,"_76":323,"_80":324,"_84":326},"65e69cb00034507a7bfed17b","2024-03-02T17:00:00.000Z","The Best Headless Shopify Examples For Inspiration (Updating)","the-best-headless-shopify-examples",13,{"_74":322},"I. Shopify, Without Headless\nWe all know and love Shopify.\nOver 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.\n\nHowever, Shopify has its limitations, which is in the name of Liquid.\nShopify Liquid, despite being the current backbone of all Shopify websites, has some major drawbacks and limitations.\n1.1. Vendor lock-in risk\nLiquid theme binds your code to Shopify - so if you want to migrate to a different system, good luck.\nThe 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.\n1.2. Customization with Liquid in the background takes a toll on developers\nThe 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.\n1.3. The need for better performance optimization.\nThe 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.\nThe 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:\n\n“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.”\n\nThe 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\nII. Shopify, After Headless, With Hydrogen\nShopify 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.\nHydrogen 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.\n\n\nWith 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.\n\nThe possibilities with Hydrogen are abundant:\n\nDevelopers 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.\n\nBetter 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.\n\nEnhanced 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.\n\nBetter error handling: Hydrogen has improved error handling and debugging capabilities, making it easier to identify and fix problems with your store.\n\nImproved 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.\n\n\nAs 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.\nStill, you might wonder, what Shopify Headless is even good for.\nIf you're still on the fence, this checklist might be helpful.\nIII. Common Headless Use Cases\nHeadless commerce presents various use cases that address the limitations of traditional e-commerce platforms:\n\nRapid 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.\n\nImmersive 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.\n\nImproved 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.\n\nComposable 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.\n\nLocalization and Personalization: Headless platforms can dynamically serve localized content and personalized experiences by leveraging frontend frameworks and global server networks.\n\nUnified Customer Experience: Full control over the front end allows businesses to tailor the shopping experience to their brand and customer needs without backend constraints.\n\nAI 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.\n\n\n25 Best Headless Shopify Examples\n1. Victoria Beckham Beauty: Immersive Fashion with Headless Architecture\nVictoria 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.\n\nWith Shopify Headless, Victoria Beckham Beauty can achieve:\n\nEnhanced 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.\n\nMore 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.\n\nSeamless 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.\n\n\n2. Bols: Crafting Rich Customer Experiences\nBols, known for its rich heritage in liqueur and spirits, leverages the flexibility of Shopify's headless architecture to boost its online presence.\nWith Shopify Headless, Bols was able to achieve:\n\nIncreased Page Loading Speed: Implementing headless architecture has resulted in a 50% increase in page loading times, significantly enhancing user experience.\n\nCustomized Content-Rich Experience: The headless approach has granted Bols complete control over its storefront, enabling a content-rich browsing experience for customers.\n\nGlobal Expansion: The flexibility provided by headless commerce has supported Bols in its mission to expand direct-to-consumer sales globally.\n\n\n\n3. Denim Tears: Crafting Cultural Narratives\nTo 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.\n\nWith Shopify Headless, Denim Tears was able to achieve:\n\nRich Storytelling: Enhanced content display capabilities, supporting their unique brand storytelling.\n\nEnhanced User Experience: Fast, responsive, and interactive site elements that engage users deeply with the brand’s heritage.\n\n\n4. Atoms: Personalized Shopping Made Easy\nWith Headless, Atoms was able to focus on comfort and customization, offering unique shoe designs that cater to individual preferences.\n\nGoing headless with Shopify, Atoms was able to achieve:\n\nCustomization at Scale: Efficient management of varied product options and user preferences.\n\nStreamlined User Journeys: Smooth, intuitive shopping experiences tailored to individual needs and behaviors.\n\n\nFor the full case study, read it here.\n4. Half Helix: Helping Merchants Innovate\nHalf 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.\n\n\nInnovative 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.\n\nScalability and Efficiency: The adoption of headless architectures typically results in scalable and efficient digital platforms, though specific results for Half Helix were not detailed.\n\n\n5. Boretti: Streamlining Luxury Kitchen Experience\nBoretti is renowned for its high-end kitchen appliances and culinary products, offering an elegant online platform to match its luxury goods.\n\nTo 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.\nNaturally, they went for headless Shopify to achieve:\n\nDynamic User Experiences: The headless approach would enable Boretti to offer personalized shopping experiences, with tailored recommendations and interactive product displays.\n\nScalability and Integration: Headless architecture would allow for easier updates and integrations, keeping the site current with the latest e-commerce trends and customer demands.\n\n\n6. Nour Hammour: Tailoring Luxury eCommerce Fashion\nNour 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.\n\nWith Headless, Nour Hammour was able to achieve:\n\nImproved Site Interactivity and Engagement: By adopting a headless approach, Nour Hammour could create more interactive and engaging product pages, enhancing the shopping experience.\n\nFaster 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.\n\n\nFor the full case study, read it here.\n7. Isle USA: Pioneering Adventure\nIsle USA is dedicated to providing high-quality paddleboards and accessories, catering to outdoor enthusiasts and adventure seekers.\n\nTo 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:\n\nRich Content Delivery: Utilizing headless commerce, Isle USA could effectively manage and deliver rich content such as video tutorials, adventure guides, and detailed product specs.\n\nOperational Efficiency: The headless architecture would streamline content updates and product management, allowing Isle to efficiently respond to seasonal trends and customer needs.\n\n\n8. Splits59: Enhancing Fitness Fashion\nSplits59 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.\n\nWith Shopify, Splits59 was able to achieve:\n\nSeamless 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.\n\nDynamic Content and Interaction: The headless approach enables Splits59 to offer dynamic content such as fitness tips, product launches, and interactive sizing guides.\n\nMarket Agility: Headless commerce would allow for rapid updates and personalization, essential for keeping pace with the fast-moving fitness and fashion sectors.\n\n\n9. Magda Butrym: Redefining Luxury Fashion\nMagda Butrym offers luxury fashion pieces that combine modern design with traditional craftsmanship, appealing to a discerning global clientele.\nTo 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:\n\n\nElevated 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.\n\nGlobal Customer Reach: With headless commerce, Magda Butrym could easily manage international content and sales, catering to a global audience while maintaining localized experiences.\n\nInnovative 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.\n\n\n10. Chubbies: Championing Weekend Wear with Headless Shopify\nChubbies 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.\nGiven 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.\n\nWith Headless, Chubbies was able to support a brand's rapid growth:\n\nSignificant 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.\n\nExpanded 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.\n\n\nFor more detailed insights, you might want to explore Shopify's case study on Chubbies.\n11. Veloretti: Revolutionizing Urban Cycling\nVeloretti, 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.\n\nThe 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.\n12. Paul Valentine: Elevating Luxury E-commerce with Headless\nPaul 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.\nThe 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.\n\nWith Headless, Paul Valentine brand achieved:\n\nInternational 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.\n\nCustomization 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.\n\nInfrastructure 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.\n\n\n13. Blume: Revolutionizing Skincare through Headless Commerce\nBlume 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.\n\nWith Headless, Blume was able to:\n\nHandle diverse and dynamic content tailored to their audience.\n\nIntegrate various third-party applications seamlessly.\n\nProvide a personalized shopping experience across multiple channels.\n\nQuickly adapt to market trends and customer feedback, enhancing their brand's agility.\n\n\n",{"_78":79},{"_82":325},"https://cdn.hashnode.com/res/hashnode/image/stock/unsplash/F6-U5fGAOik/upload/f9e662e2e83f5f21361e824a19cade70.jpeg",{"_68":98,"_78":99},{"_60":328},{"_62":329,"_64":330,"_66":331,"_68":332,"_70":333,"_72":334,"_76":336,"_80":337,"_84":-5},"65c2476f1e295eb9bec1916e","2024-02-06T14:51:27.562Z","Product Updates: Metaobject Pickers, View Transition API, and more","jan-product-updates-metaobject-pickers-view-transition-api-and-more",4,{"_74":335},"In case you didn't hear: The new Hydrogen updates in Shopify Winter 2024 are amazing. As they put it - a pain-free path to production and it’s no fluff. The latest releases cover a wide range of improvements and updates that vastly improve developer experience with Hydrogen, including:\n\nShare storefront previews using tokenized links, accessible to anyone.\n\nEasily upgrade your Hydrogen project and stay updated with 'h2 upgrade' from the CLI.\n\nMonitor, fix and catch bugs before they ship with a suite of new developer tools.\n\nDeploy more flexibly and easily now that Hydrogen's server now mirrors Oxygen's.\n\nManage privacy preference across services with ease as Customer Privacy API is now compatible with Hydrogen storefronts.\n\n\n\nAnd these are not even THE BEST updates yet :) But we’ll get to that later. Let’s get to this month's updates from Weaverse first.\n🤖 Criminally smooth View Transition for Pilot Theme\nWe’ve recently updated our Pilot Shopify Hydrogen theme with View Transition API and the results are impressive! It integrates smoothly into Hydrogen, thanks to the Remix unstable_viewTransition prop.\nhttps://twitter.com/tobi/status/1745860486158066171?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E1745860486158066171%7Ctwgr%5Ec6d3c888eb0563bd794fd21aaf626cbe95f128a0%7Ctwcon%5Es1_c10&ref_url=https%3A%2F%2Fpublish.twitter.com%2F%3Furl%3Dhttps%3A%2F%2Ftwitter.com%2Ftobi%2Fstatus%2F1745860486158066171\n \nAnd when I asked if we should add this as a default feature for the Hydrogen theme, Tobi said yes. You know Tobi, he’s the guy who built Shopify ;)\n🖼️ New Shopify Hydrogen Theme for Beauty & Cosmetic brands (Coming soon)\nWe're kicking off our new Shopify Hydrogen theme - Naturelle - by first building a strong design system and making the most of the React ecosystem's composability. Shadcn UI has been a great resource for our style guide and defining atomic components. Nonetheless, we're tweaking it to better fit eCommerce aesthetics.\n\nWe'd also love to hear your thoughts on the features and functionalities you wish to see in a Beauty/Cosmetic theme. Feel free to let me know, either by replying directly to this email or drop me a note on Linkedin.\n🚘 Shopify Object Picker is now available in Weaverse\nWe've integrated Shopify Metaobject Picker into Weaverse Studio, allowing you to create content components once, and reuse them anytime, anywhere.\nWith Metaobjects Picker:\n\nDevelopers can define metaobject definitions and quickly customize them into content sections\n\nMerchants manage these metaobjects easily via Shopify admin and integrate them on their Hydrogen storefronts with Weaverse.\n\n\nFor the full demo, check out this post.\n\n💼 Weaverse docs are now on public GitHub Repo\nWe've just moved our docs to the public Weaverse repo. Think of it like a headless CMS - we store and update our content there and then pull it into our site via API. Thanks to Remix, @epicweb-dev/cachified and lru-cache, everything loads super fast.\n\n🌊 The best Hydrogen Update\nAs I say, the best Hydrogen update is not a feature update.\nThe best update is the case studies.\nLast year, and I don’t know if you remember, there were only 03 customer case studies on the Hydrogen site. Even tho they’re neatly written, they’re not entirely convincing. Moving to Hydrogen sounded a bit daunting without proper case studies covering the entire process because no one wants to be the guinea pig.\nMaybe that’s why this year they don’t just talk about the features, they talk about what those features can do, using real-life case studies: one focusing on the merchant, the other focusing on the agency.\nFor Form Factory, the combination of Hydrogen, Metaobjects, and Oxygen provided the ability to wrangle complex data and enabled modern efficient development workflows, all through Shopify’s familiar user interface.\nFor Nour Hammour, Hydrogen allowed them to translate in-person interactions into the digital space. Their new online storefronts are fast, functional, and immersive through stunning storytelling.\nOf course now if you notice, there’s one thing missing, from both the features update and the case studies: End user experience. Editing a Hydrogen storefront visually is still cumbersome, more or less. Most front-end changes still have to go through developers. You can use Sanity, yes, but the editing experience is far from as intuitive as the familiar OS 2.0.\nAnd now there’s a tool for that. :)\n\n💡\nRead more: The best Shopify Hydrogen demo stores for you to tinker and experiment with.\n",{"_78":79},{"_82":338},"https://cdn.hashnode.com/res/hashnode/image/stock/unsplash/8RcjmdqXHwM/upload/83ae9bfbacbf7bdaf265381489265504.jpeg",{"_60":340},{"_62":341,"_64":342,"_66":343,"_68":344,"_70":274,"_72":345,"_76":347,"_80":348,"_84":-5},"65e69ca1674872c9cc1828f0","2024-01-30T17:00:00.000Z","Weaverse Weekly #5: Weaverse Components vs Theme Blocks","weaverse-weekly-5-weaverse-components-vs-theme-blocks",{"_74":346},"Hello hello, friends of Weaverse,\nThere’s this thought experiment I’d love to bring up whenever we talk about websites: The Ship of Theseus. It's that old brain teaser where if you replace every single piece of a ship, you've got to wonder – is it still the same ship?\nWell, we think websites are kind of like that. Just like Theseus's ship, your website is ever-evolving, constantly changing pieces through updates, redesigns, and content swaps. But at its core, does it remain uniquely yours?\nIt should be, and page builders/theme customizers should help, by making things reusable, modular, and uniform. So, no matter how many times you flip, switch, or swap elements on your site, your website remains uniquely yours.\nThis month’s update is all about reusability in Weaverse. But first, let’s get to the usual part. :)\nThe Best Writing About Headless, WebDev, and Everything In Between\nIn the same way, Leo Tolstoy said “All happy families are alike; each unhappy family is unhappy in its own way”, I said, “All good headless builds are alike, each bad headless build is bad in its own way”.\nIt’s true, there are almost as many ways you can f*ck up your headless implementation as how you implement headless correctly. This is why learning - not just about headless, but web dev in general - is important, and here is what I read recently:\n\nNext.js App Router Migration: The Good, The Bad, and The Ugly.\n\nRemix Vite is now stable.\n\nShop Story shutting down: Lessons for Headless builders.\n\nThe best Shopify Hydrogen demo stores to learn from, and experiment with.\n\n\nSorry Shopify Theme Block, We’re Here First!\nShopify Theme Blocks is one of the most exciting and long-awaited releases from Winter 2024, and it certainly lives up to the hype.\nShopify Theme blocks allow you to define a block once and then reuse it across sections to eliminate redundant work and coding and make them more consistent. Theme blocks allow for increased layout flexibility and finer-grain control over styling, enabling merchants and developers to build the exact vision they have for their brand.\nOf course, I’d be a lot more excited, if not for the fact Weaverse has already had our own theme block since the beginning :) We call it Components.\nWith Weaverse Components, developers can define schema settings not only at the Section level but also at the Blocks level. You can then leverage the best of React (and Hydrogen, by extension) - define components at the atomic level, reuse them everywhere, everytime, and easily implement a design system into your project.\nCustom Page URL and Custom Page Template\nWith Shopify, you can’t remove resource markers like pages , or blogs. It’s a minor issue, but strangely enough, it has been one of the most annoying issues with Shopify.\nMerchants have complained about this. They want control over URL structure to create their own taxonomy. This is particularly important when it comes to SEO and advertising:\n\nIn advertising - like Google Ads or Facebook ads, the preference is always to link to yoursite.com/maypromo rather than yoursite.com/pages/maypromo.\n\nIn SEO, link optimization and link depth are important for ranking.\n\n\nWorkaround suggested. Requests submitted. 08 pages of merchants’ complaints, 04 years, and 167 replies later. There’s still no update.\nAs a developer and product manager, I understand - there are always more prioritized features. Issues like this might easily fall off Product Managers’ radars. So we want to make it one step easier: If you have a Shopify Hydrogen store, you can easily create custom URLs for custom pages in Weaverse, using our visual page builder.\nSimple as that!\n\nThat's all for this month's newsletter. Stay safe, and see you around!\nIf you enjoyed this newsletter and have any sharing for me, feel free to drop me a note on Linkedin, I'm always happy to hear from readers.\n",{"_78":79},{"_82":349},"https://cdn.hashnode.com/res/hashnode/image/stock/unsplash/3HqSeexXYpQ/upload/acb820c106df86fd8eb410cc1e01d65b.jpeg",{"_60":351},{"_62":352,"_64":353,"_66":354,"_68":355,"_70":71,"_72":356,"_76":358,"_80":359,"_84":-5},"65c243dd636db54ac253e625","2024-01-29T17:00:00.000Z","Weaverse Weekly #4: Headless is almost never about loading speed.","weaverse-weekly-4-headless-is-almost-never-about-loading-speed",{"_74":357},"Hello hello friends of Weaverse, how are you doing?\nOne day left until Shopify Winter Edition 2024 - what’s your bet?\nIf we go by previous editors, then my best guess would be:\n\nAt least 20% would be Hydrogen and Custom Storefront updates\n\nMore APIs updates, definitely.\n\nExclusive native apps (native subscription app?!)\n\n\nSince I’ll be spamming your LinkedIn feed once the Winter 2024 edition drops, I’ll keep this newsletter short and to the point :) Let’s go.\nThe Best Writing About Headless, WebDev, and Everything In Between\nIn the same way, Leo Tolstoy said “All happy families are alike; each unhappy family is unhappy in its own way”, I said, “All good headless builds are alike, each bad headless build is bad in its own way”.\nIt’s true, there are almost as many ways you can f*ck up your headless implementation as how you implement headless correctly. This is why learning - not just about headless, but web dev in general - is important, and here is what I read this week:\n\nA Complete Overview of Hydrogen, written by Tim Davidson at CleanCommit.\n\nHow Core Web Vitals influence SEO, written by Malte Ubl, CTO at Vercel.\n\nLessons from launching our devtool 14 times on Product Hunt, written by Utpal Nadiger\n\nHow to become a Shopify Hydrogen Developer, written by ME!\n\n\nHeadless Commerce is not about loading speed. It’s about speed of action\nA lot of people I talked to think headless commerce is all about making websites slightly faster. Studies beg to differ - and what is less obvious here, and what most of us don’t see, is this:\nSpeed prompts actions.\nGoogle understood this best - as they famously prioritized speed in their product development. Here’s how James Somers - NYT writer put it in an article about Google history:\n\n“They realized that if search is fast, you’re more likely to search. The reason is that it encourages you to try stuff, get feedback, and try again. When a thought occurs to you, you know Google is already there. There is no delay between thought and action, no opportunity to lose the impulse to find something out.”\n\nIf slow page load times are a big blocker, then fast page load times act like propellant.\nIn Daniel Kahneman's \"Thinking, Fast and Slow”, we learn that the human mind operates in two modes: \"System 1\" (fast thinking) and \"System 2\" (slow thinking). System 1 is responsible for quick, intuitive decisions and responses, while System 2 engages in more deliberate and analytical thinking processes. When a user visits your website, their initial impression is influenced by the website's loading speed. A fast-loading site aligns with the efficiency and speed of System 1 thinking. It eliminates delays and friction, enabling users to access the information or products they seek swiftly.\nThey act faster. They buy faster.\nOn the other hand, System 2 corresponds to slow, deliberate thinking. In the context of slow website loading times, users are forced into a slower cognitive mode. When a website lags or takes an extended period to load, it disrupts the user's flow and patience. In this state, users are more likely to engage in contemplation, questioning whether they should wait for the site to load or abandon it altogether. The longer the delay, the deeper users descend into System 2 thinking, where they weigh the costs and benefits of continuing their browsing.\nThey leave.\nA quick summary from ReadingGraphics\nSpeed changes the way users behave. Nelson Elhage put it best (tho he was talking about software - the implications apply to eCommerce).\n\n“What is perhaps less apparent is that having faster tools changes how users use a tool or perform a task. Users almost always have multiple strategies available to pursue a goal (purchasing a product) — including deciding to work on something else entirely (switching to other stores) — and they will choose to use faster tools more and more frequently (how many stores selling the same things as you do). Fast tools don’t just allow users to accomplish tasks faster; they allow users to accomplish entirely new types of tasks, in entirely new ways.\n\nNow when you see web dev optimization through the lens of action speed - how fast you can get shoppers from point A to point B - you see headless and web dev in a radically new way.\nTake the most fundamental thing: Site designs.\nNo matter how good your site design is, there’s always a gap between digital representation and real-life products. Shoppers inevitably question how your products look like in real life. So they take their time - to find the video, to read the review, to imagine. How do you increase the speed of action here? You let shoppers see your product in 3D, interact with it, and even try it on virtually, all without leaving your product page.\nAnother example is Social Selling. You have a viral video on TikTok or Instagram and viewers flock to your store. However, between app switching and multiple clicks of tabs, they find their enthusiasm dwindled by the time they got to your product page. Let alone the fact that most social media apps now want to monopolize their traffic with zero-click content. They don’t want to drive traffic back to your storefronts. The course of action from when they’re interested in your product, to when they’re ready to buy, would take a millennia.\nYour best strategy for faster speed of action? Convert them where they are. Omni-channel and seamless synchronization between all platforms. You want to grab people's attention wherever they are, whenever they want.\nAnd of course, the best way (not the only way) to achieve all of these eCom wonders, to bring in this unified, frictionless shopping experience is Headless Commerce.\nIt’s expensive, I agree. But so was AI assistant. In 2020, if you wanted something like ChatGPT, you had to pay around $100/month for it. Now it’s just $20/month and way more powerful. And so were computers and solar panels and cars. Technological progress almost always brings broadened access and cheaper prices.\nThe story with Shopify headless commerce is the same, I believe. You need to pay attention to people who will make it happen.\n--\nP/s: Yep I’m bullish, you might already know it. Hope keeps us alive.\n",{"_78":79},{"_82":360},"https://cdn.hashnode.com/res/hashnode/image/stock/unsplash/NqOInJ-ttqM/upload/5069b27569bec2bf859cd9b96ce43cfb.jpeg",{"_60":362},{"_62":363,"_64":364,"_66":365,"_68":366,"_70":333,"_72":367,"_76":369,"_80":370,"_84":-5},"65c24367fb9d9f29b1f32541","2024-01-09T17:00:00.000Z","Weaverse Weekly #3: Snake-oil Shopify Developers","weaverse-weekly-3-snake-oil-shopify-developers",{"_74":368},"Hello hello friends of Weaverse, how are you doing?\nHope you’re well-rested. I know, transitioning from holiday bliss to work mode can feel like a jolt. One second you're basking in the cozy glow of a holiday movie marathon, and the next, you're parachuting into a jungle of work emails and looming deadlines.\nFear not, I'll keep the tech talk light and engaging in this newsletter.\nThis first newsletter of the new year came with a bunch of fascinating think-pieces, the state of Headless in 2024 - and a sensational story about what might have been the worst (or the best, depending on which side you’re on) I’ve ever seen.\nLet’s dive in!\nThe Best Writing About Headless, WebDev, and Everything In Between\nIn the same way, Leo Tolstoy said “All happy families are alike; each unhappy family is unhappy in its own way”, I said, “All good headless builds are alike, each bad headless build is bad in its own way”.\nIt’s true, there are almost as many ways you can f*ck up your headless implementation as how you implement headless correctly. This is why learning - not just about headless, but web dev in general - is important, and here is what I read this week:\n\nA detailed analysis of headless CMS-es in 2024, written by Andrew Mosby, UI Development Director at Viget.\n\nWhat Remix is lacking (and what it’s already good at), by Solomon Hawk, Senior Developer at Viget\n\nThe importance of seeing problems where no one can (or, the secret of great design), by Tony Fadell.\n\nA step-by-step guide to building your Hydrogen storefront with Weaverse, by me!\n\n\nHydrogen Themes: More Powerful, Just As Accessible\nWe've recently teamed up with True Storefront, a leading Hydrogen theme creator, to build a new theme for Sporting storefronts, based on Truestorefront’s Owen theme. It's exciting to see Weaverse maintain its efficiency and power in crafting more complex themes.\nOwen theme is designed for the likes of Atom and Nike, so it features everything merchants would need to run a premium sporting storefront: an extensive product catalog, flexible product showcase, robust mega menu, and native support for multi-language. Our goal? To see if such a sophisticated theme could be made editable and customizable with Weaverse, just like how you use Shopify Online Store 2.0.\nand yes, you can. You can check out a short demo here:\n\n\nOh, and that’s not all. We have more themes in the pipeline, catering to different niches and needs. Here’s a sneak peek, this one is for Beauty websites.\n\nThe Era of Snake Oil Developers?\n(You might have missed this over the holidays.)\nIn the 1800s, thousands of Chinese workers arrived in the United States as indentured laborers to work on the Transcontinental Railroad. Among the very few items they brought was snake oil - a remedy rich in omega-3 acids, effective against arthritis and bursitis.\nThen there came this cowboy named Clark Stanley who tried to recreate the healing effect of Chinese snake oil, but using Rattlesnake. He called himself The Rattlesnake King, and he didn’t know anything about Rattlesnake, or oil, or medicine.\n\nRattlesnake oil was far less effective than the original Chinese snake oil he was trying to emulate. A 1989 letter to The Western Journal of Medicine from psychiatrist and researcher Richard Kunin revealed that the Chinese oil contained almost triple the amount of a vital acid as did rattlesnake oil.\n\nHis concoction? A blend of mineral oil, beef fat, red pepper, and turpentine – no snake oil whatsoever. The Pure Food and Drug Act of 1906 sought to clamp down on the sale of patent medicines and it was that legislation that led to Stanley's undoing. After seizing a shipment of Stanley's Snake Oil in 1917, federal investigators found that it primarily contained mineral oil, a fatty oil believed to be beef fat, red pepper, and turpentine.\n\n\nSo that was a short origin story of snake-oil salesmen - according to NPR.\nUnfortunately, now we have Snake-oil Shopify developers who claim to boost your site's speed but instead use dubious tactics to fake performance metrics on Google's Page Speed Insights. The result? Merchants pay hefty sums for falsified speed reports.\nNone of this would come to the public if it were not for Lukas Tanasiuk's exceptional investigative journalism, exposing these deceitful acts.\nFor the full investigation, check out his full tweet.\nThat's all for this week. Catch you later!\n--\nP.S. Let me know if I'm wrong. I'd love to learn :)\n",{"_78":79},{"_82":371},"https://cdn.hashnode.com/res/hashnode/image/stock/unsplash/maJDOJSmMoo/upload/b2435574be0e2f0c6ce5c8918a741321.jpeg",{"_60":373},{"_62":374,"_64":375,"_66":376,"_68":377,"_70":117,"_72":378,"_76":380,"_80":381,"_84":383},"65797d38f20860c8dca11b4b","2023-12-13T09:45:28.106Z","Integrating Weaverse into Your Shopify Hydrogen Project","integrate-weaverse-into-shopify-hydrogen",{"_74":379},"Introduction\nAre you working with Shopify Hydrogen and looking for a way to make your online store more customizable? Weaverse is here to help. It’s a tool that makes it easy for you and your clients to customize a Shopify store without needing to know how to code. Let’s go through the steps to integrate Weaverse into your Shopify Hydrogen project.\nWhy Weaverse?\nWeaverse is great for when you’re building a Shopify store for clients who want a modern, easy-to-customize online store. Hydrogen’s tech is powerful, but it can be hard for clients to make changes by themselves. Weaverse makes this a lot easier.\nGetting Started\nFirst, let's set up your Shopify Hydrogen project. Open your command line and enter:\nnpm create @shopify/hydrogen@latest\n\nAfter setting up, go to your Hydrogen project folder and start it with:\nnpm run dev\n\nNow you will see your Hydrogen storefront running like this:\n\nIntegrating Weaverse: Step-by-Step\nStep 1: Install Weaverse\nBegin by adding Weaverse to your project. Enter the following command:\nnpm install @weaverse/hydrogen\n\nStep 2: Create the Weaverse Directory\nNext, you need to set up a directory for Weaverse in your project’s app folder. Create two files:\nweaverse/component.ts – This file is for registering components in Weaverse. Start with an empty array.\n// weaverse/component.ts\n\nimport type {HydrogenComponent} from '@weaverse/hydrogen';\n\nexport const components: HydrogenComponent[] = [];\n\nweaverse/schema.ts – This file is where you define Project/Theme information so that users can later find that information in the Project information section in the Weaverse app.\n// weaverse/schema.ts\n\nimport type {HydrogenThemeSchema} from '@weaverse/hydrogen';\n\nexport const themeSchema: HydrogenThemeSchema = {\n info: {\n version: '1.0.0',\n author: 'Weaverse',\n name: 'Pilot',\n authorProfilePhoto:\n 'https://cdn.shopify.com/s/files/1/0838/0052/3057/files/Weaverse_logo_-_3000x_e2fa8c13-dac2-4dcb-a2c2-f7aaf7a58169.png?v=1698245759',\n documentationUrl: 'https://weaverse.io/docs',\n supportUrl: 'https://weaverse.io/contact',\n },\n inspector: [\n\n ],\n};\n\nAt the same time, this is also where you will define Global Theme settings, similar to how you use settings_schema.json in Dawn theme (Shopify theme). I have also left a few settings available so you can expand them later. Below is an example image of my theme settings:\n\n\nStep 3: Set Up a Weaverse Client\nCreate a weaverse/weaverse.server.ts file. The “server.ts” extension indicates that the code within is intended for server-side execution. This distinction is crucial for maintaining a separation between server-side and client-side logic, ensuring better security and performance.\n// weaverse/weaverse.server.ts\n\nimport type {WeaverseClientArgs} from '@weaverse/hydrogen';\nimport {WeaverseClient} from '@weaverse/hydrogen';\nimport {components} from '~/weaverse/components';\nimport {themeSchema} from '~/weaverse/schema';\n\nexport function createWeaverseClient(args: WeaverseClientArgs) {\n return new WeaverseClient({\n ...args,\n themeSchema,\n components,\n });\n}\n\nexport function getWeaverseCsp(request: Request) {\n const url = new URL(request.url);\n // Get weaverse host from query params\n const localDirectives =\n process.env.NODE_ENV === 'development'\n ? ['localhost:*', 'ws://localhost:*', 'ws://127.0.0.1:*']\n : [];\n const weaverseHost = url.searchParams.get('weaverseHost');\n const weaverseHosts = ['weaverse.io', '*.weaverse.io'];\n if (weaverseHost) {\n weaverseHosts.push(weaverseHost);\n }\n return {\n frameAncestors: weaverseHosts,\n defaultSrc: [\n \"'self'\",\n 'cdn.shopify.com',\n 'shopify.com',\n ...localDirectives,\n ...weaverseHosts,\n ],\n imgSrc: [\n \"'self'\",\n 'data:',\n 'cdn.shopify.com',\n ...localDirectives,\n ...weaverseHosts,\n ],\n styleSrc: [\n \"'self'\",\n \"'unsafe-inline'\",\n 'cdn.shopify.com',\n ...localDirectives,\n ...weaverseHosts,\n ],\n connectSrc: [\n \"'self'\",\n 'https://monorail-edge.shopifysvc.com',\n ...localDirectives,\n ...weaverseHosts,\n ],\n };\n}\n\nIn this file, you’ll include:\n\ncreateWeaverseClient: For interacting with the Weaverse API.\n\ngetWeaverseCsp: For managing content security policies, ensuring your app adheres to best practices in web security.\n\n\nStep 4: Render Weaverse Content\nAdd a weaverse/index.tsx file to render Weaverse content. This file acts as a bridge between your Shopify Hydrogen project and the dynamic content managed through Weaverse.\n// weaverse/index.tsx\n\nimport {WeaverseHydrogenRoot} from '@weaverse/hydrogen';\nimport {components} from './components';\n\nexport function WeaverseContent() {\n return ;\n}\n\nCompleting the Integration\nOnce you've set up the necessary files, it's time to fully integrate Weaverse into your Hydrogen project:\nIntegrating weaverse in Remix's Global Context\nIn your server.ts file, incorporate weaverse into Remix's global context. This is done by defining weaverse in the fetch handler of Remix, ensuring it's accessible throughout your application. This step is crucial for making sure Weaverse functions correctly within your project.\n// server.ts\n\n// ...\nimport {createWeaverseClient} from '~/weaverse/weaverse.server';\n// ...\n\n/**\n* Create Hydrogen's Storefront client.\n*/\nconst {storefront} = createStorefrontClient({/** ... */ });\n\nconst weaverse = createWeaverseClient({\n storefront,\n request,\n env,\n cache,\n waitUntil,\n});\n\n\n\n/**\n* Create a Remix request handler and pass\n* Hydrogen's Storefront client to the loader context.\n*/\nconst handleRequest = createRequestHandler({\n build: remixBuild,\n mode: process.env.NODE_ENV,\n getLoadContext: () => ({\n session,\n storefront,\n cart,\n env,\n waitUntil,\n weaverse, // add weaverse to Remix loader context\n }),\n});\n\nTypeScript Error Handling: If you encounter a TypeScript error like TS2739, indicating that Type Env is missing properties from type HydrogenThemeEnv, don't panic. Simply add the missing properties to HydrogenThemeEnv in your remix.env.d.ts file. This step ensures your TypeScript environment recognizes the new Weaverse elements.\ndeclare global {\n\n /** ... */\n\n /**\n * Declare expected Env parameter in fetch handler.\n */\n interface Env {\n\n /** ... */\n\n WEAVERSE_PROJECT_ID: string;\n WEAVERSE_API_KEY: string;\n }\n}\n\nAlso, define weaverse in the AppLoadContext interface to ensure it's recognized as part of your application's context.\ndeclare module '@shopify/remix-oxygen' {\n /**\n * Declare local additions to the Remix loader context.\n */\n export interface AppLoadContext {\n env: Env;\n cart: HydrogenCart;\n storefront: Storefront;\n session: HydrogenSession;\n waitUntil: ExecutionContext['waitUntil'];\n\n weaverse: WeaverseClient;\n }\n\n /** ... */\n}\n\nImplementing getWeaverseCsp\nOpen your app/entry.server.tsx file and utilize the getWeaverseCsp function. This function is crucial for managing your content security policy, which is a key aspect of web application security.\n// app/entry.server.tsx\n\n// ...\nimport {getWeaverseCsp} from '~/weaverse/weaverse.server';\n// ...\n\nconst {nonce, header, NonceProvider} = createContentSecurityPolicy(\n getWeaverseCsp(request),\n);\n\nUpdating app/root.tsx for Weaverse Theme Settings\nIn the app/root.tsx file, add weaverseTheme data to the loader function’s return value. This addition is vital for enabling Weaverse theme settings within your application.\n// app/root.tsx\n\nexport async function loader({context}: LoaderFunctionArgs) {\n\n /** ... */\n\n return defer(\n {\n /** ... */\n weaverseTheme: await context.weaverse.loadThemeSettings(),\n /** ... */\n },\n {headers},\n );\n}\n\nNext, wrap your App component with the withWeaverse function. This wrapping is necessary because withWeaverse provides your App component with the Global Theme Settings Provider that you can use everywhere from the App context.\nfunction App() {\n const nonce = useNonce();\n const data = useLoaderData();\n\n return (\n \n /** ... */\n \n );\n}\n\nexport default withWeaverse(App);\n\nHandling Remix Routes for WeaverseContent\nFor rendering WeaverseContent on routes, include weaverseData in the return result of the loader function. This ensures that the dynamic content from Weaverse is properly loaded and displayed on each route.\n// app/routes/_index.tsx\n\n/** ... */\n\nimport {WeaverseContent} from '~/weaverse';\n\n\nexport async function loader({context}: LoaderFunctionArgs) {\n const {storefront} = context;\n const recommendedProducts = await storefront.query(\n RECOMMENDED_PRODUCTS_QUERY,\n );\n /** ... */\n return defer({\n recommendedProducts,\n weaverseData: await context.weaverse.loadPage(),\n });\n}\n\nexport default function Homepage() {\n return (\n

\n \n

\n );\n}\n\nIn your route components, explicitly render WeaverseContent. This direct rendering allows for the customized content to be displayed as intended.\nMigrating Components to Weaverse\nBegin migrating your default components to Weaverse Components. This migration will enable these components to utilize the dynamic customization features provided by Weaverse.\nConnecting to Weaverse CMS\nEnsure the Weaverse Hydrogen app is installed in your Shopify store. Create a storefront, copy the Weaverse Project ID, and add it to your Hydrogen project's .env file. This step connects your project with the Weaverse CMS.\n\nNow start the development server and update the Preview URL in Weaverse Project settings. By default, our Weaverse projects are set to http://localhost:3456.\n# .env\n\nSESSION_SECRET=\"foobar\"\nPUBLIC_STORE_DOMAIN=\"mock.shop\"\nWEAVERSE_PROJECT_ID=\"your-project-id-here\"\n\nOnce saved, you should see your Hydrogen page loaded in Weaverse Studio.\nCustomizing Sections with Weaverse\nBegin by creating a recommended-products.tsx file in the app/sections folder. Adapt the original RecommendedProducts component to a forwardRef component. This adaptation allows Weaverse Studio to identify and edit the component more easily.\n// app/sections/recommended-products.tsx\n\nimport {forwardRef} from 'react';\nimport {Link, useLoaderData} from '@remix-run/react';\nimport {Image, Money} from '@shopify/hydrogen';\n\nconst RecommendedProducts = forwardRef(\n ({productsCount}, ref) => {\n const {\n recommendedProducts: {products},\n } = useLoaderData();\n const displayProducts = products.nodes.slice(0, productsCount);\n return (\n

Recommended Products

\n {displayProducts.map((product: any) => (\n \n \n

{product.title}

\n \n \n \n \n ))}\n

\n
\n

\n );\n },\n);\n\nexport default RecommendedProducts;\n\nexport const schema = {\n type: 'recommended-products',\n title: 'Recommended products',\n inspector: [\n {\n group: 'Settings',\n inputs: [\n {\n type: 'range',\n name: 'productsCount',\n label: 'Number of products',\n defaultValue: 4,\n configs: {\n min: 1,\n max: 12,\n step: 1,\n },\n },\n ],\n },\n ],\n};\n\nAnd the result:\n\nThat concludes our basic tutorial on integrating Weaverse with your Shopify Hydrogen project. Keep an eye out for our next blog, where we'll delve into more advanced features like using schema, loaders in Weaverse Components.\nReferences:\n\nDemo repository: https://github.com/Weaverse/Naturelle\n\nDocumentation: https://weaverse.io/docs/migration/8384952-migrating-hydrogen-project-to-weaverse\n\n\n",{"_78":79},{"_82":382},"https://cdn.hashnode.com/res/hashnode/image/stock/unsplash/Hcfwew744z4/upload/87e91022184e4b7cbf3667d6ff4be71e.jpeg",{"_68":254,"_78":255},{"_60":385},{"_62":386,"_64":387,"_66":388,"_68":389,"_70":390,"_72":391,"_76":393,"_80":394,"_84":396},"65c242755fd09fb3ba358766","2023-12-04T17:00:00.000Z","Weaverse Weekly #2: Good founders know when to start. Great founders know when to quit.","weaverse-weekly-2-good-founders-know-when-to-start-great-founders-know-when-to-quit",6,{"_74":392},"Hello hello, welcome back to another edition of Weaverse Weekly.\nHow 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!\nOh and in case you haven’t heard, here are some interesting stats about our BFCM season this year:\n\nTotal GMV was $4.1B up by 22% from last year.\n\nPeak sales per minute: $4.2 million at 12:01 PM EST on Nov. 24.\n\nHottest product categories: apparel and accessories, health and beauty, and home and garden.\n\nAverage cart price: $108.12 ($107.53 on a constant currency basis).\n\nCross-border orders represented 15% of all global orders.\n\n17,500+ entrepreneurs made their first sale on Shopify.\n\nMore than 55,000 merchants had their highest-selling day ever on Shopify.\n\n\nBut 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!\nRead on!\nDeploying your Shopify Hydrogen to Weaverse, without touching code\n[No-code speedrun]: Deploy the Shopify Hydrogen project to Vercel and customize it with Weaverse.\nhttps://www.youtube.com/watch?v=gCKq5dB95uw\n \nThe Best Writing About Headless, WebDev, and Everything In Between\n\nHot Take: B2B is the biggest commerce opportunity of 2024, by Bobby Morrison, Chief Revenue Officer at Shopify\n\nHow developers fight for users, by Coding Horror\n\nReact Server Components on the Remix roadmap, by Ryan Florence - Co-founder at Remix\n\nGuide to fast websites with Next.js, by Seif Ghezala - Co-founder at Tinloof\n\nSo you want to become a Hydrogen Developer?\n\nThe best Shopify Headless storefronts to learn from - by me!\n\n\nGood founders know when to start. Great founders know when to quit.\nIn 2008, Stewart Butterfield - Flickr’s co-founder, left Yahoo after selling Flickr to Yahoo for $25M just one year earlier.\nHe 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.\nThe problem? It had trouble monetizing.\nTheir 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.\nAnd 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.\nYet, 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.\n“Wait, what does this have to do with a newsletter on Shopify and Headless?” - you asked.\nWe’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.\nShopify App Market is hyper-competitive\nMerchants’ 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.\nJust like what Stewart did.\nStewart 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.\nSo there he went.\nWhen 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.\nOn 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.\nThe rest, as you know, is history.\nOut 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:\n\nThey 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?”\n\nThey compare that expected value with the expected value of all other possible options.\n\nBecause time, attention, and money are limited resources, if they figure out that another path carries a higher expected value, then they will switch lanes.\n\n\nHere’s another useful heuristic that Ron Conway - founder of SV Angel - used at his VC to help founders get better at quitting:\n\nHe asks them what success would look like over the next few months.\n\nHe 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.\n\nAfter an agreed period, he revisits those benchmarks with founders and, if the venture is falling short, thinks about shutting it down.\n\n\nWhat 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.\nAs 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.\nIt’s informed venturing.\n\nThat's all for this week :) See you next year, I guess.\nIf you like Weaverse Weekly, tag someone you know who would like this, I'd really appreciate it!\n",{"_78":79},{"_82":395},"https://cdn.hashnode.com/res/hashnode/image/stock/unsplash/VwsuhJ9uee4/upload/83a3d902aa598b65f9f0329092740876.jpeg",{"_68":98,"_78":99},{"_60":398},{"_62":399,"_64":400,"_66":401,"_68":402,"_70":71,"_72":403,"_76":405,"_80":406,"_84":-5},"655f5d4bd7b7c19a1795b805","2023-11-23T14:10:19.289Z","Weaverse Weekly #1: What Makes The Best Shopify Developer?","what-makes-the-best-shopify-developer",{"_74":404},"Hello hello,\nWelcome to the first edition of my newsletter, Weaverse Weekly, where I share with you what I learned every week in the world of Shopify and WebDev and everything in between.\nIf you’re a talented busy developer, I’m confident you’ll love this. I don’t send vendor fluff, pointless jargon, or shameless plugs. Here’s what you can expect:\n\nEach newsletter will include one thinkpiece I've written, along with links to articles, resources, and practical tips on the modern practice of headless commerce and Webdev.\n\nThe newest updates in the world of React, Remix and NextJS, hot off the press. You’ll get the latest scoop, the juiciest discussion, and the funniest memes (this I can promise!)\n\nAnd occasionally, updates about Weaverse itself.\n\n\nNow, let’s dive in.\nThe Best Writing About Headless, WebDev, and Everything In Between\nIn the same way, Leo Tolstoy said “All happy families are alike; each unhappy family is unhappy in its own way”, I said “All good headless builds are alike, each bad headless build is bad in its own way”.\nIt’s true, there are almost as many ways you can f*ck up your headless implementation as how you implement headless correctly. This is why learning - not just about headless, but web dev in general, is important, and here is what I read this week:\n\nWhy I won’t use NextJS, written by Kent C. Dodds\n\nA circle of web performance innovation, written by Stoyan Stefanov\n\nThe complete guide for choosing between headless (Hydrogen) and Online Store 2.0 (Liquid) on Shopify, written by Adan S at Lazert Technologies\n\nAn overview of Shopify Hydrogen, written by me.\n\n\nThe Goldilocks Zone For Shopify Developers\nHow do the best Shopify developer become the best?\nWe all worked with formidable prowess. They know everything. They grok everything with ease. They do everything effortlessly. How do they do that? Luck? Pure Talent? A cybernetically enhanced brain?\nAs I progressed as a Shopify developer, and now a CTO, I realized the trick is quite simple. Most competent developers intuitively adopt this approach - and the more you’re aware of this, the faster you advance - it was the Goldilocks Rule.\nWhen learning or training for something new, you grow the most when the task is at the edge of your abilities.\n\nTake a throwaway example: Imagine you play football for fun, like me. Now imagine 02 scenarios:\n\nIn the first scenario, you’re playing against your co-worker in marketing, who, god forbid, never touched a ball in his life. He misses easy passes. He doesn’t know how to position himself on the field. He can’t tell if you’re going to pass or shoot. His attempts at tackling are clumsy and he often misses the ball.\n\nScenario two, you’re playing against Lionel Messi, one of the world’s best football players, a six-time Golden Shoe winner. This time, though, you look like the complete dumbass. You can hardly keep up with his dribbling even though you recognize his moves. You play full-on defense hoping that he’ll make a mistake. and Lionel Messi doesn’t make mistakes.\n\n\nWho should you play against?\nThe right answer is neither.\nYou’ll be bored to death in both games. One is too easy, and the other is just too hard — so hard that you’ll give up. The right choice is to compete with someone who is just a bit better than you. You win some, you lose some, but you learn fast, and grow fast.\nSimilarly, as a developer, you want to pick up tasks that are not too hard, but not too easy. You want to pick up tasks that are right in your Goldilocks zone, slightly more than your current abilities, but doable. You believe can handle it, with a bit of focus, training, and experimentation. And when you believe you can get there, you’re motivated to get there, fast.\nAnd I’m not talking about technical skills ALONE either. You have also to consider the business side of things. The Goldilocks Zone should have both. If you’re well-versed in Liquid, consider taking tasks that either help you understand your end users more - like customer interviews or help you learn more about more complex implementations like Headless/Hydrogen builds.\n\n💡\nIn case you also want to be the best Shopify Hydrogen developer, check out this article.\n\n\nWeaverse is launching on Product Hunt\nWe’re launching Weaverse publicly on Product Hunt!\nMy team and I have been gearing up for this launch for quite a while now. We talked to merchants, founders, and partners to make sure what we’re building would bring impact. With Weaverse, we hope that we can make building with Hydrogen just as simple as using Native Shopify:\n\nShopify developers use Weaverse SDKs to build reusable, customizable Hydrogen themes, and share them with merchants for code-free editing.\n\nReusing pre-built content sections, merchants can set up headless sites and make new changes on the fly. Better yet, Weaverse is section-based, just like Online Store 2.0, which keeps the learning curve low and makes Headless even more accessible for end users.\n\n\nIf you’re interested, please comment with a 🚀 and I’ll DM you the launch link once it’s live. And if you’re really, really interested, help me spread the word :)\n\n",{"_78":79},{"_82":407},"https://cdn.hashnode.com/res/hashnode/image/stock/unsplash/L0o1RfQuPUY/upload/2c6c4db05865417e62db0d9630a2561b.jpeg",{"_60":409},{"_62":410,"_64":411,"_66":412,"_68":413,"_70":274,"_72":414,"_76":416,"_80":417,"_84":-5},"655f5bdf77f62eeeb03be015","2023-11-23T14:04:15.882Z","Back To Online Store 2.0, Should You?","back-to-online-store-20",{"_74":415},"In 2015, all we talked about was going headless. Fast forward to 2023, all we talk about is going back to Online Store 2.0.\nGoing back to OS is a logical choice for many use cases. However, you don’t simply go back from Headless to OS. Just like you don’t simply find a solution first, and then a problem later.\nDon’t get me wrong, hashtag#backtoOS has its merits.\nHeadless used to be hard and expensive. In the past, it came with a huge tradeoff: You have a performant, flexible, content-rich storefront, but you also have to bear a hefty server expense. For instance, deploying on Next Commerce meant using Vercel, and the costs escalated rapidly as you scale. Additionally, the monthly charges for headless CMSs like Sanity or Contentful were not budget-friendly, at all.\nGoing back to OS made even more sense when Shopify rolled out a horde of powerful features like Section Everywhere, Native Metafields definition, and metaobjects.\nMaking a content-rich Shopify store is suddenly easier. You don’t need to go headless unless you have really niche requirements, or you prioritize speed like no one else. You also save a fortune on server hosting and maintenance because Shopify Oxygen does this for free. Section Everywhere can do what most headless CMS can do when combined with metaobjects and meta fields. So you save another fortune. More importantly, merchants now have theme customize to manage content.\nThere seems to be no reason not to go back to OS 2.0.\nBut it’s not that easy. Staying on OS is easy. Staying on OS is likely a good choice, but that doesn’t mean going back from headless is also a good choice. The migration process is especially burdensome for Plus merchants with a huge amount of content. Converting from React to Liquid also equals clipping the Product team’s wings: They are used to balance creativity with optimal performance, and now they have to choose one. Going back from headless to OS meant a momentous shift in workflow, architecture, and team collaboration. It takes time, effort and resources. It’s never the no-brainer as the trend portrays.\nIf you want to move back to OS, but without bearing the cost, what do you do?\nShameless plug here: This is a problem I thought about a lot before building Weaverse, and now I really believe merchants can ripe the benefits from both worlds, by using Weaverse with Shopify Hydrogen and Oxygen.\n\nWith Weaverse, you have a theme customizer that works just like OS 2.0. Same effort, but with superior output, you have a Hydrogen storefront that’s lightning-fast and versatile.\n\nYou can also define Section Schema just like Liquid, making Weaverse friendly to developers who eat and sleep Liquid.\n\nMigration from React to React is more straightforward and cost-effective than from React to Liquid. - Deployment to Oxygen is free. Plus, when you use Weaverse, you no longer have to bear the financial burden of server expenses and headless CMS tools.\n Of course, even this solution is not a silver bullet. Every solution means you give up some to gain some, but sometimes it might be best to opt for the one with the least amount of trade-off. :)\n\n\n",{"_78":79},{"_82":418},"https://cdn.hashnode.com/res/hashnode/image/stock/unsplash/J59wWPn09BE/upload/c9fd440333b150d85da995664969dea9.jpeg",{"_60":420},{"_62":421,"_64":422,"_66":423,"_68":424,"_70":274,"_72":425,"_76":427,"_80":428,"_84":430},"651d887e9a7ae478d37c0faa","2023-10-04T15:45:02.580Z","Shopify Hydrogen vs. Online Store 2.0: A Case Study","hydrogen-vs-online-store-20",{"_74":426},"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.\n\nIf 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.\nAnd it creeps in fast.\nOne 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.\nIn short, it’s hard to quash conflicts when using OS 2.0, so app sprawling leads to code extravagance and a turtle-paced website.\n\nYou 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.\nOr until you use Hydrogen.\nHydrogen 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.\nI 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.\nhttps://youtu.be/aQZdQ17kF1U\n \nP/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.\n\n",{"_78":79},{"_82":429},"https://cdn.hashnode.com/res/hashnode/image/stock/unsplash/iYoAPaSPBKI/upload/7ebe7f8878cba35954c60b1e97eb7e48.jpeg",{"_68":98,"_78":99},{"_60":432},{"_62":433,"_64":434,"_66":435,"_68":436,"_70":333,"_72":437,"_76":439,"_80":440,"_84":-5},"6512f53ff8b3006cdc6a81c8","2023-09-11T17:00:00.000Z","Weaverse, The First Theme Customizer for Shopify Hydrogen, is now available for the Vanguards.","theme-customizer-for-shopify-hydrogen",{"_74":438},"Weaverse is undergoing a paradigm-shifting evolution: We have reimagined our eCommerce solution to provide Shopify merchants with Weaverse Hydrogen - the Very First Theme Customizer for Hydrogen storefronts, purposefully designed to help you take your Shopify store headless.\nWhy Weaverse?\nHeadless commerce isn't just a buzzword.\nHeadless allows merchants to have richer merchandising, more personalization, sub-second page loads, design flexibility, and full creative freedom to build a bespoke e-commerce experience at every customer touch-point. Buzzwords come and go, but headless, and everything great about it, is here to stay. Shopify knows this more than anyone:\n\nIn early 2023, Shopify acquired Remix with the strategic aim of revamping Hydrogen - Shopify’s framework for building custom headless storefronts.\n\nIn Shopify Winter Edition’ 23, Shopify announced that Oxygen - a serverless hosting platform designed to enable easy deployment of Hydrogen storefronts - will be available on all plans except Starter & Development, providing lightning-fast, globally available storefronts that seamlessly integrate with the Shopify ecosystem\n\n\nHydrogen is nowhere as accessible as Shopify themes. Even with Hydrogen, implementing a headless architecture is still hard and expensive. You need a deep pocket. You need engineering power to build and maintain such infrastructure.\nWe also have to acknowledge the caveat that most Shopify merchants don’t need Headless Commerce. You need to focus on what makes your beer taste better. You start small and simple. You solve your customer’s problems. You make them happy. You make your cash register sing. That’s all that matters.\nBut what if it’s not enough? Chances are you’ll go against industry titans - competitors with the benefit of scale. While your products may be better, they could boast greater brand recognition, substantial marketing resources, and better acquisition capabilities. In such battles, every win counts.\nWhat if you can gain an upper hand with a superior eCommerce experience?\nWhat if building a headless store becomes easier and cheaper? What if having a performant, pixel-perfect storefront is just as easy as making a new website from a free theme?\nThose are no longer rhetorical questions.\nWith Weaverse, we built a visual editor on top of Hydrogen and enriched it with pre-made Hydrogen themes. Merchants can do what they have always done: drag, drop, design, publish - but instead of having a vanilla website, they get headless storefronts that are lightning-fast, content-rich, and unforgettable.\n\n\"Going Headless\" Meant Weaverse\nWhat Is Weaverse?\nImagine Online Store 2.0 but for Shopify Hydrogen.\nHow Does Weaverse Work?\nUsing Weaverse theme customizer and pre-made templates, developers can cut down development work and deliver Hydrogen storefronts with speed. Once set up, merchants have a native tool to manage store content without nagging developers for help.\nAnd here's the cool part: Not only did we make Weaverse look like Online Store 2.0, but we also integrated the Liquid section creation flow into the Remix framework with our Hydrogen SDKs. Developers can define sections in React, customize them with the Section Schema, and dynamically render with the loader, which means you can fetch data from any source like products, collections, meta fields, meta objects, and more. Plus, it's backed by the native server-side render and streaming render power of Remix.\nWant to take it for a spin? Check out our playground.\n\nHow Much Does Weaverse Cost?\nDuring this beta phase, it's on the house. You can use Weaverse for free for local development.\nAfter conducting thorough research, we have examined similar solutions offered by our competitors to ensure that we provide a cost-effective solution. However, we have found that there are no real competitors with true Hydrogen integration as they merely claim to offer it and charge exorbitant fees. Our objective is to deliver superior value, potentially at a fraction of that cost.\nWhat's next for Weaverse?\nThe future is exciting for us:\n\nWe plan to update and refine our documentation and tutorials to make sure you can quickly put Weaverse to its full power.\n\nWe're forging partnerships with Shopify apps and partners to give our users more add-ons and more components.\n\nOur Weaverse SDKs are being primed for 3rd app integration, ensuring Shopify app partners can transition into Hydrogen seamlessly.\n\n\nGetting Started\n🔥 Weaverse is now officially listed in the Shopify App collection for \"Apps that extend your Hydrogen build\"! To get started, all you need to do is install the app and then follow the tutorial in the app onboarding.\nGive it a try, and let me know what you think. :)\n\n",{"_78":79},{"_82":441},"https://cdn.hashnode.com/res/hashnode/image/stock/unsplash/5WQJ_ejZ7y8/upload/5a568654862bd927ba902d1983d8b051.jpeg",{"_60":443},{"_62":444,"_64":445,"_66":446,"_68":447,"_70":178,"_72":448,"_76":450,"_80":451,"_84":-5},"6498f9075d2c0da1c8993c7d","2023-06-26T02:33:43.436Z","The Ultimate Shopify Hydrogen Theme For Headless Websites","shopify-hydrogen-owen-theme",{"_74":449},"\n💡\nThis is a guest post by TrueStorefront team.\n\n\nShopify is one of the most powerful platforms in the e-commerce landscape. As the demand for headless commerce continues to grow, choosing the right theme becomes crucial for unlocking the full potential of your Shopify store.\nSo, look no further! Discover how the OWEN theme empowers you to create visually stunning, high-performing, and customizable headless commerce experiences that leave a lasting impression on your customers.\nI. Overview\n1.1. Peek behind the curtain about Shopify\nIn the world of e-commerce, Shopify has emerged as a leading platform, providing entrepreneurs and businesses with a robust and user-friendly solution to launch and manage online stores. With its extensive range of features, flexibility, and scalability, Shopify has become a go-first choice for merchants of all sizes, especially SMEs.\nAccording to the statistics of Store Leads, there are over 2 million live stores running on Shopify, increasing 14.9% quarter-over-quarter in 2023 Q1. In addition, this platform is used by online businesses in over 170+ countries worldwide. These numbers show the fact that Shopify is one of the most popular e-commerce platforms at present.\n1.2. Hydrogen - Shopify’s answer for headless websites?\nAs the demand for headless commerce grows, the need for specialized themes that cater to this unique approach becomes crucial. This is where Shopify Hydrogen themes come into play. Announced at Shopify Unites 2021, Hydrogen is a powerful React-based framework for headless Commerce, specifically crafted to empower businesses with complete control over their customer-facing websites and front-end experiences.\nTechnically speaking, Hydrogen encompasses a range of tools, utilities, and ready-to-use examples that streamline the process for web engineering teams, enabling them to swiftly launch headless commerce storefronts on the Shopify platform\nVenturing into the headless realm brings immense advantages and robustness, but it also reintroduces challenges. Suddenly, you find yourself in need of substantial development resources to upkeep headless storefronts.\nSo, what do you need to do?\nII. Introducing OWEN theme - best theme in town for Shopify headless site\nIn the realm of Shopify headless commerce, choosing the perfect theme for your online store is of paramount importance. The theme you choose will shape the entire user experience, define the visual aesthetics, and influence the performance and functionality of your website.\nIn order to tailor the user experience, enhance performance, scalability, responsive design and more key reasons, choosing the appropriate theme for your Shopify headless commerce is absolutely essential.\n\n💡\nLooking for similar Hydrogen demo store to TrueStorefront, check out this blog post. \n\n\n \n2.1. What is the OWEN theme?\nIs it incredible to assure that Shopify Hydrogen OWEN theme stands out as the ultimate choice for Shopify headless site? Say hello to OWEN theme means say goodbye to slow loading times and hello to a seamless experience with this empowering theme!\nIts advanced optimization techniques and lightning-fast loading speed allow your website to run at peak performance, maximizing user engagement and driving conversions.\nShopify Hydrogen Owen theme incorporates a robust technical stack that empowers developers to create exceptional Shopify headless commerce experiences:\n\nNode.JS version 16 or higher\n\nNPM version 7 or greater\n\nRemix.run\n\nTypescript\n\nTailwind CSS\n\nSanity Content Builder\n\nStrapi Content Builder\n\n\n\nAs a result, with these comprehensive technical stacks, Shopify Hydrogen OWEN theme ensures a solid foundation for building high-performing and customizable Shopify headless commerce stores with Owen theme.\n2.2. Shopify Hydrogen OWEN Theme live demo\nLet’s dive into the live demo of OWEN them in action with headless CMS such as Sanity Studio, Strapi Content Builder, and Algolia Search.\nExplore the live demo to witness how the Shopify Hydrogen OWEN theme brings the best of content management, data administration, and search capabilities, empowering you to create an unparalleled Shopify headless commerce experience for your customers.\n\nShopify Hydrogen OWEN theme’s integrate with Sanity, an advanced content management system, allowing you to effortlessly create and manage your website's content, ensuring a dynamic and engaging user experience. (Check out live demo | Hydrogen With Sanity)\n\nWith Strapi, a powerful headless CMS, the OWEN theme offers a user-friendly interface for managing your data and providing a scalable backend solution. (Check out live demo | Hydrogen With Strapi)\n\nOWEN theme's integration with Algolia, a robust search platform, enables lightning-fast search functionality, delivering accurate and relevant results to your customers. (Check out live demo | Hydrogen With Algolia)\n\n\nIII. Key highlight features of OWEN theme\nShopify Hydrogen OWEN theme offers a range of impressive features and benefits that make it the ultimate choice for Shopify headless commerce. Besides several general features including incredible UX/UI, maximum customizability, SEO-friendly, fully responsive, and support multi-language & currencies, OWEN theme also presents numerous other awesome core features.\nPowerful Mega Menu: Replace the basic and simple menu with a dynamic and informative “Mega Menu”.\nPage Builder: With Sanity Page Builder, it helps you create your dream store in the fastest way possible.\n\nMulti Layout: This Shopify Hydrogen OWEN theme supports multi layout for a storefront, which changes it easily via settings.\nCollection Filters & Showcase: OWEN theme offers awesome components for collection filters, easy to show products on the storefront with icon, name, link of collection/category.\n\nBanner Slider & Grid: This theme framework supports Banner Slider Component which is easy to set up, and helps you show promotion banners for storefronts.\nVideo Background: The OWEN theme includes empowering video background components for storefronts.\nMoreover, the Shopify Hydrogen OWEN theme brings advanced site settings, multi-layout, integrated social media sharing, a seamless checkout process, comprehensive documentation and support, and continuous updates and improvements to ensure your store stays at the forefront of innovation.\nIV. How to install and integrate OWEN theme?\nAs a result of the ultimate core features, let’s explore how to download and install Shopify Hydrogen OWEN theme in the step-by-step guide below.\n4.1. Install and integrate with Sanity\nStep 1: Download the latest theme file\nAfter you complete the purchase, you would see the download package displayed in the My Account / Downloads section.\nStep 2: Set up Sanity Studio for CMS\nIn this step, you need to extract owen-sanity-studio.zip and update environment variables in sanity.config.ts and sanity.cli.ts*.*\nAfter installing your Sanity Studio, continue installing the Sanity app to synchronize products and collections to your Sanity project.\nStep 3: Install the OWEN theme\nFollow this guide as below to install Shopify Hydrogen OWEN theme:\n\nChange environment variables in .env file\n\nChange other variables in general.config.ts file\n\n\nAnd finally, you have installed the OWEN theme on the development server successfully!\n4.2. Install and integrate with Strapi\nStep 1: Create a Shopify custom application (to sync Shopify collections and products with Strapi)\n\nIn Shopify Admin, go to Apps → App and sales channel settings → Develop apps → Create an app → Fill the App name → Click Create app button.\n\nChoose API credentials tab\n\nIn the Access tokens choose Configure Admin API scopes option, and choose permission for custom app\n\nScroll down and choose Save, then Click Install App\n\nClick Reveal token once and save it somewhere secure because you can only view it once\n\n\nStep 2: Update config for Strapi\nIn this step, extract the owen-strapi-cms.zip file.\nThen, edit database/shopify.js then change your store link and ACCESS_TOKEN that you have created in the above step.\nStep 3: Deploy Strapi CMS to your server\nNext, you need to deploy Strapi CMS to your server to provide the best possible environment.\nStep 4: Grant all Permissions for Public Roles\n\nStep 5: Update Strapi variables for Owen Hydrogen Theme\nIn the root folder of Owen Hydrogen Theme, edit general.config.ts file and store Strapi variables.\nCompleting this step and you have successfully installed the Strapi CMS and integrated it with the Shopify Hydrogen OWEN theme.\nV. Weaverse Builder - The First Theme Customizer for Shopify Headless Themes.\nImagine OS 2.0, but for Headless, Hydrogen-powered Storefronts.\nWith Weaverse, Shopify developers build and curate reusable Hydrogen themes, then share them with non-technical users. Everyone builds their own headless Hydrogen-powered storefronts that are lightning-fast, performant, and highly customizable without writing code.\nHere’s a sneak peek.\n\nFor non-technical users, Weaverse brought in the familiar section-based page-building experience they had with the current Shopify Customizer. Add section. Edit text. Add image. Customize. then Publish.\nThe best thing about Weaverse is that merchants can keep doing what they’ve been doing, but instead of a normal Liquid-based Shopify store, they got a blazing-fast Hydrogen storefront bursting with possibilities: HD video dancing in the background, sleek animation enlivening every corner, or uniquely story-driven product page design - they’re all within reach.\nAnd by providing Shopify developers with a trove of pre-built components, pre-made Hydrogen themes, and a Theme Customizer, Weaverse enables developers to shorten development time and quickly overcome the technical complexity of building a Hydrogen storefront from scratch.\nHowever, Weaverse is currently in private beta and will be open to the public soon. If you aspire to remain at the forefront of the latest trends and stay ahead of the curve, follow them on LinkedIn or sign up for early interest.\nVI. Conclusion\nIn conclusion, Shopify Hydrogen OWEN theme emerges as a game-changer in the realm of Shopify headless commerce. With its superb code performance, incredible UX/UI, maximum customizability, and support for multi-integration, OWEN theme equips you with the tools to create truly exceptional online stores.\nIts responsiveness, SEO-friendliness, and support for multiple languages and currencies further enhance its versatility and appeal. Whether you're a small business, a growing enterprise, or an established brand, OWEN theme offers a range of pricing plans to suit your needs.\nEmbrace the power of OWEN and elevate your Shopify headless commerce venture to new heights of success. Do not hesitate to experience the future of e-commerce with OWEN theme and revolutionize the way you engage with your customers today!\n",{"_78":79},{"_82":452},"https://cdn.hashnode.com/res/hashnode/image/stock/unsplash/Tl8mDaue_II/upload/c306d536c90cf5582190f7a87e4ac634.jpeg",{"_60":454},{"_62":455,"_64":456,"_66":457,"_68":458,"_70":71,"_72":459,"_76":461,"_80":462,"_84":-5},"64545ba9fa9bc41baed1e120","2023-05-05T01:28:09.402Z","Death By A Thousand Cancelled Orders","death-by-a-thousand-cancelled-orders",{"_74":460},"Forget sales and marketing. In 2023, supply chain challenges might be the death of many Shopify brands - as 66% of surveyed brands said they are bracing themselves for major logistics hiccups in the near future. (According to Shopify’s 2023 Commerce Report.)\n\nAnd not a single one of them is a Debbie Downer, Shopify merchants are getting a lot of things working against them here. Accelerated climate-change events, drawn-out pandemic impacts, escalating trade tensions, and cyber-attacks are all putting a significant dent in our production and logistics capacity - making it an uphill battle to meet customer demand and expectations. Production times lag, shipping times drag on, and inventory management becomes a Herculean feat.\nIt doesn’t help that massive marketplaces have set unrealistic expectations for same-day delivery and easy returns that not even they can keep up with anymore.\nEven the big guys struggle, what are the chances for the Davids of eCom?\nHere’s How You Fight, Shopify Advised\nIn the same report, Shopify outlined a few ways to future-proof your logistics network, including:\n\nIncreasing inventory: Carrying more inventory is the most popular way to combat supply chain issues, with 8 out of 10 companies surveyed by McKinsey increasing their inventory in 2021. This makes it easier to meet customer demand, but it's important to strike a balance between cushioning inventory and overstocking. It’s also reported that brands that increase inventory holdings little by little (depending on cost, space, and demand) lower their risk of trapping funds in inventory they can't sell.\n\nDiversifying product sources: Creating a resilient supply chain means looking beyond low cost and high productivity. One-third of Shopify Plus merchants are diversifying their product sourcing by finding new suppliers or countries, while others are sourcing products closer to home.\n\nReducing return rates: Returns are a major source of loss for businesses. To minimize returns, companies need to provide a comprehensive pre-purchase experience - with detailed product descriptions, (real) customer reviews, and 360-degree views of each product to set the right customer expectations. Augmented reality is also becoming a viable option to bring products to life for customers and reduce return rates. Fewer returns mean happier buyers, less pollution from transportation and packaging, and less strain on a key aspect of supply chains: inventory management.\n\n\nBy taking these steps, brands can improve their inventory management, increase their resilience, and reduce losses from returns.\nBut it’s always easier said than done, I know.\nThe above advice might be harder to apply when you’re local businesses selling daily delights - restaurants, florists, bakeries - where cushioning inventory is much harder (florists can store more flowers, but they won't stay marketable for more than 02 days)\nand AR-augmented technology might not even move the needle (do people really need 360-degree views of a croissant before purchasing it?)\n\nHow exactly can you follow the above practices?\nTake a step back and scan the scene. Let our gaze wander and our mind keen. Then, we'll see that many of the most effective strategies for shipping and delivery might boil down to one thing, one thing only.\nCustomers Expectation Management Is The Key\nIf you’re a Shopify merchant, let's take a moment to flip the script and step into the shoes of an eager online shopper, eagerly awaiting the arrival of your coveted purchase.\nCan you recall the moments of frustration when reality failed to meet expectations?\n\nYour package finally arrived, only to reveal a product that was nothing like what you had seen online.\n\nOr maybe you endured a never-ending wait for shipping, far beyond the promised delivery date.\n\nAnd who hasn't experienced the agonizing uncertainty of not knowing where their package was or when it would arrive?\n\n\nAll of these mishaps stem from one source - mismanaged expectations. When the promises made by the seller don't align with the realities faced by the buyer, disappointment ensues.\nI'd argue that the gist of the above best practices is simple - set the right expectations, and keep the lines of communication open throughout the post-purchase journey.\nBy keeping this essential principle in mind, you'll discover a host of techniques to safeguard your delivery process from potential pitfalls. Think SMS notifications, real-time tracking updates, transparent shipping costs, return fee estimates, or even creative packaging - the possibilities are abundant.\nThe Shipping App For Local Business\nAnd again, managing customer expectations is much more challenging when it comes to local delivery: expectations are much higher - you have to deliver within hours, and returns often come as a loss to sellers - you don't often re-sell a returned bouquet (do you?)\nThis is where apps like DingDoong come in handy.\nDingDoong is a game-changer in the world of local delivery and pickup, offering a host of Delivery management features that will operate as your personal assistant to make sure deliveries are butter-smooth and expectations are well-managed.\n(Sounds like an overhyped plug? It's not, I guarantee. Look at these reviews, can't help but feel like DingDong is your friendly neighborhood super-deliveryman.)\n\nWith DingDoong's date picker, your customers will love the convenience of being able to choose the date and time that works best for them. No more waiting around for hours on end, hoping that their package will show up.\n\nYou can also set specific delivery rules for different sets of products, or set up lead times, cut-off times, and black-out dates to make sure customers have the right expectation for delivery.\nBut that's not all.\nWith DingDoong's newest feature (they shipped quite often!) - Group Order, you can let your customers shop with their friends, making the whole buying experience more fun and enjoyable.\n\nThis is how you stand out: By managing expectations like a diplomat and using tools like a craftsman.\n",{"_78":79},{"_82":463},"https://cdn.hashnode.com/res/hashnode/image/stock/unsplash/y_WDEY9e6mA/upload/1839738b9ad9c798e5949d62b6caa46d.jpeg",{"_60":465},{"_62":466,"_64":467,"_66":468,"_68":469,"_70":333,"_72":470,"_76":472,"_80":473,"_84":-5},"643518341348ed752ecc8411","2023-04-11T08:20:04.200Z","What If Elon Musk Were A Shopify Developer?","what-if-elon-musk-were-a-shopify-developer",{"_74":471},"What would Elon Musk and Aristotle do if they were Shopify developers?\nThe question is nonsensical. I know. What do Aristotle and Elon even have in common?\nThey used the same approach for problem-solving: first-principles thinking. This powerful mental model allows them to do 02 things:\n\nBreak down complex problems into their fundamental components of truth (first principles).\n\nReassemble the best solutions using these first principles.\n\n\nBut let's talk about Elon Musk. Hate him or love him, he is the embodiment of first-principle thinking.\nFor example, when faced with the problem of expensive building materials for rockets, Musk examined the core materials and discovered that their commodity value was just 2% of the typical rocket price. This realization led him to question conventional rocket production methods and establish SpaceX, where he could build cost-effective rockets from the ground up, applying first principles to redefine the space industry's limitations.\nIn Tim Urban’s The Cook and the Chef: Musk’s Secret Sauce series, Musk put it brilliantly: “It’s rare that people try to think of something on a first-principles basis.”\n\nThey’ll say, “We’ll do that because it’s always been done that way.” Or they’ll not do it because “Well, nobody’s ever done that, so it must not be good.” But that’s just a ridiculous way to think. You have to build up the reasoning from the ground up—from the first principles.\n\nSo what would he do if he were a Shopify developer?\nStart with a simple example. Let’s say you’re an in-house Shopify developer and the stakeholders want you to optimize the store performance for better load time.\nTo apply first-principles thinking, we would begin by breaking down the problem into its fundamental components to get a better understanding of the problem space:\n\nWhy is it a problem?\n\ni.e: Because fewer visitors were going to the checkout page.\n\n\nIs there any evidence/data point for that? Is there any issue that might be contributing to this drop-off? (Changes in marketing copy, discount campaigns ended, or change in the design of the product pages, etc)\n\nIs web speed optimization the best solution to the core problem?\n\n\nYou don’t want to waste your engineering effort on the wrong solution.\nLet’s say you’re aligned on the problem space. You start to dismantle the problem and you find several key issues contributing to the site's performance, such as server response time, image optimization, code efficiency, and third-party app integrations.\nThen you would want to examine each factor individually to understand its impact on the site's performance.\n\nServer response time: Investigate the hosting environment, server configuration, and content delivery network (CDN) setup.\n\nImage optimization: Evaluate image sizes, formats, and compression techniques.\n\nCode efficiency: Review HTML, CSS, and JavaScript code for redundancy, minification opportunities, and potential improvements.\n\nThird-party app integrations: Assess the performance impact of each app and explore alternatives or optimizations.\n\n\nNow you reassemble the problem with new insights.\nWith a deeper understanding of each component's role in the site's performance, the developer can devise more laser-focused solutions:\n\nServer response time: Upgrade to a better hosting environment, optimize server configurations, or utilize a more efficient CDN.\n\nImage optimization: Implement responsive images, use next-gen formats, and apply lossless compression techniques.\n\nCode efficiency: Refactor the codebase to remove redundancies, minify assets, and implement best practices for faster rendering.\n\nThird-party app integrations: Replace poorly performing apps with more efficient alternatives or work with the app developers to improve their performance impact.\n\n\nBy approaching a problem with first-principle thinking, you no longer sound like a IT service provider — you actively participate in the business conversation and converse like one. You became an equal business partner.\nAnd if you operate at this level long enough, people start to see you as a decision scientist, a thought partner, or an internal tech expert — one that helps them improve decision quality, and they’ll seek you out where the codes speak.\nAnd I think that’s where every good Shopify Developer should strive to become.\n\n💡\nIn case you also want to learn Shopify Hydrogen, check out this article.\n",{"_78":79},{"_82":474},"https://cdn.hashnode.com/res/hashnode/image/stock/unsplash/9X3DmoEM64k/upload/d79f7bfa21201228e4bf93b0a4469fb2.jpeg",{"_60":476},{"_62":477,"_64":478,"_66":479,"_68":480,"_70":481,"_72":482,"_76":484,"_80":485,"_84":-5},"63ed01e1380b8af941f026e1","2023-02-15T16:01:37.993Z","We're adding AI-powered features to our Shopify Section Builder. Get early access now.","ai-powered-features",1,{"_74":483},"Sign Up Here\n\nSince the birth of Weaverse, our North Star goal has stayed unchanged: To help eCommerce merchants slash away unnecessary page-building hassle so that you can focus on what you do best - making sales and building brands.\nHave to learn the rules of layout and columns and rows and whatnot to use a page builder? We removed that. You drag and drop like it's Powerpoint\n\nNow we tackle the next nuisance: Having to write hundreds of lines of product descriptions, sales pages, home pages, landing pages, or customer engagement emails.\nWe're bringing you a built-in AI assistant. No more tab switching and waiting for ChatGPT to load.\n\nWant to generate content for a sales page? Just enter a prompt.\nAnd we're not going to stop here. Next: Generate a design for an entire page with a prompt. Sounds exciting (and maybe too good to be true) - sign up for our waitlist now.\n",{"_78":79},{"_82":486},"https://cdn.hashnode.com/res/hashnode/image/stock/unsplash/5afenxnLDjs/upload/ea24df66d15b2874df8e7c084f726933.jpeg",{"_60":488},{"_62":489,"_64":490,"_66":491,"_68":492,"_70":274,"_72":493,"_76":495,"_80":496,"_84":-5},"63c0e15b0ec46575cf04d3d4","2023-01-13T04:43:07.903Z","Competitive Research Tactics You Can't Find On Google Search","competitive-research-tactics-you-cant-find-on-google-search",{"_74":494},"Clashing heads with competitors is unavoidable for every merchant. If you don’t have a competitor, chances are you didn’t do your research enough - or if you’re lucky, you’re the only player in the market.\nThe latter is a once-in-a-lifetime kind of thing - so you have a much better chance to win a subset of the market if you do competitive research right.\nHere are 05 tips to do better competitive research:\n1/ Reverse-engineer competitors' tactics.\nYou don’t want to copy everything your competitors do without understanding why a tactic works. What work for your competitor might not work for you. This is more of a heuristic than an actual, actionable tip - we’ll get to the tips now.\n2/ Sign up for their email list.\nLearn how they onboard their new customers, how they nurture prospects, which type of content they’re sending out, and how many touch-points they go for.\n3/ Go to Sparktoro.\nEnter your competitors’ websites or social accounts to get more insights into your target customers: Whom do they follow? Where do they usually hang out? What type of content are they interested in?\nMarketing is all about sending the right message to the right people, in the right place and at the right time. Sparktoro helped you a lot with the Time and Space :)\n\n4/ See an interesting pop-up, section, or functionality on your competitors’ website or marketing touch points?\nRight click → Select “Inspect”→ Ctrl+F or (Command + F) → Search for “javascript” - you’ll see the list of apps that are running behind your competitors’ websites.\nTake the Hiut Denim website as an example - you can see you’re using the following apps:\n\nGeolocation Recommendation\n\nSumo (likely for Pop-up)\n\nKlaviyo (likely for email marketing)\n\n\n\n5/ Go to Webarchive.com.\nAdd your competitors’ websites. Learn how their copy changed over time. Changes in copy might tell you about how they define their target customers, how they sell their products, and what they think their unique value propositions are.\nFor example, looking at the 2013 homepage of Dollar Shave Club - one of the leading Shopify brands - and comparing it with their 2018 homepage (when they first started vs when they were more established) - we can learn that:\n\nFor the manscape/grooming subscription business, pricing used to be a good differentiator (Dollar Shave Club emphasized how much customers could save up)\n \n\nWhen Dollar Shave Club was more popular and the market was more crowded, they shifted their positioning to product quality and personalization instead.\n \n\n\nYou need to know how they sell their products so that you can find another framing/positioning to sell yours differently. You don’t want to be a copycat - especially when going against a more established player.\n6/ Study your competitors’ customer reviews.\nSkip 05-star reviews and focus only on 03-star reviews, because that’s where the insights are. You might discover unaddressed pain points and hidden needs and use those to your advantage.\nFor example, if you’re selling earrings and you find that most 3-star reviews for your competitors’ earrings are about how it's too small, or it’s easy to fall off - the straps are too loose, or the color was off.\n\nOr if you’re selling cleaning paste and the 3-star reviews mention the unpleasant smell - despite its effectiveness.\nThis is where you swoop in and differentiate yourself:\nYou don’t just sell earrings - you sell beautiful earrings that don't fall off easily and are highly durable.\nYou don’t just sell cleaning paste - you sell scented cleaning paste that flood customers’ house with flowery fragrance after cleaning.\nThat's all for today - try these tactics yourselves and tell em about the results in the comment :)\n--\nInterested in reading more blog posts like this - subscribe and I'll send you a weekly newsletter where I combined Engineering mindset and eCommerce best practices to bring you insights you can't find on Google.\n",{"_78":79},{"_82":497},"https://cdn.hashnode.com/res/hashnode/image/stock/unsplash/CpHNKNRwXps/upload/72874bfbf7b02bdca2f1765505fba429.jpeg",{"_60":499},{"_62":500,"_64":501,"_66":502,"_68":503,"_70":274,"_72":504,"_76":506,"_80":507,"_84":509},"63bf9aab86d1c929707dbb14","2023-01-12T05:29:15.156Z","What A Book Store Tells Us About The Future Of eCommerce","what-a-book-store-tells-us-about-the-future-of-ecommerce",{"_74":505},"In 2020, everyone talked about how eCommerce spells doom for brick-and-mortar stores. We were wrong.\n02 years later, foot traffic is up again, and the in-store shopping experience is making a strong comeback.\nIf you need an example, just look at Barnes and Noble.\nIn 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.\nSo what was their secret sauce?\nThere 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.\n\nThey 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.\nBut 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.\nHere’s a quick summary of B&N’s strategy, and spoiler: it's beautifully elegant.\n\nEmpower 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.”\n\nUnderstand 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.\n\n\nIt 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.\nLove 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.\nA 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.\nLook at this photo and you tell me you can get this kind of atmosphere and vibe from an online store?\n\nShopify 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.\n\n\"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.”\nSo what’s next?\nPhysical 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.\nBut that’s the story for another day.\n",{"_78":79},{"_82":508},"https://cdn.hashnode.com/res/hashnode/image/stock/unsplash/Oaqk7qqNh_c/upload/2d7009ef525187a076780488dd46f10d.jpeg",{"_68":98,"_78":99},{"_60":511},{"_62":512,"_64":513,"_66":514,"_68":515,"_70":274,"_72":516,"_76":518,"_80":519,"_84":-5},"63bc2a46a29de535d864d290","2023-01-09T14:52:54.695Z","Every eCommerce Merchant Should Know About Double Jeopardy Law.","double-jeopardy-law-ecommerce",{"_74":517},"Let’s start with a classic setting: You decide to open a lemonade state on your front lawn.\nYour neighbors seem to like your lemonade, you make enough to pay back your parent the inventory money you borrowed earlier and you have some extra cash to invest. You compute your options: Get a larger stand. Buy more lemons. Or do some marketing to get more eyeballs.\nYou decide to reinvest your profit in marketing.\nWhy, because at the corner of your street stood another Lemonade Stand - operated by a much older kid, so\n\nA. it’s been there for a while and already has some loyal customers and\n\nB. it has the majority of the market share. They sell 80 cups of lemonade, for every 20 cups you sell.\n\n\nMarketing is an obvious choice - you want to gain more market share and make your cash register sing louder. How’d you do it?\nIn theory, you’d just need to get your customers to buy more often. Instead of buying a cup of iced lemonade once a week, you get your customers to buy 5th times a week. So now instead of having 20% of the market, you have more than 50% of it.\nBut in practice that is impossible.\nWe know it’s impossible because the Double Jeopardy law in marketing tells us so - and it has been empirically proven, by Byron Sharp - Professor of Marketing Science and Director of the Ehrenberg-Bass Institute – the world's largest center for research into marketing.\n\nThis law states this brand with less market share because they have far fewer buyers (first strike), and these buyers are slightly less loyal (second strike).\nOur lemonade drinkers currently only buy one cup every week, therefore you’d have to command 100% loyalty just to achieve 05 purchases per week per customer. But no lemonade brand is bought 05 times a week (people are not that thirsty) and no lemonade brand commands 100% loyalty.\nThere are 02 significant implications following this law:\n1/ Brand growth comes primarily from market penetration. Double Jeopardy law tells you that you can’t expect to have significant growth from growing loyalty only - you need to emphasize penetration alongside loyalty or buy rate.\n2/ Loyalty and market share change together - so it’s nigh-impossible to grow loyalty without gaining more market shares. Therefore, loyalty gains are a result of market penetration, not the other way around - which shows that improving loyalty is a weak growth driver. I know this would not sit right with a lot of marketing professionals - as it seems to be common knowledge that it is always cheaper and easier to sell one more unit to an existing customer than to find a new one.\nBut if you want proof that this is not BS - check out Byron Sharp's How Brand Grows. It’s revolutionary!\n",{"_78":79},{"_82":520},"https://cdn.hashnode.com/res/hashnode/image/stock/unsplash/ezqnxsqUZ80/upload/f2acf180b5deeb4bab8259911760e993.jpeg",{"_60":522},{"_62":523,"_64":524,"_66":525,"_68":526,"_70":274,"_72":527,"_76":529,"_80":530,"_84":-5},"63bb9524fddde1d6ec0cdaf8","2023-01-09T04:16:36.300Z","Make Your Beer Taste Better","make-your-beer-taste-better",{"_74":528},"I helped build a Shopify app that 200K+ Shopify users use - and the best Shopify brands never lose focus on making their beer taste better.\nNo, they didn’t sell beer.\n“Focus on what your beer tastes better” is the analogy Jeff Bezos made when pitching AWS at the 2008 Y Combinator Startup School. It was an odd - but cleverly calculated analogy.\n\nThe analogy came to Jeff Bezos after he visited a 300-year-old brewery in Luxembourg - which were one of the first factories in Luxembourg that used electric power to help in the beer-manufacturing process. Back then they couldn’t buy electric power off the electric grid because there wasn’t an electric grid - so they started making their own electric power (which is pretty badass by itself). Many other companies also did the same thing - they wanted to make their operations more efficient, and the only way to do so was to become an expert in electric power generation and set up their own generators.\nBut the tricky thing was that generating their own electric power didn’t make their beer taste better.\nAfter a while, these breweries realized that making their own electric power was resource-consuming, capital-intensive, and taking a toll on their operational capacity - without making their beer taste any better. And if new shiny technology couldn’t make your beer taste better - then what was it even for? (this is a rhetorical question in the context of beer-making only because electricity was our greatest invention)\nAnd the point Jeff Bezos was making - which was insightful and highly applicable to us eCommerce insiders - is that you don’t need most novel technology to build your product, do marketing, or make sales - you just need the right one.\nYou want to go from your idea to a successful product as quickly as possible, rightfully so - and there will always be some heavy lifting that gets in the middle between your idea vision and your success. And we often think that this heavy lifting has to be done at a world-class level of excellence, or else your vision will fail.\nBut this is totally undifferentiated and isn't actually making the beer taste better. We get tunnel vision and deafened by all the noises out there - when 100 products saying 100 different things but they might just be the same (and we might also be guilty of it :) )\nThis is not to say you shouldn’t install new apps to improve your revenue operation or buy a new tool to help your marketing team - it’s more about not letting them dilute your focus on making your beer taste better. :)\nWatch Bezos's full pitch here.\nhttps://www.youtube.com/watch?v=6nKfFHuouzA\n",{"_78":79},{"_82":531},"https://cdn.hashnode.com/res/hashnode/image/stock/unsplash/qIAw1kNk1p8/upload/881f6127fb68bc1ce0a148ca4615743d.jpeg",{"_60":533},{"_62":534,"_64":535,"_66":536,"_68":537,"_70":333,"_72":538,"_76":540,"_80":541,"_84":543},"63b8e2ea98ea559af369f2a5","2023-01-07T03:11:38.728Z","Goodbye Liquid. Hello Hydrogen","goodbye-liquid-hello-hydrogen",{"_74":539},"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).\nThe short answer: By learning Hydrogen.\nThe “Why” is fairly obvious - if you’re been in the space long enough. Shopify Liquid has some major drawbacks and limitations:\n\nThe 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\n\nCustomization 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.\n\nYou 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.\n\n\nAnother 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.\n\n\nAnd 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:\n\n“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.”\n\nThe 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.\nHydrogen 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.\n\nAnd this is from Shopify’s Press Release:Remix Joins Shopify To Push Web Forward, written by VP of Engineering at Shopify themselves:\n\nWith 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.\nWhile 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.\n\nI can tell you from my own experience - the possibilities with Hydrogen are abundant:\n\nDevelopers 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.\n\nBetter 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.\n\nEnhanced 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.\n\nBetter error handling: Hydrogen has improved error handling and debugging capabilities, making it easier to identify and fix problems with your store.\n\nImproved 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.\n\n\nAs Shopify developers, I wager we’re at the threshold of a complete disruption - the eCommerce equivalent of transitioning from horse-drawn vehicles to automobiles.\nI’ll leave it to you to decide what to do next, but for me, I’d better run.\n",{"_78":79},{"_82":542},"https://cdn.hashnode.com/res/hashnode/image/stock/unsplash/9HI8UJMSdZA/upload/e72d46605ca91de6efc832cec8856f5f.jpeg",{"_68":98,"_78":99},"tags",[546,548],{"_62":547,"_78":99,"_68":98},"6628fe3c006ab39f60abe4cf",{"_62":549,"_78":255,"_68":254},"695f1ee6dc232851161393fe","meta",{"_66":552,"_553":554},"Blog - Weaverse","description","Insights, tutorials, and updates from the Weaverse team.","actionData","errors"]

Weaverse Blog