pdp
Product Detail Page (PDP)
Sources: Next.js Caching · Server Actions · Suspense
When to Use
Use this skill when:
- Modifying PDP layout or components
- Working with the image gallery/carousel
- Understanding caching and streaming architecture
- Debugging add-to-cart issues
- Adding new product information sections
For variant selection logic specifically, see variant-selection.
Start here: Read the Data Flow section first - it explains how everything connects.
Architecture Overview
More from saleor/storefront
saleor-paper-storefront
>
12react-patterns
Write idiomatic React with proper hooks and render purity. Use when writing components, fixing hook-related lint errors, or deciding where to put logic (render vs effect vs handler).
4ui-components
Create and style UI components with design tokens. Use when creating components, styling with Tailwind, deciding between Server/Client Components, or using shadcn/ui primitives.
4caching-strategy
Understand the caching architecture, Cache Components (PPR), and revalidation mechanisms. Use when debugging stale content, modifying caching behavior, or understanding data freshness guarantees.
4filtering-system
Product list filtering and sorting architecture. Use when modifying filters, adding new filter types, working on category/collection pages, or understanding server-side vs client-side filtering.
3checkout-architecture
Reference for reusable checkout UI components. Use when working with SignInForm, AddressSelector, PaymentMethodSelector, or composing checkout step views.
3