Prerequisites
Shopify is the market leader for managing online stores, offering options to create websites using their templating language, "Liquid,” or headless with their APIs. This module will leverage the latter.
Hydrogen is a front end framework maintained by Shopify and built on React Router 7 (formerly known as Remix 2). It powers modern applications and websites with fine-grained controls over data fetching, caching, and delivery. It was designed for headless e-commerce websites.
Sanity Studio is the primary content management system for the Sanity Content Operating System. The admin dashboard your content operators will use to embellish raw product details with rich descriptions and connected media to tell more complete stories.
Sanity Connect is a Shopify application to link your Shopify store to your Sanity project. Product changes are instantly written to Sanity, so you are always working with the most up-to-date content, thanks to Sanity’s real-time APIs.
The following assumptions are made for you to be able to complete these exercises:
- You have a Shopify Partners account to create demo stores.
- If not, sign up for free at partners.shopify.com
- You have a Sanity account.
- If not, sign up for free at sanity.io/get-started
- You are familiar with the command line for creating and running code locally.
- You are skilled with JavaScript.
- You are comfortable with code snippets being written in TypeScript.
- You have a reasonable level of understanding of React.
- You must have at least Node 20.11 installed.
- CLI commands are written for pnpm, though you could use whichever package manager you prefer
- Firefox or Chrome (Hydrogen's development environment can be unstable in Safari)
Your first task is to log in to your Shopify Partners dashboard and create a development store to use through this module.
Your store can have any name.
- In "Purpose," select "Create a store" to test and build.
- The store can have any available name.
- In "Build version," select "Current release."
- In "Data and configurations," select "Start with an empty store," as you'll import test data in a later exercise.
- If you don’t need an e-commerce store, you may prefer to complete the Day one content operations module, which also looks at setting up Sanity Studio with a Next.js or Remix front-end.
- If you already have a Sanity Studio and want to make it even better, look at the Studio excellence module. This Shopify-specific module will use a Studio template with an existing schema.
- While this module deals exclusively with Shopify, the patterns displayed could be adapted to other e-commerce providers.
Let’s begin by setting up Sanity Studio!