Catalogue Architecture
Part of Headless commerce
Comparing a decoupled storefront with a traditional theme
Compare a decoupled storefront and a traditional theme by the work required to deliver the same shopping journey.
Compare a Shopify storefront built with a traditional theme and Liquid templating with a separately built Next.js storefront connected through the Shopify Storefront API. The theme keeps presentation within the commerce platform’s model; the custom front end uses API access for commerce functions, while Shopify admin manages products, pricing, inventory and metafields.
Compare like with like
Build the same product page both ways. In the traditional setup, a pre-built theme presents the storefront alongside the commerce platform; in the decoupled setup, Next.js is the independent front end and the Storefront API provides product and collection data, contextual pricing and cart operations.
Pre-built themes reduce design and development time. The Storefront API gives the custom front end access to those commerce functions, but the front end is a separate application rather than a theme within the platform.
Decoupled Storefront vs Traditional Theme: Key Differences
- Frontend Architecture
- Separate application (e.g., Next.js)
- Presentation Layer
- Independent of commerce platform
- Commerce Data Source
- Shopify Storefront API
- Back-Office Management
- Shopify admin (products, pricing, inventory, metafields)
- Theme Model
- Not applicable – no theme within the platform
- Development Time
- Higher initial effort; greater control over design and UX
- Release Cycle
- Independent of backend; requires managing API version updates
- API Versioning
- Four releases per year; update to latest stable version quarterly
Find the integration seam
The Shopify Storefront API provides access to products and collections, contextual pricing, and adding items to the cart. Shopify admin manages back-office product information, pricing, inventory and metafields; the custom front end uses the API to present and act on that commerce data.
The Storefront API is versioned, with new releases four times a year; Shopify recommends updating requests to the latest stable version each quarter. Tokenless access supports features including products, collections and cart read/write, with a query complexity limit of 1,000.
Key Metrics at a Glance
- API Query Complexity Limit
- 1,000
- Tokenless Access Features
- Products, collections, cart read/write
- Supported Commerce Functions via API
- Product data, contextual pricing, cart operations
Evaluate editing and release cycles
A traditional theme and its backend ship as one unit, keeping the storefront within the platform’s theme model. A decoupled front end is built separately, so its release can be independent of the backend; the team must also manage its connection to the Storefront API.
Shopify’s API release cycle adds a recurring version update to the decoupled implementation. A theme keeps presentation within the platform’s supported editing model, while a custom front end gives the team control over its own presentation and release path.
Make the trade-off explicit
A standard theme is the more direct fit when its pre-built structure meets the storefront’s needs and a simpler launch matters. A decoupled Shopify storefront is a better fit when the team needs an independently built presentation layer and can support a custom front end and its API connection.
Pros and Cons of Each Approach
- Traditional Theme (Pros)Faster launch; built-in editing tools; simpler maintenance; aligned with Shopify’s supported model
- Traditional Theme (Cons)Limited design flexibility; tied to platform constraints; harder to customise beyond Liquid templating
- Decoupled Storefront (Pros)Full control over presentation and user experience; independent release cycles; scalable architecture; better for complex or high-performance sites
- Decoupled Storefront (Cons)Higher upfront development cost; ongoing API management; requires expertise in both frontend and API integration
