Magento Open Source 2.2.x

Swatches

Customers have high expectations when it comes to color, and it is crucial that product descriptions accurately represent each available color, pattern, or texture. For example, the capris in the illustration below are not simply available in red, green, and blue. Rather, they are available only in very specific shades of red, green, and blue, which are probably unique to this product.

For configurable products, color can be indicated by a visual swatch, text swatch, or a drop-down input control. Swatches can be used on the product page, in product listings, and in layered navigation. On the product page, swatches are synchronized to display the corresponding product image when the swatch is chosen. When chosen, the corresponding value appears in the input field, and the swatch is outlined as the current selection.


Swatches on Product Page