This Sanity Studio is configured for headless Shopify projects that use the official Sanity Connect app. It will let you augment extend product information with additional content, as well as integrate products with editoral content. This studio also contains example of customization of your desk structure, document actions, as well as input components.
This studio can be used with our Hydrogen starter, your own frontend, or anywhere else you want your e-commerce content to go.
This studio is built to accommodate product information coming from a Shopify Store. You can use the official Sanity Connect app on Shopify to sync your product information, add content on top of it and integrate with editorial content. All your data will be available over APIs that you can access with @sanity/client or the HTTP API. If you're using Hydrogen, there's also an official plugin available.
Inside /schemas you'll find schema definitions for all the content types. They are organized in folders:
/schemas/annotations/: Annotations let editors mark up inline text in the block content editor with rich objects. These can be used to agument editorial content with product information. It also uses referential integrity to keep you from unwillingly delete a product that's used in editorial content./schemas/documents/: Document types determines the shape of the JSON documents that's stored in your content lake. This is where you define the content forms for things like products, collections, variants, as well as articles./schemas/objects/: General purpose & re-usable content structures, such as links (linkExternal,linkInternal),productOptionandblockImage.
Sanity Studio will automatically list all your document types out of the box. Sometimes you want a more streamlined editor experience. That's why you'll find a custom desk-structure that's defined in /deskStructure.js. It does the following things:
- Groups product information and variants by individual products for more convenient editing
- Creates a singleton document for controlling a homepage with featured products and collections, and a gallery
- Creates a singleton document for settings to control naviagation and global content
- Lists article types for information and for editorial content
Custom document actions let you override the default behavior of the publish button. The included document actions adds to the menu that you can find by pushing the chevron right to a document's publish button.
You can find these in /documentActions/.
Read more about document actions.
/documentActions/deleteProductAndVariants.tsx
Delete a product document including all its associated variants in your Sanity Content Lake. Without this document action, one would have to delete all variant document one-by-one.
Preview
/documentActions/shopifyLink.ts
A shortcut to edit the current product or product variant in Shopify in a new window.
Preview
/components/inputs/PlaceholderString.tsx
A simple wrapper around a regular string input that uses the value of another field as a placeholder.
Example usage
{
name: 'title',
title: 'Title',
type: 'placeholderString',
options: { field: 'store.title' }
},Preview
/components/inputs/ProductHidden.tsx
/components/inputs/ProductVariantHidden.tsx
Display-only input fields that show the corresponding product (or product variant) status in Shopify.
For instance, if it's been deleted from Shopify or has its status set to draft or active.
Preview
/components/inputs/ProxyString.tsx
A simple wrapper around a regular String input field that displays the value of another field as a read-only input.
Since we are using certain product fields from Shopify as the source of truth (specifically, product title, slug and preview images) and store these in a separate store object, these proxy string inputs are used to better surface deeply nested fields to editors.
Example usage
{
title: 'Slug',
name: 'slugProxy',
type: 'proxyString',
options: { field: 'store.slug.current' }
}Preview
/components/media/ProductStatus.tsx
A custom preview component that will display product and product variant images defined in store.previewImageUrl.
By default, Sanity Connect will populate these fields with the default product (or product variant) image from Shopify. These images are not re-uploaded into your dataset and instead reference Shopify's CDN directly.
This preview component also has visual states for when a product is unavailable in Shopify (e.g. if it has a non-active status), or if it's been removed from Shopify altogether.
Sanity Connect will never delete your product and product variant documents.
Preview
This studio comes preinstalled with two Shopify dashboard widgets: shopify-connect and shopify-intro, provided by the sanity-plugin-dashboard-widget-shopify plugin.
These can be configured and removed as you see fit. Please consult the plugin repo for more information.
No two custom storefronts are the same, and we've taken a few strong opinions with how we've approached this studio.
- Synced Shopify data for
productandproductVariantdocuments are stored in a read-only object,store - Shopify is the source of truth for product titles, slugs (handles) and thumbnail images
- Sanity is used as an additional presentational layer to add custom metadata to products
- This includes a portable text field, a product-level gallery and re-organisable text sections
- Product inventory levels are not stored in Sanity
- However, we do store product status (whether a product is a draft, active or archived) and surface this in studio previews
- Some images (such as product and cart line item thumbnails) are served by Shopify's CDN whilst other images (such as product-level image galleries) are handled by Sanity's Image API
- Similarly to product state, this is surfaced in in preview components throughout the studi
- We only concern ourselves with incoming data from Shopify products and product variants
- Other Shopify document types – such as collections, pages and blog posts are skipped and are managed independently in Sanity
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.
It's possible that you have differing opinions on how content best be modelled to fit your particular needs – this is normal and encouraged! Fortunately, Sanity was built for this flexibility in mind, and we've written a guide on structured content patterns of ecommerce which may help inform how tackle this challenge.
If you're reading this on GitHub, chances are you haven't initialized the studio locally yet. To do so, run one of these shell commands:
# run a one-off initializing script:
npx @sanity/cli init --template shopify
# or install the Sanity CLI globally on your machine
npm i -g @sanity/cli && sanity init --template shopifynpm startnpm run deploynpm run upgradeIf you have the Sanity CLI installed, you can also run thes with sanity start|deploy|upgrade. It comes with additional useful functionality.
This repository is published under the MIT license.