Planning Your Build

Review your Shogun Frontend technical spec

This will be created by Shogun Solution Engineers and provided prior to contract signature.

Provide Initial Metrics

It's important to get a baseline of the store's performance so we can better understand the improvements after the migration to Shogun Frontend. Please pull metrics for the following:

  • Lighthouse Score: provide both mobile and desktop scores. Perform the test multiple times in different locations, and within an incognito window.
  • Page Speed Insights/Core Web Vitals: Similar to Lighthouse, please perform multiple times to get an average.
  • Accessibility Score: We use this tool but feel free to use a different tool.

Review Best Practices and Project Notes

Review recommended Best Practices and project notes provided.

Read Documentation

  • We recommend reading through our documentation, to familiarize yourself with the basics and concepts of Shogun FrontEnd.

Outline Data Mapping Plan

Attempt to map out commonalities between the shared information as well as similar design aspects. We recommend using a page scraping tool such as this to understand the volume of pages. Confirm if all pages need to be migrated or if some of them can be decommissioned.

Plan for:

  • Homepage
  • Product Pages
  • Collection Pages
  • Blog Pages
  • Static Pages, such as privacy policy, shipping information, etc.

Always consider the end-user when building your plan. Ask yourself, if this needed to be updated, did I build it in a way that makes the updating and editing process easy to understand? This is true not only of the way it is built, but the naming conventions used to distinguish areas of the site. Define and follow a standard naming convention.

Investigate Apps

  • Break apps into two groups, backend vs frontend.
  • For frontend apps, determine which are handled completely within the platform checkout.
  • By default stores using Shopify are set up using the GraphQL Storefront API, however, some apps do not support this and we need to set up the store to use the Shopify AJAX/REST API.
  • With the remaining list, confirm that all apps are still being used and then begin to investigate what will need to be done for each one (API, iframe, script tag, etc.).
  • We have some out-of-the-box integrations available here.

Create a plan for Navigation

Start outlining a plan for the header/footer navigation, see Frames.

Create a plan for Blogs

Consider how you might want to structure the blog articles. See Blogs.

Dig into analytics

  • What are you using to track metrics?
  • What does your page meta look like?
  • Create a plan for implementing your page meta.

Future Proofing

We understand that eCommerce websites are not static, but it can be hard to plan for moving targets. The goal is to better understand and account for the goals and plans for the storefront in the next 3-6 months.


What’s Next
Did this page help you?