Magento Community Edition, 1.9.3.1

Swatch Workflow

On the product page, swatches can be used to indicate the combinations of color and size that are currently available. Any option that is not available is crossed out. In the following example. the pistachio loafer is available only is size 8, so the rest of the sizes are crossed out. You can click each color swatch to see the available sizes, and click each size swatch to see the available colors. When a swatch is selected, the value appears in the input field, and the selected swatch is outlined as the current selection.

Size Swatches Crossed Out
Unavailable Size Swatches Crossed Out

Swatches can be set up to display the corresponding product image when the swatch is clicked. For example, from the product list or product page, you can click the swatch to change the color of the main image.