Behind the Build: Taking Your Shopify Store Headless With Shogun Frontend

December 14, 2021
by
Kaitlyn Ambrose

Behind the Build: Taking Your Shopify Store Headless With Shogun Frontend

December 14, 2021
by
Kaitlyn Ambrose
Back to the blog
Get the latest straight to your inbox
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Share on:

At Shogun, we've taken dozens of forward-thinking Shopify brands headless, including Daring, The Feed, TULA, and Nomad

We’re making headless more accessible by creating software that unifies everything you need to build a flexible frontend to pair with your Shopify backend.

If you've been thinking about decoupling your Shopify store like these awesome headless commerce examples, you’ve probably wondered how it's done. 

We’ve covered what it takes to go headless with Shopify before, but today we're sharing exactly what you can expect when you take the leap with us.

When you add a “head” or frontend layer to your Shopify store using a solution like Shogun Frontend you’ll either:

  1. Build with our software with your internal team (with the help of our implementations team)

 or—like many Shogun Frontend customers…

  1. Pair up with an agency partner for implementation. An agency can often help recommend the best way for your brand to go headless based on unique needs.

Either way, here’s what you can expect:

#cta-visual-fe#<cta-title>Headless Commerce Made Simple with Shogun Frontend<cta-title>See how your brand can exceed the limits of modern ecommerce with a unified frontend platform. Learn more

Phase 1: Prep and discovery 🔍

Before you can start your journey to an even more flexible frontend for Shopify, you need a plan. First, your team will consider your current site and your goals for the new, decoupled site. 

To start your build team will run an audit.

  • This audit includes your Shopify site’s current features and third-party apps or integrations needed to bring your vision to life. This is to understand what you’ll need upfront, so all the integrations are accounted for, and customizations are mapped out. 
  • Next, you’ll work with your dev team to determine how your new headless Shopify site will solve existing problems. You’ll walkthrough how to future-proof to stay flexible forever, which new ideas to green light, and when you’d like to go live.  

Because design and creativity become limitless with a headless site, you can bring your wildest vision to life. You’re planning a differentiated experience without performance tradeoffs. 

Whether you want to layer high-res images in your site like TULA or morph the site into an educational hub like Daring, this is the stage you’ll hash those details out.  

Pages on Tula.com and Daring.com


#cta-paragraph-fe#While you’re keeping your Shopify backend intact, how you’ll make site updates with Shogun Frontend moving forward will be different. A new site means new workflows, but don’t worry, your build team will give you the tour.

From there, the build team will create your new sitemap architecture, the project timeline, and the workflow documentation. 

An example of a sitemap during the prep and discovery phase of a Shogun Frontend build

The sitemap acts as a North Star for the build process. This future-proof framework helps your brand become more agnostic to future changes to backend and frontend stacks as you scale. 

Phase 2: Kickoff and roadmap review 🧭

After the discovery phase is wrapped, we kick off! 

At this stage, your build team will present the plan they’ve created based on the current site audit and your goals. Think of this stage as the “revealing of the roadmap” of your headless Shopify site build.

An example of a Shogun Frontend implementation milestone timeline


During this meeting, you’ll review details like:

  • Sitemap component sizing
  • Site build milestones
  • Key tasks to achieve each milestone
  • Agreed on timeline (milestones), process, and launch requirements
  • Agency/or team training on how to use Shogun Frontend

The build team keeps all parties aligned on the plan and who’s responsible for each task. There are many parts to a headless build, so it’s imperative everyone’s aligned early. 

Once the team has marching orders, the build begins!  

Phase 3: Development 👩‍💻

Ready, set, build! The site plan is in motion and you’ll start to see your new headless Shopify store come to life over your build timeline. 

At this stage, your build team assembles your React.js frontend—or the part of the site that’s visible to customers. 

And if you’re implementing with an agency, they’ll create your set of custom, modular sections that become a library of easy-to-use building blocks for your team. 

In contrast, if you want to go headless with your in-house dev resources, Shogun Frontend’s Starter Kit contains everything your dev team needs to build your site foundation faster—like mock APIs and other components. 

The best part? Once your site is live, there’s no code required to use these reusable blocks, meaning non-technical team members can now make site updates without looping in a developer.

Making changes to TheFeed.com through Shogun Frontend's Experience Manager

 

Your agency will meet with Shogun regularly to review the progress on the current milestone the team is working towards. 

What’s more, functionality checks will be run throughout this stage to assess the code and the usability of what’s been created so far. 

These checks cover:

  • Engineering code review 
  • Shogun Frontend architecture review (the status of the FE component of the build) 
  • Usability (performance, accessibility, and user experience)

The entire team will meet to review the functionality report to keep everyone on the same page and aware if milestones or deadlines need to change.

If issues pop up at any point—like out-of-scope changes or integrations that need more attention—they’ll be addressed and resolved fast in this phase, rather than at the end of the build during the final Q&A check. 

#cta-visual-fe#<cta-title>Want to see Shogun Frontend in action?<cta-title>Our team is happy to walk you through a demo. Book your demo


Phase 4: Launch and post-launch 🚀

Now for launch day! 

Before your site can successfully launch, the team will sign-off on the crucial site components, including:

  • Pages and sections (is everything displaying correctly?)
  • Functionality and performance (is the site working as intended?)
  • Legal and detail (is the site in compliance with your legal requirements?) 
  • Usability testing (is the site usable/checkout functioning, etc.)

Once the site has undergone extensive Q&A, has total sign-off, and your launch date has been confirmed, it’s time to celebrate your new headless Shopify site! 

Shogun Frontend-powered headless sites

During the post-launch phase, Shogun will sweep the site for any issues. Your team will also learn how to add content to your new headless site ahead of the full hand-off.

How should you go headless with Shopify?

There are several ways to take your Shopify site headless—whether you use a unified frontend solution like Shogun Frontend or opt for a completely custom-coded build you compose from scratch. 

The method you choose boils down to two big factors:

  • Your resources: Do you have a dedicated or larger internal development team that can see the build through and maintain it after launch? A unified frontend solution allows non-technical team members to make site updates and changes, freeing up coveted developer time for other projects.
  • Your focus: Being part of a growing ecommerce brand means you have a lot on your plate. A unified frontend software alleviates some of the risk of going headless and eliminates the need to worry about every component of your build.

Whatever you decide, the only “right” way to go headless is what’s best for your business. 

#cta-visual-fe#<cta-title>Headless Commerce Made Simple with Shogun Frontend<cta-title>See how your brand can exceed the limits of modern ecommerce with a unified frontend platform. Learn more


Kaitlyn Ambrose

Kaitlyn works on all things content at Shogun. ⚡