Nested Next JS

• Design and Editing Layer - includes font CDN and Design/Symbol publishing
• Security - includes entitlement login retrieval user tagging/hook automation
• Non Destructive Publishing with multiple stream to multiple dev/prod/staging AGILE code bases
• Separation of PCI/HIPAA data workstreams from editorial content
• Forms and functions
• SEO and image optimization after compile and publish

Webflow to Next JS converter

https://designsync.app/

Next JS API hooked workflow

Twitter/Shopify APIs

Sanity

Sanity Studio for Shopify Projects

• About
• Features
  • Shopify friendly content schemas
  • Desk structure
  • Custom document actions
  • Delete product and variants
  • Edit in Shopify shortcut
  • Bundled custom input components
• Assumptions
• Setup
• Local Development
  • Starting development server
  • Deploying the studio
  • Upgrading Sanity Studio
• License

About

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.

Features

Shopify friendly content schemas

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), productOption and blockImage.

Desk structure

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

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.

Delete product and variants

/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

Edit in Shopify shortcut

/documentActions/shopifyLink.ts

A shortcut to edit the current product or product variant in Shopify in a new window.

Preview

Bundled custom input and preview components

Placeholder string input

/components/inputs/PlaceholderString.tsx

A simple wrapper around a regular string input that uses the value of another field as a placeholder.

{
  name: 'title',
  title: 'Title',
  type: 'placeholderString',
  options: { field: 'store.title' }
},

Preview

Product (and Product Variant) status

/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

Proxy string input

/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.

{
  title: 'Slug',
  name: 'slugProxy',
  type: 'proxyString',
  options: { field: 'store.slug.current' }
}

Preview

Product status (preview component)

/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

Bundled dashboard widgets

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.

Assumptions

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 product and productVariant documents 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.

Setup

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 shopify

Local Development

Starting development server

npm start

Deploying the studio

npm run deploy

Upgrading Sanity Studio

npm run upgrade

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

License

This repository is published under the MIT license.