Shogun Frontend vs Hydrogen by Shopify

Shogun Frontend vs Shopify Hydrogen

Shogun FrontEnd and Shopify Hydrogen are both Headless Ecommerce Platforms. In this article, we’ll mainly cover what Shogun and Hydrogen do well, where they can improve, and what the overlying differences are. They both provide two options to get started, either with a blank barebones project folder or a fully fleshed-out starter template. For the sake of this article, we will compare starting a Shogun site vs a Hydrogen site without a starter template.

What Problems Do They Solve?

Shogun has been around for over 2 years, and supports both Shopify and BigCommerce storefronts, with plans to continue to integrate more. Not only is Frontend a Headless Framework, but it is an all-in-one platform to edit content, build pages, make code changes, and more. This makes the platform a one-stop shop for developers, content authors, and store managers. Their Page Builder, which is one of the most displayed features, allows anyone to spin up a brand new page quickly, drag and drop existing sections onto that page, or change the order of page content on an existing template page. Pages are very easy to build and preview, allowing the user to get visual confirmation the page looks as expected before building it.

Hydrogen, which is Shopify’s own Headless Framework, inherently doesn’t have any support for storefronts other than Shopify. Unlike Shogun, it is still in its infancy just releasing its Beta version last year. However, because Hydrogen is built by Shopify and made exclusively for their own storefronts, it is very easy to connect and get started with a Shopify storefront. The release of Hydrogen, which is a React-based framework, shows more storefronts are beginning to move towards adopting the advantages of React, and the increase in performance it provides

Shogun 2022 Advantages

The platform is meant for everyone. From developers to content authors all have a place to be in Shogun Frontend. This makes for seamless integrations and a very easy workflow for brands or agencies.

Custom content groups can get added easily, whenever, and connected via reference to each other. As well as, specific Shopify (or BigCommerce) product data gets pulled directly from the respected storefront, as read-only data, which saves the hassle of data entry, or having to worry about incorrect data. Updating a product on Shopify (or BigCommerce) will similarly update it on Shogun.

Then there is the page builder, which allows for the viewing of pages on the left (at varying screen sizes) and the content section blocks on the right column. These sections can be dragged and dropped in any order, as a content author feels necessary. Page builder allows for any section to be connected with content (if necessary) and added to any page, to see how it looks in real-time!

Similarly: these sections can be quickly opened and the content can be changed.

Hydrogen’s Position in 2022

Hydrogen is meant for developers, and that shows from the beginning. The homepage has the npm package install command front and center of the page, as well as a link to the documentation page. There is no platform to work and edit on things like as shown on Shogun, it is just a Headless Framework. That was a very stark and noticeable difference from the beginning, and after working with Hydrogen with no cms or an all-in-one platform like Shogun Frontend, there isn't much for content authors or managers to work with.

However, as mentioned before, starting up a Hydrogen instance and pairing it to a Shopify store is very straightforward and hassle-free. Simply running the npm command they show on their homepage will start you with the necessary environment to just switch in your Shopify StoreFront API Key and Shopify domain and start fetching data.

Similarly to Shogun, Hydrogen is a React.js-based framework, which is a promising sign for both React and Shopify. By Shopify moving towards a React framework, they are giving merit to React being the framework of the future, as well as acknowledging all of the page performance benefits of using a React Framework. With this as well, users can utilize reusable sections throughout their site build.

Lastly, once the store is all configured, it is easy to connect to a cart and checkout through their docs. Once the storefront is connected with hydrogen, and a basic product page is created, the buy now button from the @shopify/hydrogen npm package will work with product data passed, and no special configuration is needed outside of Shopify.

Shogun Improvements

Shogun has been around for 2 years and is still constantly improving. In the previous months, they have added build logs, built a history dashboard, and are continuously updating their documentation. With this being said, some things would make using the platform more seamless. One of these improvements would be for users to install packages on Frontend themselves. Nearly any package can be added, but since it is hosted on Frontend, you have to request someone on their team to install it.

Where Hydrogen Can Improve

It is expected that a new framework in its infancy will have its issues and Hydrogen certainly does. Depending on the version of node.js or other specific computer dependencies, the npm script to install Hydrogen will throw an error. Since Hydrogen is new and hasn't been used too often yet, troubleshooting bugs and looking for people who have experienced similar issues can be difficult.

Similarly, their documentation outside of ‘Getting Started’ could use improvement. Deployment guides are rather unhelpful unless deploying to Oxygen (which is only available to ShopifyPlus Stores currently), and there is no documentation on connecting to a specific CMS.

It’s nice if you’re a developer that Hydrogen is so dev-centric, but it just isn’t practical for scaling large Shopify stores with content authors and managers. Even if using a third-party CMS, there is the headache of now having to manage different platforms and a code environment to keep track of. 

Shogun Ease of Use:

Making a platform intuitive for both content creators and developers can be a struggle. Both target audiences need different features present to them and have them be easily accessible. While it’s very difficult to make a UI/UX for both audiences, Shogun Frontend and Page Builder do a good job of bridging the gap. The platform, which requires some training and introduction in order to get familiar with it, is relatively easy to navigate beyond that. The fixed Right-Sidebar contains links to the relevant pages in the platform, and each page on Frontend comes with a search, to find content, code, or anything else. Altogether, the system is designed in a way that makes sense to either audience, and relevant information is sectioned accordingly, making the platform easy to understand once some of the terminologies are defined.

Hydrogen Ease of Use:

Well, there is no Hydrogen platform or system to use that is frontend/client-facing, since it does not manage any content. But it is worth going over how easy (or not) it is to start a hydrogen project from scratch. Right from the Hydrogen homepage, the visitor is presented with an npm script to install the package or a link to the documentation. However, that script, depending on other versions of node and system requirements, could error. This is one of the downsides of Hydrogen still being in beta. Unfortunately, their documentation does address these errors, and because of the ‘newness’ of Hydrogen, little is written on support. Once these initial bugs are overcome, and Hydrogen is installed, it is very easy to connect with your existing Shopify store, with just the API key and store URL. However, similar issues will arise as before, if errors or unknown issues arise, just with the few outside resources written on Hydrogen.

Shogun Support:

Coming from a build as a partnered agency with Shogun, the support has been unparalleled as a white glove service. From the initial setup of the store build, Shogun had resources to explain their platform, get started, and have milestone check-ins along the way. They have a support ticketing system which is extremely helpful for urgent or casual questions. They continue to update, edit and change their documentation to work for all users and stay updated with changing technology. The support doesn’t stop at the technical end either. The Shogun team helps architect and plan the build, and all the way through launch, helping to set up Analytics tracking.

Hydrogen Support

Similar to the paragraph on ease of use, well Hydrogen doesn’t exactly have a support or contact team. Their support is their developer forum, documentation, or discord channel. Since Hydrogen is just a framework built by Shopify, their support team is really just Shopify’s. With that being said, Shopify support has been helpful and thorough in the past, and there is no reason to think that support won't extend to the Hydrogen platform.