How to enable product color variants as a product in collection page (Broadcast Theme)

Shopify Discussion

Topic summary

Goal: Show each color variant as its own item on the collection page (Broadcast theme) without creating separate products, which currently causes SKU (stock keeping unit) complexity.

Suggested approaches:

  • No code edit (PageFly): Keep one product with color variants and enable collection filtering by the Color option in collection settings. This simulates separate colors without multiplying SKUs. A guide/screenshot was shared and users were advised to contact PageFly support for setup.
  • App-based: Use a third‑party app (e.g., “Stamp – Variants on Collection”) to display variants as separate cards on collection/home pages, with per‑collection controls (show/hide specific variants, filter by options like “Gold”).
  • Custom code: In the collection template, iterate over product.variants and render a product card per variant, use the variant’s featured media, and link to the parent product with the selected color preloaded. This keeps SKUs unified while showing colors individually.

Status: No Broadcast‑specific code snippet provided. A question about whether the function is FOC (likely free of charge) remains unanswered. Discussion is open/ongoing.

Summarized with AI on December 10. AI used: gpt-5.
1

Hi, does anyone know how to edit the collection code to display product color variants as separate products on the collection page? Currently, we are using separate products for each color, which makes our SKUs and listings confusing. We would greatly appreciate it if anyone could share the code with us!

Previously, we were using the Impulse theme, which allowed us to manage code from online to show the color variant option as a separate product on the collection page.

2

Hi @Jasmineau99 ,
This is Theodore from PageFly - Shopify Page Builder App.

Showing color variants as separate products on Shopify collections:

Don’t edit collection code! Here’s a better solution:

  1. Use product variants with color options for each product (one product, multiple color variants).
  2. Enable collection filtering by product options (color) in your collection settings.

This allows customers to see color variants as “separate products” on the collection page while maintaining a single product listing with fewer SKUs.

Best regards,
Theodore | PageFly

3

any tutorial showing how to do this with pagefly apps?

4

Can you follow this guide? or contact with our support.

JETIX · PageFly Page Builder · Shopify 2024-06-17 14-43-39.png
JETIX · PageFly Page Builder · Shopify 2024-06-17 14-43-39.png3024×1714 254 KB

5

this function FOC?

6

Third-party apps make it easy to separate variants I own the Stamp ‑ Variants on Collection and we help merchants display variants separately on the collection page and home page. You can customize the settings per collection to show or hide specific variants, filter variants, or separate them by specific options. For example, you can create a “Gold” collection and display only gold-related variants.

7

Hi @Jasmineau99

You can surface color variants as individual products by iterating over each variant in your collection template and rendering a product card for each variant. Get the featured media from the variant and link to the parent product with the selected option preloaded. This keeps SKUS together, but shows colors separately.