commercetools Frontend & Storefront Development
Two Development Paths
This skill covers two distinct approaches to building storefronts on commercetools:
| Approach |
When to Use |
Key File |
| commercetools Frontend (hosted) |
Using Studio for business users, extensions, components (tastics), data sources |
references/ct-frontend-extensions.md |
| Headless with Next.js/React |
Custom storefront with full control, App Router, Server Components |
references/storefront-architecture.md |
| B2B Storefront |
Business units, permissions, approval workflows, quotes, purchase lists |
references/b2b-frontend.md |
Both approaches share patterns for product pages, cart/checkout UI, and performance/SEO. B2B patterns layer on top of either approach.
How to Use This Skill
- Identify which approach you are using (commercetools Frontend or headless Next.js)
- Load the relevant architecture file first
- Then load the page-type-specific reference for your current task
- Reference files contain correct/incorrect code pairs, checklists, and pitfall warnings
Progressive loading -- only load what you need:
- Using commercetools Frontend extensions, data sources, actions? Load
references/ct-frontend-extensions.md
- Using commercetools Frontend components, Studio, renderer? Load
references/ct-frontend-components.md
- Building a headless Next.js storefront? Load
references/storefront-architecture.md
- Building product listing pages (PLP, filtering, pagination)? Load
references/product-listing-pages.md
- Building product detail pages (PDP, variants, product cards)? Load
references/product-detail-pages.md
- Building cart UI? Load
references/cart-ui.md
- Building checkout flows? Load
references/checkout-ui.md
- Optimizing frontend performance (images, LCP, code splitting)? Load
references/frontend-performance.md
- Optimizing SEO (structured data, meta tags, sitemap)? Load
references/frontend-seo.md
- Building a B2B storefront (business units, quotes, approvals)? Load
references/b2b-frontend.md
CRITICAL Priority
| Pattern |
File |
Impact |
| Data fetching strategy (SSR vs SSG vs ISR) |
references/storefront-architecture.md |
Wrong strategy causes stale prices, slow pages, or API quota exhaustion |
| Cart state management & optimistic updates |
references/cart-ui.md |
Race conditions cause quantity bugs, lost items, broken checkout |
| Extension timeout limits (8s max) |
references/ct-frontend-extensions.md |
Slow extensions fail silently, breaking pages for all users |
| Image optimization & LCP |
references/frontend-performance.md |
Unoptimized product images destroy Core Web Vitals scores |
| B2B permission-gated UI |
references/b2b-frontend.md |
Missing permission checks expose admin actions to unauthorized users |
HIGH Priority
| Pattern |
File |
Impact |
| Server Components for product data |
references/storefront-architecture.md |
Client-side fetching leaks API credentials and doubles load time |
| PLP pagination & filtering |
references/product-listing-pages.md |
N+1 queries on listing pages cause 3-10s load times |
| Checkout flow & payment integration |
references/checkout-ui.md |
Missing error states cause silent payment failures |
| Component schema design (tastics) |
references/ct-frontend-components.md |
Bad schemas make components unusable for business users in Studio |
| SEO structured data for products |
references/frontend-seo.md |
Missing structured data means no rich results in Google |
| Locale routing & currency formatting |
references/storefront-architecture.md |
Wrong i18n setup breaks prices, URLs, and search indexing |
| B2B quote lifecycle & approval flows |
references/b2b-frontend.md |
Quote cart consumption and approval rejection side effects break B2B checkout |
MEDIUM Priority
| Pattern |
File |
Impact |
| Product variant selection UI |
references/product-detail-pages.md |
Confusing variant selectors reduce conversion |
| Faceted search UI patterns |
references/product-listing-pages.md |
Slow or broken filters frustrate shoppers |
| commercetools Checkout integration |
references/checkout-ui.md |
Misconfigured Checkout SDK blocks payment completion |
| Code splitting & bundle size |
references/frontend-performance.md |
Oversized bundles increase Time to Interactive |
| Data source extension patterns |
references/ct-frontend-extensions.md |
Redundant API calls from multiple components on a page |
| Studio page management & publishing |
references/ct-frontend-components.md |
Wrong page folder structure breaks dynamic routing |
| B2B business unit & store scoping |
references/b2b-frontend.md |
Missing BU/store context causes cross-tenant data leaks |
| B2B purchase lists & quick order |
references/b2b-frontend.md |
Wrong Wishlist API mapping breaks purchase list CRUD |
Common Frontend Anti-Patterns (Quick Reference)
| Anti-Pattern |
File |
Consequence |
| Fetching product data client-side |
references/storefront-architecture.md |
Exposes API credentials, no SSR benefits, poor SEO |
Using getServerSideProps for static catalog pages |
references/storefront-architecture.md |
Every page visit hits the API, wastes quota, slow TTFB |
| Not implementing optimistic cart updates |
references/cart-ui.md |
UI freezes on every add-to-cart, feels broken |
| Loading all product images at full resolution |
references/frontend-performance.md |
5-10MB page weight, failed Core Web Vitals |
| Fetching all product attributes when you need 3 |
references/product-detail-pages.md |
5-10x response payload, slower rendering |
| Building search from scratch instead of using Product Search API |
references/product-listing-pages.md |
Poor relevance, no faceting, slow queries |
| Missing error boundaries around commerce data |
references/storefront-architecture.md |
One failed API call crashes the entire page |
| Hardcoding locale/currency instead of using routing |
references/storefront-architecture.md |
Broken multi-market support, wrong prices |
MCP Complement
Use this skill for storefront patterns, then use the Developer MCP to look up field names and schemas, and the Commerce MCP for CRUD operations.
1---2name: commercetools-frontend3description: Production-tested patterns for commercetools storefronts — Next.js, React, PDP/PLP, cart, checkout, SEO, and performance from a Platinum partner with 50+ live implementations.4---56# commercetools Frontend & Storefront Development78## Two Development Paths910This skill covers **two distinct approaches** to building storefronts on commercetools:1112| Approach | When to Use | Key File |13|----------|-------------|----------|14| **commercetools Frontend** (hosted) | Using Studio for business users, extensions, components (tastics), data sources | [references/ct-frontend-extensions.md](references/ct-frontend-extensions.md) |15| **Headless with Next.js/React** | Custom storefront with full control, App Router, Server Components | [references/storefront-architecture.md](references/storefront-architecture.md) |16| **B2B Storefront** | Business units, permissions, approval workflows, quotes, purchase lists | [references/b2b-frontend.md](references/b2b-frontend.md) |1718Both approaches share patterns for product pages, cart/checkout UI, and performance/SEO. B2B patterns layer on top of either approach.1920## How to Use This Skill21221. Identify which approach you are using (commercetools Frontend or headless Next.js)232. Load the relevant architecture file first243. Then load the page-type-specific reference for your current task254. Reference files contain correct/incorrect code pairs, checklists, and pitfall warnings2627**Progressive loading -- only load what you need:**2829- Using commercetools Frontend extensions, data sources, actions? Load `references/ct-frontend-extensions.md`30- Using commercetools Frontend components, Studio, renderer? Load `references/ct-frontend-components.md`31- Building a headless Next.js storefront? Load `references/storefront-architecture.md`32- Building product listing pages (PLP, filtering, pagination)? Load `references/product-listing-pages.md`33- Building product detail pages (PDP, variants, product cards)? Load `references/product-detail-pages.md`34- Building cart UI? Load `references/cart-ui.md`35- Building checkout flows? Load `references/checkout-ui.md`36- Optimizing frontend performance (images, LCP, code splitting)? Load `references/frontend-performance.md`37- Optimizing SEO (structured data, meta tags, sitemap)? Load `references/frontend-seo.md`38- Building a B2B storefront (business units, quotes, approvals)? Load `references/b2b-frontend.md`3940## CRITICAL Priority4142| Pattern | File | Impact |43|---------|------|--------|44| Data fetching strategy (SSR vs SSG vs ISR) | [references/storefront-architecture.md](references/storefront-architecture.md) | Wrong strategy causes stale prices, slow pages, or API quota exhaustion |45| Cart state management & optimistic updates | [references/cart-ui.md](references/cart-ui.md) | Race conditions cause quantity bugs, lost items, broken checkout |46| Extension timeout limits (8s max) | [references/ct-frontend-extensions.md](references/ct-frontend-extensions.md) | Slow extensions fail silently, breaking pages for all users |47| Image optimization & LCP | [references/frontend-performance.md](references/frontend-performance.md) | Unoptimized product images destroy Core Web Vitals scores |48| B2B permission-gated UI | [references/b2b-frontend.md](references/b2b-frontend.md) | Missing permission checks expose admin actions to unauthorized users |4950## HIGH Priority5152| Pattern | File | Impact |53|---------|------|--------|54| Server Components for product data | [references/storefront-architecture.md](references/storefront-architecture.md) | Client-side fetching leaks API credentials and doubles load time |55| PLP pagination & filtering | [references/product-listing-pages.md](references/product-listing-pages.md) | N+1 queries on listing pages cause 3-10s load times |56| Checkout flow & payment integration | [references/checkout-ui.md](references/checkout-ui.md) | Missing error states cause silent payment failures |57| Component schema design (tastics) | [references/ct-frontend-components.md](references/ct-frontend-components.md) | Bad schemas make components unusable for business users in Studio |58| SEO structured data for products | [references/frontend-seo.md](references/frontend-seo.md) | Missing structured data means no rich results in Google |59| Locale routing & currency formatting | [references/storefront-architecture.md](references/storefront-architecture.md) | Wrong i18n setup breaks prices, URLs, and search indexing |60| B2B quote lifecycle & approval flows | [references/b2b-frontend.md](references/b2b-frontend.md) | Quote cart consumption and approval rejection side effects break B2B checkout |6162## MEDIUM Priority6364| Pattern | File | Impact |65|---------|------|--------|66| Product variant selection UI | [references/product-detail-pages.md](references/product-detail-pages.md) | Confusing variant selectors reduce conversion |67| Faceted search UI patterns | [references/product-listing-pages.md](references/product-listing-pages.md) | Slow or broken filters frustrate shoppers |68| commercetools Checkout integration | [references/checkout-ui.md](references/checkout-ui.md) | Misconfigured Checkout SDK blocks payment completion |69| Code splitting & bundle size | [references/frontend-performance.md](references/frontend-performance.md) | Oversized bundles increase Time to Interactive |70| Data source extension patterns | [references/ct-frontend-extensions.md](references/ct-frontend-extensions.md) | Redundant API calls from multiple components on a page |71| Studio page management & publishing | [references/ct-frontend-components.md](references/ct-frontend-components.md) | Wrong page folder structure breaks dynamic routing |72| B2B business unit & store scoping | [references/b2b-frontend.md](references/b2b-frontend.md) | Missing BU/store context causes cross-tenant data leaks |73| B2B purchase lists & quick order | [references/b2b-frontend.md](references/b2b-frontend.md) | Wrong Wishlist API mapping breaks purchase list CRUD |7475## Common Frontend Anti-Patterns (Quick Reference)7677| Anti-Pattern | File | Consequence |78|-------------|------|-------------|79| Fetching product data client-side | [references/storefront-architecture.md](references/storefront-architecture.md) | Exposes API credentials, no SSR benefits, poor SEO |80| Using `getServerSideProps` for static catalog pages | [references/storefront-architecture.md](references/storefront-architecture.md) | Every page visit hits the API, wastes quota, slow TTFB |81| Not implementing optimistic cart updates | [references/cart-ui.md](references/cart-ui.md) | UI freezes on every add-to-cart, feels broken |82| Loading all product images at full resolution | [references/frontend-performance.md](references/frontend-performance.md) | 5-10MB page weight, failed Core Web Vitals |83| Fetching all product attributes when you need 3 | [references/product-detail-pages.md](references/product-detail-pages.md) | 5-10x response payload, slower rendering |84| Building search from scratch instead of using Product Search API | [references/product-listing-pages.md](references/product-listing-pages.md) | Poor relevance, no faceting, slow queries |85| Missing error boundaries around commerce data | [references/storefront-architecture.md](references/storefront-architecture.md) | One failed API call crashes the entire page |86| Hardcoding locale/currency instead of using routing | [references/storefront-architecture.md](references/storefront-architecture.md) | Broken multi-market support, wrong prices |8788## MCP Complement8990Use this skill for storefront patterns, then use the [Developer MCP](https://docs.commercetools.com/sdk/mcp/developer-mcp) to look up field names and schemas, and the [Commerce MCP](https://docs.commercetools.com/sdk/mcp/commerce-mcp) for CRUD operations.
ariessolutionsio