Skip to main content

Product Grouping on PDPs (COLOR/FABRIC)

Products on PDPs are grouped using a group.type metafield with three supported types:

  • COLOR: Groups products by different colors of the same style
  • FABRIC: Groups products by different fabrics of the same style
  • BUNDLE: Groups products sold together as a bundle

Data Flow​

1. Initial Load (products.$handle.tsx)​

Fetches base product and checks for group.type metafield

2. Sibling Fetching (lib/api/storefront/product.ts)​

  • Calls Admin API endpoint /api/admin/siblings/{style} for product IDs
  • Uses product's attr.style metafield as the grouping key
  • Batches IDs and fetches from Storefront API (max 250/request)

3. Admin Query (api.admin.siblings.$style.tsx)​

  • Query: metafields.attr.style:"${style}" AND status:ACTIVE
  • Returns paginated product IDs, cached with "slow" strategy

Rendering​

COLOR Groups​

  • Sorted into solids, patterns, florals, leavingSoon, finalSale
  • Rendered as swatches linking to respective product pages
  • Current product highlighted in swatch group

FABRIC Groups​

  • Similar structure but grouped by fabric variations
  • Rendered as swatches linking to respective product pages
  • Current product highlighted in swatch group

Key Metafields​

  • group.type: Determines grouping strategy (accessed as groupType in GraphQL)
  • attr.style: Shared identifier for grouped products
  • attr.color: Color value for COLOR-grouped products
  • attr.fabric: Fabric value for FABRIC-grouped products