[Collection Page] Display each variant in their own product card

[bredowmax]

Describe the enhancement you'd like

Display each variant (example: colors, flavors) as if it were their own product in the Collection Page

Benefits

• Helps buyers on Collection Page find other colors (or flavors) of a product that they might had missed otherwise (example: 'Watermelon' is the second flavor of a product and today not visible on collection page, unless with active filters)
• As merchants are not forced to 'split up' variants into their own products (see 'alternatives' below), this helps buyers on PDP find other colors (or flavors) of the same product
• Helps merchants that have few products but lots of variations (like: color, flavor) to make their collections look fuller and avoids duplicate effort in trying to keep several almost-identical products uptodate. Example: Nuun has currently only one product in this collection but it's actually 3 flavors of the same product once you click in it. From the collection page, there was only a hint "3 Flavors available"

Examples

• Truffle (Dawn theme in early version with custom code)
• LMNT
• Key Nutrients

Limitations

This feature may not be useful for all Product Options. My rule of thumbs:

• If only one option applies for buyer (like: size), then it's likely good not to 'explode'
• If buyer may be interested in any of the options (like: color, flavor, volume) then merchant may want to 'explode' and show variants in their own product cards

Describe alternatives you've considered

Use an App

• Not tested https://apps.shopify.com/variable-products

Do not use Collection Pages at all

Stores with a small inventory may opt to omit collection pages alltogether. This may hurt navigation between different products and the ability for buyer to find the best option for them.

• Feastables
• One Wheel

Allow previewing different product options in the same product card on the Collection Page

@chris-chameleonbrands suggested displaying available colors in the same product card. Helps merchants with a large inventory to condense down the Collection Page to less products

• Some premium themes support this today
• this appears also possible with help of apps
• Fashion Nova
• AllBirds
• Tecovas
• Spanx
• Tommy John
• Pura Vida
• Ghost

Split variants into their own products

Very popular workaround by merchants with a large catalog because it allows to avoid the current 100 variants-per-product limit. Often combined with code on PDP to 'stitch together' several products, which requires a refresh each time buyer chooses a different color on the PDP. Because this can end up in many products created, this is often done in combination with an ERP or PIM that let merchant enter a product including all the variants, and then breaks up the variants into distinct products for Shopify)

• Xouxou - Note: this example does not link together different colors of the otherwise same product and so buyers may be unaware of other colors they may like better
• Prestige (Premium Shopify theme)
• GymShark
• Vuori
• Alo
• Skims
• Rothys
• No Bull
• Morphe
• HeyDude
• Untuckit
• ThirdLove

[PaulNewton]

Pagination offsets are always an issue when doing this, which is another factor in why some stores go with the variants-as-products approach (aka variantless aka flat-product aka product-family aka standlone-product structure).

Some more alternatives:

1. Quick-view modals are the most common way i've seen to show all variants of a product on collection surfaces (when it's not a flat-product situation)
2. Inline toggle/tab - A products Variant-Cards on a collection don't render immediately instead a user has interact with the product, like tabs or an inline non-modal quickview.
3. Product per row, Each Products Variant-Cards are limited to the amount of cards allowed per row, so each product is on it's own row (see crude example image below). Problematic gaps when not all products have variants , or a product-with variants isn't the first item on a row.
4. Future convergence, There's also how this could end up overlapping with the new Quick-Order-List feature #2791
   • Making rows optionally show either automatically or be behind a disclosure toggle (like an inline quickview)
   • Making rows display links instead of quantity inputs for non order-form collections.

Figure - a product with variants has it's variants fill the current row then stop for then next product on the next row. variant-cards scaled down for effect.

[gregjotau]

@bredowmax have you explored more options here? Also did you test https://apps.shopify.com/variable-products?

What we need is:

1. the "exploding" of variants - less important
2. showing colors under each product card in search & collection pages etc. - most important

Depending upon how many products you have for different collection, you might want to show colors as their own product-card or not.