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

# Button

1. [OPTIS Color Swatch](/swatch)
2. [Variant Display](/swatch/variant-display)

# Button

**Available on:** Product page, Collection page

✨Demo product: [Button](https://optis-color-swatch-variant.myshopify.com/products/button?_pos=1&_psq=button&_ss=e&_v=1.0) (password: 1)

![Button variant selector on a product](https://storage.crisp.chat/users/helpdesk/website/-/f/5/f/8/f5f89bb723a99000/8bcd4794-850c-4753-8da8-a06519_13v6v6y.png)

### Function

Displays each option value as a **clickable text button**, letting customers pick a value quickly without images or a dropdown.

![](https://storage.crisp.chat/users/helpdesk/website/-/1/9/5/7/1957b7f79dc54100/9c090f7b-5ede-45e6-b6ab-d9574c_1aavoap.png)

### How it works

* Each value appears as a **button with text** (e.g. S, M, L).
* The selected button is **visually highlighted**.
* No image or color is used — this is a **text-only** selector, so there's no swatch editor to set up.

### Use when

* Options are **text-based** (e.g. Size, Material, Style).
* No image comparison is needed.
* You want a simple, compact selector that reads clearly at a glance.

---
## How to use Button

1. **Change the display type to Button → Click Save**

In **Variants display**, set the option's **Product page display** (and/or **Collection page display**) to **Button**. There's nothing else to configure per value.

![](https://storage.crisp.chat/users/helpdesk/website/-/9/8/4/a/984a7ebc11608800/4cd6debd-549b-4e7d-87ca-3830fe_1dkxaud.png)

2. **(Optional) Adjust the look in Styling**

Padding, spacing, text, border, and active/hover colors are configured in [Styling](/swatch/styling/styling-overview).

---
## Button without border

**Available on:** Product page, Collection page · **Premium feature**

**Button without border** is a separate display type that works exactly like **Button** but **drops the button outline** for a cleaner, minimal look — the label sits directly on the page background, with the selected value still highlighted.

* Same **text-only** behavior as Button — no swatch editor to set up.
* It has its own **Styling** settings (independent of Button), so you can tune padding, text, and active/hover colors for the borderless look.
* This is a **premium** display type; if it's locked, it appears with a lock icon until your plan includes it.

![](https://storage.crisp.chat/users/helpdesk/website/-/2/6/0/2/26023f4047ddd200/25bc09a6-11e1-4336-b935-3630d3_352685.png)

**How to use:** in **Variants display**, set the option's display to **Button without border** → **Save**. Adjust the look in [Styling](/swatch/styling/styling-overview).

![](https://storage.crisp.chat/users/helpdesk/website/-/b/7/1/f/b71fcbff310a1000/14761b7f-49e7-4f0b-a3ed-b136e2_1388cp5.png)

---
## How it looks on your store

* **Product page:**

![Button variant selector on the product page](https://storage.crisp.chat/users/helpdesk/website/-/6/c/8/f/6c8ffa6a81475400/b1d54344-658c-42e6-b23e-d40ed1_1phoqrt.png)

* **Collection page:**

![Button variant selector on the collection page](https://storage.crisp.chat/users/helpdesk/website/-/c/9/9/f/c99fa8ef850c0800/6fa9fe3e-2e94-4c7c-9b68-8be599_vt5n6k.png)

### Related

* [⬇️ Dropdown](/swatch/variant-display/dropdown) — better when an option has many values
* [🎨 Custom swatch](/swatch/variant-display/custom-swatch) — when values need a color or image
* [Styling settings reference](/swatch/styling/styling-settings-reference) — padding, colors, spacing