> For the complete documentation index, see [llms.txt](https://docs.optis.me/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.optis.me/swatch/styling/styling-settings-reference.md).

# Styling settings reference

A complete reference of every styling setting, grouped by purpose. Not every setting applies to every display type, the **Applies to** column shows where each one is available.

<figure><img src="/files/xVlZ1ofqXgy6pXFkHcr7" alt="The Swatch styling page with Product page and Collection page tabs, a live preview, and the settings panel"><figcaption></figcaption></figure>

## Size & layout

| Setting                               | What it does                                       | Applies to                               |
| ------------------------------------- | -------------------------------------------------- | ---------------------------------------- |
| **Width / Height**                    | Size of each swatch or card (in px)                | Swatch, Swatch card                      |
| **Swatch size**                       | Size of the small thumbnail inside a pill          | Pill swatch                              |
| **Padding (left-right / top-bottom)** | Inner spacing of the element                       | Pill swatch, Button, Dropdown            |
| **Spacing**                           | Gap between options                                | Swatch, Swatch card, Pill swatch, Button |
| **Alignment**                         | Left, Center, or Right alignment of the option row | Swatch, Swatch card, Pill swatch, Button |

## Border & states

Borders can be styled differently for the default, hover, and selected (active) states.

| Setting                 | What it does                                         | Applies to                               |
| ----------------------- | ---------------------------------------------------- | ---------------------------------------- |
| **Border radius**       | Roundness of corners (50 = full circle for swatches) | All types                                |
| **Border width**        | Thickness of the border                              | All types                                |
| **Border color**        | Default border color                                 | All types                                |
| **Hover border color**  | Border color on mouse hover                          | All types                                |
| **Active border color** | Border color of the selected option                  | Swatch, Swatch card, Pill swatch, Button |

## Text & price

| Setting                               | What it does                              | Applies to                                 |
| ------------------------------------- | ----------------------------------------- | ------------------------------------------ |
| **Font size**                         | Size of the option text                   | Swatch card, Pill swatch, Button, Dropdown |
| **Font weight**                       | Regular, Semi-bold, or Bold               | Swatch card, Pill swatch                   |
| **Text align**                        | Alignment of the label text               | Swatch card, Pill swatch                   |
| **Text color / Hover / Active**       | Label color in each state                 | Swatch card, Pill swatch, Button, Dropdown |
| **Background color / Hover / Active** | Element background in each state          | Swatch card, Pill swatch, Button, Dropdown |
| **Show price**                        | Show the variant price next to the option | Swatch card, Pill swatch                   |
| **Price font size / Price color**     | Style of the price text                   | Swatch card, Pill swatch                   |
| **Media color**                       | Tint of the small media thumbnail         | Pill swatch                                |

## Hide extra swatches

Keep long option lists tidy by limiting how many swatches show at once.

| Setting                                | What it does                                                                 | Applies to                               |
| -------------------------------------- | ---------------------------------------------------------------------------- | ---------------------------------------- |
| **Hide extra**                         | Turn the limit on or off                                                     | Swatch, Swatch card, Pill swatch, Button |
| **Hide extra by**                      | **Count** (show a limited number) or **Carousel** (scroll through)           | Swatch, Swatch card, Pill swatch, Button |
| **Show limit values**                  | How many options to show before hiding the rest                              | Swatch, Swatch card, Pill swatch, Button |
| **Count extra event**                  | When the "+N" badge is clicked: **Show all** or **Redirect to product page** | Swatch, Swatch card, Pill swatch, Button |
| **Count extra font size / text color** | Style of the "+N" badge                                                      | Swatch, Swatch card, Pill swatch, Button |

## Collection page only

These settings appear on the **Collection Page** tab.

| Setting                        | What it does                                           | Applies to               |
| ------------------------------ | ------------------------------------------------------ | ------------------------ |
| **Show option name**           | Show the option name (e.g. "Color") above the swatches | Swatch, Button, Dropdown |
| **Option name font weight**    | Weight of the option name text                         | Swatch, Button, Dropdown |
| **Selected value font weight** | Weight of the selected value text                      | Swatch, Button, Dropdown |
| **Change image on hover**      | Update the product image when hovering an option       | Swatch, Button, Dropdown |

{% hint style="info" %}
**Change image on hover** has its own guide, see [How to change image on hovering](/swatch/frequently-asked-questions/how-to-change-image-on-hovering.md).
{% endhint %}