Series Overview
Build e-commerce with Payload CMS: product collections, Shopify-style variants, dynamic dropdowns, SKUs, and flexible product architecture.
All Articles in Series
How to Build E‑commerce with Payload CMS: Collections, Products, Variants
Build an e‑commerce in Payload CMS — collections, products, and variants.
Learn how to design a real e‑commerce data model in Payload CMS: scalable collections, editor‑friendly products, and variants validated at the source. We’ll add SKU safeguards, SEO‑ready slugs, and lightweight hooks so the catalog stays consistent as it grows.
Build a Shopify-Style Variant System in Payload CMS
From “just add dropdowns” to a fully dynamic product variant engine — here's how I cloned Shopify's logic using Payload CMS and Next.js.
Cloned Shopify’s product variant logic in Payload CMS — dynamic attributes, no schema changes, fully adaptable.
How to Create Dynamic Cross-Collection Dropdowns in Payload CMS v3
Build custom React field components to fetch cross-collection data when select options can't be async
Payload CMS v3 select fields don't support async options. Learn how to create custom React fields that fetch cross-collection data and power Shopify-like variant dropdowns.
Auto-Generate Base64 Blur Placeholders in Payload CMS with Sharp
Create tiny blurDataURL placeholders at upload time and use them with Next.js Image
Generate base64 blur placeholders in Payload CMS using Sharp in afterChange hooks, store them on media, and enable smooth Next.js Image loading without runtime optimization costs.
How To Implement Slugs for Content and SKUs for Products in Payload CMS (With Safe Uniqueness + Seeding)
Separate human-friendly slugs from inventory SKUs while keeping Payload hooks and seeding predictable.
Wire up reusable slug and SKU helpers in Payload CMS so content URLs, product identifiers, and variant slugs stay unique across environments.
How to Dynamically Filter Payload CMS Relationship Fields Based on Sibling Data in Array Fields
Use siblingData-powered filterOptions to keep relationship dropdowns in sync inside Payload arrays.
Learn the exact Payload CMS pattern for filtering relationship fields by sibling values inside an array, including working code, data flow, and extensions.