> ## 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 Menu with Thumbnails

1. [OPTIS Product Options, Variant](/product-options)
2. [20 Option Types](/product-options/20-option-types)
3. [Choice list](/product-options/20-option-types/choice-list)

# Dropdown Menu with Thumbnails

A **Dropdown with thumbnail** is a dropdown menu that shows a small color block or image next to each value, so customers can recognize choices visually.

✨ [Demo store](https://optis-product-options-variant.myshopify.com/products/dropdown-menu-with-thumbnail?variant=51025988354326)

**Plan:** **Dropdown with thumbnail** is available on the **Platinum** plan and above. On the Free plan you can still try it on one live product with a Premium option set. See [Plans and feature availability](/product-options/getting-started/plans-and-features).

![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/6/b/b36b4c01853f6000/e56100e2-7eba-481c-bd1b-89e4b9_z37u1r.png)

## When to use a Dropdown with thumbnail

* **Fashion and decor** - shirt colors, fabric styles, or wall paint colors.
* **Custom gifts** - engraving icons or packaging patterns.
* **International products** - flag thumbnails for language or country options.

## How to add a Dropdown with thumbnail option
### Step 1: Add the option

Open **1. Add options**, click **Add option**, tick **Dropdown with thumbnail** under **Choice list** on the **New options** tab, then click **Add options**.

![](https://storage.crisp.chat/users/helpdesk/website/-/4/b/7/b/4b7bb16623224800/86143446-abaa-418b-a7b0-fc5d81_1cxnzci.png)

### Step 2: Name it, add values and assign thumbnails

Enter the **Label on product** (e.g., "Choose Color") and add the **Option values** (e.g., Pink, Blue, Marble). Tick **Required field** if customers must choose before checking out, or **Hide option label** to hide the label.

![](https://storage.crisp.chat/users/helpdesk/website/-/3/4/a/1/34a1638597737200/ad39c60f-f148-4dc3-83e1-a75951_hy2olq.png)

Each value needs its own thumbnail - a color or an image:

* **Color thumbnail** - click the swatch button (**Edit swatch**) next to the value, open the **Color** tab, enter a hex code in **Color Picker (hex)** or pick a color, then click **Done**.

![](https://storage.crisp.chat/users/helpdesk/website/-/d/a/9/c/da9c2ac01b81c000/ccb85043-30dc-49c0-b9ff-0984d9_a4sbq6.png)

* **Image thumbnail** - click **Edit swatch**, open the **Image** tab, then use **Add images** to upload an image (JPG, JPEG, PNG, SVG or GIF, up to 5 MB) or select one from **OPTIS files** or **Shopify files**, then click **Done**. Recommended size: 50x50px or similar square dimensions.

![](https://storage.crisp.chat/users/helpdesk/website/-/e/0/d/7/e0d735298b4ce800/f5122482-b377-46c5-b372-ea752a_vizvv0.png)

For a neat look, use the same thumbnail style (color or image) for every value of one dropdown.

### Step 3: Save and test

Click **Save**, then open the product page on your store to check that the dropdown with thumbnails works correctly.

![](https://storage.crisp.chat/users/helpdesk/website/-/2/d/e/a/2deae4c54a1f7800/e49464df-6ef9-4ab7-9e8c-7ba263_2969fi.png)

## Option settings

Set only what you need - all of the settings below are optional. In the **Option values** table, click **Columns** to show **Add-on**, **Help text**, **SKU** or **Quantity** for each value:

* **Add-on** - charge extra for a value (**Extra fee**, Advanced plan and above) or link it to a Shopify variant (**Upsell product**, Platinum and above). See [Manage add-on (additional fee for option)](/product-options/advanced-setup/manage-add-on-additional-fee-for-option).
* **SKU** - a SKU for that value. Advanced plan and above. See [How does Product Option SKU works?](/product-options/customize-design/how-does-product-option-sku-works).

![](https://storage.crisp.chat/users/helpdesk/website/-/1/8/0/6/1806aa2c675cb200/25a682e6-9153-45ce-8bab-552e95_1yz53g7.png)

### Default value

Toggle **Default** for the value that should be pre-selected when the customer opens the product page (e.g., default to "White" if most customers choose that). Available on the **Advanced** plan and above.

![](https://docs.optis.me/~gitbook/image?url=https%3A%2F%2F1821185975-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FRFiuDpHWm2HwzxPH4lfM%252Fuploads%252FAUmpVMB9yMluL2dsxjO5%252F8.png%3Falt%3Dmedia%26token%3D5193ebba-9342-4d59-b848-780b071c95f4&width=768&dpr=3&quality=100&sign=8a0bf112b0be3344852bc612bbabf198&sv=3)

### Default text on dropdown

Show a placeholder such as "Choose a style…" before the customer picks a value.

![](https://docs.optis.me/~gitbook/image?url=https%3A%2F%2F1821185975-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FRFiuDpHWm2HwzxPH4lfM%252Fuploads%252FEWFpIkOSvCtwxEyGr9dS%252F10.png%3Falt%3Dmedia%26token%3D94085a8f-7331-4bda-8a68-3b9258ac1767&width=768&dpr=3&quality=100&sign=30c3dbcbe211bc177df6f249eae22980&sv=3)

### Search bar

If the dropdown has many values (10-15 or more), enable a search bar so customers can find their choice faster.

![](https://docs.optis.me/~gitbook/image?url=https%3A%2F%2F1821185975-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FRFiuDpHWm2HwzxPH4lfM%252Fuploads%252FQfwzyoJuROFymvV2zw3u%252F11.png%3Falt%3Dmedia%26token%3Dd626b970-8c38-4774-a2a2-1868fee8103f&width=768&dpr=3&quality=100&sign=c793874852f601349df6b05b0c2a0e41&sv=3)

### Quantity

Turn on the **Quantity** column so customers can pick several values (for example, several fragrances) and set how many of each, using **Min quantity** and **Max quantity**. Available on the **Platinum** plan and above. See [How to Use the "Quantity" Feature for Options](/product-options/advanced-setup/how-to-use-the-quantity-feature-for-options).

![](https://docs.optis.me/~gitbook/image?url=https%3A%2F%2F1821185975-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FRFiuDpHWm2HwzxPH4lfM%252Fuploads%252FdU4vmT697Hzw2PJUTw0g%252F12.png%3Falt%3Dmedia%26token%3D7c1647cc-be91-4bc0-997b-62a9062960a7&width=768&dpr=3&quality=100&sign=53e6a53bbb4ab8068142d1e33e22cf93&sv=3)

### Help text

Add a short note explaining what to choose, shown as a **Tooltip**, **Below the option title**, **Beside the option title**, or **Below the option**. Available on the **Platinum** plan and above.

![](https://docs.optis.me/~gitbook/image?url=https%3A%2F%2F1821185975-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FRFiuDpHWm2HwzxPH4lfM%252Fuploads%252FTTd0Z02tyJJgBCQqIle2%252F9.png%3Falt%3Dmedia%26token%3D3f4c410a-1b59-48ea-b53a-d606ebed96fd&width=768&dpr=3&quality=100&sign=acf10114cb9a3fe653310d8cfd264b75&sv=3)

### Show or hide with Visibility (conditional logic)

Show or hide the option based on another option - for example, only show "Choose Material" when the customer answers "Yes" to "Customize Design". Available on the **Advanced** plan and above. See [How to set up Conditional logics?](/product-options/advanced-setup/how-to-set-up-conditional-logics).

![](https://docs.optis.me/~gitbook/image?url=https%3A%2F%2F1821185975-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FRFiuDpHWm2HwzxPH4lfM%252Fuploads%252FX8hyy4OURDswkNjcrE5A%252Fimage.png%3Falt%3Dmedia%26token%3Db868244e-e735-44f2-9353-e562e87b1060&width=768&dpr=3&quality=100&sign=3d3e619f7077c777fd87af619f7a9d24&sv=3)

### Option width

In the **Display** tab, set **Option width** (**25%**, **33%**, **50%**, **67%**, **75%** or **100%**) to control how much horizontal space the Dropdown with thumbnail takes.

![](https://docs.optis.me/~gitbook/image?url=https%3A%2F%2F1821185975-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FRFiuDpHWm2HwzxPH4lfM%252Fuploads%252F9U3dtq1LmntoeGF2jy72%252Fimage.png%3Falt%3Dmedia%26token%3De61299b1-7351-4bef-bf24-46d11ececa95&width=768&dpr=3&quality=100&sign=f1517f5490c908ff19d7191b767afe45&sv=3)

## Related guides

* [Dropdown menu](/product-options/20-option-types/choice-list/dropdown-menu)
* [Manage add-on (additional fee for option)](/product-options/advanced-setup/manage-add-on-additional-fee-for-option)
* [How to Use the "Quantity" Feature for Options](/product-options/advanced-setup/how-to-use-the-quantity-feature-for-options)
* [How to set up Conditional logics?](/product-options/advanced-setup/how-to-set-up-conditional-logics)