sanity-plugin-shopify-assets
This is a Sanity Studio v3 plugin.
Select assets from your Shopify store in the context of your Sanity Studio. This plugin allows you to serve assets from the Shopify CDN in your frontends.
Installation
npm install sanity-plugin-shopify-assets
Usage
Add it as a plugin in sanity.config.ts (or .js):
import {defineConfig} from 'sanity'
import {shopifyAssets} from 'sanity-plugin-shopify-assets'
export const defineConfig({
//...
plugins: [
shopifyAssets({
shopifyDomain: '*.myshopify.com'
})
]
})
Simply update the shopifyDomain
to your store URL. You'll need to install the Sanity Connect app on your store to handle authorisation. You'll need to ensure the Liquid sync option is enabled within the Sanity Connect app.
Then you can enable the asset selector on a field:
import {defineType, defineField} from 'sanity'
export const myDocumentSchema = defineType({
type: 'document',
name: 'article',
fields: [
defineField({
type: 'shopify.asset',
name: 'shopifyAsset',
}),
],
})
It's also possible to define the Shopify domain on the field level, which allows you to retrieve assets from different stores. Each store must be connected to your Sanity project via the Sanity Connect app. In order to do this, simply declare the shopifyDomain
on the field:
defineField({
type: 'shopify.asset',
name: 'shopifyAsset',
options: {
shopifyDomain: '*.myshopify.com'
}
}),
Example of resulting object
{
"id": "gid://shopify/MediaImage/21154034647345",
"url": "https://cdn.shopify.com/s/files/1/0555/4906/7569/files/Green_1.jpg?v=1665668073",
"type": "image", // image, video, or file
"meta": {
"fileSize": 362812,
"alt": "",
"width": 3169,
"height": 3169,
"duration": 60 // video only
},
"preview": {
"url": "https://cdn.shopify.com/s/files/1/0555/4906/7569/files/Green_1.jpg?v=1665668073",
"width": 3169,
"height": 3169
},
"filename": "Green_1.jpg"
}
License
MIT © Sanity.io hello@sanity.io
Develop & test
This plugin uses @sanity/plugin-kit with default configuration for build & watch scripts.
See Testing a plugin in Sanity Studio on how to run this plugin with hotreload in the studio.
License
MIT © Sanity.io
Release new version
Run "CI & Release" workflow. Make sure to select the main branch and check "Release new version".
Semantic release will only release on configured branches, so it is safe to run release on any branch.