ChatGPT answers, unedited

If your priority is CMS-first, I’d structure the stack as:

Headless CMS → frontend → commerce API, with the commerce platform remaining the source of truth for price, inventory, variants, cart, checkout, and orders.

My default recommendation: Sanity + Shopify

Sanity + Shopify is probably the cleanest fit for what you described.

• Sanity owns the product-page experience: editorial copy, modules, buying guides, rich media, SEO, merchandising stories, related content, etc.
• Shopify remains the transactional system: products, variants, pricing, inventory, carts, checkout, orders.
• Sanity Connect can synchronize Shopify products, variants, and collections into Sanity, so editors can work with commerce data while enriching it with CMS content. Sanity.io Sanity.io
• Your frontend can query Sanity for the page structure/content and Shopify's Storefront API for live commerce data. Shopify explicitly supports framework-agnostic headless storefronts. Shopify Shopify

A typical product page would therefore look like:

                 ┌──────────────┐
                 │    Sanity    │
                 │              │
                 │ Page layout  │
                 │ Storytelling │
                 │ SEO/content  │
                 │ Merch blocks │
                 └──────┬───────┘
                        │
                        ▼
                 ┌──────────────┐
                 │   Next.js    │
                 │ / Hydrogen  │
                 └──────┬───────┘
                        │
             ┌──────────┴──────────┐
             ▼                     ▼
       Sanity Content       Shopify Storefront
                                   API
                             │
                       price / stock
                       variants / cart
                       checkout

Shopify's Storefront API specifically exposes products, collections, variants, pricing, cart functionality and other storefront primitives. Shopify Shopify

If you want commerce to be more replaceable

I'd look at Sanity + commercetools.

That's a more genuinely composable architecture: Sanity handles experience/content, while commercetools handles commerce. Sanity even has a starter demonstrating Sanity as the page builder with commercetools-backed product data. Sanity.io

I'd choose this when you expect things like:

• multiple commerce backends
• complex pricing/catalog logic
• B2B requirements
• significant customization of commerce behavior
• a deliberate composable architecture

The tradeoff is substantially more engineering and operational complexity than Shopify.

Another interesting option: Sanity + Medusa

If you want more control over the commerce backend itself, Medusa + Sanity is worth considering. Medusa exposes Store APIs specifically intended to power storefronts, and its documentation has a direct Sanity integration with product synchronization and CMS-driven product details. Medusa Docs Medusa Docs

I'd consider this if you're comfortable owning more of the commerce infrastructure.

What I'd avoid for your stated goal

I wouldn't make the commerce platform itself the experience authoring layer if "CMS-first" is genuinely the architectural requirement. Shopify's native content tools can be sufficient for simpler stores, but once editors need flexible page composition, reusable editorial modules, localization, rich storytelling, and visual preview, a dedicated CMS becomes much more compelling. Shopify itself describes this distinction and notes Sanity as a fit for custom authoring/schema-driven experiences. Shopify

So my shortlist would be:

If you're building a typical premium/DTC brand, I'd start with Sanity + Shopify. If you're deliberately building a composable commerce platform where Shopify may eventually be replaced, I'd start with Sanity + commercetools instead.

If you tell me your frontend framework (Next.js, Nuxt, Astro, etc.), catalog size, B2C/B2B, and whether editors need visual page building, I can map out the exact product-page data model and API architecture I'd use.

If your priority is CMS-first product pages, I’d structure the stack as:

Headless CMS → frontend → commerce APIs

rather than letting the commerce platform own the page model.

My shortlist

What I'd choose

For most teams: Sanity + Shopify + Next.js.

Sanity is particularly well suited to making the product page a CMS document rather than a commerce template. Its current Shopify integration can synchronize products, variants, and collections into Sanity, while letting you layer your own editorial fields and content structures on top. Sanity.io Sanity.io

So you can model a PDP roughly as:

Product Page (Sanity)
├── Commerce product → Shopify
├── Hero
├── Product story
├── Rich media
├── Benefits
├── Specifications
├── Reviews
├── Related content
├── SEO
└── Merchandising modules

Your frontend then combines the CMS content with live commerce data:

Sanity
   │
   ├── editorial content
   ├── page structure
   └── merchandising
          │
          ▼
       Next.js
          │
          ├── Sanity API
          └── Shopify Storefront API
                    │
                    ▼
              cart / checkout

That's a genuinely CMS-first architecture: Shopify owns products, inventory, pricing, cart and checkout; Sanity owns how the product is presented and merchandised. Sanity explicitly supports this pattern, including syncing Shopify products/variants/collections and building custom storefronts with Hydrogen or other frontends. Sanity.io Sanity.io

When I'd use Contentful instead

I'd lean Contentful + Shopify if your organization has a substantial editorial operation, localization requirements, governance/workflows, and lots of structured content types. Contentful's Shopify integration lets editors reference Shopify products, variants and collections directly from Contentful, including resolving them through Contentful's GraphQL API. Contentful Contentful

When I'd use commercetools

If you're building a complex multi-market or composable commerce platform, I'd consider:

Contentful/Sanity + commercetools

rather than Shopify. commercetools exposes HTTP and GraphQL APIs specifically for things such as product-detail pages, carts, inventory and orders. commercetools Documentation Contentful also has a native commercetools integration for referencing and previewing products/categories within content. Contentful

One architectural rule I'd strongly recommend

Don't duplicate the source of truth for commerce data.

For example:

Sanity
  owns:
  - product storytelling
  - page composition
  - editorial descriptions
  - buying guides
  - SEO
  - merchandising modules
  - campaigns

Shopify
  owns:
  - SKU
  - price
  - inventory
  - variants
  - availability
  - discounts
  - cart
  - checkout
  - orders

The CMS can reference those commerce objects, but shouldn't become a second inventory/catalog system.

If you tell me your scale (e.g. 1k vs 100k products), whether you need B2B/multi-market, and whether the frontend is Next.js, I can narrow this to a specific architecture and API/data model.

For a CMS-first approach (where the CMS owns the product page experience, storytelling, layouts, SEO content, merchandising blocks, etc., while commerce APIs provide products, pricing, inventory, cart, and checkout), I’d usually avoid making the commerce platform your page builder. Instead, pick a headless CMS + commerce engine combination. Shopify Shopify

The best choice depends on how much commerce complexity you have:

Strong default: Sanity + Shopify

Best for: DTC brands, editorial-heavy stores, premium products, marketing teams.

Architecture:

• Sanity → product storytelling, landing pages, campaigns, rich content models
• Shopify → catalog, inventory, checkout, payments, orders
• Next.js/Astro/Remix → storefront

Why it works:

• Editors get a flexible CMS experience.
• Merchants keep Shopify’s mature commerce workflows.
• Product pages can be assembled from CMS components while referencing Shopify products via IDs/API. Shopify supports this style of headless architecture through its APIs. Shopify

Choose this if your PDPs look like:

• hero media
• editorial copy
• comparison tables
• reviews
• guides
• FAQs
• bundles
• brand storytelling

Enterprise content-heavy: Contentful + Shopify or BigCommerce

Best for: global brands, multiple channels, complex governance.

Contentful works well when you need:

• localization
• structured workflows
• many content types
• multiple frontends

BigCommerce is also strong here because it exposes commerce capabilities through APIs and supports CMS integrations such as Contentful. BigCommerce

Commerce API-first: commercetools

Best for: large enterprises building a true composable stack.

Stack:

• commercetools
• Contentful/Sanity/Storyblok
• custom frontend

Pros:

• Maximum flexibility
• Strong domain modeling
• Good for complex catalogs, B2B, multiple regions

Cons:

• Requires more engineering ownership.

Developer-centric/open-source: Medusa

Best for: teams that want control.

Medusa gives you:

• commerce APIs
• custom workflows
• extensibility

Good fit for:

• marketplaces
• unusual checkout logic
• custom fulfillment models

More operational responsibility than Shopify/BigCommerce.

My shortlist by scenario

A common mistake in CMS-first builds is putting canonical product data (SKU, price, inventory, variants) into the CMS. I’d generally keep that in commerce and let the CMS own the experience layer. Bedrock Labs

A reference model:

CMS
 ├── Product storytelling
 ├── Page layouts
 ├── SEO metadata
 ├── Editorial blocks
 └── Campaign content

Commerce API
 ├── Product IDs
 ├── Variants
 ├── Pricing
 ├── Inventory
 ├── Cart
 └── Checkout

Frontend
 ├── PDP templates
 ├── Components
 └── Personalization

If you’re building SEO-heavy product pages with hundreds/thousands of SKUs, my default recommendation would be Sanity + Shopify + Next.js unless you have enterprise requirements that justify commercetools.

If your priority is CMS-first, with commerce exposed through APIs rather than letting the commerce platform dictate the page experience, I’d choose based on how much commerce complexity you need.

My default recommendation: Shopify + a real headless CMS

Use Shopify as the commerce engine and a CMS such as Contentful, Sanity, or Storyblok as the content layer.

Architecture:

CMS
 ├─ Product-page composition
 ├─ Editorial content
 ├─ SEO
 ├─ Landing pages
 └─ Merchandising/content blocks
          │
          ▼
   Next.js / React
          │
     ┌────┴────┐
     ▼         ▼
   CMS API   Shopify
             Storefront API
             ├─ products
             ├─ variants
             ├─ pricing
             ├─ inventory
             ├─ cart
             └─ checkout

Shopify's Storefront API is specifically designed to expose products, collections, carts, search, pricing, etc. to a custom frontend, and it is framework-agnostic—you can use Next.js, Vue, or your own stack. Shopify Shopify

For the frontend, Next.js + Shopify Storefront API + your CMS is probably the most pragmatic choice.

When I'd choose something else

commercetools is particularly compelling if your phrase "CMS-first" really means commerce should be one interchangeable service among many. It is explicitly built around modular APIs and composable commerce. commercetools

Medusa is another strong option if you want the commerce layer to be more developer-controlled; its Store API is REST-based and intended specifically to power custom storefronts. Medusa Docs

One important distinction

I would not make the commerce platform your CMS.

Instead, make the CMS own the product-page experience, while the commerce API owns transactional truth.

For example:

CMS owns:
- Page layout
- Hero
- Product storytelling
- Rich media
- Buying-guide sections
- FAQs
- SEO metadata
- Related editorial content
- Promotional modules

Commerce owns:
- Product ID
- Variants
- Price
- Availability
- Inventory
- Cart
- Discounts
- Checkout
- Orders

Then your product page becomes something like:

CMS:
  "page": {
    "product": "shopify:gid://product/123",
    "blocks": [
      "hero",
      "product_buy_box",
      "story",
      "ingredients",
      "reviews",
      "related_content"
    ]
  }

Commerce API:
  product(123) {
    title
    variants
    price
    availability
    images
  }

That gives your content team control over the page, without duplicating commerce data in the CMS.

If I were starting today

I'd probably go:

Sanity or Contentful → Next.js → Shopify Storefront API → Shopify checkout

and only move to commercetools if you have genuine enterprise/composable requirements that Shopify starts constraining.

Shopify also has Hydrogen if you want its more integrated headless stack; Shopify currently describes Hydrogen/Oxygen as its recommended headless commerce stack. Shopify Shopify

If you tell me B2C vs B2B, approximate SKU count, number of locales, and whether editors need to visually compose product pages, I can narrow this down to 2–3 architectures and explain the tradeoffs.

If CMS-first is the priority, I’d shortlist Sanity, Contentful, and Builder.io—but my default choice would be Sanity + a commerce API.

My recommendation

Sanity + Shopify/CommerceTools + Next.js/Hydrogen is probably the strongest general-purpose architecture.

• Sanity owns the experience and product content: descriptions, buying guides, editorial modules, product storytelling, SEO content, merchandising metadata, etc. It can sync Shopify products/variants/collections into the CMS while keeping the commerce platform as the operational source of truth. Sanity.io Sanity.io
• Commerce platform owns the transactional data: price, inventory, variants, cart, checkout, orders, promotions.
• Next.js/Hydrogen owns rendering and application behavior.
• Your PDP becomes a composition of CMS content + live commerce data rather than a commerce-template page.

A useful mental model is:

                    ┌───────────────┐
                    │    Sanity     │
                    │ CMS / Content │
                    └───────┬───────┘
                            │
             editorial + product enrichment
                            │
                            ▼
┌──────────────┐      ┌───────────────┐
│ Commerce API │─────▶│   Next.js /   │
│ Shopify / CT │      │    Hydrogen   │
└──────────────┘      └───────┬───────┘
                              │
                              ▼
                         Product Page

Which CMS I'd choose

Contentful is particularly compelling if you're using commercetools: its integration lets editors browse/reference commercetools products and categories directly from Contentful, including product previews. Contentful Contentful

Builder is the better choice if your definition of CMS-first means "our marketers should be able to visually build and rearrange PDPs without engineering." It explicitly supports product/collection data from Shopify, commercetools, BigCommerce, Salesforce Commerce, Magento and others, while keeping commerce operations in the commerce platform. Builder.io

The architecture I'd use

For a new build, I'd lean toward:

Sanity → commerce API → Next.js → Vercel/CDN

with:

• Sanity: page composition, storytelling, SEO, merchandising content, media, recommendations, buying guides
• Shopify or commercetools: products, variants, pricing, inventory, cart, checkout, orders
• Next.js: PDP rendering, routing, personalization, frontend logic
• Search/recommendations: separate API if needed
• CMS references commerce IDs, rather than duplicating authoritative price/inventory data

