Magento Open Source 2.3.x

This is the 2.3 Beta release version of Magento documentation. Content in this version is subject to change. For additional versions, see Magento Documentation and Resources.

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
Text-Based Swatches

If an image isn’t available for a swatch, the attributeA characteristic or property of a product; anything that describes a product. Examples of product attributes include color, size, weight, and price. value appears as text. A text-based swatch is like a button with a text label, and behaves in the same way as a swatch with an image. When text-based swatches are used to show the available sizes, any size that is not available is crossed out.


Text-Based Swatches for Size
Swatches in Layered Navigation

Swatches can also be used in layered navigationThe primary group of web page links that a customer uses to navigate around the website; the navigation links to the most important categories or pages on an online store., provided that the Use in Layered Navigation property of the color attribute is set to “Yes.” The following example shows both text-based and color image swatches in layered navigation.


Swatches in Layered Navigation