Displaying color variants as individual products on custom collection page

Topic summary

A developer needs to display color variants as separate products on a custom Shopify collection page for a shoe store. The “Shop All” page must show products grouped by collection (Low Tops, Hi Tops), with each color variant appearing as an individual product listing.

Core Solutions Discussed:

  • Code-based approach: Loop through product variants, extract unique colors, and display each as a separate product card. Multiple users reference Dylan Harper’s tutorial for implementing this without apps.

  • Separate products method: Create individual products for each color (like koio.co does), which improves filtering functionality and avoids Shopify’s 100-variant limit. Requires grouping related color-products into collections using tags or custom attributes.

  • App solutions: Several paid apps mentioned (Show Variants on Collection Page, Ultimate Filter & Search) that automate this functionality, though some users advocate for free code solutions instead.

Key Technical Considerations:

  • Compatibility with filtering/search apps varies by implementation
  • Code modifications needed in product-card-grid or collection-template.liquid files
  • JSON product object manipulation required for advanced implementations
  • Theme-specific adjustments necessary

The discussion remains active with users seeking implementation help for various themes and requesting custom development work.

Summarized with AI on November 6. AI used: claude-sonnet-4-5-20250929.

Thanks Brian, interested in helping me set this up as a quick job? I’m using the Handy theme by Pixel Union. If so, I can be reached at info@apollomerchants.com