Weaverse Blog
Insights, tutorials, and updates from the Weaverse team.
Shopify Hydrogen: Everything To Know About This Headless Commerce Framework
The Story of Hydrogen Shopify 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. Liquid 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: Vendor 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. Customization: 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! The 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: 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. This is where Hydrogen comes in. As the engineering team at Shopify put it: We 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? At 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. Atoms is one of the first Shopify brands to go headless with Hydrogen Hydrogen 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. Hydrogen's Core Features Performance-First Design One 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. Clicks 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) Developer-Centric Tools Hydrogen 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. https://youtu.be/IHYlfEiTf3g Optimistic UI Updates Hydrogen 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. Nested Routing Shopify 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. Edge Rendering Hydrogen 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. Built-in SEO Enhancements With 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. Flexible Caching Strategies Hydrogen 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. Building with Hydrogen Setting 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. TechnologyWhat it does HydrogenA 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. RemixThe open-source React framework that Hydrogen is built on top of. Remix handles routing, data fetching, server-side rendering, UI reactivity, and styling. OxygenShopify’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. From 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). Of 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. https://youtu.be/dTh1esIxw1k Shopify Hydrogen vs NextJS Shopify Hydrogen is not designed to compete with NextJS, as Bret Little - Shopify’s Staff Software Engineer put it: You 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. My 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. Shopify Hydrogen: Built just for Shopify stores. If your shop runs on Shopify and you're thinking about going headless, this is tailored for you. Offers 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. Next.js: A general-purpose React framework that’s great for all sorts of web projects, not just eCommerce. More freedom for developers to integrate with any backend or third-party services since it’s not tailored to any specific platform like Shopify. Offers 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. Has a massive community comprehensive documentation, and community support making it a reliable choice for developers seeking flexibility and extensive features. If you want to read a more detailed comparison, check out this blog post from Clean Commit. Shopify Hydrogen Limitations Shopify Hydrogen, despite making great progress in recent months, still has its limitations. Accessibility: 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. No 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). High 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. React 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. This is where Weaverse comes into play. We 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? And we built it. Weaverse brings you a visual editor on top of Hydrogen: Developers have a launchpad to build Hydrogen storefronts a lot faster, using premade themes and Weaverse SDKs. Non-developer, non-technical users can easily add or edit the content on their Hydrogen storefronts, without waiting for the developer’s rescue. Take Weaverse for a spin, and see how you like it: studio.weaverse.io
Shopify Hydrogen Analytics got Fixed.
Introduction Integrating 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. Challenges Before the Update Prior to the latest update, Shopify Hydrogen users faced several hurdles: Analytics Sync Issues: When merchants enabled the Cookie Banner, it led to synchronization problems between the analytics and the store checkout, resulting in data loss. Lack of Native Support: Hydrogen did not offer native support for Cookie Banners, unlike the Liquid Storefront where it is natively integrated. Guidelines 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. These issues made it cumbersome for merchants to efficiently track customer behavior and conversions, especially during the critical checkout phase. Shopify's Solution in the April 2024 Update The April 2024 update has markedly improved the situation by introducing several key enhancements: Native <Analytics> Component: Shopify introduced a new <Analytics> 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. Streamlined Integration Process: The update eliminates the need for third-party cookie banners, as the <Analytics> component is automatically included in the Hydrogen store setup when updated to the latest version. Here’s how you can now integrate this feature into your Hydrogen application: export default function App() { const nonce = useNonce(); const data = useLoaderData<typeof loader>(); return ( <html lang="en"> <head> <meta charSet="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1" /> <Meta /> <Links /> </head> <body> + <Analytics.Provider + cart={data.cart} + shop={data.shop} + consent={data.consent} + customData={{foo: 'bar'}} + > <Layout {...data}> <Outlet /> </Layout> + </Analytics.Provider> <ScrollRestoration nonce={nonce} /> <Scripts nonce={nonce} /> </body> </html> ); } Additional Resources To assist merchants further, Shopify provides comprehensive guide on how to implement these new features. For more detailed instructions, merchants can refer to the Hydrogen analytics example provided on Shopify's GitHub page. Demo Here is the Pilot demo after updated to the latest version of Shopify Hydrogen: Conclusion With 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. For step-by-step instructions on configuring your store following these updates, check our official setup guide.
Unleash The Power of Exit-intent Popups
💡 This is a guest post from Fordeer Team. Welcome 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. Overview of Exit-intent Popups What is an exit intent popup? An "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. How do exit-intent popups work? Exit-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. The 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. Once 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. Exit-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. The Power of Exit-intent Popups Recovery of abandoned visitors Imagine 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. Exit-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. For 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. Sensing 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. A second chance for conversions You 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. For 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. In 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. List building and lead generation Exit-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. Imagine 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. In 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. Reduced bounce rates One 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. By 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. For 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. Personalized user experience Exit-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. Intrigued 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. This 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. Moreover, 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. You 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. Enhanced eCommerce conversion rates In 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. This 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. Moreover, 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. Bonus: Exit-intent Popups Best Practices Timing is everything In 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. Clear call-to-action It'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. Mobile optimization You 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. A/B testing It'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. Compliance with regulations Last 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. Over to you, Exit-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. Embrace this innovative strategy, and watch as your online presence reaches new heights by following Fordeer’s tips!
Weaverse Pricing Update: More Affordable, Better Flexibility
We believe everything about Weaverse should be designed for Scalability and Flexibility. This also includes our pricing model. As 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! What we changed Pay-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. New 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! :) Additional 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. Price/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. What do these changes mean for you? These 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. Thank you for being a part of the Weaverse community. As always, if you have any suggestions for us, we’re all ears!
Product Updates: Custom URL, Custom Page, Customer Account API, and More
🏫 How to build a headless storefront with Shopify Most devs would tell you that diving into Hydrogen and customizing your Shopify storefront is like climbing a techy mountain – one with steep learning curve. But guess what? That mountain's about to turn into a nice, flat path. Shopify 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. No more learning curve excuses! :) 🤖 Custom Page URL and Custom Page Templates With 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. Merchants 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: In advertising - like Google Ads or Facebook ads, the preference is always to link to yoursite.com/maypromo rather than yoursite.com/pages/maypromo. In SEO, link optimization and link depth are important for ranking. Workaround suggested. Requests submitted. 08 pages of merchants’ complaints, 04 years, and 167 replies later. There’s still no update. As 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. 🌊 Customer Account in Pilot Theme How many Shopify themes have customer account features? Not many, I’d say. and not free, I’d say. Our 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. That’s why we've updated our Hydrogen theme with the new Shopify Customer Account API, allowing for passwordless login. Here's what it means for customers and developers: Seamless Authentication: Sign in easily without needing to remember passwords. Data Scoping: Your shopping experience is now more personalized. - Enhanced Security: Your data is safer than ever with additional protection measures. ! (In case you don’t remember, Pilot theme is the first Hydrogen theme. Imagine Dawn theme, but for headless Shopify storefronts built with Hydrogen) ⚡ Near-instant HMR When Developing Shopify Apps Here'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 ⚡
The Best Headless Shopify Examples For Inspiration (Updating)
I. Shopify, Without Headless We all know and love Shopify. Over the relentless march of time (the one concept even the best DTC brands cannot make a quick sale of), Shopify has proved itself not just capable of survival - the competition between eCommerce platforms has always been tough - but a master of evolution, a sort of eCommerce Darwin’s dream, deftly adapting to the ever-shifting desires and needs of their eCommerce merchants. However, Shopify has its limitations, which is in the name of Liquid. Shopify Liquid, despite being the current backbone of all Shopify websites, has some major drawbacks and limitations. 1.1. Vendor lock-in risk Liquid theme binds your code to Shopify - so if you want to migrate to a different system, good luck. The liquid is (seemingly) built under the assumption that companies won’t evolve because it makes the e-commerce platform the hub around which the whole apparatus of success spins. When brands have to change their platform, the entire system might go to waste - translating into the loss of resources: thousands of hours and hundreds of thousands of dollars down the drain. 1.2. Customization with Liquid in the background takes a toll on developers The available options with Liquid are severely limited, whereas installing apps may incur additional fees and hamper performance. You can use additional app scripts, but they can conflict with your theme code, which results in even more redundant and non-reusable code. Any developer with a DRY mindset (don’t repeat yourself) would hate it. 1.3. The need for better performance optimization. The liquid is a backend template language used for static content generation, therefore if you want to make a website more interactive and responsive, you have to use an additional 3rd script, and this guarantees to put a brake on your site’s loading speed. The most fundamental drawback is that Liquid is a template language. A template language is always a tough nut to crack. Custom databases and complex logic become more formidable to implement. I remember reading this somewhere on Shopify Reddit - which perfectly captures the biggest drawback of Liquid: “Liquid theme restricts you to how and what you can develop. Do you want to create a single-page application? No. Perhaps a progressive web application? No. Is it possible to unit-test your markup? Again, no! Even custom URLs are not an option.” The engineering wizards at Shopify were acutely aware of these drawbacks - they must have been because they did come up with a plan, a brilliant one at that: Shopify Hydrogen II. Shopify, After Headless, With Hydrogen Shopify Hydrogen is a new programming language specifically designed to improve the performance and scalability of Shopify stores. With Hydrogen, developers, and merchants can build headless storefronts the way they dream of. Hydrogen is intended to be a replacement for Liquid - and Shopify is pushing for it with vigor. They acquired the community-favorite RemixJS and planned to use it to enhance Hydrogen’s stability and performance. They brought it to market with ferocity and convinced even the biggest Consumer brands - like Allbirds, Tommy Hilfiger, or ButcherBox - to adopt it. With the Remix team at Shopify, developers building on Shopify will benefit from new tools that they will love, and merchants will see custom storefronts that are faster than ever with an improved Hydrogen product. The Remix open-source community will have a strong sponsor and supporter they can trust to enable the framework to accelerate its roadmap, with the knowledge that they can bet on the framework for the long run. While Hydrogen is focused on commerce, Remix is focused lower in the stack, and will continue to be a general web solution that scales from content through commerce and all the way to apps. Shopify will use Remix across many projects where it makes sense, and you can expect to see more of our developer platform with first-class Remix support over time. The possibilities with Hydrogen are abundant: Developers can create fully custom websites with access to the controllers and models, making complex logic and third-party service requests possible. Hydrogen also does not tightly couple code to the Shopify platform, meaning businesses can change platforms without having to start from scratch. Better Flexibility: Hydrogen enables developers to create a single-page application, a progressive web application, and to unit-test their code. It also supports custom URLs and has better performance than Liquid. Enhanced performance: Hydrogen is optimized for performance and is able to handle large volumes of traffic more efficiently than Liquid. This means that stores built with Hydrogen may load faster and be more responsive. Better error handling: Hydrogen has improved error handling and debugging capabilities, making it easier to identify and fix problems with your store. Improved developer experience: Hydrogen is designed to be easier to learn and use than Liquid, which should make it easier for developers to build and maintain Shopify stores. As Shopify developers, I wager we’re at the threshold of a complete disruption - the eCommerce equivalent of transitioning from horse-drawn vehicles to automobiles. And using Hydrogen, merchants and brands have already incredible shopping experiences - those that are story-infused, blazing-fast, and unbelievably frictionless. Still, you might wonder, what Shopify Headless is even good for. If you're still on the fence, this checklist might be helpful. III. Common Headless Use Cases Headless commerce presents various use cases that address the limitations of traditional e-commerce platforms: Rapid Experimentations, Without Losing Performance: A/B testing and dynamic content are a vital part of the eCommerce experience. They can make, or break sales. The server-side capabilities and caching of Hydrogen can allow merchants to have a lot of A/B testing and dynamic, personalized content without sacrificing performance and speed. Immersive Product Visualization: Traditional site designs often limit how your products are presented to shoppers. With headless, you can incorporate features like 360-degree views, AR, and other interactive elements - without fear of losing speed - and offer a more immersive customer experience. Improved Site Performance: Over time, every Shopify storefront can suffer from performance issues due to accumulated custom code and plugins. A headless approach maintains a clean codebase, leading to better maintainability and faster development cycles. Composable Commerce: Headless architecture supports composable commerce, meaning you can integrate various services like CDN for images, Cloudflare for scripts, and Algolia for search functionalities, enhancing site speed and user experience. Localization and Personalization: Headless platforms can dynamically serve localized content and personalized experiences by leveraging frontend frameworks and global server networks. Unified Customer Experience: Full control over the front end allows businesses to tailor the shopping experience to their brand and customer needs without backend constraints. AI Integration: Easily integrate AI and machine learning models to provide personalized shopping experiences, chatbots, recommendation engines, and more, all facilitated by the API-driven nature of headless commerce. 25 Best Headless Shopify Examples 1. Victoria Beckham Beauty: Immersive Fashion with Headless Architecture Victoria Beckham Beauty presents itself as a paradigm of luxury and clean beauty. By going headless, it has effectively merged e-commerce capabilities with an elegant, narrative-driven design to align with its brand ethos and luxury offerings. With Shopify Headless, Victoria Beckham Beauty can achieve: Enhanced Speed and Performance: By adopting a headless architecture through Contentful and Netlify, alongside Shopify Plus, Victoria Beckham Beauty has significantly improved its site's performance. This transformation has led to a faster digital experience, critical for maintaining customer engagement and reducing bounce rates. More Flexibility: VBB leveraged the headless approach for greater control and speed, enabling rapid changes and updates to the site without backend dependencies. This adaptability helps them launch promotional campaigns and product launches a lot quicker. Seamless Integrations: Utilizing the Jamstack architecture, Victoria Beckham Beauty has streamlined its build and deployment processes. Integration of various services like Contentful and Shopify Plus into the Netlify platform has created a high-performing, interactive site that supports the brand's innovative and luxurious image. 2. Bols: Crafting Rich Customer Experiences Bols, known for its rich heritage in liqueur and spirits, leverages the flexibility of Shopify's headless architecture to boost its online presence. With Shopify Headless, Bols was able to achieve: Increased Page Loading Speed: Implementing headless architecture has resulted in a 50% increase in page loading times, significantly enhancing user experience. Customized Content-Rich Experience: The headless approach has granted Bols complete control over its storefront, enabling a content-rich browsing experience for customers. Global Expansion: The flexibility provided by headless commerce has supported Bols in its mission to expand direct-to-consumer sales globally. 3. Denim Tears: Crafting Cultural Narratives To maintain its narrative-driven approach and integrate diverse multimedia content seamlessly, Denim Tears went headless with Shopify. By taking full advantage of Hydrogen, Denim Tears can showcase cultural stories through fashion, requiring a platform that supports rich, immersive storytelling. With Shopify Headless, Denim Tears was able to achieve: Rich Storytelling: Enhanced content display capabilities, supporting their unique brand storytelling. Enhanced User Experience: Fast, responsive, and interactive site elements that engage users deeply with the brand’s heritage. 4. Atoms: Personalized Shopping Made Easy With Headless, Atoms was able to focus on comfort and customization, offering unique shoe designs that cater to individual preferences. Going headless with Shopify, Atoms was able to achieve: Customization at Scale: Efficient management of varied product options and user preferences. Streamlined User Journeys: Smooth, intuitive shopping experiences tailored to individual needs and behaviors. For the full case study, read it here. 4. Half Helix: Helping Merchants Innovate Half Helix is a group of passionate designers, developers, and technologists committed to building modern, thoughtful digital experiences in an ever-changing world. By leveraging Shopify's headless capabilities, Half Helix can achieve better customization and more scalability in their tech stack. Innovative Solutions and Customizations: The agency has utilized headless commerce to provide unique, tailored e-commerce experiences, showcasing their capability to adapt and innovate in the digital space. Scalability and Efficiency: The adoption of headless architectures typically results in scalable and efficient digital platforms, though specific results for Half Helix were not detailed. 5. Boretti: Streamlining Luxury Kitchen Experience Boretti is renowned for its high-end kitchen appliances and culinary products, offering an elegant online platform to match its luxury goods. To match the sophisticated nature of its products and clientele, Boretti required a flexible, high-performing website that could offer a bespoke user experience, reflecting the brand's high quality and attention to detail. Naturally, they went for headless Shopify to achieve: Dynamic User Experiences: The headless approach would enable Boretti to offer personalized shopping experiences, with tailored recommendations and interactive product displays. Scalability and Integration: Headless architecture would allow for easier updates and integrations, keeping the site current with the latest e-commerce trends and customer demands. 6. Nour Hammour: Tailoring Luxury eCommerce Fashion Nour Hammour offers a curated selection of luxury leather jackets and fashion pieces, each crafted with care and precision. Known for its bespoke products, Nour Hammour needed a digital presence that could offer personalized experiences and showcase its fashion items in high detail. With Headless, Nour Hammour was able to achieve: Improved Site Interactivity and Engagement: By adopting a headless approach, Nour Hammour could create more interactive and engaging product pages, enhancing the shopping experience. Faster Market Adaptation: The flexibility of a headless system would allow Nour Hammour to quickly adapt online content and marketing strategies to the fast-paced fashion industry. For the full case study, read it here. 7. Isle USA: Pioneering Adventure Isle USA is dedicated to providing high-quality paddleboards and accessories, catering to outdoor enthusiasts and adventure seekers. To cater to a diverse range of customers and outdoor activities, Isle required a dynamic website capable of offering detailed product information, guides, and an engaging shopping experience. And they achieved it with Shopify Headless: Rich Content Delivery: Utilizing headless commerce, Isle USA could effectively manage and deliver rich content such as video tutorials, adventure guides, and detailed product specs. Operational Efficiency: The headless architecture would streamline content updates and product management, allowing Isle to efficiently respond to seasonal trends and customer needs. 8. Splits59: Enhancing Fitness Fashion Splits59 offers fashionable, high-performance activewear designed to support and inspire women in their fitness journeys. With a focus on high-energy, dynamic fitness attire, Splits59 required a website that could match the brand's vibrant style and need for high functionality. With Shopify, Splits59 was able to achieve: Seamless Shopping Experience: By adopting headless commerce, Splits59 could provide a fluid, user-friendly shopping experience, catering to customers looking for fitness wear that meets their style and performance needs. Dynamic Content and Interaction: The headless approach enables Splits59 to offer dynamic content such as fitness tips, product launches, and interactive sizing guides. Market Agility: Headless commerce would allow for rapid updates and personalization, essential for keeping pace with the fast-moving fitness and fashion sectors. 9. Magda Butrym: Redefining Luxury Fashion Magda Butrym offers luxury fashion pieces that combine modern design with traditional craftsmanship, appealing to a discerning global clientele. To showcase its detailed, high-end products and provide an exclusive shopping experience, Magda Butrym required a sophisticated, flexible e-commerce platform. With Headless, they was able to do so: Elevated Brand Presentation: A headless approach would allow Magda Butrym to create a unique and immersive online environment that reflects the brand's luxury and quality. Global Customer Reach: With headless commerce, Magda Butrym could easily manage international content and sales, catering to a global audience while maintaining localized experiences. Innovative Shopping Features: The brand could implement advanced features such as virtual try-ons or personalized styling advice, enhancing the online shopping experience for luxury fashion consumers. 10. Chubbies: Championing Weekend Wear with Headless Shopify Chubbies has carved out a unique niche in the men's fashion industry, specializing in vintage-inspired shorts. Their mission is to promote the weekend lifestyle, encouraging relaxation and fun. Given their rapid growth and distinctive brand identity, Chubbies needed a robust e-commerce solution to manage increasing traffic and provide a seamless, engaging user experience. A headless architecture would allow them to scale effectively while maintaining their unique brand voice and marketing strategies. With Headless, Chubbies was able to support a brand's rapid growth: Significant Sales Growth: Adopting Shopify Plus and a headless approach contributed to a 50% year-over-year sales growth, demonstrating the effectiveness of their digital strategy. Expanded Community Reach: Their approach helped grow their email list to 1.5 million and social media following to over 2 million, illustrating the power of their brand and lifestyle messaging. For more detailed insights, you might want to explore Shopify's case study on Chubbies. 11. Veloretti: Revolutionizing Urban Cycling Veloretti, an Amsterdam-based brand, is known for its hand-crafted, affordable bicycles. They aimed to elevate their digital presence with the launch of their first electric bike and a complete rebranding of their flagship store. The transition to headless commerce allowed Veloretti to enhance overall performance and operational flexibility. This was crucial as they moved into the electric bike market and needed a platform that could handle complex product configurations and provide a seamless user experience. 12. Paul Valentine: Elevating Luxury E-commerce with Headless Paul Valentine, a German-based premium jewelry and accessory brand, recognized the need to expand its reach internationally. This ambition required a scalable and flexible digital infrastructure to accommodate various international markets effectively. The primary motivation for Paul Valentine's shift towards headless commerce was to manage multiple online stores across different regions efficiently. Traditional e-commerce platforms could not provide the level of customization and scalability needed for their global expansion. Headless commerce offered them the opportunity to localize content for different markets while maintaining a cohesive brand experience across all digital touchpoints. With Headless, Paul Valentine brand achieved: International Expansion: Paul Valentine successfully established five international stores across Europe and North America, tailoring each to cater to local preferences and languages, effectively making the brand accessible in 131 countries through 20 global web stores. Customization and Localization: The headless model allowed Paul Valentine to offer a personalized shopping experience for various markets, accommodating different languages and cultural nuances, which is critical for luxury brands aiming to provide superior customer service. Infrastructure Management: By adopting a headless approach with Shopify Plus, Paul Valentine was able to streamline the management of its different global stores, enhancing operational efficiency and user experience. 13. Blume: Revolutionizing Skincare through Headless Commerce Blume stands out in the beauty industry for its focus on authentic self-care, destigmatizing topics like acne and puberty, and promoting eco-friendly products. Their online platform is designed to engage a community, especially targeting Gen Z and millennials with relatable content and products. With Headless, Blume was able to: Handle diverse and dynamic content tailored to their audience. Integrate various third-party applications seamlessly. Provide a personalized shopping experience across multiple channels. Quickly adapt to market trends and customer feedback, enhancing their brand's agility.
Product Updates: Metaobject Pickers, View Transition API, and more
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: Share storefront previews using tokenized links, accessible to anyone. Easily upgrade your Hydrogen project and stay updated with 'h2 upgrade' from the CLI. Monitor, fix and catch bugs before they ship with a suite of new developer tools. Deploy more flexibly and easily now that Hydrogen's server now mirrors Oxygen's. Manage privacy preference across services with ease as Customer Privacy API is now compatible with Hydrogen storefronts. And 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. 🤖 Criminally smooth View Transition for Pilot Theme We’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. https://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 And 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 ;) 🖼️ New Shopify Hydrogen Theme for Beauty & Cosmetic brands (Coming soon) We'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. We'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. 🚘 Shopify Object Picker is now available in Weaverse We've integrated Shopify Metaobject Picker into Weaverse Studio, allowing you to create content components once, and reuse them anytime, anywhere. With Metaobjects Picker: Developers can define metaobject definitions and quickly customize them into content sections Merchants manage these metaobjects easily via Shopify admin and integrate them on their Hydrogen storefronts with Weaverse. For the full demo, check out this post. 💼 Weaverse docs are now on public GitHub Repo We'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. 🌊 The best Hydrogen Update As I say, the best Hydrogen update is not a feature update. The best update is the case studies. Last 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. Maybe 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. For 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. For 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. Of 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. And now there’s a tool for that. :) 💡 Read more: The best Shopify Hydrogen demo stores for you to tinker and experiment with.
Weaverse Weekly #5: Weaverse Components vs Theme Blocks
Hello hello, friends of Weaverse, There’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? Well, 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? It 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. This month’s update is all about reusability in Weaverse. But first, let’s get to the usual part. :) The Best Writing About Headless, WebDev, and Everything In Between In 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”. It’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: Next.js App Router Migration: The Good, The Bad, and The Ugly. Remix Vite is now stable. Shop Story shutting down: Lessons for Headless builders. The best Shopify Hydrogen demo stores to learn from, and experiment with. Sorry Shopify Theme Block, We’re Here First! Shopify Theme Blocks is one of the most exciting and long-awaited releases from Winter 2024, and it certainly lives up to the hype. Shopify 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. Of 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. With 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. Custom Page URL and Custom Page Template With 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. Merchants 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: In advertising - like Google Ads or Facebook ads, the preference is always to link to yoursite.com/maypromo rather than yoursite.com/pages/maypromo. In SEO, link optimization and link depth are important for ranking. Workaround suggested. Requests submitted. 08 pages of merchants’ complaints, 04 years, and 167 replies later. There’s still no update. As 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. Simple as that! That's all for this month's newsletter. Stay safe, and see you around! If 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.
Weaverse Weekly #4: Headless is almost never about loading speed.
Hello hello friends of Weaverse, how are you doing? One day left until Shopify Winter Edition 2024 - what’s your bet? If we go by previous editors, then my best guess would be: At least 20% would be Hydrogen and Custom Storefront updates More APIs updates, definitely. Exclusive native apps (native subscription app?!) Since 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. The Best Writing About Headless, WebDev, and Everything In Between In 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”. It’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: A Complete Overview of Hydrogen, written by Tim Davidson at CleanCommit. How Core Web Vitals influence SEO, written by Malte Ubl, CTO at Vercel. Lessons from launching our devtool 14 times on Product Hunt, written by Utpal Nadiger How to become a Shopify Hydrogen Developer, written by ME! Headless Commerce is not about loading speed. It’s about speed of action A 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: Speed prompts actions. Google 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: “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.” If slow page load times are a big blocker, then fast page load times act like propellant. In 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. They act faster. They buy faster. On 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. They leave. A quick summary from ReadingGraphics Speed changes the way users behave. Nelson Elhage put it best (tho he was talking about software - the implications apply to eCommerce). “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. Now 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. Take the most fundamental thing: Site designs. No 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. Another 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. Your 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. And 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. It’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. The story with Shopify headless commerce is the same, I believe. You need to pay attention to people who will make it happen. -- P/s: Yep I’m bullish, you might already know it. Hope keeps us alive.
Weaverse Weekly #3: Snake-oil Shopify Developers
Hello hello friends of Weaverse, how are you doing? Hope 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. Fear not, I'll keep the tech talk light and engaging in this newsletter. This 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. Let’s dive in! The Best Writing About Headless, WebDev, and Everything In Between In 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”. It’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: A detailed analysis of headless CMS-es in 2024, written by Andrew Mosby, UI Development Director at Viget. What Remix is lacking (and what it’s already good at), by Solomon Hawk, Senior Developer at Viget The importance of seeing problems where no one can (or, the secret of great design), by Tony Fadell. A step-by-step guide to building your Hydrogen storefront with Weaverse, by me! Hydrogen Themes: More Powerful, Just As Accessible We'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. Owen 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. and yes, you can. You can check out a short demo here: Oh, 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. The Era of Snake Oil Developers? (You might have missed this over the holidays.) In 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. Then 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. Rattlesnake 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. His 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. So that was a short origin story of snake-oil salesmen - according to NPR. Unfortunately, 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. None of this would come to the public if it were not for Lukas Tanasiuk's exceptional investigative journalism, exposing these deceitful acts. For the full investigation, check out his full tweet. That's all for this week. Catch you later! -- P.S. Let me know if I'm wrong. I'd love to learn :)
Integrating Weaverse into Your Shopify Hydrogen Project
Introduction Are 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. Why Weaverse? Weaverse 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. Getting Started First, let's set up your Shopify Hydrogen project. Open your command line and enter: npm create @shopify/hydrogen@latest After setting up, go to your Hydrogen project folder and start it with: npm run dev Now you will see your Hydrogen storefront running like this: Integrating Weaverse: Step-by-Step Step 1: Install Weaverse Begin by adding Weaverse to your project. Enter the following command: npm install @weaverse/hydrogen Step 2: Create the Weaverse Directory Next, you need to set up a directory for Weaverse in your project’s app folder. Create two files: weaverse/component.ts – This file is for registering components in Weaverse. Start with an empty array. // weaverse/component.ts import type {HydrogenComponent} from '@weaverse/hydrogen'; export const components: HydrogenComponent[] = []; weaverse/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. // weaverse/schema.ts import type {HydrogenThemeSchema} from '@weaverse/hydrogen'; export const themeSchema: HydrogenThemeSchema = { info: { version: '1.0.0', author: 'Weaverse', name: 'Pilot', authorProfilePhoto: 'https://cdn.shopify.com/s/files/1/0838/0052/3057/files/Weaverse_logo_-_3000x_e2fa8c13-dac2-4dcb-a2c2-f7aaf7a58169.png?v=1698245759', documentationUrl: 'https://weaverse.io/docs', supportUrl: 'https://weaverse.io/contact', }, inspector: [ ], }; At 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: Step 3: Set Up a Weaverse Client Create 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. // weaverse/weaverse.server.ts import type {WeaverseClientArgs} from '@weaverse/hydrogen'; import {WeaverseClient} from '@weaverse/hydrogen'; import {components} from '~/weaverse/components'; import {themeSchema} from '~/weaverse/schema'; export function createWeaverseClient(args: WeaverseClientArgs) { return new WeaverseClient({ ...args, themeSchema, components, }); } export function getWeaverseCsp(request: Request) { const url = new URL(request.url); // Get weaverse host from query params const localDirectives = process.env.NODE_ENV === 'development' ? ['localhost:*', 'ws://localhost:*', 'ws://127.0.0.1:*'] : []; const weaverseHost = url.searchParams.get('weaverseHost'); const weaverseHosts = ['weaverse.io', '*.weaverse.io']; if (weaverseHost) { weaverseHosts.push(weaverseHost); } return { frameAncestors: weaverseHosts, defaultSrc: [ "'self'", 'cdn.shopify.com', 'shopify.com', ...localDirectives, ...weaverseHosts, ], imgSrc: [ "'self'", 'data:', 'cdn.shopify.com', ...localDirectives, ...weaverseHosts, ], styleSrc: [ "'self'", "'unsafe-inline'", 'cdn.shopify.com', ...localDirectives, ...weaverseHosts, ], connectSrc: [ "'self'", 'https://monorail-edge.shopifysvc.com', ...localDirectives, ...weaverseHosts, ], }; } In this file, you’ll include: createWeaverseClient: For interacting with the Weaverse API. getWeaverseCsp: For managing content security policies, ensuring your app adheres to best practices in web security. Step 4: Render Weaverse Content Add 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. // weaverse/index.tsx import {WeaverseHydrogenRoot} from '@weaverse/hydrogen'; import {components} from './components'; export function WeaverseContent() { return <WeaverseHydrogenRoot components={components} />; } Completing the Integration Once you've set up the necessary files, it's time to fully integrate Weaverse into your Hydrogen project: Integrating weaverse in Remix's Global Context In 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. // server.ts // ... import {createWeaverseClient} from '~/weaverse/weaverse.server'; // ... /** * Create Hydrogen's Storefront client. */ const {storefront} = createStorefrontClient({/** ... */ }); const weaverse = createWeaverseClient({ storefront, request, env, cache, waitUntil, }); /** * Create a Remix request handler and pass * Hydrogen's Storefront client to the loader context. */ const handleRequest = createRequestHandler({ build: remixBuild, mode: process.env.NODE_ENV, getLoadContext: () => ({ session, storefront, cart, env, waitUntil, weaverse, // add weaverse to Remix loader context }), }); TypeScript 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. declare global { /** ... */ /** * Declare expected Env parameter in fetch handler. */ interface Env { /** ... */ WEAVERSE_PROJECT_ID: string; WEAVERSE_API_KEY: string; } } Also, define weaverse in the AppLoadContext interface to ensure it's recognized as part of your application's context. declare module '@shopify/remix-oxygen' { /** * Declare local additions to the Remix loader context. */ export interface AppLoadContext { env: Env; cart: HydrogenCart; storefront: Storefront; session: HydrogenSession; waitUntil: ExecutionContext['waitUntil']; weaverse: WeaverseClient; } /** ... */ } Implementing getWeaverseCsp Open 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. // app/entry.server.tsx // ... import {getWeaverseCsp} from '~/weaverse/weaverse.server'; // ... const {nonce, header, NonceProvider} = createContentSecurityPolicy( getWeaverseCsp(request), ); Updating app/root.tsx for Weaverse Theme Settings In 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. // app/root.tsx export async function loader({context}: LoaderFunctionArgs) { /** ... */ return defer( { /** ... */ weaverseTheme: await context.weaverse.loadThemeSettings(), /** ... */ }, {headers}, ); } Next, 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. function App() { const nonce = useNonce(); const data = useLoaderData<typeof loader>(); return ( <html lang="en"> /** ... */ </html> ); } export default withWeaverse(App); Handling Remix Routes for WeaverseContent For 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. // app/routes/_index.tsx /** ... */ import {WeaverseContent} from '~/weaverse'; export async function loader({context}: LoaderFunctionArgs) { const {storefront} = context; const recommendedProducts = await storefront.query( RECOMMENDED_PRODUCTS_QUERY, ); /** ... */ return defer({ recommendedProducts, weaverseData: await context.weaverse.loadPage(), }); } export default function Homepage() { return ( <div className="home"> <WeaverseContent /> </div> ); } In your route components, explicitly render WeaverseContent. This direct rendering allows for the customized content to be displayed as intended. Migrating Components to Weaverse Begin migrating your default components to Weaverse Components. This migration will enable these components to utilize the dynamic customization features provided by Weaverse. Connecting to Weaverse CMS Ensure 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. Now start the development server and update the Preview URL in Weaverse Project settings. By default, our Weaverse projects are set to http://localhost:3456. # .env SESSION_SECRET="foobar" PUBLIC_STORE_DOMAIN="mock.shop" WEAVERSE_PROJECT_ID="your-project-id-here" Once saved, you should see your Hydrogen page loaded in Weaverse Studio. Customizing Sections with Weaverse Begin 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. // app/sections/recommended-products.tsx import {forwardRef} from 'react'; import {Link, useLoaderData} from '@remix-run/react'; import {Image, Money} from '@shopify/hydrogen'; const RecommendedProducts = forwardRef<HTMLDivElement, {productsCount: number}>( ({productsCount}, ref) => { const { recommendedProducts: {products}, } = useLoaderData<any>(); const displayProducts = products.nodes.slice(0, productsCount); return ( <div className="recommended-products" ref={ref}> <h2>Recommended Products</h2> <div className="recommended-products-grid"> {displayProducts.map((product: any) => ( <Link key={product.id} className="recommended-product" to={`/products/${product.handle}`} > <Image data={product.images.nodes[0]} aspectRatio="1/1" sizes="(min-width: 45em) 20vw, 50vw" /> <h4>{product.title}</h4> <small> <Money data={product.priceRange.minVariantPrice} /> </small> </Link> ))} </div> <br /> </div> ); }, ); export default RecommendedProducts; export const schema = { type: 'recommended-products', title: 'Recommended products', inspector: [ { group: 'Settings', inputs: [ { type: 'range', name: 'productsCount', label: 'Number of products', defaultValue: 4, configs: { min: 1, max: 12, step: 1, }, }, ], }, ], }; And the result: That 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. References: Demo repository: https://github.com/Weaverse/Naturelle Documentation: https://weaverse.io/docs/migration/8384952-migrating-hydrogen-project-to-weaverse
Weaverse Weekly #2: Good founders know when to start. Great founders know when to quit.
Hello hello, welcome back to another edition of Weaverse Weekly. How was your BFCM? A rush of adrenaline? Ecstatic? Euphoric? Anyway, I hope you have taken enough rest before the Christmas/Year End sales season surged in! Oh and in case you haven’t heard, here are some interesting stats about our BFCM season this year: Total GMV was $4.1B up by 22% from last year. Peak sales per minute: $4.2 million at 12:01 PM EST on Nov. 24. Hottest product categories: apparel and accessories, health and beauty, and home and garden. Average cart price: $108.12 ($107.53 on a constant currency basis). Cross-border orders represented 15% of all global orders. 17,500+ entrepreneurs made their first sale on Shopify. More than 55,000 merchants had their highest-selling day ever on Shopify. But that was last month, and I think we agree: the past is over. This week, I’ve got you an interesting story on how founders quit, how B2B is becoming the biggest eCommerce opportunity in 2024, and an exciting product update, and more! Read on! Deploying your Shopify Hydrogen to Weaverse, without touching code [No-code speedrun]: Deploy the Shopify Hydrogen project to Vercel and customize it with Weaverse. https://www.youtube.com/watch?v=gCKq5dB95uw The Best Writing About Headless, WebDev, and Everything In Between Hot Take: B2B is the biggest commerce opportunity of 2024, by Bobby Morrison, Chief Revenue Officer at Shopify How developers fight for users, by Coding Horror React Server Components on the Remix roadmap, by Ryan Florence - Co-founder at Remix Guide to fast websites with Next.js, by Seif Ghezala - Co-founder at Tinloof So you want to become a Hydrogen Developer? The best Shopify Headless storefronts to learn from - by me! Good founders know when to start. Great founders know when to quit. In 2008, Stewart Butterfield - Flickr’s co-founder, left Yahoo after selling Flickr to Yahoo for $25M just one year earlier. He went on and founded Tiny Speck, a gaming company. Its first product was a massively ambitious open-world game called Glitch. The company raised $17.5 million from venture investors including Andreessen Horowitz and Accel. They launched the game publicly on September 27, 2011. By November 2012, the game had a devoted following of about five thousand diehard users, who were playing at least twenty hours a week. And it was well-deserving: Glitch looked amazing, had a vivid storyline, and was ahead of its time. The problem? It had trouble monetizing. Their loyal users, who paid a monthly subscription fee, represented less than 5% of more than a hundred thousand users who signed up to try out the game for free. Over 95% of new users played Glitch for less than seven minutes and never returned. Stewart’s team did what any team would do: a new, more aggressive marketing plan. More ads. More affiliate spending. Anything to get more eyeballs. And it worked. In the last week of the campaign, they got 10.000 new users. The number of super hard-core players - those who played at least five days a week, had been growing by over 6% per week. It was their greatest growth ever. Life was good. At that time, Glitch was well-capitalized with $6 million in the bank. Yet, on Monday morning the following week, Stewart sent an email to his investors that started with, “I woke up this morning with the dead certainty that Glitch was over.” He went on to quit Glitch, and offered to return the remaining capital to investors. “Wait, what does this have to do with a newsletter on Shopify and Headless?” - you asked. We’ll get to that later, but in case you haven't realized yet: The Shopify ecosystem is one of the most dynamic, most competitive environments there are. Shopify App Market is hyper-competitive Merchants’ needs are ever-evolving, technologies change every day, and copycats and competitors spring up like mushrooms after rain. To survive and thrive in the ecosystem, you need to practice mental time travel and know when to quit. Just like what Stewart did. Stewart quit because he was able to peek into the future, and he saw that the probability was too high that the game would become a money pit. Tiny Speck experienced a surge in new accounts for Glitch, yet to break even, Stewart saw a future where they would have to sustain week-over-week growth of 7% for 31 weeks just to break even. This assumed new users would convert to paying customers at historical rates, a doubtful prospect as more eyeballs often lead to lower-quality users, especially in gaming. Worse, over time, paid ads would saturate the core gaming audience, and their potential for new users would depend on people with little background or interest in online gaming, which would further lower conversion rates. The entire growth of Glitch would depend on throwing money to acquire vast numbers of new, yet lower-quality, accounts. The math just didn’t work. So there he went. When Stewart Butterfield walked away from Glitch, he freed himself up to develop another product, which he promptly did. He toyed with the potential of turning an internal communications system into a standalone productivity tool. The tool combined the best parts of email, instant messaging, and texting, allowing team members to communicate in real-time and share documents and other materials. Everybody at the company loved it. Everybody who knew about it loved it. Within two days of quitting, his team was moving on with this new thing, including the investors who decided to roll their capital into this new product. When they used it at Tiny Speck, it didn’t even have a name. On November 14, Butterfield came up with a code name for the tool, based on the acronym for “Searchable Log of All Conversation and Knowledge.” SLACK. The rest, as you know, is history. Out of all the Shopify founders I work with, the great ones quit quite a lot of things, but they never rest. They quit, to start better things. They’re able to do so because like Butterfield, they practice mental time travel, and they think about future expected value: They ask themselves “Does the course of action I’m considering (either a new course of action or continuing the status quo) have a positive expected value?” They compare that expected value with the expected value of all other possible options. Because time, attention, and money are limited resources, if they figure out that another path carries a higher expected value, then they will switch lanes. Here’s another useful heuristic that Ron Conway - founder of SV Angel - used at his VC to help founders get better at quitting: He asks them what success would look like over the next few months. He asks them for specifics, which allows him to sit down with the founder and set performance benchmarks that would signal that the company is heading in the right direction. After an agreed period, he revisits those benchmarks with founders and, if the venture is falling short, thinks about shutting it down. What Ron Conway offers to founders is essentially a new perspective - the type of perspective that we might have trouble seeing when we’re in it. As founders, you and I, we’re gritty by nature. We build our company brick by brick. We own it. We put tremendous time, effort, and money into it. We’ve sacrificed so much. It becomes part of our identity. This is exactly why it’s sometimes hard for us to see that quitting is not abandoning, but rather a calibrated decision-making that allows us to effectively react to new information. We just don’t often see the decision-making part in quitting. So if there’s one thing you can take away from this piece is that quitting not abandoning. It’s informed venturing. That's all for this week :) See you next year, I guess. If you like Weaverse Weekly, tag someone you know who would like this, I'd really appreciate it!
Weaverse Weekly #1: What Makes The Best Shopify Developer?
Hello hello, Welcome 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. If 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: Each 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. The 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!) And occasionally, updates about Weaverse itself. Now, let’s dive in. The Best Writing About Headless, WebDev, and Everything In Between In 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”. It’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: Why I won’t use NextJS, written by Kent C. Dodds A circle of web performance innovation, written by Stoyan Stefanov The complete guide for choosing between headless (Hydrogen) and Online Store 2.0 (Liquid) on Shopify, written by Adan S at Lazert Technologies An overview of Shopify Hydrogen, written by me. The Goldilocks Zone For Shopify Developers How do the best Shopify developer become the best? We 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? As 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. When learning or training for something new, you grow the most when the task is at the edge of your abilities. Take a throwaway example: Imagine you play football for fun, like me. Now imagine 02 scenarios: In 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. Scenario 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. Who should you play against? The right answer is neither. You’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. Similarly, 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. And 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. 💡 In case you also want to be the best Shopify Hydrogen developer, check out this article. Weaverse is launching on Product Hunt We’re launching Weaverse publicly on Product Hunt! My 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: Shopify developers use Weaverse SDKs to build reusable, customizable Hydrogen themes, and share them with merchants for code-free editing. Reusing 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. If 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 :)
Back To Online Store 2.0, Should You?
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. Going 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. Don’t get me wrong, hashtag#backtoOS has its merits. Headless 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. Going back to OS made even more sense when Shopify rolled out a horde of powerful features like Section Everywhere, Native Metafields definition, and metaobjects. Making 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. There seems to be no reason not to go back to OS 2.0. But 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. If you want to move back to OS, but without bearing the cost, what do you do? Shameless 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. With 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. You can also define Section Schema just like Liquid, making Weaverse friendly to developers who eat and sleep Liquid. Migration 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. 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. :)
Shopify Hydrogen vs. Online Store 2.0: A Case Study
Made a quick comparison between two 9-figure DTC brands. One uses OS 2.0, the other uses Hydrogen. And let me tell you, the technology gap is wide! The former runs on OS 2.0 and also use more than 40 different tech stack, frameworks, and add-ons. On the contrary, the latter, powered with Hydrogen, uses just a dozen apps and frameworks. This is where the gap comes from. If you’re a developer like me, you’d shake your heads. The common truism among developers is that using more apps doesn’t make your website better and that more apps just means more code which will inevitably slow down your website. In theory, it should be easy to optimize: you only use necessary apps. However, app sprawling creeps in. And it creeps in fast. One great thing about Shopify is that it has a robust app ecosystem. You can find an app for everything. Choices are abundant. In the ideal world, you just need to install every app you like and add every bell and whistle you need. In reality, however, every new app might herald a new conflict. A page design app might antagonize a review app. A loyalty app might clash with another email app. These face-offs are inevitable. Shopify apps vary greatly in coding style and use different libraries for the same function. There’s no universal framework. There’s no unified approach. They’re designed to support different kinds of themes or apps, so they work well only if you use them within what they’re designed for. In short, it’s hard to quash conflicts when using OS 2.0, so app sprawling leads to code extravagance and a turtle-paced website. You can try to minimize the conflict, and you can make some quick fixes to your app, but at the end of the day, this is, for lack of a better word, a fool's errand. I’ve built Shopify apps for 06 years and worked with 100,000+ Shopify stores, and conflict management remains one of my biggest headaches. Unless you vacuum-seal your app and put it in a bytes-perfect environment, conflict happens. Or until you use Hydrogen. Hydrogen is Shopify’s direct response to this quagmire. As a React framework, Hydrogen brings together the infrastructure of the entire Shopify platform, along with rich components, into a foundation that makes it easy to build a web frontend optimized for commerce. Using Hydrogen also means getting the best out of Remix so developers can ship out websites that load fast, stay fast, and become more dynamic the more the buyer interacts with it. I bet on Hydrogen as the future of Shopify. But we’re a still long way from here. Hydrogen is still effortful to use. You need more developers and more development resources. Building it without sweating money and time is one headache. Handing it off to end users is another thing. I know this, as one of the earliest users of Hydrogen. This is why I created Weaverse - a native theme customizer for the Hydrogen storefront. Check it out. https://youtu.be/aQZdQ17kF1U P/s: Here's a fun fact. The Hydrogen website can get even faster and better if using Weaverse, as we have already supported the native Hydrogen Image component, instead of using external image sources as in this photo.