Note

This repo has been archived, but the Sanity / Shopify Studio is still maintained and is available via our CLI. To install, run npm create sanity@latest -- --template shopify

Sanity Studio for Shopify Projects

About

This Sanity Studio is configured for headless Shopify projects that use the official Sanity Connect app, allowing you to extend Shopify products and collections with your own rich editorial content.

It contains examples of customizing your desk structure, document actions and input components.

This studio can be used with our Hydrogen starter, your frontend, or anywhere else you want your e-commerce content to go.

Features

This studio comes preconfigured with Shopify-friendly content schemas and a whole host of customizations to make managing Shopify data in your Sanity studio easier.

It also comes with several convenient layout modules which can be re-used across various pages.

View studio features

Assumptions

No two custom storefronts are the same, and we've taken a few strong opinions on how we've approached this studio.

• Synced Shopify data for collection, product and productVariant documents are stored in a read-only object, store
• Shopify is the source of truth for both product titles, slugs (handles) and thumbnail images
• Shopify is the source of truth for collections
• Sanity is used as an additional presentational layer to add custom metadata to both Shopify collections and products
  • For products: this includes a portable text field with support for editorial modules
  • For collections: this includes a customizable array of editorial modules
• Some images (such as product and cart line item thumbnails) are served by Shopify's CDN whilst other images (such as those served in editorial modules) are handled by Sanity's Image API
• We only concern ourselves with incoming data from Shopify collections, products and product variants

We believe these rules work well for simpler use cases, and keeping product titles, images and slugs handled by Shopify helps keep content consistent as you navigate from your product views to the cart and ultimately checkout. Managing collections in Shopify gives you the flexibility to take full advantage of manual and automated collections.

You may have differing opinions on how content best be modeled to fit your particular needs – this is normal and encouraged! Fortunately, Sanity was built with this flexibility in mind, and we've written a guide on structured content patterns of e-commerce which may help inform how to tackle this challenge.

Setup

If you're reading this on GitHub, chances are you haven't initialized the studio locally yet. To do so, run the following shell command:

# run a one-off initializing script:
npx @sanity/cli init --template shopify

Make sure to run the tagged release! (@sanity/cli)

Local Development

Starting development server

npm run dev

Deploying the studio

npm run deploy

Upgrading Sanity Studio

npm install sanity@latest

If you have the Sanity CLI installed, you can also run this with sanity start|deploy|upgrade. It comes with additional useful functionality.

Upgrading from an old version?

We've updated some of the schema in this template to support deploying a GraphQL API, as well as making updates to remove schema warnings in v3 of the Sanity Studio. There are some breaking changes in these updates, which may mean you see schema warnings in the Studio. Please see migrations/strictSchema.ts as a guide to migrate your data. Don't forget to take a backup before making any changes!

License

This repository is published under the MIT license.