Weaverse Blog
Insights, tutorials, and updates from the Weaverse team.
The Best Shopify Hydrogen Demo To Learn From
About Shopify Hydrogen Hydrogen is Shopify’s React framework for building custom storefronts, and it’s designed to help enterprises/Plus merchants extend their standard Shopify setup. Before Hydrogen, merchants had two choices: use Shopify's default framework, which wasn't flexible enough, or build from scratch with other frameworks that were often too rigid and heavy. Merchants, especially Plus and Enterprises, wanted to use Shopify's tech to build something unique but didn't want to lose the perks of the built-in Shopify features. Hydrogen was Shopify’s answer to help merchants keep those perks while breaking new ground with custom designs. With Hydrogen, Shopify Engineering team chose to create something different. It's built on dynamic, cutting-edge tech like React Server Components, making it easier and faster for developers to create and iterate without the heavy lifting typically involved. From the get-go, Hydrogen is designed to tackle the common problems merchants face—like performance issues, scaling, and creating a seamless user experience—right out of the box. Here’s the lowdown on Hydrogen and its key tech choices: React: At its core, Hydrogen uses React to keep your UI interactive and responsive. It’s all about delivering a smooth experience to your customers no matter how complex your storefront gets. Vite: Hydrogen integrates Vite, which steps up as a faster, more modern alternative to older bundling tools. It's chosen for its quick rebuilds and fast hot module replacement, keeping your development speedy and efficient. Tailwind CSS: For styling, Hydrogen brings Tailwind CSS into the mix. It allows for rapid UI development with its utility-first approach, making it a breeze to apply styles directly in your markup. Since launching the initial GitHub repo on April 1, 2021, the Hydrogen team rolled out over 1,200 pull requests and 3,000 commits. Hydrogen is now used in production at Allbirds, Atoms, Chubbies, and Shopify itself. The Hydrogen npm package is downloaded more than 70,000 times each month. In the recent Shopify Winter 2024, Shopify announced that they'd be releasing over 20 new Hydrogen features, showing its commitment to providing a robust framework that handles the complexities of modern e-commerce so developers can focus on crafting unique user experiences without sweating the technical stuff. Key Features of Shopify Hydrogen Shopify Hydrogen is packed with features designed to streamline the development of high-performing, custom storefronts. Here’s a look at some of the standout features that make Hydrogen a powerful choice for developers: React Server Components: Hydrogen utilizes React Server Components for efficient data fetching and rendering. This means your server can send HTML directly to the browser without waiting for all the JavaScript to download and execute, speeding up the initial load time and enhancing the overall user experience. Integrated Development Environment (IDE) Features: Hydrogen supports advanced IDE features like TypeScript, IntelliSense, and in-IDE linting. These tools help catch errors early, suggest code completions, and ensure code quality, which is a big plus during development. Edge Rendering: Hydrogen's architecture supports rendering at the edge, closer to the user's location. This reduces latency, improves load times, and ensures your application scales efficiently across global audiences. SEO Optimizations: Built with SEO in mind, Hydrogen includes features like automated sitemap generation, robots.txt, and server-side rendering, which help improve the visibility of your storefront on search engines. This is crucial for driving organic traffic to your store. Flexible Integration with Third-Party Apps: Whether you need analytics tools, customer support widgets, or any other third-party service, Hydrogen makes integration seamless. Its flexible architecture allows you to plug in various APIs and apps to enhance the functionality of your storefront without compromising on performance. These are just some highlight features of Hydrogen, for more details, check out Hydrogen docs. 20 Shopify Hydrogen Demo 1. Shopify Official Demo on Stackblitz 2. Pilot, by Weaverse Pilot is the first Shopify Hydrogen theme, created exclusively for Shopify Hydrogen storefront. Imagine Dawn, but instead of Shopify Liquid, it’s for Shopify Hydrogen. Check out the demo store here: Pilot.weaverse.io With Pilot Theme, developers can: Clone and customize Pilot for your own or your client’s headless Hydrogen store. Use Pilot as a launching pad to build your own unique headless theme - with its own distinct identity and functionality. Leverage Pilot's components for their own theme, or a client's theme. This Pilot theme( and demo store, by extension) is designed with the fundamental principles that make the Dawn theme so exceptional in the first place: Performance - every aspect of Pilot was constructed with performance in mind, Accessibility - Pilot is designed for everyone, following Shopify's accessibility practices, and Design - combining flexibility and user-friendliness to eliminate technical obstacles associated with Hydrogen. 3. Naturelle, by Weavere Check out the demo store for Naturelle here: Naturelle Demo Store. Naturelle is the second demo store, and the second Hydrogen theme developed by Weaverse, designed exclusively for brands in Health and Beauty niche. 4. Owen, by Truestorfront This Shopify Hydrogen demo store is powered by Owen, a premier Shopify Hydrogen theme developed by Bavaan team. Owen offers a comprehensive set of features and components tailored to the needs of headless commerce - including, but not limited to: Conversion-focused page elements like Product Comparison, Shoppable Images, Product Bundling, Product Reviews, etc. Basically, all that merchants ask for. Support for multiple languages and currencies. SEO-Friendly. Device-responsive and mobile-first design. Seamless integration with Sanity and Strapi (headless CMS), Vercel (complete toolkit for Web), and Algolia (e-Commerce search trends). 5. Shopify Supply Shopify Supply is a platform designed to celebrate and support the commerce community by collaborating with Shopify merchants to offer products like digital counters and unique clothing designs. Shopify Supply also runs on Hydrogen. 6. Linkpop Together with Shopify Supply, Linkpop was one of the first Shopify products that were powered with Hydrogen. As they put it in their Press Release: Dogfooding Hydrogen internally is an important part of building the framework too. Other teams at Shopify have been using Hydrogen in their own products, like Linkpop and Shopify Supply. Putting Hydrogen into production scenarios helped us uncover limitations of our APIs, leading to improvements. 7. Akva Demo Store AKVA is a customized Hydrogen starter that presents a real-world example of how Sanity and Structured Content can elevate your custom Shopify storefronts. This Hydrogen demo uses Sanity Connect (free on the Shopify App Store) to synchronize Shopify products and collection data with Sanity – allowing developers to easily reference products and collections – even within text. Check out the source code for this demo and its custom studio on Github. 8. Hydrogen Demo Store, from the Hydrogen team This is the official demo storefront for Hydrogen. During Shopify Unite 21, Shopify Founder, Tobi Lutke also uses this demo store to showcase Hydrogen capabilities. https://youtu.be/a2YSgfwXc9c 9. Nour Hammour "We wanted our clients to immerse themselves into our world through beautiful storytelling. Each page has a subtle surprise that adds a spark to your shopping journey” says Zeina El Zein, Communications and Ecommerce Director at Nour Hammour. To bring this vision to life, Nour Hammour chose Hydrogen which allowed for a fast, functional, and responsive storefront, with strong support for videos and interactive product discovery. Hydrogen also smoothed over any worries about the usual headaches of headless setups, like extra technical complexity, steep costs, or development overhead. Read their case study here. 10. Manors Golf Using Shopify’s headless commerce stack Hydrogen and Oxygen, with Sanity on top for CMS, Manors created a performant and engaging store, which significantly improved both customer engagement and conversions. Learn more about their tech stack here. 11. Chubbies Form Factory - a premier Shopify agency, powered Chubbies with Hydrogen to build a shopping experience that allowed shoppers to browse hundreds of product variants without sacrificing performance. 12. Baboon To The Moon Before Hydrogen, The Baboon team runs an increasingly sluggish operation on a legacy Shopify theme. A complete overhaul was inevitable, and Hydrogen was the best choice. With Shopify Hydrogen, the tech team could leverage Shopify's Oxygen hosting and in-house support - including better dev tools and better additional resources for troubleshooting. Hydrogen helps bring an enriching shopping experience to Baboon To The Moon, allowing for modularity, the ability to manage complex product variants, and customized collection pages. The upgrade also supports advanced features like bundled purchases, dynamic upselling, and scheduled content changes, all while integrating Shopify's CDN for optimized media handling Read the full tech stack breakdown here: Baboon to the moon: Hydrogen + Sanity 13. Isle Developed by Form Factory - a premier Shopify agency, ISLE USA leveraged Hydrogen for better performance without hindering non-technical users from continuously modifying and updating their visually rich shopping experience. 14. Drake Related Drake is no stranger to Shopify. He founded October's Very Own (OVO) in 2011 and launched its Shopify store in 2012. With Drake Related, Drake’s vision is to centralize all his projects, promoting brand collaborations through Shopify Collective and Shopify Hydrogen. These tools power a visually stunning digital experience and simplify partnerships and logistics, allowing the team to efficiently manage product collaborations. 15. Denim Tears Using Shopify’s headless commerce stack - Oxygen and Hydrogen, Kamp Grizzly was able to deliver a story-infused, content-rich storefront for Denim Tears, without losing performance. They also managed to save development time by leveraging Hydrogen’s ready-to-use React components, hooks, and utilities. As they put it in their case study: Hot reloading made development faster, since we could instantly see their changes, and optimizing the storefront for a fast user experience was simpler with Hydrogen’s combination of caching strategies and streaming server-side rendering with Suspense. Then we could deploy to Oxygen and share their progress with Denim Tears as they worked. Check out the full case study here: https://youtu.be/JgzMcXz5VeU Takeaway from the best Shopify Hydrogen Demo Stores The Shopify Hydrogen demo stores above provide quick showcases of the capabilities and potential of Hydrogen in creating advanced, custom storefronts. Here’s what you can learn and leverage from these hydrogen demo stores: Component Structure: The demo store is built using a series of React components that demonstrate best practices in structuring and organizing code in a Hydrogen project. You can explore components for product listings, individual product pages, carts, and checkout processes—all optimized for performance and scalability. UI/UX Features: Hydrogen’s demo store includes a variety of user interface and user experience elements designed to enhance shopping experiences. From dynamic product grids and detailed filters to smooth transition animations, the demo provides a practical showcase of what’s possible with Hydrogen. Data Integration: One of the core strengths of Hydrogen is its seamless integration with Shopify’s Storefront API. The demo store utilizes this to fetch real-time data about products, collections, and inventory levels. It’s a great way to see how Hydrogen handles data fetching and rendering on both server and client sides. Customization and Flexibility: The demo store also serves as a testament to Hydrogen’s customization capabilities. You can modify the source code to see how changes affect the storefront. This is crucial for developers looking to adapt the demo to their own specific needs or to experiment with different designs and functionalities. Performance Insights: With built-in performance optimization features like server-side rendering and edge computing, the demo store is an excellent resource for understanding how to build fast-loading, highly responsive ecommerce sites. Hydrogen’s architecture ensures that the storefront maintains high performance, even under load, which is critical for commercial success. Setting Up a Hydrogen Project Now that you’ve a set of Hydrogen demo stores to get inspiration from, let’s get to the real work! Setting up a Shopify Hydrogen project is straightforward, making it easy for developers to get started with building custom storefronts. Here’s how to kick off your Hydrogen project: Installation: Start by creating a new Hydrogen project. You can do this using Shopify's command line tool. Just run npm create @shopify/hydrogen@latest in your terminal. This command sets up a new Hydrogen project with all the necessary configurations and dependencies. Configuration: After installation, configure your environment. This involves setting up environment variables for things like your Shopify Storefront API access. Hydrogen projects require this to fetch data directly from Shopify, which is crucial for populating your storefront with products, collections, and other commerce data. Development Environment Setup: Hydrogen is built to work with popular development tools. Ensure your local development environment supports Node.js and has access to a good code editor like VS Code, which is highly recommended for its robust support for TypeScript and React. Exploring Starter Templates: Hydrogen offers several starter templates that include everything from basic product listings to complex, fully-featured e-commerce setups. These templates are great for understanding how Hydrogen structures its components and for getting a jump-start on development. Or, if you want something more customized, more extravagant you can build your own Shopify Hydrogen theme using Weaverse. :) Customization: Once your project is set up, you can start customizing your storefront. Hydrogen’s flexible component architecture allows you to tailor the user interface to meet your specific design and functionality requirements. You can add or modify components, integrate third-party services, and adjust layouts to fit your brand’s aesthetics. By following these steps, you’ll have a solid foundation for your custom Shopify storefront. Hydrogen’s setup process helps you get started quickly and supports scaling your project as your needs grow.
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