I have been looking for this feature forever, i even hired an expert to write code to list the color variants of a product as separate in the collection list but it still isn't exactly what Im looking for.
You can see on this store they have it https://alphaleteathletics.com/collections/mens-new-releases and also on www.gymshark.com , when you click on a product color variant from the product page it goes to a separate link address for example https://alphaleteathletics.com/collections/mens-new-releases/products/mens-premium-pro-elite-pullove...and https://alphaleteathletics.com/collections/mens-new-releases/products/mens-premium-pro-elite-pullove... .
How can I implement something like that? Color variants are really separate pages but with navigation by color swatch on product page.
That store has one product for each color. That isn't a product splited into variant colors.
Those are individual products as we can see on the URL:
If you have a product with color and size variants mixed, it can be displayed as different product thumbnails on the collection page.
But the URLs will be like:
* If the pagination is 12 products per page and there is one product with 3 different colors, it will display 14 thumbnails.
It can be coded to show the variant color as a separate product, and their sizes as variants. Actually, the store you sent us for reference is not working as we mentioned.
Can you share with us your store URL? So we can give you a proper solution.