> 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.
## 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 %}
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://docs.optis.me/swatch/styling/styling-settings-reference.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.