Preparing your Studio

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

However, first, you should prepare a Sanity Studio to display that product data, so your content creators can enhance it with additional content.

npx create-sanity@latest --template shopify --create-project Sanity and Shopify --output-path ./studio --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.

In the studio directory, run the following command to start the development server:

# in /studio
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.