Skip to content
This repository has been archived by the owner on Jul 29, 2023. It is now read-only.

An example Sanity Studio configured for headless Shopify projects.

Notifications You must be signed in to change notification settings

svrnhdl/sanity-shopify-studio

 
 

Repository files navigation

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 run upgrade

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

License

This repository is published under the MIT license.

About

An example Sanity Studio configured for headless Shopify projects.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 100.0%