Sanity
Nitrogen features a minimal Sanity integration on a separate sanity
branch. This is meant to pair with the Nitrogen Sanity Studio template, which synchronizes content between a Sanity dataset and your Shopify storefront.
Sanity Setup
Before connecting your Shopify store to Sanity, you must have a Sanity project and dataset. To do this, downloaded the Nitrogen Sanity Studio template and install the dependencies with pnpm install
. Next, run sanity init
to setup a new Sanity project and go through the initial setup process. Alternatively, you can manually create a new project by logging into your user dashboard on Sanity and creating a new project.
Sanity Connect
Once you have completed the setup, navigate to your Shopify dashboard and install the Sanity Connect app. Go through the initial setup process to connect Sanity to your storefront. I recommend reading through the official Sanity and Shopify with Hydrogen guide to learn the basics of how to connect your Sanity dataset with your Shopify store data.
API Permissions
Finally, you can add your environment variables to your project:
NUXT_SANITY_PROJECT_ID=your_project_id
NUXT_SANITY_DATASET=production
NUXT_SANITY_API_VERSION=2024-10-20
NUXT_SANITY_STUDIO_URL=http://your-site-domain.com
NUXT_SANITY_API_READ_TOKEN=your_sanity_api_read_token
API Integration
To use Sanity within your project, download the official @nuxtjs/sanity
module. This module provides advanced configuration options, live-preview integration for visual-editing, and native Nuxt composables to query your Sanity data with.