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.
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.