> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.optis.me/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # Styling settings reference 1. [OPTIS Color Swatch](/swatch) 2. [Styling](/swatch/styling) # 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. https://storage.crisp.chat/users/helpdesk/website/-/a/9/8/f/a98f8957f7b13800/07810769-a1e2-4ae9-bc05-63abce_j5bnyb.png ## 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 | || **Button without border** has no border settings. It uses a **hover glow** and an **active divider** instead โ€” see [Button without border](#button-without-border) below. ## 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 | || **Change image on hover** has its own guide, see [How to change image on hovering](https://help.optis.me/en/article/how-to-change-image-on-hovering-1pfjxj3/). ## Button without border | **Premium** ยท styled for both the **Product page** and **Collection page** A borderless variant of **Button**. Because it has no outline, it drops all border and background settings and instead uses a soft **hover glow** and an **active divider** to show state. | Setting | What it does | | ----------------------------- | ---------------------------------------------------------------------------------- | | **Font size** | Size of the option text | | **Spacing** | Gap between options | | **Alignment** | Left, Center, or Right | | **Text color / weight** | Default label color and weight | | **Hover text color / weight** | Label color and weight on hover | | **Hover glow color** | Soft glow shown around the option on hover (replaces the hover border) | | **Active text color** | Label color of the selected option | | **Active divider color** | Color of the divider marking the selected option (replaces the active border) | | **Hide extra swatches** | Same limit / carousel / "+N" options as Button (see [above](#hide-extra-swatches)) | || Unlike Button, there are **no border, border-radius, padding, or background** settings here โ€” that's what makes it borderless. ## Desktop vs. Mobile Every setting above can be given a **separate value on Mobile**. Switch to the **Mobile** tab on any display type, then tick a field to override it โ€” an unticked field keeps following its Desktop value. See [Desktop and Mobile settings](https://help.optis.me/en/article/styling-overview-1sgqoyf/) for how this works.