• Services
    • Headless Ecommerce Development
    • Ecommerce UI/UX Design
    • Agency Support Services
    • Platforms
    • Shopify Plus
    • BigCommerce
    • Craft CMS
    • Shogun Frontend
    • ButterCMS
  • Case Studies
  • Blog
  • About
  • Contact
  • Headless CMS
  • Shogun
  • Shopify
Shogun Frontend vs Hydrogen by Shopify  |  Read time 7 Minutes

Shogun Frontend vs Hydrogen by Shopify

|  Read time 7 Minutes

Sam Hannan profile photo
By Sam Hannan
Connect on LinkedIn

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.

Shogun Content


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.


Page Builder


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.

Shogun Sidebar

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. 

Shogun Frontend vs Hydrogen by Shopify
Electric Enjin
We recommend

Shogun Frontend

8.8
4.4
Very Good

Pro's

  • Lightning Fast Page Speeds
  • Great Support Team
  • All in One CMS

Con's

  • Less Control of Frontend Packages
  • Small Ecosystem
  • Specific Terminology
  • Ease of use
  • Developer Support
  • Stability
  • Performance
  • Security

Hydrogen by Shopify

7.2
3.6
Okay

Pro's

  • React Framework for Fast Page Speeds
  • Built for Shopify Stores

Con's

  • Few Resources for Support
  • New Tech - Not Many Case Studies
  • Ease of use
  • Developer Support
  • Stability
  • Performance
  • Security
  • Craft CMS Partner
  • Shogun
  • ButterCMS
  • Shopify Partners
  • Zendesk Partner
  • bigcommerce partner

Electric
Enjin

  • Home
  • Work
  • Company
  • Careers
  • Blog
  • Contact
  • Rss
  • Blog Archive
  • Work Archive
  • Sitemap

Our
Services

  • Headless Ecommerce Development
  • Ecommerce UI/UX Design
  • Shopify Plus
  • BigCommerce
  • Craft CMS
  • Shogun Frontend
  • ButterCMS
  • Agency Support Services

CMS
Guides

  • Shopify vs Magento: The best ecommerce platform for your business
  • Shopify vs Shopify Plus: Is the price tag worth it for your ecommerce business?
  • Craft CMS vs WordPress: Which is the best CMS? 2023 Edition
  • Craft Commerce vs Woocommerce
  • Craft CMS vs WordPress: SEO Matchup
  • Craft Commerce, Shopify & BigCommerce Platform Comparison

Let's
connect

  • 203-939-9344
  • [email protected]
  • Electric Enjin
    20 N Main St
    4th Floor
    Norwalk, CT 06854

Ecommerce tips & insights
straight to your inbox.

© Electric Enjin LLC 2023.
Electric Enjin is a certified Minority Business Enterprise.

Privacy Policy

×

Let's Talk

To get started, we just need a little information.

Noel Lopez, Client Success Manager

Chris Ching, Founder


What to expect

  1. Chris will reach out to schedule a free 30 minute consultation.
  2. We'll discuss your goals, requirements, timing, and other details.
  3. Afterwards, you'll receive a tailored proposal.
  4. We get to work.
×

Give us your email (so we know you’re not a bot) to access the case study.