E-Commerce Expert (2026 Edition)
English | Bahasa Indonesia
English
Orchestration & Integration
payment-gateway-expert: Stripe, Xendit, Midtrans payment integration.
nextjs-app-router-expert: SSR product pages and cart functionality.
seo: Product schema markup, sitemaps, and SEO optimization.
saas-billing: Subscription-based e-commerce models.
headless-cms-expert: Content management for product descriptions and pages.
Description
Expert guide for building modern e-commerce applications. Covers Shopify Storefront API (headless commerce), Medusa.js v2 (open-source, self-hosted), Saleor (GraphQL-first), product catalog design, cart state management, checkout flows, inventory management, order fulfillment, and SEO for product pages.
Trigger Conditions
- Building an online store or e-commerce platform.
- Integrating Shopify Storefront API with custom frontend.
- Setting up Medusa.js or Saleor for headless commerce.
- Designing product catalog schemas and cart/checkout UX.
Platform Selection
| Platform |
Type |
API |
Self-Hosted |
Best For |
| Shopify Storefront |
SaaS + Headless |
GraphQL |
❌ |
Quick launch, large catalog |
| Medusa.js v2 |
Open-source |
REST + JS SDK |
✅ |
Full control, customization |
| Saleor |
Open-source |
GraphQL |
✅ |
Enterprise, multi-channel |
| WooCommerce |
Plugin (WordPress) |
REST |
✅ |
WordPress ecosystem |
Core Patterns
// Shopify Storefront API — Fetch products
const SHOPIFY_QUERY = `{
products(first: 12, sortKey: BEST_SELLING) {
edges {
node {
id title handle description
priceRange { minVariantPrice { amount currencyCode } }
images(first: 1) { edges { node { url altText } } }
variants(first: 5) { edges { node { id title availableForSale price { amount } } } }
}
}
}
}`;
async function getProducts() {
const res = await fetch(process.env.SHOPIFY_STOREFRONT_URL!, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-Shopify-Storefront-Access-Token': process.env.SHOPIFY_TOKEN!,
},
body: JSON.stringify({ query: SHOPIFY_QUERY }),
});
return (await res.json()).data.products.edges.map((e) => e.node);
}
Orchestration & Integration
payment-gateway-expert, nextjs-app-router-expert, seo, saas-billing
Bahasa Indonesia
Deskripsi
Panduan ahli untuk membangun aplikasi e-commerce modern. Mencakup Shopify Storefront API, Medusa.js v2, Saleor, desain katalog produk, manajemen keranjang, alur checkout, manajemen inventaris, dan SEO halaman produk.
Kondisi Pemicu
- Membangun toko online atau platform e-commerce.
- Mengintegrasikan Shopify Storefront API dengan frontend kustom.
- Menyiapkan Medusa.js atau Saleor untuk headless commerce.
1---2name: ecommerce-expert3description: Expert guide for e-commerce architecture (Shopify Storefront, Medusa.js, Saleor), product catalogs, cart/checkout UX, and order management / Panduan ahli arsitektur e-commerce (Shopify, Medusa.js, Saleor), katalog produk, UX keranjang/checkout, dan manajemen pesanan.4---56# E-Commerce Expert (2026 Edition)78[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)910---1112<a name="english"></a>13## English1415### Orchestration & Integration16- **`payment-gateway-expert`**: Stripe, Xendit, Midtrans payment integration.17- **`nextjs-app-router-expert`**: SSR product pages and cart functionality.18- **`seo`**: Product schema markup, sitemaps, and SEO optimization.19- **`saas-billing`**: Subscription-based e-commerce models.20- **`headless-cms-expert`**: Content management for product descriptions and pages.2122### Description23Expert guide for building modern e-commerce applications. Covers Shopify Storefront API (headless commerce), Medusa.js v2 (open-source, self-hosted), Saleor (GraphQL-first), product catalog design, cart state management, checkout flows, inventory management, order fulfillment, and SEO for product pages.2425### Trigger Conditions26- Building an online store or e-commerce platform.27- Integrating Shopify Storefront API with custom frontend.28- Setting up Medusa.js or Saleor for headless commerce.29- Designing product catalog schemas and cart/checkout UX.3031---3233### Platform Selection3435| Platform | Type | API | Self-Hosted | Best For |36|----------|------|-----|-------------|----------|37| Shopify Storefront | SaaS + Headless | GraphQL | ❌ | Quick launch, large catalog |38| Medusa.js v2 | Open-source | REST + JS SDK | ✅ | Full control, customization |39| Saleor | Open-source | GraphQL | ✅ | Enterprise, multi-channel |40| WooCommerce | Plugin (WordPress) | REST | ✅ | WordPress ecosystem |4142### Core Patterns4344```typescript45// Shopify Storefront API — Fetch products46const SHOPIFY_QUERY = `{47 products(first: 12, sortKey: BEST_SELLING) {48 edges {49 node {50 id title handle description51 priceRange { minVariantPrice { amount currencyCode } }52 images(first: 1) { edges { node { url altText } } }53 variants(first: 5) { edges { node { id title availableForSale price { amount } } } }54 }55 }56 }57}`;5859async function getProducts() {60 const res = await fetch(process.env.SHOPIFY_STOREFRONT_URL!, {61 method: 'POST',62 headers: {63 'Content-Type': 'application/json',64 'X-Shopify-Storefront-Access-Token': process.env.SHOPIFY_TOKEN!,65 },66 body: JSON.stringify({ query: SHOPIFY_QUERY }),67 });68 return (await res.json()).data.products.edges.map((e) => e.node);69}70```7172## Orchestration & Integration73- `payment-gateway-expert`, `nextjs-app-router-expert`, `seo`, `saas-billing`7475---7677<a name="bahasa-indonesia"></a>78## Bahasa Indonesia7980### Deskripsi81Panduan ahli untuk membangun aplikasi e-commerce modern. Mencakup Shopify Storefront API, Medusa.js v2, Saleor, desain katalog produk, manajemen keranjang, alur checkout, manajemen inventaris, dan SEO halaman produk.8283### Kondisi Pemicu84- Membangun toko online atau platform e-commerce.85- Mengintegrasikan Shopify Storefront API dengan frontend kustom.86- Menyiapkan Medusa.js atau Saleor untuk headless commerce.