Connecting Shopify to Sanity with Webhooks in Vue/Nuxt - Resources?

6 replies

Last updated: Dec 5, 2021

Hey Everyone! I recently switched from Prismic to Sanity as my main CMS going forward and I am loving it so far!:)
As a Vue/Nuxt developer I am having a hard time wrapping my head around using web-hooks to connect Shopify to Sanity. Currently my ecommerce sites are split into two parts: Sanity for content and Shopify for ecommerce - an example would be that the landing-page, editorial/blog pages, and internal pages are controlled by Sanity while the collection pages, product pages, and cart/shop component(s) are controlled through the Shopify via the Shopify Graphql API. It does work very well, clients are happy, websites look great, but ideally it would be excellent to have products connected to Sanity for rich-content.

I know that Hull has been a major success (which is awesome by the way!
😁), but around half of the newer ecommerce sites I have seen use Vue/Nuxt (Vue devtools Chrome extension indicates this). I have seen some templates on Github by independent developers trying to achieve something similar to Hull by setting up web-hooks or complicated functions to connect Shopify to Sanity within Nuxt, but the projects are normally not fully developed.
I was wondering if there are any resources that I can learn more about setting up Sanity and Shopify with webhooks? Perhaps we can get a blog post from the Sanity team all about web-hooks and successfully fetch data? I am what you would call a "noob" when it comes to working with webhooks lol! Any advice or direction to go in would be really helpful.

Edit: I saw the Sanity Connect App that was recently released.. That is only compatible with Hydrogen so far or no? (edited)

AI Update

Great to hear you're loving Sanity! Your setup sounds solid, and you're asking about a really common pattern in the Vue/Nuxt + Shopify ecosystem.

The good news: You don't necessarily need to build webhook handlers from scratch anymore! Sanity Connect for Shopify is the official solution that handles all the webhook complexity for you, and it works with any frontend framework including Nuxt—not just Hydrogen.

How Sanity Connect Works

Sanity Connect is a Shopify app that automatically syncs your products, variants, and collections from Shopify into your Sanity dataset using webhooks behind the scenes. You install it from the Shopify App Store, connect it to your Sanity project, and it handles:

Automatic bi-directional sync powered by Shopify webhooks
Real-time updates when products change in Shopify
Publishing state management (draft products in Shopify = unpublished in Sanity)
Product data appears under a store property in your Sanity documents (typically read-only)

This means you can enrich Shopify products with all the rich content capabilities Sanity offers—editorial content, custom modules, media galleries, etc.—while keeping Shopify as the source of truth for product data.

Using It With Nuxt

Once your products are synced to Sanity via Connect, your Nuxt app queries them just like any other Sanity content using GROQ or GraphQL. You'd fetch both the Shopify product data (from the store property) and your custom Sanity content in one query. For the actual cart/checkout functionality, you'd still use the Shopify Storefront API directly from your Nuxt frontend.

The headless commerce guide specifically mentions building with frameworks like Nuxt as a supported approach.

If You Need Custom Webhook Logic

If you need to build custom webhook handlers for specific use cases beyond what Connect provides (like custom business logic, syncing additional data, or triggering specific actions), I'd recommend using Sanity Functions rather than setting up external serverless functions.

Functions are Sanity's built-in serverless compute layer (Node.js v22, 900s timeout, 10GB memory) that's perfect for this because:

No external hosting needed - runs on Sanity's infrastructure
Automatic scaling and security
Native integration with your Sanity project
Can receive external webhooks from Shopify or other services
Event-driven - can also trigger on Sanity document changes

You'd define them in a sanity.blueprint.ts file. For webhook verification (like HMAC verification for Shopify webhooks), you'd handle that in your Function code using Node.js crypto utilities—it's the same code you'd write for any serverless function, just deployed to Sanity's infrastructure instead.

Functions are the modern, recommended approach compared to traditional webhooks because they eliminate the need for external hosting while giving you the same capabilities.

Quick Start

For a new project, you can scaffold everything pre-configured:

npm create sanity@latest -- --template shopify --create-project "Shopify Store" --dataset production --typescript --output-path shopify-store

This gives you a Sanity Studio set up with all the Shopify schemas ready to go. Then install Sanity Connect from the Shopify App Store, and you're syncing!

Resources for Learning More

Sanity Connect for Shopify docs
Sanity Functions quickstart (if you need custom webhook handlers)
Headless ecommerce with Sanity and Shopify guide

Hope this helps clear things up! The Vue/Nuxt community is definitely underserved in e-commerce examples compared to React, but the underlying approach is framework-agnostic once you're using Sanity Connect to handle the sync. Your Nuxt app just queries Sanity like normal and uses the Shopify Storefront API for commerce operations.

Show original thread

6 replies

Sanity-connect is a Shopify app for syncing products to your Sanity studio. It’s not tied to Hydrogen, you can use any frontend frameworks. But you’ll probably need to hook up your own cart/checkout logic with either the shopify-buy SDK or directly with the Shopify storefront api (GraphQL).

Hey

user T

! Thanks for getting back to me.
Okay great then I might try that out and see how it goes! The only thing I am wondering if Sanity-connect imports the product IDs used within the cart logic/Shopify checkout? Currently my cart adds the selected product's ID, price, image, etc.

Example:

async addToCart() {
  const variant = this.currentVariant
  const payload = {
    qty: this.quantity,
    productTitle: this.product.title,
    variantTitle: variant.title,
    variantId: variant.id,
    price: variant.price.amount,
    image: variant.image
  }

  await this.$store.dispatch('addToCart', payload)
}

I am just wondering if I could use the sanity-connect data instead of the shopify data and only use the shopify api for checkout purposes similar to Hull?

Yeah, this what I’m doing. In my case I’m using the buy sdk

This is the data you get from the sync https://github.com/sanity-io/sanity-shopify-studio/blob/main/schemas/objects/shopifyProduct.ts

Oh very cool. I will have to just try this out and see how to works. Are you using Vue/Nuxt?

I’m using Next, but the setup should be pretty similar with Nuxt

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for free Explore the demo