simplify 'shopify' template schema

packages/@sanity/cli/src/actions/init-project/templates/shopify.ts

@@ -12,6 +12,7 @@ import {colorInput} from '@sanity/color-input'
 import {imageHotspotArrayPlugin} from 'sanity-plugin-hotspot-array'
 import {media, mediaAssetSource} from 'sanity-plugin-media'
 import {customDocumentActions} from './plugins/customDocumentActions'
+import Navbar from './components/studio/Navbar'
 
 const devOnlyPlugins = [visionTool()]
 
@@ -47,6 +48,12 @@ export default defineConfig({
       },
     },
   },
+
+  studio: {
+    components: {
+      navbar: Navbar,
+    },
+  },
 })`
 
 const shopifyTemplate: ProjectTemplate = {

packages/@sanity/cli/templates/shopify/README.md

@@ -1,18 +1,18 @@
 # Sanity Studio for Shopify Projects
 
-<p><img src="https://user-images.githubusercontent.com/209129/173606241-ae6694f7-57f0-4ed7-9d05-60c563c4233b.png" width="800" /></p>
+<img width="1072" alt="Sanity Studio with Shopify products" src="https://github.com/sanity-io/learn/assets/9684022/13aed6ff-a028-4c3f-bc4b-15bf9ba4c6ff">
 
 ## About
 
 This Sanity Studio is configured for headless Shopify projects that use the official [Sanity Connect app][sanity-shopify], allowing you to extend Shopify products and collections with your own rich editorial content.
 
 It contains examples of customizing your [structure][docs-structure], [document actions][docs-document-actions] and [input components][docs-input-components].
 
-This studio can be used with our [Hydrogen starter][hydrogen-demo], your frontend, or anywhere else you want your e-commerce content to go.
+This studio can be used with any front end, or anywhere else you want your e-commerce content to go.
 
 ## Features
 
-This studio comes preconfigured with Shopify-friendly content schema types and a whole host of customizations to make managing Shopify data in your Sanity studio easier.
+This studio comes configured with Shopify-friendly content schema types 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.
 

packages/@sanity/cli/templates/shopify/components/icons/Shopify.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+
 
 const ShopifyIcon = () => {
   return (

packages/@sanity/cli/templates/shopify/components/inputs/CollectionHidden.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+
 import {WarningOutlineIcon} from '@sanity/icons'
 import {StringFieldProps} from 'sanity'
 import {Box, Card, Flex, Stack, Text} from '@sanity/ui'

packages/@sanity/cli/templates/shopify/components/studio/Navbar.tsx

@@ -0,0 +1,29 @@
+import {Box, Button, Card, Flex} from '@sanity/ui'
+import type {NavbarProps} from 'sanity'
+
+import {SHOPIFY_STORE_ID} from '../../constants'
+import ShopifyIcon from '../icons/Shopify'
+
+export default function Navbar(props: NavbarProps) {
+  if (!SHOPIFY_STORE_ID) return props.renderDefault(props)
+
+  return (
+    <Card>
+      <Flex align="center">
+        <Box flex={1}>{props.renderDefault(props)}</Box>
+        <Card paddingY={2} paddingRight={2} borderBottom={true}>
+          <Button
+            as="a"
+            href={`https://admin.shopify.com/store/${SHOPIFY_STORE_ID}`}
+            mode="bleed"
+            title="Open Shopify Admin"
+            target="_blank"
+            padding={1}
+          >
+            <ShopifyIcon />
+          </Button>
+        </Card>
+      </Flex>
+    </Card>
+  )
+}

packages/@sanity/cli/templates/shopify/constants.ts

@@ -1,4 +1,8 @@
 // Currency code (ISO 4217) to use when displaying prices in the studio
+
+import ShopifyIcon from "./components/icons/Shopify"
+import { ColorWheelIcon, ComposeIcon, SearchIcon } from '@sanity/icons'
+
 // https://en.wikipedia.org/wiki/ISO_4217
 export const DEFAULT_CURRENCY_CODE = 'USD'
 
