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

# ⬇️Dropdown

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

# ⬇️Dropdown

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

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

![Dropdown variant selector on a product](https://storage.crisp.chat/users/helpdesk/website/-/c/1/4/1/c14114567d7a9800/af558667-d54a-4f23-a361-b60386_1k70fjc.png)

### Function

Displays an option's values inside a **collapsed dropdown**, letting customers choose one value from a list — the most space-saving selector.

### How it works

* Values are hidden inside a **collapsed dropdown** until opened.
* Customers select **one value at a time**; the chosen value shows as the active choice.
* This is a **text-only** selector — no image or color, so there's no swatch editor to set up.

### Use when

* An option has **many values** and buttons/swatches would take too much room.
* You want to **save space** on the product or collection page.
* Options are **text-based** and don't need visual comparison.

---
## How to use Dropdown

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

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

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

Padding, font, text and background colors are configured in [Styling](/swatch/styling/styling-overview).

---
## How it looks on your store

* **Product page:**

![Dropdown variant selector on the product page](https://storage.crisp.chat/users/helpdesk/website/-/2/1/b/f/21bfc77293dabc00/02c2a362-9542-4174-abf2-b8949b_k3ryr7.png)

* **Collection page:**

![Dropdown variant selector on the collection page](https://storage.crisp.chat/users/helpdesk/website/-/5/2/5/8/5258df62e4735800/539fdec9-d840-4653-87f5-692323_fl8yae.png)

### Related

* [Button](/swatch/variant-display/button) — text buttons when there are only a few values
* [🎨 Custom swatch](/swatch/variant-display/custom-swatch) — when values need a color or image
* [Styling settings reference](/swatch/styling/styling-settings-reference) — font, padding, colors