Prerequisites
Sanity is the only CMS to be Shopify Plus Certified, making them a perfect match for building ecommerce experiences. You'll connect them both together along with the purpose-built Hydrogen to create a basic front-end.
Shopify is the market leader for managing online stores, with 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 Remix. 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 content management system for the Sanity Composable Content Cloud. The primary interface your content creators 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 to create and run 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.
Your first task is to login to your Shopify Partners dashboard and create a development store to use through this module.
Your store can have any name.
- In "Purpose" choose Create a store to test and build
- The store can have any available name
- In "Build version" choose Current release
- In "Data and configurations" choose 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 with Sanity Studio 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.
This module will emphasize the easiest path to creating a working prototype. If you are looking for a more feature-rich Shopify, Sanity and Hydrogen example consider the Fluid template by Frontvibe.
Let’s begin by setting up Sanity Studio!