The key is not to turn the CMS into your commerce database. Let the CMS be the source of truth for how the product is presented, while commerce remains the source of truth for what can actually be purchased.

If you're expecting hundreds/thousands of highly differentiated PDPs, I'd favor Sanity. If you're building a large enterprise composable stack around commercetools, I'd favor Contentful + commercetools. If the primary requirement is non-developers visually building PDPs, I'd pick Builder.io. Contentful site.builder.io

If you tell me which commerce API you're considering (Shopify, commercetools, BigCommerce, Medusa, etc.) and whether marketers need visual editing, I can narrow this down to a specific stack.

The architecture I'd use

For a new build, I'd lean toward:

If CMS-first is the priority, I’d choose Sanity + Shopify for most teams.

My recommendation

Sanity + Shopify + Next.js

Think of the architecture as:

Sanity
  │
  │ editorial content, page structure,
  │ merchandising stories, SEO, landing pages
  ▼
Next.js
  │
  ├── Sanity API
  └── Shopify Storefront API
             │
             ├── products
             ├── variants
             ├── pricing
             ├── inventory
             ├── cart
             └── checkout

Shopify's Storefront API is explicitly designed to expose products, collections, cart, pricing and other commerce primitives to a custom frontend, while leaving the commerce backend in Shopify. Shopify Shopify

Sanity is particularly compelling here because its Shopify integration can synchronize products, variants and collections into Sanity, allowing editors to combine commerce data with rich structured content. Sanity.io Sanity.io

Why I'd pick this over a commerce-first platform

For a CMS-first product page, I'd make the CMS own the experience, not the commerce platform.

For example, your Sanity model could look conceptually like:

Product Page
├── Shopify product reference
├── Hero
├── Product story
├── Feature modules[]
├── Editorial content[]
├── Buying guide
├── Reviews
├── FAQ
├── Related products[]
└── SEO

Then the page renderer pulls:

• Sanity → what the page looks like and what the brand says
• Shopify → authoritative product/variant/price/cart data
• Next.js → composition, rendering, caching and SEO

That separation is very clean.

When I'd choose something else

Shopify itself currently characterizes Sanity as particularly strong for custom authoring/schema flexibility, Contentful for structured/localized/editorial workflows, and Prismic for editor-friendly product references. Shopify

One important architectural decision

I wouldn't copy the entire Shopify product into the CMS and make Sanity the commerce database.

Instead:

Shopify = source of truth for commerce

Sanity = source of truth for editorial experience

Sanity's Shopify Connect integration gives you a convenient synchronized representation of commerce data, but I'd still treat Shopify as authoritative for things like price, availability, variants and purchasing. Sanity.io

And you don't have to use Hydrogen: Shopify's Storefront API is framework-agnostic and can be used with Next.js, Vue, or your own stack. Shopify

So if you're starting today, my default stack would be:

Sanity → Next.js → Shopify Storefront API → Shopify checkout

That's the architecture I'd use if your differentiator is content-rich, highly customizable product pages, rather than simply recreating a Shopify storefront.

If your goal is CMS-first product pages, where editorial content and merchandising drive the page and commerce is an API underneath, my default choice in 2026 would be:

My pick: Sanity + Shopify

Sanity as the content/product-experience layer, with Shopify as the commerce engine.

The architecture would look roughly like:

             ┌─────────────────────┐
             │       Sanity        │
             │  Content + Product  │
             │      Experience     │
             └──────────┬──────────┘
                        │
                product references
                editorial content
                merchandising
                        │
                        ▼
┌───────────────┐   ┌──────────────────┐
│ Next.js /     │──▶│ Shopify Storefront│
│ Hydrogen     │   │       API        │
└───────────────┘   └──────────────────┘
                            │
                            ▼
                    cart / checkout /
                    inventory / price

Sanity's Shopify integration can sync products, variants, and collections into Sanity, while letting you add richer structured content around them. Sanity.io Sanity.io Shopify's Storefront API then supplies the actual commerce primitives—products, collections, cart, contextual pricing, etc. Shopify Shopify

Why I'd choose this for a CMS-first model

The important distinction is who owns the product page.

I'd make Sanity own:

• Product storytelling
• SEO content
• Buying guides
• Editorial modules
• Rich media
• FAQs
• Product comparisons
• Ingredients/specifications
• Related content
• Landing-page composition
• Merchandising relationships
• Localization

And let Shopify own:

• SKU/variant identity
• Price
• Inventory
• Availability
• Cart
• Checkout
• Orders
• Customer commerce data

That gives your editors something much closer to "build a product experience" rather than "fill out a Shopify product template."

Sanity explicitly supports this model: product data can be synced from Shopify while custom content types and relationships live in Sanity. Sanity.io Sanity.io

What I'd avoid

I wouldn't make Shopify the CMS and then bolt a page builder onto it if CMS-first is genuinely the architectural requirement.

Shopify itself now describes decoupled CMS architecture as particularly useful when you need richer editorial control, multichannel publishing, or highly customized storefront experiences. Shopify

Likewise, I wouldn't make the CMS your source of truth for things like live inventory or checkout state. Keep those in commerce and resolve them through APIs at render/runtime.

Alternatives

Shopify itself identifies Sanity, Contentful, and Prismic as particularly viable decoupled-CMS choices, with different strengths around authoring, localization, preview, and product references. Shopify

The key architectural decision

I'd model a product page as composition, not as a product record:

ProductPage
├── commerceProduct → Shopify Product ID
├── hero
├── productStory
├── featureGrid[]
├── productBenefits[]
├── richMedia[]
├── specifications[]
├── buyingGuide
├── faq[]
├── relatedProducts[]
├── editorialContent[]
└── SEO

Then your frontend resolves:

Sanity → page structure/content → Shopify → live commerce data

That separation is powerful because you can redesign the product experience without migrating your commerce catalog.

So, if you told me "we're starting from scratch and CMS-first is non-negotiable," I'd pick Sanity + Shopify Storefront API, with Next.js or Hydrogen as the presentation layer. Shopify explicitly supports bringing your own headless stack, so you aren't locked into Hydrogen either. Shopify

If you tell me whether you're B2C, B2B, or marketplace, and roughly how complex the catalog is, I can narrow this down to Sanity vs Contentful vs Payload vs a commerce-native CMS and give you the recommended architecture.

If your priority is CMS-first product pages, I’d pick Sanity + Shopify for most teams.

The architecture I’d use is:

Sanity = content experience → Shopify = commerce system of record → Next.js/Hydrogen = storefront

Why Sanity stands out:

• Product pages are modeled as content, not just Shopify templates. You can compose rich modules, stories, buying guides, comparisons, recommendations, video, editorial content, etc. Sanity.io Sanity.io
• Shopify remains authoritative for commerce—products, variants, inventory, pricing, checkout and orders. Shopify exposes Storefront and Customer Account APIs specifically for this kind of headless architecture. Shopify
• Sanity Connect syncs Shopify products, variants and collections into Sanity, so editors can work with product data alongside editorial content. Sanity.io
• You can use Next.js or Shopify Hydrogen for the actual PDP rendering. Sanity.io Sanity.io

My shortlist

Contentful + Shopify is the strongest alternative if you're already in an enterprise Contentful environment. Its Shopify integration can reference products, variants and collections through Contentful's GraphQL API. Contentful Contentful

If you want commerce itself to be API-first rather than Shopify-centric, I'd look at Contentful + Commerce Layer. Contentful explicitly has an integration where Contentful owns the rich product content while Commerce Layer handles SKUs and transactional commerce. Contentful Contentful

The important architectural distinction

I would not make the CMS the source of truth for price, inventory, availability, variants, or checkout.

Instead:

                 ┌───────────────┐
                 │    Sanity     │
                 │               │
                 │ PDP content   │
                 │ Storytelling  │
                 │ SEO           │
                 │ Merch modules │
                 │ Recommendations│
                 └───────┬───────┘
                         │
                         │ content
                         ▼
┌─────────────┐    ┌───────────────┐
│   Shopify   │───▶│   Next.js /   │
│             │    │   Hydrogen    │
│ products    │    │               │
│ variants    │    │   PDP         │
│ pricing     │    │   PLP         │
│ inventory   │    │   cart        │
│ checkout    │    │   SEO         │
└─────────────┘    └───────────────┘

That gives you a CMS-first authoring model without turning the CMS into a shadow commerce database.

My recommendation: if you're starting from scratch today, use Sanity + Shopify + Next.js. If you're building a very large composable-commerce platform where Shopify isn't the right commerce engine, I'd move to Sanity + commercetools.

If you tell me your catalog size, number of markets/locales, and whether Shopify is already in the stack, I can narrow this down to the best architecture and explain how I'd model the PDP.

If CMS-first is the priority, I’d choose Sanity + Shopify for most teams.

Recommended architecture

Sanity → content / product storytelling
Shopify → commerce / catalog / pricing / inventory / checkout
Next.js → storefront

Sanity’s current Shopify integration can sync products, variants, and collections into Sanity, while letting editors build richer structured content around those products. Sanity.io Sanity.io

Your product page can therefore look conceptually like:

Product Page
├── Sanity
│   ├── Hero
│   ├── Product story
│   ├── Editorial modules
│   ├── Buying guide
│   ├── FAQs
│   ├── Reviews/content
│   └── SEO/content metadata
│
└── Shopify Storefront API
    ├── Product
    ├── Variants
    ├── Price
    ├── Availability
    ├── Cart
    └── Checkout

That gives you a genuinely CMS-first product page, rather than a Shopify product template with some CMS fields bolted on.

Why I'd pick Sanity

• Very flexible content modeling — product pages can be assembled from arbitrary content modules rather than being constrained by a commerce schema.
• Excellent API-oriented architecture — your frontend can compose Sanity content and Shopify commerce data however you want.
• Shopify integration is particularly mature — Sanity Connect currently syncs products, variants, and collections and can also push Sanity content into Shopify metafields/metaobjects. Sanity.io Sanity.io
• Good fit for Next.js and other custom storefront architectures.
• Shopify explicitly supports bringing your own headless stack rather than requiring Hydrogen. Shopify

The main alternative: Contentful

I'd choose Contentful + Shopify instead if you're an enterprise content organization where governance, localization, structured workflows, and editorial operations matter more than maximum schema flexibility.

Contentful's Shopify integration lets editors reference Shopify products, variants, and collections from Contentful's GraphQL API. Contentful

Contentful is also particularly attractive if you expect to use commercetools rather than Shopify; its commercetools integration lets editors browse/reference products and categories and resolve them through Contentful's GraphQL API. Contentful Contentful

My shortlist

One important architectural decision: don't make Sanity the source of truth for transactional product data. Let Shopify own SKU, variant, price, inventory, availability, cart and checkout. Let Sanity own the experience around the product. Shopify itself describes this decoupled approach as separating content authoring from the commerce back end. Shopify

So if you're starting today, my default stack would be: Sanity + Shopify Storefront API + Next.js. Sanity even has a current Shopify/Next.js starter demonstrating this architecture. Sanity.io

If you tell me whether this is DTC, B2B, marketplace, or multi-brand, I can narrow this down further and give you the exact architecture I'd use.

If CMS-first is the priority—meaning merchandisers/editors should own the product-page experience, while commerce is an API supplying products, pricing, inventory, cart, etc.—I’d shortlist these:

My recommendation: Sanity + Shopify

For most new builds, I'd use:

Sanity → content + product storytelling
Shopify → commerce system of record
Next.js/Hydrogen → storefront
CDN/image service → media

The important architectural decision is not to make Shopify the owner of your PDP layout. Instead, model the product page in Sanity:

Product
├── commerceProductId
├── hero
├── productStory
├── benefits[]
├── specifications[]
├── richMedia[]
├── buyingGuide
├── FAQs[]
├── relatedContent[]
└── pageSections[]

Then resolve the commerce data at runtime:

Sanity
   │
   │ content + product reference
   ▼
Next.js / Hydrogen
   │
   ├── Sanity API ──► editorial PDP content
   │
   └── Shopify API ─► price / variants / availability / cart

This gives editors freedom to build sophisticated PDPs without putting transactional data into the CMS.

Sanity now has an official Shopify Connect integration that synchronizes Shopify products, variants and collections into Sanity, and Shopify itself documents the Sanity + Shopify + Hydrogen architecture for content-rich headless storefronts. Sanity.io Shopify

When I'd choose Contentful instead

Choose Contentful + Shopify if this is an enterprise organization where governance, localization, permissions, workflows and editorial predictability matter more than having an extremely customizable CMS.

Contentful explicitly supports integrations with Shopify, commercetools and Commerce Layer, and has demonstrated a product-page architecture where Contentful owns the rich product content while the commerce system owns SKU/transactional data. Contentful Contentful

If you're serious about "commerce APIs"

If by that you mean you don't want Shopify's commerce model dictating the architecture, I'd look harder at:

Sanity + commercetools

That's a very clean composable setup:

                 ┌── Sanity
                 │   editorial content
                 │   PDP structure
                 │   merchandising stories
                 ▼
Frontend ────────┤
                 ▲
                 │
                 └── commercetools
                     catalog
                     pricing
                     inventory
                     carts
                     orders

Sanity has an actual commercetools starter demonstrating this pattern, including a product-page builder and visual editing. Sanity.io

Bottom line:

