Nomad x Shogun Frontend

In 2020, while working at Shogun, I was one of two developers responsible for migrating Nomad's ecommerce website to Shogun Frontend.

Nomad was already running its store on Shopify, and the goal was not to replace Shopify or redesign the website from scratch. Instead, we were moving the storefront itself to a new architecture while keeping Shopify behind it for the commerce side of the business.

Shogun Frontend was a new product at the time, built around the idea of headless commerce. Instead of having Shopify render the storefront through a traditional theme, Frontend provided a separate web frontend while Shopify continued handling things like products, customers, orders, and checkout.

For Nomad, that meant rebuilding an existing ecommerce experience on top of a completely different frontend architecture without making the site suddenly feel like a different store.

Rebuilding the Storefront

One of the interesting things about this project was that we were not starting from a blank canvas.

Nomad already had an established website, visual identity, product catalog, navigation, and shopping experience. Our job was to recreate that experience using Shogun Frontend and make the transition as transparent as possible to customers.

That involved rebuilding the different parts of the storefront as reusable components and sections: navigation, product grids, product pages, promotional content, product information, and the other pieces that made up the site.

But reproducing the visual result was only one part of the work. An ecommerce website has a lot of behavior hidden behind what initially looks like a fairly simple interface. Product information still had to come from Shopify, navigation had to work across the new frontend, carts had to behave correctly, and customers ultimately still needed to reach Shopify's checkout.

It was a good example of how a migration can look simple from the outside while involving a lot of work underneath.

Building for merchants too

Another important part of Shogun Frontend was that developers were not supposed to be the only people capable of changing the website.

We built sections that could be exposed through Frontend's visual editing tools, allowing Nomad's team to manage parts of the storefront without having to change the React code every time they wanted to update content or merchandising.

A homepage, for example, could be composed from sections representing things like navigation, hero content, product grids, and company information. Product pages could use their own reusable structure while pulling the actual product data from Shopify.

That created an interesting balance. Components needed enough structure that the storefront remained consistent, but they also needed enough configuration that the people actually operating the store could use them.

It changed the way I thought about component APIs. The interface of a component was not only something another developer would use in code. In many cases, the decisions we made about configurable fields and sections also determined what a merchant would eventually be able to control through the editor.

Working with an existing store

Migrating an existing ecommerce site also meant dealing with constraints that would not exist in a completely new project.

The storefront was changing, but the business behind it was not. Products, content, existing Shopify data, checkout, and the expectations of people already using the site all had to continue working through the migration.

That made incremental testing especially important. We had to constantly compare the new implementation with the existing storefront and make sure that moving to Frontend did not accidentally change behavior that customers or Nomad's team depended on.

There were also plenty of small details that only became obvious once real content was running through the new components. Product titles were not always the same length. Images had different proportions. Pages had different combinations of content.

Those were the parts of the migration that took much more time than simply translating a design into React components.

Launch

Nomad launched its new storefront on Shogun Frontend in late 2020.

The interesting part of the launch was that, visually, it was not supposed to be dramatic. Customers were still visiting Nomad and buying the same products from the same brand. Most of the change had happened underneath the experience.

According to a Shogun case study published after the migration, Nomad saw a 25% increase in ecommerce conversion rate and a 25% increase in revenue per session after moving to Frontend.

Those numbers were the result of the storefront and business as a whole rather than something I would attribute to any single developer, but it was rewarding to see a migration we had spent months working on reach production and be associated with measurable improvements afterwards.

Lessons Learned

Rebuilding a website with a new stack is relatively straightforward when you control all of the assumptions. Rebuilding an existing ecommerce site means preserving years of assumptions that may not even be documented anywhere.

It also reinforced the value of separating components from content. We were building the React implementation, but Nomad's team needed to continue operating the website after we were finished. A component that looked correct but required an engineer every time its content changed was not really finished.

And because there were only two developers working directly on the migration, I got to work across a large part of the storefront rather than being responsible for one isolated feature. By the end of the project, I had worked through everything from reusable sections and responsive UI to the less visible integration details required to make a headless storefront behave like the ecommerce site it was replacing.

Shogun Frontend itself was eventually discontinued, but I still think this project was an interesting point in ecommerce development. Headless storefronts were becoming much more practical, and we were taking an established Shopify store and moving its customer-facing experience into that model while the tooling around it was still relatively new.