What are the most common challenges when building an e-commerce system on Shopify? Let's start with standard Shopify theme templates.
The fundamental and most significant issue is that Liquid is a template language, making it challenging to develop. As a result, custom databases, complex logic, and third-party service requests are impossible.
Is Shopify Hydrogen right for your eCommerce?
Take a quizFurthermore, when developers think about frameworks like Ruby on Rails, or Django, Liquid is a View layer. The developer has no direct access to the controllers and models that have been predetermined.
The second issue is that the Liquid theme tightly couples your code to the Shopify ecosystem. You won't be able to reuse the code if you want to move to a different system. It inhibits companies from evolving because it makes e-commerce platforms the sole judge of success. When businesses must change the platform, they are forced to discard the entire system. As a result, thousands of hours and dollars may be lost.
The third Liquid theme drawback 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.
What about headless commerce? The headless technique decouples the frontend from the backend, allowing you to interact with third-party services and obtain data via API. The main advantage of headless commerce is that the front end may not be aware of the e-commerce platform it uses. As a result, you can develop and integrate whatever you want and connect all the services you require.
You may encounter several typical difficulties when you utilize Shopify as an e-commerce component of the encounter system.
To begin with, you'll need additional hosting to hold your front end, which increases the cost over the themed option. In addition, another hosting fee will rise alongside traffic despite Shopify's cost not being influenced by it. So the prices might be relatively high in some instances.
Another issue is server-side rendering. Because Shopify Storefront API has IP-based limits, it's simple to render whatever you want on the client's side, but e-commerce sites should render pages on the server so that Google can index them correctly. However, JAMStack tools such as Next.js or Gatsby effectively address this issue.
Finally, the last significant issue is Shopify Apps. We can't use the part of the ecosystem that utilizes themes if we don't use a Shopify Theme. Again, it's not a problem but a design feature; if we want to be self-sufficient and utilize a headless commerce system, we should expect not to use features that increase coupling. Instead, we may create any connection with any third-party system that provides API.
When comparing these two methods, we notice that both have their drawbacks. The most significant distinction is that, in the headless variation, the problems are conquerable at the cost of development resources. Still, the themed variant has no way to address fundamental issues. So let's describe how the new Hydrogen app by Shopify addresses those problems.
Hydrogen is an open source Shopify framework that combines React Server Components, streaming server-side rendering with suspense, and intelligent caching settings. It's the quick framework for developers and customers when coupled with Shopify's Storefront API, globally accessible across all Shopify stores, Shopify-optimized commerce components, and a Vite-powered development environment. Additionally, Oxygen is a global hosting solution for Hydrogen storefronts.
Shopify's 2021 event, Shopify Unite, saw the debut of Oxygen, a method to host Hydrogen stores directly on Shopify that is quick, works worldwide, and is designed for ecommerce.
The Oxygen Shopify server overcomes the hosting issue of a headless solution, which we've described above. In addition, by providing a global hosting solution, Shopify aims to eliminate one of the main drawbacks of using a headless system.
It was still early days for Hydrogen apps in 2022. However, the initial version was made available on November 6, 2021, and the framework has been improved numerous times.
Unlike JAMStack platforms like Next.js or Gatsby, Hydrogen does not prerender HTML files and instead employs server-side rendering, so you cannot utilize a simple hosting platform like AWS S3. However, there should be a Node.JS server that can be more costly for the website to work correctly.
Shopify Oxygen has been released and is now available for merchants to use. The Oxygen release came at the end of 2022. With the release of Oxygen, the headless hosting difficulties that were encountered with Hydrogen have been resolved.
The Shopify Oxygen stack now offers a complete solution for Hydrogen framework hosting, which provides merchants with the flexibility and control they need to create unique and personalized shopping experiences for their customers.
Hydrogen extends Shopify features and ideas with commerce hooks, components, and utilities. In addition, it delivers boilerplate code that you may use to build a custom storefront, allowing you to focus on creating distinct experiences.
The Storefront API's GraphQL types are used to generate and optimize the data for Hydrogen. The structure of the information supplied to components, utilities, and hooks is based on the GraphQL types from the Storefront API.
While the Storefront API allows you to create bespoke storefronts in any language and technology, Hydrogen is a tool that aims to speed up the development process.
Sell online with Shopify. Click the link and get a free trial of Shopify!
In other words, the architecture of a hydrogen application is built on top of a development framework and UI components. The Vite plugin for the Hydrogen platform offers server-side rendering (SSR), hydration middleware, and client component code transformations. The components, hooks, and utilities of Hydrogen UI are meant to support Shopify features and ideas.
Like in Liquid theme creation, the framework provides a developer experience with a precise path to follow. But, on the other hand, it makes higher-level development simpler.
Instead of using Webpack, the developer will utilize the Vite plugin as a development environment tool. However, it implies that developers won't be able to use Hydrogen in existing projects by adding another npm dependency. Therefore, Hydrogen must serve as a focal point of the system.
This is precisely what we see in data-sourcing strategies. It's about the same goal when Hydrogen aspires to be the system's core. The Storefront API serves as the data source for this project's Shopify-based storefront. The data structure supplied to components, hooks, and utilities follow and adheres to the Storefront API's GraphQL types. You can directly deliver data from the Storefront API into components, hooks, and utilities.
Hydrogen can also handle data from third-party sources like API-first CMSes like Prismic, Contentful, or non-Shopify e-commerce systems. However, if you want to integrate Hydrogen components with a non-Shopify data source, you must first convert the data into the appropriate formats for the Hydrogen. In addition, an adapter must translate third-party data into the types expected by Hydrogen. Finally, if you use a third-party data source, you may query it in your bespoke storefront software.
However, you may not use the Hydrogen framework Shopify's layer with other frameworks like Gatsby or Next.js. This is because Hydrogen utilizes a modified version of server components that support context and SSR, which is not yet available in Next.js' current version. Also, you can't utilize server-only Hydrogen GraphQL queries with Storefront API integrations that use other frameworks.
In other words, Hydrogen provides a straightforward method to construct a contemporary Shopify shop at the expense of technological independence and software modifiability restrictions. It implies a quicker start-up, time-to-market, and higher long-term costs than others.
Shopify React Hydrogen commerce components, hooks, and utilities are available in various types to help you speed up development.
Routing and session management are included in the framework components and hooks offered with the Hydrogen.
The basic building blocks for different component kinds include products, variants, and carts, all based on primitive components. In addition, metafields, money representations, and other elements are included in primitive components.
The global components, such as ShopifyProvider, surround the whole application. For example, the ShopifyProvider component is connected to the hooks used for data retrieval from server components. Global components and hooks aim to link the data layer with the user interface layer.
The product and variant components and hooks describe the goods, digital downloads, services, and gift cards that a business offers. For example, if a product has options, like size or color, merchants can add a variant for each combination of options. In addition, these components make it easy to create product pages or blocks.
The cart components and hooks are related to the products that a client intends to get. Therefore, such elements allow for the rapid implementation of a shopping cart.
Translating a product page into multiple languages and currencies is the job of localization components and hooks. The LocalizationProvider component is present in Hydrogen.
Metafield components and hooks link Shopify resources with technical information, such as part numbers or release dates.
Hydrogen also provides several utilities to assist you in speeding up your development process.
Hydrogen, again, aspires to be the heart of the system at both the framework and component levels. The data is received in Shopify format, transmitted across layers in Shopify format, and then React components accept the data in Shopify format.
Is it possible to utilize Hydrogen to create headless storefronts? The unexpected answer is no. A Hydrogen storefront is a beautiful tool for creating modern Shopify stores. It allows developers to construct a Shopify store or demo store with React framework and contemporary JS, makes it a Single Page Application or even a Progressive Web App, and gains more control over rendering, but it's still a Shopify shop. The headless system aims to decouple the frontend from the backend, whereas Shopify's main idea is maintaining tight integration.
Each system is a third-party system for the headless backend, whether it is an e-commerce platform or not. Therefore, the frontend should be unaware of platform specifics. Instead, Hydrogen places itself and Shopify in the center of the system. It's not bad because it's still a valuable tool for rapid Shopify development. It is, however, not headless.
It's also a wise business decision for Shopify. While the headless design is vendor-agnostic and enables freedom from any platform, Shopify, as a corporation, strikes back by providing tools for fast and contemporary development to its clients while maintaining tight ties between them.
If Hydrogen was not designed to create headless shops, it implies it is intended to replace Liquid. However, it solves most of the Liquid issues since it has both a backend and frontend, employs powerful JavaScript instead of a simple templating language, and controls rendering and routing. Therefore, the following steps for Shopify will likely be the development of a template catalog similar to the Shopify Theme Store.
On the other hand, the Hydrogen store has several drawbacks from the headless design. Shopify app that utilizes Liquid as a frontend will not function with Hydrogen. There's also the problem of hosting. There is a need for a dedicated server until Shopify Hydrogen Oxygen hosting is available.
Now it's clear Shopify Oxygen Hydrogen isn't a tool for building headless systems but rather a contemporary replacement for Liquid; let's talk about the concerns raised at the start.
Does Hydrogen solve the Liquid problem of complex development? Definitely. Modern JavaScript is capable of addressing nearly all current ecommerce issues.
As previously suggested, Hydrogen intends to be the system's heart, which tightly couples the frontend to Shopify, as Liquid does. The connection is not as tight as it may be, but it's enough to prevent the frontend from being reused on other ecommerce platforms. As a result, the Liquid coupling problem is unaddressed; instead, it has been intentionally created.
Hydrogen still plays a significant role in deciding what and how to construct, but it allows for more flexibility than Liquid. You can build your own routing and SPA/PWAs, but the developer has no control over the bundler, dev server, or other tools. As a result, this issue is somewhat addressed.
What about the difficulties of headless development? Oxygen overcomes the limitations associated with hosting and lives since the end of 2022. So the hosting problem is resolved.
Finally, as with headless stores, Hydrogen suffers from the Shopify Apps issue. As a result, that problem has not been addressed.
Finally, although Hydrogen solves some Liquid and headless issues, it also has drawbacks. So when should companies switch to Hydrogen? Restricting the building procedure also avoids architectural blunders. Hydrogen developers must follow the directions, but headless system developers should be able to build the approach from scratch. So, in a nutshell: When Liquid is not enough, the development team has no prior expertise in creating headless systems and keeping the coupling low so that the system may be vendor-agnostic.
VT Labs does agile development for Shopify stores, to move faster than competitors. You get store improvements every week and can change priorities anytime.