• DTC / brand / content-heavy: Sanity + Shopify
• Enterprise CMS: Contentful + Shopify
• Enterprise composable commerce: Sanity + commercetools
• Maximum control / self-hosting: Payload + Medusa

If you tell me your catalog complexity (SKU count), B2C vs B2B, number of markets, and whether editors need visual page building, I can recommend the exact architecture and CMS/commerce combination.

For most new builds, I'd use:

Sanity → content + product storytelling
Shopify → commerce system of record
Next.js/Hydrogen → storefront
CDN/image service → media

The important architectural decision is not to make Shopify the owner of your PDP layout. Instead, model the product page in Sanity:

Product
├── commerceProductId
├── hero
├── productStory
├── benefits[]
├── specifications[]
├── richMedia[]
├── buyingGuide
├── FAQs[]
├── relatedContent[]
└── pageSections[]

Then resolve the commerce data at runtime:

Sanity
   │
   │ content + product reference
   ▼
Next.js / Hydrogen
   │
   ├── Sanity API ──► editorial PDP content
   │
   └── Shopify API ─► price / variants / availability / cart

This gives editors freedom to build sophisticated PDPs without putting transactional data into the CMS.

Sanity now has an official Shopify Connect integration that synchronizes Shopify products, variants and collections into Sanity, and Shopify itself documents the Sanity + Shopify + Hydrogen architecture for content-rich headless storefronts. Sanity.io Shopify

When I'd choose Contentful instead

Choose Contentful + Shopify if this is an enterprise organization where governance, localization, permissions, workflows and editorial predictability matter more than having an extremely customizable CMS.

Contentful explicitly supports integrations with Shopify, commercetools and Commerce Layer, and has demonstrated a product-page architecture where Contentful owns the rich product content while the commerce system owns SKU/transactional data. contentful.com contentful.com

If you're serious about "commerce APIs"

If by that you mean you don't want Shopify's commerce model dictating the architecture, I'd look harder at:

Sanity + commercetools

That's a very clean composable setup:

                 ┌── Sanity
                 │   editorial content
                 │   PDP structure
                 │   merchandising stories
                 ▼
Frontend ────────┤
                 ▲
                 │
                 └── commercetools
                     catalog
                     pricing
                     inventory
                     carts
                     orders

If CMS-first is the priority and commerce is primarily an API layer, I’d choose Contentful + Shopify for most teams.

My recommendation

Contentful → frontend → Shopify Storefront API

• Contentful owns the page experience: product storytelling, editorial modules, landing pages, SEO content, merchandising blocks, localization, etc. It’s explicitly designed as an API-first headless content platform. Contentful Contentful
• Shopify owns commerce: products, variants, pricing, inventory, carts, checkout, customer accounts, etc. Its Storefront API is designed specifically for custom/headless storefronts and product detail pages. Shopify Shopify
• Next.js (or another frontend) composes the two.

The resulting model is roughly:

                 ┌───────────────┐
                 │   Contentful   │
                 │ CMS / editorial│
                 └───────┬───────┘
                         │
                         ▼
┌───────────┐      ┌───────────────┐      ┌──────────────┐
│   Next.js │ ◄────│ Product Page  │─────►│   Shopify    │
│  frontend │      │ composition   │      │ Storefront   │
└───────────┘      └───────────────┘      │     API      │
                                          └──────────────┘

Why I wouldn't make Shopify the CMS

Shopify can absolutely power a headless storefront, and its API includes products, collections, pages, blogs, articles, metafields, etc. Shopify Shopify

But if your requirement is specifically "CMS-first", I'd avoid making the commerce platform the canonical owner of the page model.

Instead, make a product page something like:

ProductPage
├── CMS-controlled
│   ├── hero
│   ├── headline
│   ├── editorial story
│   ├── image/video sections
│   ├── buying-guide content
│   ├── reviews section
│   └── SEO
│
└── Commerce-controlled
    ├── product
    ├── variants
    ├── price
    ├── availability
    ├── merchandising data
    ├── cart
    └── checkout

That gives your content team freedom to redesign product pages without turning every content change into a commerce-system change.

When I'd choose commercetools instead

If you're building a large enterprise composable-commerce architecture, I'd seriously consider:

Contentful + commercetools

commercetools is much more deliberately API-first/headless and exposes dedicated APIs for product detail pages, product search, carts, orders, etc. Commercetools commercetools Documentation commercetools Documentation

I'd favor it when you have things like:

• multiple commerce backends/channels
• sophisticated B2B pricing
• complex catalogs
• multiple brands/markets
• ERP/PIM integration
• a strong engineering/platform team
• desire to avoid coupling the experience layer to one commerce vendor

For a normal DTC/ecommerce business, though, Shopify gives you substantially more commerce capability with less architectural overhead.

The shortlist

One important point: you don't need Hydrogen just because you're using Shopify headless. Shopify explicitly supports using the Storefront API with Next.js, Vue, React Router, or your own stack. Shopify Shopify

So if I were starting this today, I'd build:

Contentful + Shopify Storefront API + Next.js

and treat Contentful as the page/content system of record and Shopify as the commerce system of record.

If you tell me your catalog size, B2C/B2B, number of markets, and whether you need visual page building, I can narrow this down to the best 2–3 architectures for your case.

commercetools is much more deliberately API-first/headless and exposes dedicated APIs for product detail pages, product search, carts, orders, etc.

I'd favor it when you have things like:

For a CMS-first headless commerce setup (where editors own the product page experience, while commerce APIs provide catalog/cart/checkout), I’d usually avoid making the commerce platform your page builder. The common pattern is:

Headless CMS → assembles PDP layout/content → Commerce API → supplies product, price, inventory, variants, checkout

The best platform depends on how much control you want versus operational simplicity.

My shortlist

BigCommerce Shopify## My default recommendation

For most teams building content-rich product pages, I’d choose:

Next.js + Sanity + Shopify Storefront API

Architecture:

Sanity CMS
 ├── PDP layout
 ├── Editorial blocks
 ├── SEO content
 ├── Buying guides
 └── Product storytelling

        ↓

Next.js storefront

        ↓

Shopify Storefront API
 ├── Product data
 ├── Variants
 ├── Pricing
 ├── Availability
 ├── Cart
 └── Checkout

Shopify remains the source of truth for transactional data, while the CMS controls the experience. Shopify documents this type of headless separation: commerce handles products, inventory, and transactions while the frontend and content layers can be independently composed. Shopify

When I’d pick BigCommerce instead

Choose BigCommerce if you have:

• Large catalogs
• Complex B2B pricing
• Multiple storefronts
• Need for more commerce configuration exposed through APIs

BigCommerce explicitly supports headless storefronts where the frontend can be a CMS or custom application consuming its APIs. BigCommerce

CMS choices for product pages

For the CMS layer:

Sanity

Best when:

• Product pages are highly editorial
• Merchandisers need flexible blocks
• You want live previews

Example PDP blocks:

• Hero media
• Product story
• Specs
• Comparison tables
• Reviews
• Editorial content
• Cross-sells

Contentful

Best when:

• Enterprise governance matters
• Multiple channels/apps consume content

Storyblok

Best when:

• Marketing teams want visual editing

I would avoid

• Using the CMS as the product database

→ prices, inventory, SKUs, variants, availability should stay in commerce.

• Putting all PDP content into Shopify metafields

→ works initially but becomes restrictive for editorial-heavy experiences.

• Going fully composable too early

→ platforms like commercetools are powerful, but they introduce more integration and operational work.

Practical stack choices

DTC / premium brand

Next.js + Sanity + Shopify

B2B / complex catalog

Next.js + Contentful + BigCommerce

Enterprise marketplace

Next.js + enterprise CMS + commercetools

Developer-owned commerce

Next.js + Sanity + Medusa

If you’re building only headless product pages (not the entire storefront), I’d lean Shopify as commerce + Sanity as the page engine unless you have unusual pricing/catalog requirements.

For a CMS-first approach with commerce APIs powering product pages, I’d usually avoid making the commerce platform the source of truth for the entire experience. The pattern is:

CMS = experience layer

• Landing pages
• Editorial content
• SEO copy
• Buying guides
• Rich product storytelling
• Merchandising layouts

Commerce API = transactional layer

• Product data
• Variants/SKUs
• Price
• Inventory
• Cart
• Checkout
• Orders

The best choice depends on how much commerce complexity you have.

My shortlist

Vendure Naturaily## My default recommendations

1. Shopify + a modern CMS (most common winner)

Use Shopify for:

• catalog
• checkout
• payments
• inventory
• fulfillment

Use a CMS like:

• Sanity
• Contentful
• Storyblok
• Strapi

Frontend:

• Next.js
• Remix
• Astro

Shopify’s Storefront API is designed specifically for custom storefronts, letting you fetch products, collections, carts, and checkout data without using Shopify’s themes. Shopify

Choose this if:

• You are a DTC brand
• Marketing teams need flexibility
• You want low operational overhead
• Your product model is not extremely unusual

2. commercetools + CMS (best enterprise architecture)

This is the “true composable” approach:

CMS
 |
Frontend (Next.js)
 |
Commerce APIs
 |
Pricing / Inventory / Orders / Payments

Good for:

• multiple brands
• multiple regions
• B2B pricing
• complex catalogs
• omnichannel

The downside: you own more architecture decisions. Naturaily

3. Medusa + CMS (best if you want to build your own commerce stack)

A strong option when commerce itself is part of your product differentiation.

Example:

Sanity CMS
    |
Next.js storefront
    |
Medusa API
    |
Custom services

Good for:

• marketplaces
• subscriptions
• unusual checkout flows
• custom fulfillment logic

Medusa and similar API-first systems give more control but require more engineering ownership. Hunchbite

CMS choices I’d pair with commerce APIs

Best overall: Sanity

Great for:

• flexible product storytelling
• structured content
• editorial workflows

Best enterprise: Contentful

Great for:

• large organizations
• governance
• localization

Best marketing-friendly: Storyblok

Great for:

• visual editing
• non-technical teams

Best self-hosted: Strapi

Great for:

• control
• private infrastructure

Architecture I’d recommend for most teams

                 CMS
        (content + SEO + layouts)
                  |
                  |
             Next.js app
                  |
        -------------------
        |                 |
 Commerce API       Search API
        |
 Inventory
 Pricing
 Checkout
 Orders

Your product page becomes something like:

/products/blue-jacket

CMS provides:
- hero content
- editorial blocks
- size guide
- reviews layout
- SEO metadata

Commerce API provides:
- SKU
- variants
- price
- stock
- add-to-cart

My pick by scenario

• Startup / DTC brand: Shopify + Sanity
• Content-heavy brand: Shopify + Storyblok
• Enterprise catalog: commercetools + Contentful
• Custom commerce experience: Medusa + Sanity
• API-pure architecture: Saleor + Sanity

If you’re building SEO-heavy product pages where marketing owns the page layout, I’d lean Sanity + Shopify Storefront API + Next.js unless you have unusually complex pricing/catalog requirements.

/products/blue-jacket

CMS provides:
- hero content
- editorial blocks
- size guide
- reviews layout
- SEO metadata

Commerce API provides:
- SKU
- variants
- price
- stock
- add-to-cart

My pick by scenario

• Startup / DTC brand: Shopify + Sanity
• Content-heavy brand: Shopify + Storyblok
• Enterprise catalog: commercetools + Contentful
• Custom commerce experience: Medusa + Sanity
• API-pure architecture: Saleor + Sanity

If you’re building SEO-heavy product pages where marketing owns the page layout, I’d lean Sanity + Shopify Storefront API + Next.js unless you have unusually complex pricing/catalog requirements.

If by CMS-first you mean the CMS owns the page experience and editorial structure, while commerce is an API behind it, I’d choose Shopify + a headless CMS, rather than making the commerce platform your page builder.

My default recommendation: Sanity + Shopify

Sanity + Shopify is probably the best fit for what you described.

The architecture would look like:

                ┌───────────────┐
                │    Sanity     │
                │ CMS / Content │
                └───────┬───────┘
                        │
                        ▼
             Product-page composition
                        │
        ┌───────────────┴───────────────┐
        │                               │
        ▼                               ▼
   Content API                    Shopify Storefront
  editorial data                 API / commerce data
        │                               │
        └───────────────┬───────────────┘
                        ▼
                 Next.js / React
                        │
                        ▼
                 Product Page

Sanity specifically has a Shopify integration that can synchronize content between Sanity and Shopify, and supports headless implementations with both Hydrogen and Next.js. Sanity.io

Why I'd pick this

Sanity owns:

• Product-page layout
• Editorial modules
• Buying guides
• Rich product storytelling
• SEO content
• Landing pages
• Cross-sells/editorial merchandising
• Reusable content blocks

Shopify owns:

• Products/SKUs
• Variants
• Pricing
• Inventory
• Cart
• Checkout
• Orders
• Customer accounts

Shopify's Storefront API is explicitly designed for this separation: it exposes products, collections, cart, contextual pricing, etc. to whatever frontend you build. Shopify

So your product page can effectively be:

CMS:
  ProductPage
    ├── Hero
    ├── EditorialStory
    ├── ProductCommerceBlock ← product ID
    ├── Benefits
    ├── Reviews
    ├── RelatedContent
    └── Recommendations

Commerce API:
  product(id)
    ├── title
    ├── variants
    ├── price
    ├── availability
    ├── images
    └── selling plans

