---
title: "Commerce boundaries"
description: "What Shopify owns, what Nyxel owns, and how interactive storefront surfaces coordinate."
canonical_url: "https://nyxel.dev/docs/storefront-sdk/commerce-boundaries"
markdown_url: "https://nyxel.dev/docs/storefront-sdk/commerce-boundaries.md"
---

# Commerce boundaries
URL: /docs/storefront-sdk/commerce-boundaries
LLM index: /llms.txt
Description: What Shopify owns, what Nyxel owns, and how interactive storefront surfaces coordinate.

# Commerce boundaries

Shopify remains authoritative for catalog, pricing, inventory, markets, carts, checkout, customers, and orders. Nyxel consumes those capabilities and controls how they are presented in an editable storefront.

![Nyxel reference storefront cart drawer with a product image, quantity, subtotal, and checkout action.](/site-media/storefront-cart.png)

## Shopify owns durable commerce state

The request-scoped Storefront API client reads products, collections, navigation, metafields, metaobjects, and market context. Hydrogen cart handlers create and mutate the Shopify cart, while Shopify’s checkout URL remains the handoff for payment and order creation.

Nyxel does not copy that state into template JSON. A product section receives the current product through its source context. A cart surface subscribes to the Hydrogen cart store. A collection route turns URL filter and sort state into the corresponding Storefront API request.

## Nyxel owns presentation and composition

Nyxel decides which product sections appear, how blocks are arranged, which component settings are editable, and how route resources bind into those settings. It also owns the reference storefront’s responsive shells, drawers, empty states, loading feedback, and error presentation.

This includes interaction quality at the presentation boundary. Add-to-cart must provide visible feedback, the cart drawer and mobile navigation must use a consistent modal pattern, quantity changes must update totals, and collection filters must preserve understandable URL state.

## Independent islands

Astro may hydrate the header, product form, and storefront client as separate Svelte islands. Data libraries can still use their normal request and mutation contracts, but UI commands should not rely on a module-local Svelte store being shared across compiled island boundaries.

Nyxel uses a small page-level event for cart drawer requests. After a successful product-form mutation, the drawer refreshes the Hydrogen cart and opens. The same event lets the header cart button open the surface. Cart contents and totals still come from Hydrogen; the browser event carries intent, not duplicated commerce state.

## Modal interaction

The mobile menu, cart drawer, and collection filter surface darken and disable the page behind them, provide a clear close action, constrain scrolling to the panel, respond to Escape, and restore focus when they close. Their content differs, but panel width, spacing, header hierarchy, and overlay behavior use one visual language.

## Future platform boundary

A hosted editor needs authenticated access to templates, settings, previews, and Shopify resources. It does not need to become the owner of cart, checkout, or catalog data. Keeping that boundary intact makes the local architecture suitable for a platform without introducing a second commerce system.

## Sitemap

See the full [sitemap](/sitemap.md) for all pages.
Docs-scoped sitemap: [/docs/sitemap.md](/docs/sitemap.md).
Well-known sitemap: [/.well-known/sitemap.md](/.well-known/sitemap.md).