Show all color variations (as separate products) on listing page

Question

We have Product level variations as Color and Size. Since the catalog is very small, client needs all the color variations to be listed on category listing page and then navigate to the item to be able to select size and color. I would like to have options of using color swatch too.

What would be the best way to achieve this? should we have simple products with custom options or go with regular configurable products and do customization on the listing template? or any better suggestions to do this!

Answer 1

You can use configurable products, and show each simple product at the listing.

You can customize each simple products links in the catalog to direct to the main (parent) product. See app\design\frontend\base\default\template\catalog\product\list.phtml

And develop or install some color swatches extension for the main product page.

Answer 2

This can be done by using the Pre-Select Colors Plus Swatches extension. You can find a working demo of the extension here: http://preselectswatches.cjmcreativedesigns.com/products.html

There are 6 products shown in the demo. One is the configurable product (can be hidden from the category listing if needed) and the other five are the simple products showing the various color options. Notice that each of the color options loads the parent product with the color option already selected.