Building Shopify Ecommerce Websites

Shopify has enabled e-commerce businesses and brands with a simple and easy to use platform for years. Crucial to Shopify’s platform and ease of use is its ecosystem of templates from the Shopify Theme Store and its self-contained features and functionality offered in the Shopify App Store. However, the last several years have seen fierce competition from other ecommerce platforms.

In June 2021, at Shopify Unite, Shopify released Online Store 2.0 (OS 2.0), its answer to improving many of its platform’s existing features within themes. Shortly thereafter, Shopify Hydrogen was announced to compete with emerging Headless Commerce platforms. 

‍Hydrogen and OS 2.0 are both designed to streamline the e-commerce process and make it easier for businesses to succeed. But which one is best for you? In this article, we'll take a look at both products, compare their features and discuss which one is the best fit for your business.

What is Online Store 2.0?

Shopify OS 2.0 is Shopify's flagship e-commerce platform.It's designed to help businesses take their online stores to the next level with easy-to-use themes that offer drag and drop modules, sections that can be used everywhere, and customizable settings that can quickly alter the look and feel of a storefront. It’s the first major revision to how themes on Shopify are built and extends prior capabilities.

What is Hydrogen?

Hydrogen is Shopify's newest product for Headless Commerce. It's designed to help businesses take full control of their front-end, or customer-facing website. More technically, Hydrogen is a collection of tools, utilities, and pre-made examples that aid web engineering teams in launching headless commerce storefronts faster and on platform. Much of that is powered by Remix, a recent Shopify acquisition. It provides the framework needed to get up and running without the need to develop a web application and platform from scratch. This allows engineers to build faster and focus on what’s important—making a stellar brand experience that stands out.

What are the Biggest Differences?

Themes vs Custom Development

OS 2.0 themes are offered in the Shopify Theme store and can quickly be selected, tested, and modified to get a storefront up and running. By contrast, Hydrogen currently requires an engineer or team to build and modify the frontend modules. Similarly, you will need an engineer to connect various features like Reviews, Bundling, or Countdown Timers. Many apps from the Shopify App Store that would be displayed by installing the app do not work with Hydrogen-powered storefronts and must be installed manually by an engineer. 

Another key difference is the technology layer powering the store itself: React vs Liquid. Hydrogen uses the React framework to build all front-end code, but OS 2.0 fully takes advantage of Liquid, Shopify’s theme templating language. While React can be used on a traditional Shopify theme, it’s not common and can have site speed implications if not done properly. If you are using Shopify Themes, you may be able to find more [affordable] developers that are familiar working with Liquid rather than React.

Shopify as a CMS

Another big difference is content management. OS 2.0 comes with Shopify’s Theme customizer, section settings, native product and collection information management, and Metafields, all of which offer a variety of ways to add content to the site. Ultimately, the theme makes everything work together. By contrast, using Hydrogen might require another CMS if the existing tools like Metaobjects, product information management, and Metafields do not provide enough flexibility desired by shop owners. 

Hydrogen Hosting Considerations

Hosting is a major concern for Hydrogen storefronts. Shopify currently offers Oxygen, its hosting platform that makes Headless development easier via the Hydrogen Sales Channel. Oxygen delivers the main server infrastructure needed to manage and deploy Hydrogen storefronts, but if merchants want more control, they could still opt to host their website outside of the Shopify ecosystem. While Hydrogen does offer a way to deliver performant hosting, you can still leverage a platform like Edgemesh to allow Online Store 2.0 themes to perform as good if not better than any headless site.

Which Approach Makes Sense for Shopify Storefronts?

We typically recommend that new Shopify stores and brands start with OS 2.0 because it’s easier to use and faster to build. However, if you need more flexibility in tightly integrating apps and using other content management systems, Hydrogen might be a good fit. Hydrogen is also better if you need to go beyond some of the limitations of Shopify’s theme framework and/or CMS. 

While Shopify Apps make it even easier to add functionality to existing storefronts made with a Theme, that same flexibility could reduce site speed by adding to the plethora of third parties powering the store. Working with Hydrogen would limit that issue because all apps and integrations must be integrated manually, which would create more flexibility in how they load. Either way, third parties will always present a challenge with a site’s loading speed, headless or otherwise, which is why leveraging a platform like Yottaa to manage the way those third party integrations load is crucial to a stores loading strategy.

What Does This Mean for the Future of Ecommerce 

Hydrogen is Shopify’s first headless framework, and its latest release gives merchants the ability to choose whether to build their own frontend, or use one of the many frameworks out there that includes Hydrogen. Headless also opens brands up to creating more engaging experiences in ways that were previously impossible or required workarounds; existing e-commerce stores are somewhat limited by what they can do with their frontend code using Liquid, but with Hydrogen the sky's the limit.

While Shopify’s Hydrogen paves the way for new possibilities while remaining on platform and within the ecosystem, Online Store 2.0 is fully capable of providing most everything brands need to get up and running and compete in ecommerce.

We partner with brands to help them get the most out of Shopify Plus. Get in touch with us to learn more.

‍