Nosto & Shopify Hydrogen
Shopify’s answer to headless commerce has evolved.
And as a preferred recommended solution for Shopify Hydrogen,
our complete Commerce Experience Platform (CXP) supports Hydrogen 2
out the gate, with a new, globally available integration.
Creating superior commerces experiences on a
headless build with Nosto and Shopify Hydrogen
We’ve worked hard to ensure full compabitability with Hydrogen 2, so you can build your headless stack without sacrificing the ability to deliver exceptional commerce experiences. Our entire CXP offering is available to merchants looking to migrate to a headless stack with
- A/B Testing & Optimization
- Segmentation & Insights
- Dashboard & Analytics
- Category Merchandising
- Product Recommendations
- Content Personalization
- Dynamic Bundles
- Personalized Emails
“Nosto, a Shopify Plus Certified App Partner, is a highly performant, consistently reliable, and popular commerce experience platform solution among many of our merchants. Using Nosto with a Hydrogen-powered custom storefront on Shopify will empower merchants to build engaging, personalized customer experiences with bleeding-edge performance.”
BEN SEHL, SENIOR PRODUCT LEAD, SHOPIFY
What’s a headless stack?
Headless is an ecommerce architecture that, unlike traditional, monolithic builds, separates the front end of an ecommerce store (or the ‘head’, if you like) from the back end, granting brands more flexibility on the front-end of their stores. The headless architecture exposes all back-end functionalities and data through APIs and enables developers to build flexible UIs for all customer touchpoints and utilize their front-end technology of choice.
Hydrogen is Shopify’s headless framework, originally launched in 2022. Since launching Hydrogen 1 on the React-based framework, Shopify began looking for ways to improve and after extensive feedback and testing, they decided that the opensource framework Remix (which they acquired shortly after launching Hydrogen 1) was the best way to do this and expand Hydrogen. Which leads us here: Hydrogen 2, making it easier than ever for merchants to separate front- and back-end, to build highly customized and performant storefronts on the Shopify platform.
What’s new with Hydrogen 2?
The latest version, Hydrogen 2, is built on a combination of React and Remix, and offers an improved developer experience, heightened performance, and a suite of new tools to unlock higher levels of productivity and resilience across the stack. You can get the low down on all that’s new with Hydrogen 2 in Shopify’s update.
I’m a merchant, what’re the benefits of headless and Hydrogen 2?
Decoupling the front end of your store from the back-end gives merchants flexibility in design, optimized performance and reduced load times, as well as broader omnichannel personalizaton.
Some of the pros to going headless include:
1. Highly customizable
The most popular reason merchants decide to go headless is the flexibility it promises both in terms of both design and functionality. You essentially have free reign when crafting your customer experience and can build from the ground up to your exact needs/specifications, taking complete control of the content layer. Plus, with the front-end separated, it’s less risky to make changes without affecting the underlying technology that supports it. This also has benefits in connecting different types of back-end logic, like a separate CMS.
2. Site speed
Another commonly cited reason for going headless is the improvement it makes to site performance, which is one of the most significant factors in determining bounce rate (and also something noted by Google’s algorithm; better performance equals better SERPs’ performance). With the a latest iteration of Hydrogen being built on the Remix framework, a key benefit here is significantly reduced load times, equaling faster, smoother commerce experiences.
3. Broader omni-channel presence
Modern customers expect to interact with your brand across many digital touchpoints beyond your website: Progressive Web Apps (PWAs), mobile apps, marketplaces, billboards, POS, voice search, and more. Headless enables you to re-use your content, catalog and business logic across all these touchpoints through the likes of omnichannel capabilities, while delivering a broader, seamless user experience with fewer constraints.
I’m a developer, what’re the benefits of Hydrogen 2?
Hydrogen is Shopify’s modern, React-based toolkit to accelerate headless development on Shopify. Hydrogen 2, the latest version that’s built using Remix, offers an improved developer experience (check out this post for details of what’s new), even better performance, and a suite of new tools to unlock higher levels of productivity and resilience across the stack. Shopify acquired Remix at the end of 2022. Remix is a server side framework that uses “nested routes” to load data in parallel and deliver HTML documents almost instantaneously. That means reduced load times and quicker commerce experiences for shoppers.
Dion Almaer, Shopify’s VP of engineering, had this to say: “Remix will tackle challenges that developers building on Hydrogen have encountered around data loading, routing, and error handling… 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.”
How can I get started with Hydrogen 2?
There are some great resources and documentation provided by Shopify to help you get started. You can find them here:
- Hydrogen overview
- Hydrogen components, hooks, and utilities overview
- Build a Hydrogen storefront
- Hydrogen v2 developer preview: onboarding guide
Alternatively, in the next FAQ, you’ll see links to our GitHub repository with a live demo store and code samples.
We’d also recommend asking your agency for advice. And, if you’re on the lookout for a new agency to help you get started with Hydrogen 2, we’d be happy to make you a recommendation. Just reach out!
How does Nosto integrate with Hydrogen and do you have a demo store and code samples?
Yep! Our tech team’s created a designated GitHub repository where you can access a demo store showing Nosto on a Hydrogen 2 storefront, with accompanying code samples.
I’m using Nosto with the first release of Hydrogen, what does this mean for me?
Business as usual! Merchants on Hydrogen 1 or 2 will get full support from Nosto, so you’ve nothing to worry about.