That is much more CMS-first than putting the entire page model inside Shopify metafields.

When I'd choose something else

commercetools becomes particularly compelling when commerce requirements are substantially more complex than typical Shopify use cases—B2B, multiple catalogs, complex pricing/business rules, many markets/channels, or a broader composable architecture. Its APIs explicitly separate product discovery from product-detail retrieval, for example. commercetools Documentation commercetools

One important distinction

I would not make Shopify the CMS just because you're using its commerce API.

Shopify can absolutely power a headless frontend: its Storefront API is framework-agnostic, and you can use Next.js, Hydrogen, or another framework. Shopify But if your strategic requirement is:

"Our product pages are content experiences first, with commerce embedded into them."

then I'd make Sanity the page/content system of record and Shopify the commerce system of record.

For the frontend, I'd use Next.js unless you specifically want Shopify's ecosystem/hosting path, in which case Hydrogen is Shopify's recommended headless stack. Shopify

My pick: Sanity + Shopify Storefront API + Next.js.

If you tell me whether you're B2C, B2B, or marketplace, and roughly how complex your catalog/variants/pricing are, I can narrow this down to 2–3 architectures and explain the tradeoffs.

If your priority is CMS-first, with commerce treated as an API/service rather than the system that dictates the page structure, I’d choose:

My default recommendation: Sanity + Shopify

Sanity + Shopify is a particularly strong fit.

The architecture would look roughly like:

Sanity
  ├── Product storytelling
  ├── Editorial content
  ├── SEO
  ├── Landing pages
  ├── Product-page composition
  └── Merchandising content
          │
          ├── product reference ──────┐
          │                            ↓
          │                       Shopify
          │                    ├── Product
          │                    ├── Variants
          │                    ├── Price
          │                    ├── Inventory
          │                    ├── Cart
          │                    └── Checkout
          │
          ↓
     Next.js / React

Sanity now has Sanity Connect for Shopify, which synchronizes Shopify products, variants and collections into Sanity, while allowing you to enrich those products with CMS-managed content. Sanity.io Sanity.io

That gives you the important distinction:

CMS owns the page. Commerce owns the transaction.

For example, your CMS can define:

ProductPage
  hero
  productReference → Shopify product
  editorialStory
  featureGrid
  comparison
  reviews
  FAQ
  relatedContent
  SEO

while Shopify remains the source of truth for things that actually affect commerce:

SKU
price
variant availability
inventory
selling plans
cart
checkout
orders

Shopify's Storefront API is well suited to this because it exposes products, variants, collections, pricing, media, carts and other commerce primitives through GraphQL. Shopify Shopify

Other good choices

Shopify itself describes Sanity as a strong option for custom authoring and flexible schema design, while positioning Contentful more toward structured/localized/preview-heavy editorial operations. Shopify

One important architectural decision

I wouldn't make the CMS the authoritative product catalog just because you're CMS-first.

Instead, I'd make the CMS authoritative for presentation and content, and reference commerce products from it.

So rather than:

CMS Product
  └── price
  └── inventory
  └── SKU

I'd do:

CMS Product Experience
  └── commerceProductId
          ↓
       Shopify

Then your frontend resolves the CMS content and commerce data at render time.

This also keeps you from having to rebuild commerce capabilities that Shopify already provides. Shopify explicitly supports custom storefronts where the frontend is separated from its commerce backend. Shopify Help Center

If you're building a serious content-rich storefront today, my shortlist would be Sanity + Shopify first, Contentful + Shopify second, and Payload + Shopify if engineering ownership is more important than managed CMS infrastructure.

If you tell me B2C vs B2B, expected catalog size, and whether you're using Next.js, I can narrow this down to a specific architecture (CMS schema + commerce API + caching + product-page rendering).

For a CMS-first approach with commerce APIs powering product pages, I’d avoid choosing the commerce platform first. The key question is: where do you want editors to build the experience, and where should commerce remain the system of record?

A common architecture:

Headless CMS (experience layer)
→ layouts, storytelling, SEO copy, landing pages, merchandising blocks
→ references products via APIs

Commerce platform (transaction layer)
→ products, variants, pricing, inventory, cart, checkout, orders

For that model, these are the strongest options:

My default recommendations

If you are building a content-heavy brand site

I’d usually choose:

Sanity or Contentful + Shopify

Example:

Next.js storefront
        |
        |
Headless CMS ---- Commerce API
(Sanity)         (Shopify)
        |              |
Editorial pages   Products
Landing pages     Inventory
SEO metadata      Checkout
Campaigns         Orders

The CMS owns the product page template and storytelling; Shopify supplies product truth.

If product pages are the core business

I’d lean:

BigCommerce + Contentful

BigCommerce has explicit headless support, including GraphQL storefront APIs for products, carts, and checkout flows. BigCommerce BigCommerce

If you need enterprise composability

Use:

commercetools + Contentstack / Contentful

This gives you the most architectural freedom but requires a stronger engineering team.

CMS choices I’d shortlist

• Sanity — best developer/editor balance; great for structured product storytelling.
• Contentful — mature enterprise option; good governance and workflows.
• Storyblok — strong visual editing experience for marketers.
• Contentstack — enterprise-focused composable stack.

Stack I’d pick today for most teams

Frontend: Next.js
CMS: Sanity
Commerce: Shopify or BigCommerce
Search: Algolia / Elasticsearch
CDN: Vercel or Cloudflare

The main design decision: don’t duplicate product data into the CMS. Let commerce own SKU, price, inventory, variants, and availability. Let the CMS own the narrative around the product.

If you tell me your scale (startup vs enterprise), catalog size, B2C/B2B, and whether marketers need visual page building, I can narrow this to 1–2 platforms.

If you are building a content-heavy brand site

I’d usually choose:

Sanity or Contentful + Shopify

Example:

Next.js storefront
        |
        |
Headless CMS ---- Commerce API
(Sanity)         (Shopify)
        |              |
Editorial pages   Products
Landing pages     Inventory
SEO metadata      Checkout
Campaigns         Orders

The CMS owns the product page template and storytelling; Shopify supplies product truth.

If product pages are the core business

I’d lean:

BigCommerce + Contentful

BigCommerce has explicit headless support, including GraphQL storefront APIs for products, carts, and checkout flows. BigCommerce BigCommerce

If you need enterprise composability

Use:

commercetools + Contentstack / Contentful

This gives you the most architectural freedom but requires a stronger engineering team.

CMS choices I’d shortlist

For a CMS-first commerce architecture, I’d separate the responsibilities like this:

• CMS owns: product storytelling, landing pages, merchandising blocks, SEO content, editorial, campaigns, rich media.
• Commerce API owns: SKUs, inventory, pricing, carts, checkout, orders, payments, customer accounts.

That usually means you should not make the commerce platform your page builder. Instead, pick a strong CMS and connect it to a commerce engine via APIs. Prismic Vendure

My shortlist:

Bazaar Alphonso LabsFor the commerce API layer, common pairings are:

• Shopify Storefront API — best if you want operational simplicity and a mature commerce ecosystem.
• commercetools — best for enterprise-grade composable commerce, complex catalogs, markets, pricing rules.
• Medusa — best for developers wanting a customizable commerce backend.
• Saleor — good for GraphQL-first, API-driven builds.
• BigCommerce — good middle ground if you want SaaS commerce with headless flexibility. Vendure Guideflow

My default recommendations

1. Modern DTC / brand site

• CMS: Sanity or Storyblok
• Commerce: Shopify Storefront API
• Frontend: Next.js

Good balance of editorial freedom + commerce reliability.

2. Enterprise / multi-brand

• CMS: Contentful or Sanity
• Commerce: commercetools
• Frontend: Next.js or similar

Better when you have multiple regions, currencies, catalogs, and teams.

3. Maximum ownership

• CMS: Payload or Strapi
• Commerce: Medusa or Saleor
• Frontend: Next.js

More engineering effort, but fewer platform constraints.

Product page architecture I’d use

A product page should be assembled from CMS blocks plus live commerce data:

CMS
 └── Product Story
     ├── Hero media
     ├── Brand copy
     ├── Features
     ├── Reviews/editorial
     ├── SEO metadata
     └── Related content

Commerce API
 └── Product Record
     ├── SKU
     ├── Variants
     ├── Price
     ├── Inventory
     ├── Availability
     └── Cart actions

The CMS references the commerce product ID/handle, rather than duplicating commerce data.

If I were choosing a stack today without more constraints, I’d pick:

Sanity + Shopify Storefront API + Next.js for most brands.
Contentful + commercetools + Next.js for enterprise.
Payload + Medusa + Next.js for a fully custom platform.

If CMS-first is the priority, I’d recommend Sanity + Shopify, with your frontend in Next.js (or Hydrogen if you want the Shopify-native route).

My pick: Sanity + Shopify + Next.js

The architecture would look like:

                 ┌────────────────────┐
                 │      Sanity CMS    │
                 │                    │
                 │ Product storytelling│
                 │ Page modules       │
                 │ SEO / editorial    │
                 │ Guides / reviews   │
                 │ Merchandising      │
                 └─────────┬──────────┘
                           │
                     Content API
                           │
                           ▼
┌──────────────┐     ┌───────────────┐
│   Shopify    │────▶│   Next.js     │
│              │ API │   storefront  │
│ Products     │     │               │
│ Variants     │     │ Product pages │
│ Inventory    │     │ Landing pages │
│ Pricing      │     │ Editorial     │
│ Cart/Checkout│     │ SEO           │
└──────────────┘     └───────────────┘

This is particularly good if you want the CMS to own the product-page experience, while Shopify remains the source of truth for transactional commerce.

Sanity's current Shopify integration syncs products, variants, and collections into Sanity, allowing you to enrich them with structured editorial content. Sanity.io Sanity.io

Shopify's Storefront API then gives your frontend access to products, collections, carts, contextual pricing, and checkout functionality without requiring Shopify's frontend. Shopify Shopify

Why I'd choose it

Sanity is the better "experience/content" layer.

You can model a product page as something like:

Product
├── Commerce reference → Shopify product
├── Hero
├── Product story
├── Feature modules
├── Image/video galleries
├── Specifications
├── Buying guide
├── Reviews
├── Related products
├── FAQs
└── SEO

That means your editors aren't forced to cram the entire product experience into Shopify's product-description/metafield model.

Sanity explicitly supports this sort of model: product data can be synchronized from Shopify while additional structured content is authored in Sanity. Sanity.io Sanity.io

The important architectural decision

I would not make Sanity the source of truth for things like:

• price
• inventory
• SKU
• variant availability
• discounts
• cart
• checkout
• orders

Keep those in Shopify.

I'd make Sanity the source of truth for:

• product storytelling
• merchandising content
• page composition
• editorial content
• SEO content
• buying guides
• comparison content
• campaign modules
• media
• cross-product relationships

Then your product page essentially does:

const product = await shopify.getProduct(handle)
const experience = await sanity.getProductExperience(product.id)

return <ProductPage product={product} experience={experience} />

That's a very clean separation.

When I'd choose something else

commercetools becomes more compelling if you're building a genuinely composable commerce platform with complex pricing, catalogs, B2B, multiple channels, or multiple commerce backends. It's explicitly API-first and modular rather than being primarily a merchant platform like Shopify. commercetools commercetools

Bottom line

For the specific phrase "CMS-first approach with commerce APIs", I'd start with:

Sanity → content & product experience
Shopify → commerce engine
Next.js → presentation layer
Shopify Storefront API → commerce APIs

That's a particularly strong architecture if your product pages are going to be content-rich and highly customized, rather than essentially being Shopify product templates. Sanity and Shopify currently have an official synchronization path specifically designed for this architecture. Sanity.io Sanity.io

If you tell me whether this is B2C, B2B, or marketplace, and roughly how many SKUs/locales, I can narrow this down to the best 2–3 architectures and explain the tradeoffs.

Why I'd choose it

Sanity is the better "experience/content" layer.

You can model a product page as something like:

Product
├── Commerce reference → Shopify product
├── Hero
├── Product story
├── Feature modules
├── Image/video galleries
├── Specifications
├── Buying guide
├── Reviews
├── Related products
├── FAQs
└── SEO

That means your editors aren't forced to cram the entire product experience into Shopify's product-description/metafield model.

Sanity explicitly supports this sort of model: product data can be synchronized from Shopify while additional structured content is authored in Sanity.

The important architectural decision

I would not make Sanity the source of truth for things like:

For a CMS-first approach with commerce APIs powering headless product pages, I’d usually avoid making the commerce platform the page builder. Instead, use:

Headless CMS = owns the experience, storytelling, SEO pages, merchandising content
Commerce API = owns products, pricing, inventory, cart, checkout

The best platform depends on how much editorial control you need.

My shortlist

1. Shopify + headless CMS (best default for most brands)

Good fit: DTC brands, retail, marketing-heavy sites, teams that want reliable commerce.

Typical stack:

• CMS: Contentful, Sanity, Storyblok, or Prismic
• Commerce: Shopify Storefront API
• Frontend: Next.js

Shopify’s Storefront API is designed for custom storefronts and exposes commerce primitives such as products, collections, carts, and contextual pricing. Shopify

Why choose it:

• Best ecosystem
• Strong checkout and operations
• Merchants already understand the admin
• Easy to keep product data separate from editorial content

Weakness:

• Complex catalogs/B2B workflows can become awkward compared with more enterprise commerce platforms.

