Preparing your Studio

Sanity Studio is where your content creators will go to create and maintain content about your business such as extended storytelling for your products.

Later you'll use install Sanity Connect to automatically write product data from Shopify to your Sanity project.

But first, you should prepare a Sanity Studio to display that product data so your content creators can embellish it with extra content.

npm create sanity@latest -- --template shopify --create-project "Sanity and Shopify" --output-path ./sanity-and-shopify --dataset production --typescript

You may be prompted to log in to your Sanity account.

This command creates a new project and dataset, and sets up a new project folder with all the files and dependencies you need to get started.

The shopify template used by this install command will start your Studio with predefined schema types. These can be extended or removed as you need.

Sanity Studio is the ultimate customizable content creation platform. The code you run locally in development writes in real-time to a cloud-hosted content store and can be deployed anywhere you can run a React single-page application.

Run the command below to start the development server.

npm run dev

Open http://localhost:3333 in your browser and log in. You should now see a Sanity Studio with a few predefined schema types but no content.

Open to enlarge image

You can create content like Pages using the schemas registered to the Studio. But for Products and Collections, it is best if that content comes from a single source of truth – Shopify.

In the next exercise, you will connect your Shopify store to Sanity and see the content update in the Studio.