# Swatches

<div align="left"><img src="https://3914018967-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MJEKoY_RLJk3C3Fcnu6%2F-MKAp4OHqU-3exwbJPC8%2F-MKEz34EdQLuLYOiF180%2Fsupported2.png?alt=media&#x26;token=b9b5e5d0-1000-4f93-af86-6197df550798" alt=""></div>

Different attributes can be presented on the storefront is different options.

With configurable products, when a particular product option is not available, the product swatch cannot be chosen as the swatch button becomes disabled. For configurable products, you can choose between a visual swatch, text swatch, or a dropdown input control.  With the ScandiPWA theme, you are welcome to use any type of swatches:

| SWATCH TYPE | STATUS                                | **DESCRIPTION**                                                                                                                                                                                                                                                             |
| ----------- | ------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Text-Based  | **SUPPORTED**                         | Text-based swatched are button-like swatches with text labels. In the layered navigation text-based swatched are rendered horizontally.                                                                                                                                     |
| Visual      | <p><strong>SUPPORTED</strong><br></p> | You can pick any color from the color picker or enter any hexadecimal value to select a color for your swatch. For specific patters, you are welcome to upload an image to be displayed in the swatch. In the layered navigation visual swatched are rendered horizontally. |