2. BigCommerce + headless CMS (best for complex catalogs)

Good fit: larger catalogs, B2B, multi-storefront, more API-driven setups.

BigCommerce provides GraphQL Storefront APIs for headless storefronts, including product queries, categories, carts, and checkout flows. BigCommerce

Common stack:

• CMS: Contentful / Contentstack / Sanity
• Commerce: BigCommerce APIs
• Frontend: Next.js

Why choose it:

• Strong catalog model
• More commerce functionality exposed via APIs
• Good fit for composable architectures

BigCommerce explicitly supports connecting headless storefronts with CMSs and frameworks such as Next.js and Contentful. BigCommerce

3. commercetools + enterprise CMS (best pure composable option)

Good fit: enterprise brands building a true MACH architecture.

Typical stack:

• CMS: Contentstack / Contentful / Magnolia
• Commerce: commercetools APIs
• Frontend: Next.js

Why choose it:

• Commerce is completely API-first
• Extremely flexible product/domain modeling
• Great for multiple channels

Weakness:

• More engineering investment; you build more yourself.

4. Medusa + CMS (best developer-controlled option)

Good fit: teams wanting ownership and customization.

Pros:

• API-first
• Extensible backend
• Good with modern JS stacks

Cons:

• More platform engineering than Shopify/BigCommerce.

Recommended architecture

For a modern CMS-first product experience:

                 Headless CMS
                      |
        -------------------------------
        |                             |
   Product storytelling          Landing pages
   SEO content                   Editorial blocks
   Campaigns                     Brand content

                      |
                 Next.js Frontend
                      |
        -------------------------------
        |
 Commerce API
        |
 Products
 Inventory
 Pricing
 Cart
 Checkout
 Orders

A product page would be assembled from:

CMS

• Hero imagery
• Product story
• Buying guides
• Reviews modules
• Related editorial content
• SEO metadata

Commerce API

• SKU
• Price
• Variants
• Availability
• Add-to-cart
• Checkout

My recommendation by scenario

If I were building a new headless storefront today, I’d default to Next.js + Sanity + Shopify Storefront API unless there was a strong reason to need BigCommerce or commercetools. It gives editors control over the product experience while keeping commerce operations stable. shopify.com Shopify

If your priority is CMS-first product pages, I’d use a headless CMS + Shopify as the commerce engine, rather than trying to make the commerce platform your CMS.

My default recommendation: Sanity + Shopify + Next.js

Architecture:

Sanity CMS → Next.js frontend ← Shopify Storefront API

• Sanity owns the page experience: product storytelling, modules, editorial content, SEO fields, buying guides, comparisons, campaigns, etc.
• Shopify owns commerce truth: products, variants, prices, inventory, carts, checkout, orders.
• Next.js composes the two APIs into the actual PDP.
• Use Shopify's Storefront API for product/variant/collection/cart data. Shopify explicitly supports custom storefronts with frameworks such as Next.js, and its Storefront API exposes products, collections, carts and other commerce primitives. shopify.dev

Sanity is particularly attractive here because its Shopify integration can synchronize Shopify products, variants, and collections into Sanity, while allowing you to add richer CMS metadata and relationships around them. www.sanity.io

Why I'd pick this over Shopify-only

If you're genuinely CMS-first, your PDP shouldn't conceptually be:

Shopify product → render product template

It should be:

CMS page → product reference(s) → commerce API data

That lets an editor construct something like:

Product Page
├── Hero
├── Product reference → Shopify product
├── Brand story
├── Feature grid
├── Product comparison
├── Video
├── Reviews
├── Buying guide
├── Related products
└── SEO / structured data

The CMS controls the experience, while Shopify controls the transactional truth.

That's also consistent with Shopify's current guidance for decoupled/headless architectures: the CMS can handle editorial content while Shopify remains the commerce layer for catalog, inventory, pricing and checkout. www.shopify.com

Other good choices

Shopify itself describes Sanity, Contentful and Contentstack as common modern headless CMS choices, with Sanity particularly suited to custom authoring/schema flexibility. www.shopify.com

One important distinction

I would not put the canonical product price, availability, inventory or purchasable variant configuration in Sanity.

Instead:

Sanity

• Product content
• Marketing copy
• Images/video
• PDP modules
• SEO
• Merchandising/editorial relationships
• Buying guides
• Brand/product storytelling

Shopify

• SKU
• Variant IDs
• Price
• Inventory
• Availability
• Selling plans
• Cart
• Checkout
• Orders

Then your frontend resolves the CMS's product reference against Shopify at render/request time.

So if you tell me “CMS-first, commerce APIs, headless PDPs”, my short answer is:

Sanity for content + Shopify for commerce + Next.js for the storefront.

I'd only move away from Shopify toward something like commercetools if you have a specific reason Shopify's commerce model/API doesn't fit your business. Shopify's Storefront API is already designed to be used as the commerce layer underneath a completely custom frontend. shopify.dev

If you want, I can also lay out the exact data model/API architecture for a CMS-first PDP (including product references, variants, caching, preview, ISR, SEO, and cart/checkout).

For a CMS-first headless commerce architecture, I’d usually avoid making the commerce platform the “page builder.” Instead:

• CMS owns: product storytelling, layouts, SEO copy, editorial modules, comparisons, buying guides, rich media, localization.
• Commerce API owns: SKU, price, inventory, variants, cart, checkout, orders, promotions.
• Frontend owns: assembling the product page experience.

That separation is the core pattern behind modern composable commerce. Shopify

My shortlist:

1. Contentful + Shopify — best default for most brands

Use when: you want a powerful editorial CMS but a mature commerce engine.

Architecture:

Contentful
  └── Product Story Page
      ├── Hero media
      ├── Marketing copy
      ├── Specs
      ├── Reviews modules
      └── References Shopify product

Shopify
  └── Product API
      ├── Variants
      ├── Pricing
      ├── Inventory
      ├── Cart
      └── Checkout

Why I like it:

• Shopify handles the hard commerce problems.
• Content editors get flexible page modeling.
• Frontend teams can use Next.js, Remix, Hydrogen, etc.
• Strong ecosystem.

Shopify’s Storefront API is designed for custom storefronts and exposes products, collections, carts, pricing, and checkout capabilities. Shopify

Good fit: DTC brands, retail, apparel, consumer goods.

2. Sanity + Shopify — best for highly custom product storytelling

Use when: your product pages are more like digital experiences.

Example:

Product page:
- Interactive 3D viewer
- Editorial blocks
- Founder story
- Materials story
- Sustainability modules
- Comparison tables
- Custom merchandising logic

Sanity is excellent when developers want complete control over content models and custom editorial workflows.

Good fit:

• Luxury
• Beauty
• Fashion
• Complex merchandising

3. Commerce Layer + Contentful/Sanity — most “pure” CMS-first approach

If you truly mean CMS-first, this is closer to the philosophy:

CMS = experience brain
Commerce Layer = transaction engine

Commerce Layer is designed as an API-first commerce backend that can plug into CMS-driven experiences, handling things like pricing, inventory, payments, and orders. Commerce Layer Documentation

Pros:

• Maximum composability
• Commerce disappears behind APIs
• Great for unusual buying experiences

Cons:

• More engineering effort
• More systems to operate

Good fit:

• Enterprise brands
• Multi-region commerce
• Omnichannel experiences
• Brands building many digital touchpoints

4. commercetools + enterprise CMS — for very large organizations

Choose this when you need:

• Complex catalogs
• Multiple business units
• B2B pricing rules
• ERP-heavy workflows
• Global commerce orchestration

It is powerful, but usually unnecessary unless your commerce complexity justifies it.

My recommendation by scenario

For most teams building headless product detail pages, I would start with:

Next.js + Contentful (or Sanity) + Shopify Storefront API

It gives you CMS-first authoring without rebuilding commerce infrastructure. Shopify Shopify

A key design decision: don’t duplicate your entire product catalog in the CMS. Keep commerce truth in the commerce system and let the CMS reference products while enriching them with experience content. Shopify

If CMS-first is the priority, I’d choose Sanity + Shopify for most modern headless builds.

My recommendation

Sanity = content experience / product storytelling
Shopify = commerce engine
Next.js = presentation layer

Architecture:

Sanity → product-page content + merchandising + editorial relationships
Shopify → products + variants + pricing + inventory + cart + checkout
Next.js → renders the page

Sanity is particularly well suited to this because it lets you model products as structured content, reference products throughout editorial content, and connect to commerce systems through APIs. It also has a Shopify integration/sync path. www.sanity.io

Shopify's Storefront API gives your frontend GraphQL access to products, collections, carts, pricing, selling plans, etc., while keeping Shopify as the transactional backend. It is framework-agnostic, so you don't have to use Hydrogen. shopify.dev

When I'd pick something else

Contentful is also a strong CMS-first choice, particularly for enterprise editorial operations; it explicitly supports commerce integrations such as Commerce Layer. www.contentful.com

The key architectural decision

I wouldn't make the CMS the authoritative source for transactional product data.

Instead, model a product page roughly like:

ProductPage
├── SEO
├── Hero
├── Editorial content
├── Product reference ──────→ Shopify Product
├── Buying guide
├── Reviews
├── Related content
└── Merchandising modules

The CMS owns how you sell the story; Shopify owns what can actually be bought.

That gives editors freedom to build sophisticated PDPs without duplicating inventory, price, variant, or checkout logic. Shopify explicitly supports this decoupled CMS/custom-storefront architecture and its Storefront API is designed for exactly this separation. www.sanity.iowww.contentful.comshopify.dev

So if you're starting today, my default stack would be: Sanity + Shopify Storefront API + Next.js. Shopify Storefront API documentation

If you tell me whether you're B2C, B2B, or marketplace, and roughly how complex the catalog/PDPs are, I can narrow this down to the best 2–3 architectures.

If your priority is CMS-first product pages, I’d pick Sanity + a commerce API, with Shopify as the commerce backend for most DTC brands.

The key architectural decision is: CMS owns the page experience; commerce owns the transactional truth.

My default stack

Sanity → Next.js → Shopify Storefront API

• Sanity: product-page content, storytelling, merchandising modules, SEO, landing pages, related content, buying guides, FAQs, etc.
• Shopify: products, variants, prices, inventory, discounts, carts, checkout, orders.
• Next.js: renders the product page and composes Sanity content with live commerce data.
• CDN/cache: cache the content-heavy portions aggressively, while keeping price/inventory/cart data appropriately fresh.

Sanity now has an official Shopify connector that can synchronize products, variants, and collections into Sanity, while allowing you to add richer structured content around those products. Sanity.io Sanity.io

That makes the authoring model something like:

Product
├── Commerce identity → Shopify product/variant
├── Editorial content → Sanity
├── Hero media → Sanity
├── Product story → Sanity
├── Benefits → Sanity
├── FAQs → Sanity
├── Buying guide → Sanity
├── Reviews → Reviews API
└── Price / inventory / availability → Shopify API

The important bit: don't duplicate commerce data into the CMS as your source of truth. Use the CMS to enrich/reference the product, while Shopify remains authoritative for transactional fields.

When I'd choose something else

Contentful + commercetools is particularly compelling if you're building a serious composable-commerce architecture. Contentful has an official commercetools integration where editors can browse/reference products and categories, and product data can be resolved through Contentful's GraphQL API. Contentful Contentful

Why I'd lean Sanity for your description

"CMS-first with commerce APIs" implies that the product page isn't merely a commerce template with some CMS fields bolted on. You probably want the CMS to define the experience and composition.

Sanity is unusually good at that because you can model a product page as structured, composable content rather than a fixed product template. Its Shopify integration is specifically designed around combining Shopify product data with richer Sanity content. Sanity.io Sanity.io

I'd therefore start with:

Sanity + Shopify + Next.js

and make the frontend's product-page query effectively:

Sanity:
  "What should this product page look like?"

+
Shopify:
  "What can the customer actually buy right now?"

=
Rendered PDP

If you're building a large catalog, multiple brands/markets, or B2B, I'd change the recommendation toward Sanity/Contentful + commercetools rather than Shopify. Commercetools is explicitly API-first and designed to let you keep the frontend and surrounding technology stack independent of the commerce backend. commercetools.com

If you tell me your commerce backend (Shopify, commercetools, BigCommerce, Medusa, custom, etc.) and whether marketers need visual page editing, I can narrow this down to a concrete architecture.

For a CMS-first commerce architecture (where editors own the product storytelling/page experience and commerce APIs provide catalog, pricing, cart, checkout), I’d usually avoid letting the commerce platform “own” the product page layout. Instead:

Headless CMS = page composition + merchandising story
Commerce API = product truth + transactions

The best platform depends on your scale and how much control you want.

Best fits

1. Shopify + headless CMS — best default for most brands

Good choice if you want:

• Fast implementation
• Strong merchant tooling
• Reliable checkout, payments, inventory
• A CMS layer for richer product pages

Typical stack:

• CMS: Sanity, Contentful, or Storyblok
• Commerce: Shopify Storefront API
• Frontend: Next.js

Shopify supports custom storefronts where the frontend is separated from Shopify’s commerce backend and consumes commerce data through APIs. Shopify Shopify

Choose this if: you’re DTC, mid-market, or want the best balance of flexibility and operational simplicity.

2. BigCommerce + CMS — best if API-first commerce is a priority

Good choice if:

• You need more open commerce APIs
• You have B2B requirements
• You want multi-storefront capability
• You expect more composable architecture

