Skip to content

Latest commit

 

History

History
159 lines (93 loc) · 6.78 KB

features.md

File metadata and controls

159 lines (93 loc) · 6.78 KB
Raw

Studio features

Shopify friendly content schemas

This studio is built to accommodate both collections and products coming from a Shopify Store.

You can use the official Sanity Connect app on Shopify to sync your Shopify collection and products with your dataset. All your data will be available over APIs that you can access with @sanity/client or the HTTP API.

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 augment editorial content with product information.
  • /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 collections, products, product variants, as well as articles.
  • /schemas/objects/: General purpose & re-usable content structures, such as links, custom product options and modules.

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 /desk. 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 custom editorial modules.
  • Creates a singleton document for settings to control navigation and global content
  • Lists general purpose pages for other editorial content

Custom modules

Call to action

/schemas/objects/module/callToAction.tsx

Callout

/schemas/objects/module/callout.tsx

Collection

/schemas/objects/module/collection.tsx

Image

/schemas/objects/module/image.ts

Instagram

/schemas/objects/module/instagram.ts

Product

/schemas/objects/module/product.tsx

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

Read more about document actions.

Delete product and variants

/plugins/customDocumentActions/shopifyDelete.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.

Edit in Shopify shortcut

/plugins/customDocumentActions/shopifyLink.ts

A shortcut to edit the current product or product variant in Shopify in a new window. You'll need to set your Shopify admin domain in constants.ts.

Custom input and preview components

Placeholder string input

image

/components/inputs/PlaceholderString.tsx

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

Usage:

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

Shopify document status (for collections, products and product variants)

/components/inputs/CollectionHidden.tsx /components/inputs/ProductHidden.tsx /components/inputs/ProductVariantHidden.tsx

Display-only input fields that show the corresponding document's status in Shopify.

For instance, if a product has been deleted from Shopify or has its status set to draft or active.

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 (such as 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.

Usage

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

Shopify document status (preview component)

image 5

/components/media/ShopifyDocumentStatus.tsx

A custom preview component that will display collection, product and product variant images defined in store.previewImageUrl.

By default, Sanity Connect will populate these fields with the default 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 collection, product and product variant documents.