> For the complete documentation index, see [llms.txt](https://awecommerce.gitbook.io/awe-color-swatches/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://awecommerce.gitbook.io/awe-color-swatches/getting-started/design/dropdown.md).

# Dropdown

Width, height and colors of the dropdown option picker.

The **Dropdown** design is used when an option shows as a drop-down menu.

To get started:\
**Design** → **Dropdown** → **Custom**. Pick the **Product page** or **Collection page** tab.

***

## 1. **Size**

<figure><img src="https://1584372634-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQtSZ9l9Z5zXeyqTQcvze%2Fuploads%2Fgit-blob-a2cd8a309255e7058bb2d976db65eed7f79dc25c%2Fdesign-dropdown-01-size.png?alt=media" alt="Dropdown size with the full-width toggle"><figcaption></figcaption></figure>

<table data-header-hidden><thead><tr><th width="200"></th><th></th></tr></thead><tbody><tr><td><strong>Width size</strong></td><td><ul><li>80–320 px (default 140). The dropdown never grows wider than its space.</li><li>Click the <strong>Full width</strong> icon next to the label to stretch it to the full width instead.</li></ul></td></tr><tr><td><strong>Height size</strong></td><td><ul><li>28–80 px (default 36).</li></ul></td></tr><tr><td><strong>Text size</strong></td><td><ul><li>10–24 px (default 13).</li></ul></td></tr><tr><td><strong>Corner radius</strong></td><td><ul><li>0–40 px (default 8).</li></ul></td></tr><tr><td><strong>Border thickness</strong></td><td><ul><li>0–8 px (default 1).</li></ul></td></tr></tbody></table>

## 2. **Layout**

* **Alignment**: **Left** (default), **Center** or **Right**.
* **Spacing**: 0–40 px (default 8).

## 3. **Color**

**Border color**, **Background color** and **Text color**, each with **Default**, **Hover** and **Selected** states.

<figure><img src="https://1584372634-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQtSZ9l9Z5zXeyqTQcvze%2Fuploads%2Fgit-blob-26ea676b096b3211808c8d95e40290e04d42891e%2Fdesign-dropdown-02-color.png?alt=media" alt="Dropdown colors"><figcaption></figcaption></figure>

## 4. **Good to know**

* The dropdown shows text only, with a check mark next to the selected value. Before anything is picked it reads **Select**.
* Sold-out values show **Out of stock** or a strike line, depending on your **Sold-out variant display** in [Settings](/awe-color-swatches/getting-started/settings.md).
* The dropdown is already compact, so it has no Compact display section.

***

💬 If you have any related questions, please contact us via **Live chat** in the app.