BigCommerce explicitly supports headless builds using CMS platforms, Next.js, GraphQL storefront APIs, and custom frontends. BigCommerce BigCommerce

Choose this if: commerce complexity matters more than having the largest app ecosystem.

3. commercetools + CMS — best enterprise option

Good choice if:

• Product models are complex
• You have ERP/PIM integrations
• You need multiple channels (web, app, kiosks, marketplaces)
• You have engineering resources

It’s designed for composable commerce and commonly paired with CMS platforms to separate content modeling from commerce capabilities. commercetools Documentation

Choose this if: you are building a long-lived commerce platform, not just a storefront.

4. Medusa + CMS — best for engineering-led teams

Good choice if:

• You want ownership of the stack
• You need custom workflows
• You have developers comfortable maintaining infrastructure

Choose this if: you want maximum control and accept more engineering responsibility.

My recommendation by scenario

Product page architecture I’d use

A CMS-driven product page might own:

• Hero media
• Brand story
• Editorial copy
• Lifestyle content
• Buying guides
• FAQs
• SEO fields
• Related content blocks
• Merchandising rules

Commerce API owns:

• SKU
• Price
• Inventory
• Variants
• Promotions
• Cart
• Checkout
• Customer accounts

A common mistake is putting everything in the CMS, including price and inventory. Keep transactional data in commerce.

For most teams today, I’d start with Next.js + Sanity (or Contentful) + Shopify Storefront API unless you already know you have enterprise-scale commerce requirements. Shopify’s API-first approach is specifically designed to support custom storefronts and integrations with CMS/PIM/ERP systems. Shopify

If you tell me your scale (SKU count, B2C vs B2B, number of markets, and whether editors need drag-and-drop page building), I can narrow this to a specific stack.

For most teams today, I’d start with Next.js + Sanity (or Contentful) + Shopify Storefront API unless you already know you have enterprise-scale commerce requirements. Shopify’s API-first approach is specifically designed to support custom storefronts and integrations with CMS/PIM/ERP systems.

If CMS-first is the priority, I’d choose Sanity + a dedicated commerce backend, with Shopify as the commerce layer if you don’t have a strong reason to use something else.

My recommendation: Sanity + Shopify + Next.js/Hydrogen

Think of the architecture as:

Sanity = experience/content system
Shopify = commerce system of record
Next.js/Hydrogen = storefront

Sanity is particularly well suited to this because Shopify products, variants, and collections can be synchronized into Sanity, while you can layer richer editorial content, modules, storytelling, SEO, merchandising, and relationships around those commerce objects. Sanity.io Sanity.io

Your PDP would conceptually be:

/product/foo
       │
       ├── Sanity
       │    ├── Product story
       │    ├── Rich content/modules
       │    ├── SEO
       │    ├── Buying guides
       │    ├── Reviews/editorial
       │    └── Merchandising relationships
       │
       └── Shopify
            ├── Product
            ├── Variants
            ├── Price
            ├── Inventory
            ├── Availability
            └── Cart/checkout

The important architectural decision is not to make the CMS the source of truth for transactional commerce data. Let Shopify own price, inventory, variants, carts, orders, etc.; let Sanity own the experience around the product. Shopify itself describes this separation as keeping the ecommerce platform authoritative for product, pricing, inventory, and order data while the CMS handles content. Shopify

Why I'd pick Sanity

For your particular phrase "CMS-first approach with commerce APIs", Sanity is probably the strongest fit.

• Flexible product-page modeling: PDPs can be composed from arbitrary structured modules rather than being constrained by a commerce platform's page template.
• Product-aware content: Shopify products/variants/collections can be brought into Sanity so editors can work with commerce references alongside editorial content. Sanity.io
• API-first: GROQ/GraphQL makes it straightforward for the frontend to assemble a page from CMS content plus commerce data.
• Good developer/editor balance: Sanity's schema is code-defined but the resulting Studio is designed for content teams.
• Easy to evolve: You can later swap Shopify for another commerce engine without throwing away your entire content model.

The other serious contender: Contentful

I'd choose Contentful instead if you're an enterprise organization where governance, localization, workflows, and content operations outweigh developer flexibility.

Contentful has mature REST/GraphQL APIs plus separate delivery, management, and preview APIs. Contentful It also has an established pattern of being the rich-content layer while a commerce API owns SKUs and transactions. Contentful

So I'd roughly rank them:

What I would avoid

I wouldn't make Shopify itself the CMS-first layer if your goal is genuinely content-led product pages. Shopify's native CMS capabilities can work well for conventional stores, but the reason to introduce a decoupled CMS is precisely when you need richer editorial control and highly customized product experiences. Shopify

Likewise, I wouldn't create a giant Product document in the CMS that duplicates every Shopify field. Instead, model something like:

ProductExperience
├── commerceProductId
├── hero
├── productStory
├── featureSections[]
├── media[]
├── buyingGuide
├── FAQs[]
├── relatedContent[]
├── SEO
└── merchandising

Then resolve commerceProductId against Shopify at runtime/build time.

Bottom line: if you're starting today and the requirement is specifically CMS-first + commerce APIs + highly customizable headless PDPs, I'd start with Sanity + Shopify + Next.js/Hydrogen. Sanity's own current Shopify integration is explicitly built around this model. Sanity.io Sanity.io

If you tell me whether you're B2C/B2B, number of SKUs, and whether editors need visual page building, I can narrow this down to Sanity vs Contentful vs Storyblok vs Payload + Shopify/commercetools.

If CMS-first is the priority and commerce is primarily an API/service layer, I’d pick Sanity + Shopify for most teams.

My recommendation: Sanity + Shopify

The architecture would be:

Next.js / frontend
→ Sanity = source of truth for product-page content, merchandising/editorial structure, SEO, landing pages
→ Shopify Storefront API = price, inventory, variants, cart, checkout, orders
→ Sanity Connect = synchronizes Shopify products/variants/collections into Sanity

That is unusually well aligned with a CMS-first model. Sanity's current Shopify integration can sync products, variants, and collections into the Content Lake, while letting editors enrich those products with structured content in Sanity Studio. www.sanity.io

So a product page can essentially be:

Product
├── Commerce identity
│   ├── Shopify product ID
│   ├── variants
│   ├── price
│   ├── inventory
│   └── purchase/checkout data
│
├── Core product content
│   ├── title
│   ├── description
│   ├── media
│   └── specifications
│
└── Editorial experience
    ├── hero
    ├── benefits
    ├── comparison modules
    ├── buying guide
    ├── reviews
    ├── FAQs
    ├── related stories
    └── SEO

The important distinction is that Shopify remains the transactional system; Sanity becomes the experience/content system. Sanity explicitly positions this as the content layer rather than a replacement for the commerce platform. www.sanity.io

Why I'd choose it over the alternatives

Contentful is the strongest alternative. It has a mature Shopify integration where editors can reference Shopify products/collections, and its APIs can resolve those commerce references through GraphQL. www.contentful.com

But for product pages as structured content, I lean Sanity because its document/reference model makes it particularly natural to compose a product from commerce data plus arbitrary editorial modules.

One architectural decision I'd make early

Don't make the CMS your transactional product database.

I'd model it as:

Shopify owns

• SKU
• variant IDs
• price
• inventory
• availability
• selling plans
• cart
• checkout

Sanity owns

• product storytelling
• merchandising content
• page composition
• SEO
• rich media
• buying guides
• FAQs
• comparisons
• campaigns
• cross-product editorial relationships

Then the frontend joins the two APIs.

That's essentially the architecture Sanity is currently demonstrating with Shopify + Hydrogen: Shopify products are fetched alongside Sanity's structured content, with Sanity used to embellish the raw commerce data. www.sanity.io

If you're starting greenfield, my stack would be:
Next.js + Sanity + Shopify Storefront API + Sanity Connect, with a component-based product-page schema.

Sanity + Shopify documentation

If you tell me whether you're B2C, B2B, or marketplace, and roughly how many SKUs/locales you expect, I can narrow this down between Sanity, Contentful, Payload, and a commerce-native CMS.

If CMS-first is the priority—meaning the CMS owns the product-page experience and commerce is primarily an API behind it—I’d pick Sanity.

My recommendation: Sanity + commerce API

Sanity is particularly well suited because you can model the product page as structured content rather than treating the commerce platform's product template as the source of truth. Sanity explicitly supports products, variants, attributes, editorial content, and references as structured data, while connecting to commerce systems through APIs. Sanity.io Sanity.io

A good architecture would be:

Next.js → Sanity → commerce API

with:

• Sanity — product storytelling, SEO, merchandising content, buying guides, editorial modules, localization, page composition
• Commerce API — price, inventory, variants, cart, checkout, promotions, orders
• Next.js — presentation and performance
• CDN/cache — fast delivery of mostly-static product content, with commerce data fetched dynamically

If you're already on Shopify, Sanity has a current Shopify integration that synchronizes Sanity and Shopify and supports a headless Next.js/Hydrogen setup. Sanity.io

How I'd rank the CMS options

Storyblok is particularly compelling if non-technical marketers need to visually assemble PDPs. Sanity is stronger if developers want the content model to be a genuine data model that can evolve with the business. Current comparisons generally put Sanity ahead on developer flexibility and Storyblok ahead on visual editing. CodeDrips Naturaily

One architectural distinction I'd make

Don't make the CMS's Product document a duplicate of the commerce system's entire product object.

Instead, I'd have something conceptually like:

Sanity
├── ProductContent
│   ├── commerceProductId
│   ├── title / storytelling
│   ├── description
│   ├── media
│   ├── SEO
│   ├── buying guides
│   ├── feature modules
│   └── merchandising relationships
│
└── ProductPage
    ├── hero
    ├── content modules
    ├── reviews module
    ├── recommendations
    └── editorial content

Commerce API
├── product/variant identity
├── price
├── availability
├── inventory
├── discounts
├── cart
└── checkout

That separation keeps the CMS genuinely CMS-first instead of turning it into a shadow commerce database.

Interestingly, Sanity even has a Commerce Layer integration that models products/variants in Sanity while leaving transactional commerce to Commerce Layer—the exact separation you're describing. Sanity.io

Bottom line: I'd choose Sanity unless your overriding requirement is visual page editing for marketers, in which case I'd choose Storyblok. If you tell me which commerce API you're considering—Shopify, commercetools, Medusa, Saleor, Commerce Layer, Vendure, etc.—I can recommend the exact CMS + commerce architecture.

If your priority is CMS-first product pages, I’d choose Sanity as the CMS and keep commerce as a separate API-driven system.

My default architecture

Sanity + Shopify / commercetools / another commerce engine + Next.js

• Sanity owns the experience and product-enrichment layer: descriptions, storytelling, SEO, buying guides, merchandising content, images, videos, FAQs, badges, related content, etc.
• Commerce API owns transactional truth: price, inventory, variants/SKUs, carts, checkout, promotions, tax, fulfillment.
• Next.js renders the product page and composes both sources.
• Product records in Sanity reference the commerce product/variant IDs rather than becoming the transactional source of truth.

This is particularly well aligned with Sanity's current ecommerce model: it supports structured product/variant schemas, references products throughout editorial content, visual editing, and integrations with commerce backends including Shopify. Sanity.io Shopify

Why I'd pick Sanity

For a genuinely CMS-first approach, Sanity has an unusually good fit because you can model a product page as content rather than treating it as a commerce template:

Product Page
├── Product reference → Commerce API
├── Hero
├── Story
├── Product highlights
├── Media gallery
├── Buying guide
├── Size/fit information
├── FAQs
├── Reviews reference
├── Related products
├── SEO
└── Merchandising components

Then your frontend resolves the commerce data at request/render time:

Sanity
  │
  │ editorial/product enrichment
  ▼
Next.js ────────────────► Commerce API
  │                         │
  │                         ├─ price
  │                         ├─ inventory
  │                         ├─ variants
  │                         └─ availability
  ▼
Product Page

That separation is important: don't put price/inventory/checkout state into the CMS just because you're making the CMS the center of the experience.

How I'd rank the options

Contentful is especially compelling if governance and enterprise content operations are the dominant concern; Shopify's own current guidance similarly positions Contentful around structured/localized/preview-heavy editorial operations and Sanity around custom authoring and flexible schemas. Shopify

One architectural decision I'd make early

I would not make the CMS the canonical commerce catalog unless you have a specific reason to.

Instead:

Commerce system = product identity + transactional truth
CMS = product experience + editorial truth

For example:

commerce_product_id: "gid://shopify/Product/123"

in Sanity, with all the rich page content around that reference.

That gives you freedom to change the commerce backend later without rebuilding your content model. Sanity also explicitly supports the pattern of connecting commerce backends while keeping structured product content in the CMS. Sanity.io Sanity.io

So if you're starting from scratch, my pick would be: Sanity + Next.js + a commerce API. If you tell me whether you're considering Shopify, commercetools, BigCommerce, Medusa, or something custom, I can recommend the exact stack and data model I'd use.

If your priority is CMS-first product pages, I’d choose Sanity + a separate commerce engine rather than making the commerce platform your page/content system.

My pick: Sanity

Sanity is particularly well suited because you can make the CMS the place where merchandisers build the entire product-page experience—storytelling, rich copy, media, buying guides, specs, FAQs, related content, merchandising modules—while the commerce API remains authoritative for price, inventory, variants, cart, checkout, and orders.

