Lightning Fast E-Commerce: Remix your Shop with Shopify Hydrogen

Rate this content
Bookmark

Ready to take a thrilling ride into the world of headless e-commerce with Shopify Hydrogen? This cutting-edge solution, built on top of Remix, is the latest and greatest way to build high-performance online store. E-commerce is more important than ever, and providing a seamless customer experience is key. But building a platform that delivers can be daunting, even for experienced developers. With Hydrogen, you'll not only find it easier to build a top-of-the-line online store, but you'll also discover how much fun it can be! From creating collections and products to implementing a shopping cart, we'll show you how Hydrogen can take your developer experience to the next level.

This talk has been presented at React Summit US 2023, check out the latest edition of this React Conference.

Watch video on a separate page

FAQ

Shopify Hydrogen is a new framework designed to simplify the development of headless Shopify stores. It incorporates built-in best practices and is built on top of Remix, a full-stack React framework. Hydrogen enables a component-based architecture that leverages Remix for improved performance and provides seamless integration with Shopify APIs.

Shopify Hydrogen benefits e-commerce sites by offering a flexible and customizable front-end experience through an API-driven architecture. This separation of the front-end and back-end, also known as headless commerce, results in omnichannel selling capabilities, faster time to market, improved performance leading to better SEO, and enhanced personalization and customization.

Key features of Shopify Hydrogen include a component-based architecture that improves performance, seamless integration with Shopify APIs, and the use of Remix to ensure a great developer experience by working with web standards. It also supports scalable and fast website development.

To start a project with Shopify Hydrogen, you can use the Shopify CLI. By running the command 'NPM create shopify-hydrogen@latest', you can quickly create a full-featured e-commerce website. For a basic setup, the 'template hello world' command provides a barebones repository to explore and customize.

In Shopify Hydrogen, you can build a cart by first initializing a cart instance using the create cart handler in your server.js file. You then pass this cart instance to get load context to make it globally accessible. Adding products to the cart involves using the cart form component with specified merchandise IDs and quantities. To manage actions like add or remove products from the cart, you use corresponding actions in your cart route.

Shopify Hydrogen provides an SEO component that collects data defined in the handle export. This component can be included in the head of your root file, allowing you to customize the shop name and description for SEO purposes. You can also overwrite these settings in other routes to tailor the SEO data for specific pages based on product titles and descriptions.

Yes, Shopify Hydrogen can be integrated with other tools and frameworks. While it's built specifically for Shopify stores, the Hydrogen React library includes components, hooks, and utilities that can be used with any React framework or application, such as Next.js.

Alexandra Spalato
Alexandra Spalato
27 min
15 Nov, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Today's Talk is about Shopify Hydrogen and how it simplifies the development of headless Shopify stores. The Talk covers topics such as mixing Storyblok and CMS data, code and data manipulation in Hydrogen, creating products and collections, handling SEO, building a performance server-side cart, setting up and managing the cart, and displaying cart and raffle information.

1. Introduction to Shopify Hydrogen

Short description:

Hello, I'm Alessandra Sfalato, a developer relations engineer at Storyblok. Today, I will talk about how to remix your shop with Shopify Hydrogen to build a lightning-fast e-commerce. Headless commerce separates the front-end and back-end, offering advantages such as omnichannel selling, faster time to market, better performance, SEO, personalization, and customization. Shopify Hydrogen simplifies the development of headless Shopify stores, leveraging Remix for improved performance and seamless integration with Shopify APIs. We will explore creating a project, fetching and mutating data, building collections and products, handling SEO, and building a cart using Hydrogen.

Hello, I'm Alessandra Sfalato, I'm a developer relations engineer at Storyblok. I'm French, you can hear by my accent, and I live in Madrid.

So today my topic is how you can remix your shop with Shopify hydrogen in order to build a lightning fast e-commerce. So well, I have the public in front, I'm a public in front so I cannot ask you who is using already, I don't know about it, but I hope you will learn and like it with my talk.

So in the first part of the talk, we will cover the basics of e-commerce, it's important, and the second part we will introduce Shopify hydrogen and its features, and finally the big part of the talk, we will talk, we will explore the code of a custom storefront build together with Hydrogen.

So headless commerce means the separation of the front-end and the back-end, and this is achieved thanks to an API-driven architecture, which allows for a flexible and customizable front-end experience. When compared to monolithic, headless offers many advantages, omnichannel selling, faster time to market, better performance, which leads to better SEO, personalization and customization, and certainly much more. However, it may come with an increased development complexity.

So imagine an e-commerce platform that offers all the benefits of headless commerce while minimizing the development complexity. This is where Shopify Hydrogen comes in. So Shopify Hydrogen is a new framework designed to simplify the development of headless Shopify stores. It incorporates built-in best practice and it's built on top of Remix. So again, I cannot ask you who knows Remix, but for the one who doesn't know Remix, it's a full stack React frameworks, which is based on web standards and it creates a really great developer experience because you work with web standards, so it makes everything simpler. And also you can make really scalable and fast website. I didn't know it before learning Hydrogen and by learning Hydrogen, I fall in love with Remix and now it's really my go-to framework.

So it offers, well, Hydrogen, not Remix, a component-based architecture that leverages Remix for improved performance and it also provides a seamless integration with Shopify APIs. So now it's time to take a deep dive into the code of a Shopify Hydrogen project. So first we will create the project, then we will see how to fetch and mutate data in Hydrogen, how to build the collection and products, how to handle SEO and how to build a cart.

So first we use the Shopify CLI to create the project with NPM-created Shopify Hydrogen latest, and this will create for you in two minutes a full featured ecommerce website. For this session we will use the template hello world command which provides a barbone repo and so we can really explore what we are building but let's see what we obtain with this command in just two minutes.

So this is a website you get with that, so we are off. What happened, oh yes I have to launch the development so npm run dev. Okay, so now we should be good. Okay, we have mock data, so we have this home page, we have all the products, we have the single products with options, we can add them to the cart, we can apply discounts, we can check out, we can sign in, we can search. So we have really everything and we can see it in the code of the storefront here. We have all the possible routes, login, logout, recover, register, reset, addresses, orders, collections, products, search. So you can use that and customize it to make your shop or explore it to learn. But I have used the Hello World template to build this little nice website about surf. So this is the homepage, the homepage is built with Shopify and Storyblok, my favorite headless CMS. So we have here a banner that come from the CMS and here we have a product grid that comes from Shopify and here single products where the image is pulled from Shopify and these little text which is pulled from the CMS.

2. Mixing Storyblok and CMS Data

Short description:

We can mix and match Storyblok and CMS data to create storytelling. Clicking on the board link gives access to collection entries. In the performance board, collection details and products are available. Single product pages have a shop pay button for quick purchase. The cart functionality allows adding, removing, and checking out items. Personalization is implemented, showing a different homepage based on user behavior and navigation.

So we can mix and match Storyblok and the CMS data and make storytelling. I will show you after how this is built. And now if I click on the board link, I have access to my collection entries. So we have performance board and original board collection. So if I click on a collection here in the performance board I have access to the collection details with a banner here and all the products in this collection. And then I can go to my single product. The shop pay button is a buy now button and then I can add to cart and here I can see the items in my cart. And I can go to my cart. I can remove items from the cart and I can check out. And here everything is working. And if I go back to my website and to my homepage, I can see that my banner has changed. Now it's featuring performance board and is also displaying only performance board in this product grid. This is because I have implemented some personalization. So depending of the behavior of my user, and here I have navigated to the performance board, I will serve a different home page. And as I have navigated to the performance board, I assume that my user is interested in performance board. So I serve that, and here I go directly to the performance board.