Magento Open Source 2.1.x

Magento 2.1.x Notice: Magento 2.1.18 is the final 2.1.x release. After June 2019, Magento 2.1.x will no longer receive security patches, quality fixes, or documentation updates. To maintain your site's performance, security, and PCIPayment Card Industry: Refers to debit and credit cards and their associated businesses. compliance, upgrade to the latest version of Magento. The Magento User Guide 2.1.x remains available in PDF for Open Source and Commerce.

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