Sanity explicitly supports commerce integrations, including Shopify synchronization, and its APIs are designed to let you query the CMS from essentially any frontend. www.sanity.io

A good architecture would be:

                    ┌─────────────────┐
                    │      Sanity     │
                    │                 │
                    │ Product content │
                    │ Page composition│
                    │ Editorial       │
                    │ Media           │
                    │ SEO             │
                    └────────┬────────┘
                             │
                    CMS API / GROQ
                             │
                             ▼
┌──────────────┐      ┌───────────────┐      ┌──────────────┐
│ Commerce API │─────▶│   Next.js /   │◀─────│ Search / PIM │
│              │      │   storefront  │      │              │
│ price        │      │               │      │              │
│ inventory    │      │ Product page  │      │              │
│ variants     │      │ composition   │      │              │
│ cart         │      └───────┬───────┘      └──────────────┘
│ checkout     │              │
└──────────────┘              ▼
                         Customer

Commerce backend choice

I'd pair it differently depending on your situation:

Sanity + Shopify is probably the sweet spot for most teams. Sanity has an official Shopify connector that syncs Shopify product data into Sanity while preserving Shopify as the commerce system of record. www.sanity.io Shopify's Storefront API is also framework-agnostic, so you're not forced into Hydrogen. www.shopify.com

For commercetools, Sanity even has a starter showing Sanity powering the CMS/page-builder side while commercetools supplies the commerce backend. www.sanity.io

Why I'd favor Sanity over Contentful here

Contentful is my second choice. It's excellent if you're an enterprise organization that values highly governed content modeling, localization, workflows, and predictable editorial operations. Its Delivery API and GraphQL APIs are mature and well suited to an API-driven frontend. www.contentful.com

But for a CMS-first PDP, I slightly prefer Sanity because the content model can be more tightly tailored to how your merchandisers actually construct product experiences. Sanity's commerce tooling is explicitly aimed at treating the CMS as the content layer rather than replacing the commerce engine. www.sanity.io

The important architectural decision

I would not make the CMS the authoritative source for transactional product data.

Instead:

Sanity owns

• Product-page layout
• Marketing copy
• Editorial storytelling
• Product education
• Rich media
• SEO metadata
• Buying guides
• FAQs
• Cross-sells/editorial recommendations
• Localization
• Page-level merchandising

Commerce owns

• SKU/variant IDs
• Price
• Promotions
• Inventory
• Availability
• Tax
• Customer-specific pricing
• Cart
• Checkout
• Orders

Then your product document in Sanity references the commerce product/variant IDs.

That gives you the CMS-first experience without creating the dangerous situation where editors are maintaining a second copy of prices or inventory.

If I were starting this stack today: Sanity + Shopify Storefront API + Next.js, with Sanity controlling the PDP composition and Shopify remaining the transactional source of truth. If you're building a genuinely enterprise/composable commerce platform, I'd swap Shopify for commercetools.

If CMS-first is the priority—meaning merchandisers/editors should own the product-page experience, while commerce APIs handle price, inventory, cart, checkout, etc.—I’d pick Sanity.

My recommendation: Sanity + commerce API

Sanity is particularly well suited because you can model products, variants, attributes, merchandising content, landing pages, buying guides, SEO, and editorial components as structured content, rather than treating the PDP as a fixed commerce template. Sanity explicitly supports this model and provides commerce integrations/APIs. www.sanity.io

A good architecture would be:

Sanity
→ product content + PDP composition + editorial
→ references product/variant IDs
→ frontend queries Sanity

Commerce platform
→ SKU/variant availability
→ pricing
→ inventory
→ carts
→ promotions
→ checkout/orders

Next.js / your frontend
→ combines CMS content + live commerce data
→ renders the PDP

That separation is important: don't make the CMS the source of truth for transactional data unless you have a compelling reason.

Which commerce API?

Sanity currently has a dedicated Shopify connector with bidirectional synchronization, and its docs also cover Salesforce Commerce Cloud integration. www.sanity.io

If you want a pure API-first commerce layer, Commerce Layer is particularly aligned with your philosophy: its role is transactional commerce while the CMS owns the rich product experience. Contentful, for example, documents exactly this pattern with Commerce Layer for product pages. www.contentful.com Sanity also has a Commerce Layer plugin that puts product-catalog management directly into Sanity Studio. www.sanity.io

What I'd pick

For a new build, I'd start with:

Sanity + Shopify Storefront API + Next.js

unless your commerce requirements are sufficiently complex that Shopify starts becoming the constraint. Shopify's own current headless architecture describes this same separation: CMS for editorial content, Shopify for product/price/inventory/transactions, and a custom frontend consuming both APIs. www.shopify.com

If you tell me B2C vs B2B, approximate SKU count, number of markets/locales, and whether Shopify is already in the picture, I can narrow this down to a specific stack and data model.

If your priority is CMS-first product pages—where merchandising, storytelling, SEO, landing-page composition, and editorial workflows live primarily in the CMS, while commerce remains an API backend—I’d pick Sanity + Shopify for most teams.

My recommendation: Sanity + Shopify

The architecture I’d use:

Sanity → page/content orchestration
Shopify → commerce system of record
Next.js/Hydrogen → storefront
Shopify Storefront API → pricing, inventory, variants, cart, checkout

Shopify’s Storefront API is explicitly designed to expose products, collections, cart operations, contextual pricing, etc. to custom frontends. shopify.dev

Sanity is particularly well suited to the CMS-first side. Its current Shopify integration can synchronize products, variants, and collections into Sanity, while allowing Sanity content to flow back into Shopify metafields/metaobjects. www.sanity.io

So your product page can conceptually be:

Product Page
├── Sanity
│   ├── SEO
│   ├── editorial hero
│   ├── product story
│   ├── rich media
│   ├── buying guides
│   ├── reviews/editorial modules
│   ├── related content
│   └── merchandising/layout
│
└── Shopify API
    ├── product identity
    ├── variants
    ├── price
    ├── availability
    ├── inventory
    ├── selling plans
    ├── cart
    └── checkout

The important architectural decision is don't make the CMS your commerce database. Let Sanity own the experience around the product, while Shopify owns transactional truth.

When I'd choose something else

Contentful is especially compelling if your commerce backend is commercetools: its official integration lets editors browse/reference commercetools products and categories directly inside Contentful, and its external-reference capability can resolve those commerce objects through Contentful's GraphQL API. www.contentful.com

The key distinction

I'd model the product page as content that references commerce, rather than as a commerce product with a few CMS fields.

For example:

Sanity ProductExperience
  slug
  productRef → Shopify product
  seo
  hero
  editorialStory[]
  featureModules[]
  buyingGuide
  faq[]
  relatedProducts[]
  recommendations[]

Then your frontend resolves:

Sanity ProductExperience
        ↓
Shopify productRef
        ↓
Storefront API
        ↓
Unified ProductPage

That gives your content team freedom to completely redesign a product page without turning the commerce platform into a page builder.

Bottom line: if you're starting greenfield and saying "CMS-first" is a genuine architectural requirement, I'd start with Sanity + Shopify + Next.js/Hydrogen. Sanity's current Shopify tooling is unusually aligned with this model, including product/variant synchronization and rich editorial enrichment. www.sanity.io

If you tell me B2C vs B2B, number of SKUs, number of markets/locales, and whether marketers need visual page editing, I can narrow this to a specific stack and data model.

If CMS-first is the priority—meaning editors own the product-page experience, while commerce remains an API/transaction layer—I’d shortlist Sanity first, Contentful second.

My pick: Sanity + commerce API

Sanity is particularly well suited because it lets you model products, variants, attributes, merchandising content, editorial modules, and localized content as structured data rather than treating the commerce platform's product page as the source of truth. Sanity explicitly supports this model for ecommerce and can connect to Shopify, Salesforce Commerce Cloud, Commerce Layer, and custom commerce APIs. www.sanity.io

I'd architect it roughly like:

Sanity
→ product storytelling / SEO / merchandising / page composition / editorial content
Commerce API
→ price / inventory / cart / checkout / orders / promotions
Next.js or similar
→ renders the PDP and combines both APIs

That separation gives you a genuinely CMS-first PDP instead of a commerce-first PDP with CMS content bolted onto it.

When I'd choose Contentful instead

Contentful is an excellent choice if your organization already uses it or needs a more enterprise-oriented composable stack. It has integrations with commercetools, BigCommerce, Shopify, Commerce Layer and others, and its APIs are designed specifically for delivering structured content to arbitrary frontends. www.contentful.comwww.contentful.com

Contentful also has a particularly clean reference architecture for exactly what you're describing: Contentful owns rich product content, Commerce Layer owns SKUs/commerce operations, and the frontend assembles the PDP. www.contentful.com

The important distinction

I wouldn't make the CMS the authoritative source for transactional product data unless you have a very specific reason.

For example, a Sanity product document can reference the commerce product/variant ID, while the frontend fetches live price and availability from the commerce API. Sanity's Commerce Layer integration actually follows this decoupled catalog/transactional model. www.sanity.io

What I'd choose by scenario

Sanity + Shopify Storefront API — best if you want Shopify's mature commerce capabilities but want the CMS to own the experience. Sanity now has an official Shopify sync solution supporting headless storefronts with Hydrogen/Next.js. www.sanity.io

Sanity + Commerce Layer — strongest "pure composable" option if you want the commerce engine to be almost entirely API-driven and the CMS to be the center of the product experience.

Contentful + commercetools — very compelling for a larger enterprise/composable-commerce architecture. Contentful has a native integration that lets editors reference commercetools products and categories. www.contentful.comwww.contentful.com

Contentful + Commerce Layer — probably the cleanest documented implementation if your primary requirement is specifically CMS-first PDPs + API-first commerce. www.contentful.com

Bottom line: if you're starting fresh today, I'd lean Sanity + Shopify or Commerce Layer + Next.js. If you're already in a large enterprise Contentful ecosystem, Contentful + commercetools/Commerce Layer is a very strong choice.

If you tell me whether you're B2C vs B2B, approximate SKU count, and whether Shopify is acceptable, I can narrow this to a concrete stack and PDP data model.

If CMS-first is the priority, I’d pick Sanity + Shopify for most teams.

My recommended architecture

Sanity → content/product experience
Shopify → commerce engine
Next.js or Hydrogen → storefront

Sanity is particularly strong for product pages because you can model the PDP as structured content rather than treating it as a Shopify product template. Products, variants, editorial modules, buying guides, campaigns, SEO content, etc. can all be composed and referenced in Sanity. Sanity also now supports bidirectional Shopify synchronization for products, variants, and collections. www.sanity.iowww.shopify.com

Shopify then remains the source of truth for price, inventory, cart, checkout, orders, and transactional commerce, exposed through its Storefront GraphQL API. shopify.dev

A typical flow would be:

                 ┌───────────────┐
                 │    Sanity     │
                 │ CMS / content │
                 │ product story │
                 │ merchandising │
                 └───────┬───────┘
                         │
                    CMS API
                         │
                         ▼
┌──────────────┐   ┌───────────────┐
│   Shopify    │──▶│  Next.js /    │
│ Commerce API │   │   Hydrogen    │
│ price        │   │   PDP         │
│ inventory    │   │   PLP         │
│ cart         │   │   editorial   │
│ checkout     │   └───────┬───────┘
└──────────────┘            │
                            ▼
                         Customer

Why Sanity over Contentful?

For CMS-first commerce, I'd lean Sanity because its content model is unusually flexible. You can make the product page itself a composition of structured objects and references instead of forcing commerce data to dictate the page structure. Sanity explicitly supports modeling products, variants and attributes as structured data and referencing products from arbitrary content. www.sanity.io

Contentful is my second choice, particularly if you're an enterprise organization that values mature governance, localization and conventional content modeling. Its REST and GraphQL APIs are solid, and it has documented integrations with API-first commerce platforms such as Commerce Layer. www.contentful.com

What I'd choose by scenario

The Sanity + Commerce Layer combination is especially interesting if you don't want Shopify to be the center of the architecture. Commerce Layer handles transactional commerce through APIs while Sanity handles the product/content experience. There is even a Sanity Commerce plugin designed around this separation. www.sanity.io

Bottom line: if your mental model is “the CMS owns the product experience, while commerce is a service underneath it,” I'd start with Sanity + Shopify Storefront API + Next.js/Hydrogen. That's a very clean CMS-first architecture in 2026. www.sanity.iowww.shopify.com

If you tell me B2C vs B2B, approximate SKU count, and whether Shopify is already in place, I can narrow this down to a specific stack and data model.

If CMS-first is the priority and commerce is primarily an API/data layer, my default choice would be Sanity + Shopify.

My pick: Sanity + Shopify

Use:

Sanity → owns the product-page experience and editorial content
Shopify → owns products, variants, pricing, inventory, carts, checkout, orders
Next.js / Hydrogen → renders the storefront

That gives you a clean separation:

                 ┌───────────────┐
                 │    Sanity     │
                 │               │
                 │ Product page  │
                 │ Story/content │
                 │ SEO           │
                 │ Merchandising │
                 │ Modules       │
                 └───────┬───────┘
                         │
                         │ content + product references
                         ▼
                  ┌─────────────┐
                  │  Next.js /  │
                  │  Hydrogen   │
                  └──────┬──────┘
                         │
                         │ commerce API
                         ▼
                 ┌───────────────┐
                 │    Shopify    │
                 │               │
                 │ Products      │
                 │ Variants      │
                 │ Inventory     │
                 │ Pricing       │
                 │ Cart/Checkout │
                 └───────────────┘