@@ -26,6 +30,32 @@ export const PAGE_REFERENCES = [
 export const SANITY_API_VERSION = '2022-10-25'
 
 // Your Shopify store ID.
-// This is your unique store URL (e.g. 'my-store-name.myshopify.com').
+// This is the ID in your Shopify admin URL (e.g. 'my-store-name' in https://admin.shopify.com/store/my-store-name).
+// You only need to provide the ID, not the full URL.
 // Set this to enable helper links in document status banners and shortcut links on products and collections.
 export const SHOPIFY_STORE_ID = ''
+
+// Field groups used through schema types
+export const GROUPS = [
+  {
+    name: 'theme',
+    title: 'Theme',
+    icon: ColorWheelIcon,
+  },
+  {
+    default: true,
+    name: 'editorial',
+    title: 'Editorial',
+    icon: ComposeIcon
+  },
+  {
+    name: 'shopifySync',
+    title: 'Shopify sync',
+    icon: ShopifyIcon,
+  },
+  {
+    name: 'seo',
+    title: 'SEO',
+    icon: SearchIcon
+  },
+]

packages/@sanity/cli/templates/shopify/docs/features.md

@@ -73,7 +73,7 @@ Read more about [document actions][docs-document-actions].
 
 `/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.
+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 documents one-by-one.
 
 ### Edit in Shopify shortcut
 
@@ -96,12 +96,11 @@ A simple wrapper around a regular [string input](string-input) that uses the val
 **Usage:**
 
 ```javascript
-{
+defineField({
   name: 'title',
-  title: 'Title',
   type: 'placeholderString',
   options: { field: 'store.title' }
-},
+}),
 ```
 
 ### Shopify document status (for collections, products and product variants)
@@ -129,12 +128,12 @@ Since we are using certain product fields from Shopify as the source of truth (s
 **Usage**
 
 ```javascript
-{
+defineField({
   title: 'Slug',
   name: 'slugProxy',
   type: 'proxyString',
-  options: { field: 'store.slug.current' }
-}
+  options: {field: 'store.slug.current'},
+})
 ```
 
 ### Shopify document status (preview component)

packages/@sanity/cli/templates/shopify/schemaTypes/documents/collection.tsx

@@ -1,41 +1,19 @@
-import React from 'react'
-import {defineField, defineType} from 'sanity'
+
+import {defineArrayMember, defineField, defineType} from 'sanity'
 import {PackageIcon} from '@sanity/icons'
 import {getExtension} from '@sanity/asset-utils'
 import pluralize from 'pluralize-esm'
 import CollectionHiddenInput from '../../components/inputs/CollectionHidden'
-import ShopifyIcon from '../../components/icons/Shopify'
 import ShopifyDocumentStatus from '../../components/media/ShopifyDocumentStatus'
+import { GROUPS } from '../../constants'
 
-const GROUPS = [
-  {
-    name: 'theme',
-    title: 'Theme',
-  },
-  {
-    default: true,
-    name: 'editorial',
-    title: 'Editorial',
-  },
-  {
-    name: 'shopifySync',
-    title: 'Shopify sync',
-    icon: ShopifyIcon,
-  },
-  {
-    name: 'seo',
-    title: 'SEO',
-  },
-]
-
-export default defineType({
+export const collectionType = defineType({
   name: 'collection',
   title: 'Collection',
   type: 'document',
   icon: PackageIcon,
   groups: GROUPS,
   fields: [
-    // Product hidden status
     defineField({
       name: 'hidden',
       type: 'string',
@@ -47,29 +25,24 @@ export default defineType({
         return !isDeleted
       },
     }),
-    // Title (proxy)
     defineField({
       name: 'titleProxy',
       title: 'Title',
       type: 'proxyString',
       options: {field: 'store.title'},
     }),
-    // Slug (proxy)
     defineField({
       name: 'slugProxy',
       title: 'Slug',
       type: 'proxyString',
       options: {field: 'store.slug.current'},
     }),
-    // Color theme
     defineField({
       name: 'colorTheme',
-      title: 'Color theme',
       type: 'reference',
       to: [{type: 'colorTheme'}],
       group: 'theme',
     }),
-    // Vector
     defineField({
       name: 'vector',
       title: 'Vector artwork',
@@ -93,49 +66,41 @@ export default defineType({
           return true
         }),
     }),
-    // Show hero
     defineField({
       name: 'showHero',
-      title: 'Show hero',
       type: 'boolean',
       description: 'If disabled, page title will be displayed instead',
       group: 'editorial',
     }),
-    // Hero
     defineField({
       name: 'hero',
-      title: 'Hero',
-      type: 'hero.collection',
+      type: 'hero',
       hidden: ({document}) => !document?.showHero,
       group: 'editorial',
     }),
-    // Modules
     defineField({
       name: 'modules',
-      title: 'Modules',
       type: 'array',
       description: 'Editorial modules to associate with this collection',
       of: [
-        {type: 'module.callout'},
-        {type: 'module.callToAction'},
-        {type: 'module.image'},
-        {type: 'module.instagram'},
+        defineArrayMember({type: 'callout'}),
+        defineArrayMember({type: 'callToAction'}),
+        defineArrayMember({type: 'image'}),
+        defineArrayMember({type: 'instagram'}),
       ],
       group: 'editorial',
     }),
-    // Shopify collection
     defineField({
       name: 'store',
       title: 'Shopify',
       type: 'shopifyCollection',
       description: 'Collection data from Shopify (read-only)',
       group: 'shopifySync',
     }),
-    // SEO
     defineField({
       name: 'seo',
       title: 'SEO',
-      type: 'seo.shopify',
+      type: 'seo',
       group: 'seo',
     }),
   ],
@@ -158,8 +123,7 @@ export default defineType({
       rules: 'store.rules',
       title: 'store.title',
     },
-    prepare(selection) {
-      const {imageUrl, isDeleted, rules, title} = selection
+    prepare({imageUrl, isDeleted, rules, title}) {
       const ruleCount = rules?.length || 0
 
       return {