This is particularly strong because Sanity can synchronize Shopify products, variants, and collections into the CMS, while letting editors enrich them with arbitrary structured content. www.sanity.io

Shopify's Storefront API then gives the frontend the actual commerce primitives—products, collections, carts, contextual pricing, etc.—without requiring Shopify to control your presentation layer. shopify.dev

Why I'd choose it over the alternatives

The important architectural decision is not to make the CMS your product database. Let the commerce engine remain authoritative for SKU/variant, price, inventory, availability, etc. Your CMS should own the experience surrounding the product.

For example, your Sanity productPage could look conceptually like:

productPage
├── commerceProductId
├── hero
├── productStory
├── featureModules[]
├── comparison
├── ingredients/specifications
├── buyingGuide
├── reviews
├── relatedContent[]
├── SEO
└── merchandising

Then the frontend resolves commerceProductId against Shopify for live commerce data.

When I'd choose commercetools instead

If you're building a large composable commerce operation—multiple storefronts/brands, complicated catalogs, B2B, sophisticated pricing, many markets, or potentially multiple commerce engines—I'd seriously consider Sanity + commercetools.

commercetools is particularly API-native: its Product Projection API is explicitly intended for retrieving product information for product-detail pages, while its Product Search API handles discovery/listing. docs.commercetools.com

So I'd make the decision like this:

DTC / retail / Shopify ecosystem → Sanity + Shopify

Complex enterprise commerce / composable architecture → Sanity + commercetools

Enterprise content governance is more important than developer flexibility → Contentful + your commerce API

If you tell me your catalog complexity, frontend (Next.js/Hydrogen/etc.), and whether Shopify is already in the stack, I can narrow this down to a specific architecture rather than just a platform recommendation.

If your priority is CMS-first—meaning the CMS owns the product-page experience and commerce is accessed through APIs—I’d choose Sanity.

My recommendation: Sanity + commerce API

The architecture I’d use is:

Sanity → content/product-page model
Commerce backend → price, inventory, cart, checkout, orders
Next.js/your frontend → renders the PDP

Sanity is particularly well suited because you can model products, variants, merchandising content, buying guides, badges, SEO, localized content, etc. as structured data rather than forcing everything into commerce-platform templates. It also exposes APIs directly and supports references between products and other content. www.sanity.io

For example:

Product
├── commerceId
├── title
├── slug
├── heroMedia
├── gallery
├── description
├── features[]
├── specifications[]
├── buyingGuide
├── relatedProducts[]
├── SEO
└── merchandising
       │
       └── commerce API
             ├── price
             ├── availability
             ├── variants
             ├── promotions
             └── cart/checkout

That separation is important: don't make the CMS your source of truth for transactional state. Let the commerce engine own price, inventory, tax, promotions, carts, and orders.

What I'd pick by scenario

Sanity + Shopify is especially compelling if Shopify already owns your commerce operations. Sanity has an official Shopify connector that synchronizes content between the two, and Shopify's Storefront API/Hydrogen can handle the commerce-facing storefront layer. www.sanity.io

If you want the commerce backend to be completely independent of Shopify, Sanity + Commerce Layer is a very clean composable architecture. Commerce Layer is explicitly API-first and handles transactional concerns such as carts and orders, while Sanity handles the content experience. www.sanity.io

Why I'd favor Sanity over Contentful here

Contentful is a very solid choice, particularly for enterprise teams, and it has REST/GraphQL delivery APIs. www.contentful.com But for product pages as structured, composable content, I prefer Sanity's modeling flexibility and developer experience. Sanity's own commerce architecture explicitly treats products/variants/attributes as structured data and supports connecting that content to external commerce systems. www.sanity.io

So if you told me:

"I want editors to completely control the product-page experience, but I don't want my CMS to become my cart/order system."

I'd start with:

Sanity + Next.js + Shopify Storefront API
or
Sanity + Next.js + Commerce Layer

The deciding question is really which commerce backend you want. If you tell me whether you're considering Shopify, commercetools, Commerce Layer, Medusa, Saleor, or something else, I can recommend the cleanest CMS/commerce architecture for that stack.

If your priority is CMS-first—meaning the content team owns the product-page experience, while commerce remains an API behind it—I’d choose Sanity + Shopify.

My recommended architecture

Sanity → headless product-page content
Shopify → commerce system of record
Next.js → storefront
Shopify Storefront API → products, pricing, cart, checkout

Sanity’s current Shopify integration syncs products, variants, and collections into Sanity, while letting you add richer structured content around them. It also supports custom sync logic if you need to reshape the commerce data model. www.sanity.io

That gives you something like:

                    ┌───────────────┐
                    │    Sanity     │
                    │               │
                    │ Product story │
                    │ SEO           │
                    │ Rich modules  │
                    │ Buying guides │
                    │ Editorial     │
                    └───────┬───────┘
                            │
                     content/API
                            │
                            ▼
┌───────────┐       ┌───────────────┐
│  Next.js  │──────▶│ Product Page  │
│ storefront│       │               │
└─────┬─────┘       └───────┬───────┘
      │                      │
      │                      │ commerce API
      │                      ▼
      │               ┌───────────────┐
      └──────────────▶│    Shopify    │
                      │ catalog       │
                      │ inventory     │
                      │ pricing       │
                      │ cart/checkout │
                      └───────────────┘

This separation is important: Shopify itself recommends treating the commerce platform as the system of record for products, pricing, inventory, checkout, orders, etc., while the CMS handles content and presentation. www.shopify.com

Why I'd pick Sanity

For product pages specifically, Sanity is unusually well suited because you can model the page as structured content rather than forcing everything into a product description.

For example:

Product
├── Shopify product reference
├── Hero
├── Product story
├── Feature modules[]
├── Specifications
├── Comparison table
├── Buying guide
├── Reviews / social proof
├── Related products[]
├── FAQ[]
└── SEO

Your frontend can then compose those modules around live commerce data:

Sanity content
      +
Shopify product/variant data
      ↓
   Product Page

Sanity's current Shopify tooling explicitly supports enriching product, variant, and collection data and building custom content around them. www.sanity.io

The alternatives

The key distinction is that I wouldn't make Shopify your page CMS if the goal really is CMS-first. Shopify's Storefront API is excellent for exposing the commerce primitives—products, collections, cart, checkout, contextual pricing, etc.—but Sanity should own the experience around those primitives. shopify.dev

So my default recommendation would be:

Sanity + Shopify Storefront API + Next.js

And I'd keep the boundary very clean: Sanity owns presentation/content; Shopify owns transactional commerce.

If you tell me your catalog size, B2C/B2B, number of locales, and whether you're on Next.js, I can narrow this down to the best architecture and CMS/commerce combination for your case.

If your priority is CMS-first product pages, I’d recommend Sanity + Shopify for most brands.

The key architectural decision is: the CMS owns the product-page experience; the commerce platform owns commerce truth. Shopify’s Storefront API exposes products, variants, collections, carts, pricing, etc., while Sanity can hold the richer editorial structure around those products. shopify.devwww.sanity.io

My preferred stack

Sanity → content/page composition
Shopify → products, inventory, pricing, cart, checkout
Next.js or Hydrogen → frontend

For example, your Sanity model could look roughly like:

ProductPage
├── productReference → Shopify product
├── hero
├── productStory
├── featureModules[]
├── editorialContent[]
├── comparisonTable
├── reviews
├── relatedProducts[]
└── SEO

The actual SKU, price, availability, variants and purchasing operations remain in Shopify. Sanity's Shopify integration can synchronize products, variants and collections into the CMS, while letting editors add richer structured content around them. www.sanity.io

Why I'd choose this over other options

Shopify is particularly attractive because its Storefront API is explicitly designed for custom storefronts and exposes products, collections, cart and checkout functionality. shopify.dev

I'd move to Sanity + commercetools if you have genuinely complex commerce requirements—multiple business models, sophisticated B2B, unusual pricing/catalog structures, many channels, or a strong desire to make commerce components independently replaceable. commercetools is fundamentally API-first/headless and has dedicated APIs for product-detail retrieval. commercetools.com

The important modeling principle

Don't make the CMS a second product database.

Instead:

Commerce owns

• SKU / product ID
• variants
• price
• inventory
• availability
• tax/shipping-related data
• cart
• checkout
• orders

CMS owns

• page layout
• storytelling
• rich media
• buying guides
• feature sections
• comparison content
• editorial merchandising
• SEO/content metadata
• relationships between products and content

That separation gives you a genuinely CMS-first experience without turning the CMS into a fragile commerce system.

My default recommendation: Sanity + Shopify + Next.js/Hydrogen. It's probably the best balance of editorial flexibility, commerce maturity, and implementation complexity in 2026. www.sanity.io

If you tell me whether this is DTC, B2B, marketplace, or a large catalog, I can narrow it down to the best 2–3 architectures.

If your priority is CMS-first product pages, I’d pick Sanity as the default choice, with the commerce engine kept separate.

My recommended architecture

Sanity → content/product experience
Commerce API → price, inventory, cart, checkout, orders
Next.js/React → storefront

That gives you:

• CMS-owned PDPs: rich editorial content, product storytelling, buying guides, SEO blocks, merchandising modules, etc.
• Commerce-owned transactional data: SKU, price, inventory, availability, cart and checkout.
• Composable relationships: a product can reference campaigns, guides, ingredients/specs, reviews, related products, videos, etc.
• Freedom to change commerce backends without rebuilding your content model.

Sanity explicitly supports this model: its Commerce plugin can manage product/variant/taxonomy content in Sanity while Commerce Layer handles the transactional side. www.sanity.iowww.contentful.comwww.sanity.io

Sanity vs. Contentful

Contentful is also a very good choice. Its APIs are explicitly designed for headless delivery, and Contentful has documented architectures where Contentful owns product content while Commerce Layer owns SKUs and transactions. www.contentful.com

What I'd choose

1. Sanity + Shopify — best default for most modern brands.
Sanity can sync Shopify products, variants and collections into the CMS, then let editors enrich those records with additional content. www.sanity.io

2. Sanity + Commerce Layer — best if you want a genuinely commerce-agnostic architecture and API-first commerce.

3. Contentful + Commerce Layer/Medusa — best if you're an enterprise organization where governance, localization and established enterprise workflows matter more than modeling flexibility. Contentful has documented both Commerce Layer and Medusa architectures. www.contentful.com

4. Sanity + Salesforce Commerce Cloud — worth considering for an existing enterprise SFCC investment. Sanity now has a connector that syncs SFCC catalog data into Sanity for enrichment, while commerce data can continue coming from the Salesforce Commerce API. www.sanity.io

The key architectural decision

I wouldn't make the CMS the system of record for transactional product data.

Instead, model something like:

CMS
ProductExperience
 ├─ productId ───────────────┐
 ├─ hero / media             │
 ├─ rich description         │
 ├─ feature modules          │
 ├─ buying guide             │
 ├─ SEO                      │
 ├─ related content          │
 └─ merchandising rules      │
                             ↓
Commerce API
 Product
 ├─ SKU
 ├─ variants
 ├─ price
 ├─ inventory
 ├─ availability
 └─ purchasing

Your PDP then composes the two APIs rather than forcing either system to own everything.

If you're starting greenfield, Sanity + Shopify + Next.js is probably the stack I'd reach for first. If you specifically want commerce to be replaceable, I'd go Sanity + Commerce Layer + Next.js.

If your priority is CMS-first product pages, with commerce treated as an API rather than the place where page experience is authored, I’d pick Sanity + Shopify for most teams.

My recommendation

Sanity → Next.js → Shopify Storefront API

• Sanity: source of truth for page composition, merchandising stories, SEO, rich media, buying guides, FAQs, recommendations, etc.
• Shopify: source of truth for products, variants, pricing, inventory, carts, checkout, orders.
• Next.js: renders the product experience.
• Shopify Storefront API: supplies transactional/product data.

This is a particularly good fit because Sanity's current Shopify integration can synchronize products, variants, and collections into Sanity, while letting editors build richer structured content around them. www.sanity.iowww.shopify.com

I'd model a product page roughly as:

ProductPage (Sanity)
├── product → Shopify product ID
├── hero
├── productStory[]
├── featureModules[]
├── comparison
├── buyingGuide
├── reviews
├── relatedContent[]
└── SEO

Then at runtime:

Sanity
  └── page structure + editorial content
             ↓
        Next.js page
             ↑
Shopify Storefront API
  └── price + availability + variants + cart

That gives your editors ownership of the product-page experience without duplicating commerce data.

When I'd choose Contentful instead

If you're an enterprise organization with complex governance, localization, workflows, and multiple commerce backends, I'd seriously consider Contentful + commercetools.

Contentful has first-class integrations for both Shopify and commercetools, including external references that can resolve product information through its GraphQL API. www.contentful.com

So my shortlist would be:

One important architectural principle: don't make the CMS the transactional product database just because you're taking a CMS-first approach. Let the CMS own how the product is presented and let commerce own whether/how the product can be bought. Sanity itself explicitly positions Shopify as the commerce system while Sanity handles the content experience. www.shopify.com

If you tell me your commerce backend (Shopify, commercetools, BigCommerce, Salesforce, custom, etc.) and whether you're using Next.js, I can narrow this to the best 2–3 architectures and show the data model I'd use.