> For the complete documentation index, see [llms.txt](https://docs.optis.me/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.optis.me/product-options/20-option-types/choice-list/dropdown-menu-with-thumbnails.md).
# Dropdown Menu with Thumbnails
✨ [Demo store](https://optis-product-options-variant.myshopify.com/products/dropdown-menu-with-thumbnail?variant=51025988354326)
{% hint style="info" %}
**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.md).
{% endhint %}
### 1. How Does the Dropdown menu with Thumbnails Display?
The Dropdown Menu with Thumbnails offers a visually enriched experience by displaying small thumbnail previews next to each dropdown value.
When customers click the dropdown, they will see both the option names and corresponding thumbnail images or colors, making it easier to visually recognize and choose the right product variant.
We support two types of thumbnails:
* 🎨 Color Thumbnail: Shows a solid color block next to the option value. Ideal for selecting colors (e.g., fabric colors, paint shades).
* 🖼️ Image Thumbnail: Shows a small preview image next to the option value. Great for displaying patterns, materials, product icons, flags, and more.
Example of how it appears on a product page:
### 2. How to Create a Dropdown menu with Thumbnails
**Step 1: Add a New Option**
* Open **1. Add options**, click **Add option**, tick **Dropdown with thumbnail** under **Choice list** on the **New options** tab, then click **Add options**.
**Step 2: Add information to the** Dropdown menu with Thumbnails
* Enter a label for the dropdown (e.g., Choose Color, Select Pattern, Pick Style)
* Option Values: Add the values (e.g., Pink, Blue, Marble).
* Tick on “Required field” if you want customers must choose the option before checking out.
* Tick on "Hide option label” if you don’t want to show the option name above the option values.
* Assign the Thumbnails: You now have two choices depending on what fits your product:
🎨 Use Color Thumbnails: Click the swatch button (**Edit swatch**) next to the value to open **Add option value thumbnail**, choose the **Color** tab, then enter a hex code in **Color Picker (hex)** or pick a color, and click **Done**. The app displays a square color thumbnail beside the option in the dropdown.
🖼️ Use Image Thumbnails: Click **Edit swatch** next to the value, choose 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**, and click **Done**.
> **Recommended size:** 50x50px or similar square dimensions to keep things neat.
>
> **Note:** Each value has its own thumbnail (a color or an image). For a neat look, we recommend using the same style for all values of a dropdown.
Other features:
* Price add-on > Extra fee – [What is it & How to Use](https://www.youtube.com/watch?v=5Bq4t0IrVEU)
* Price add-on > Upsell product – [What is it & How to Use](/product-options/advanced-setup/how-to-use-upsell-product-link-stock-and-price-of-shopify-variant-to-option-value.md)
* SKU – [What is it & How to Use](https://www.shopify.com/ca/retail/what-is-a-sku-number)
* Quantity – [What is it & How to Use](/product-options/advanced-setup/how-to-use-the-quantity-feature-for-options.md)
**Step 3: Advanced Settings (If Needed)**
{% hint style="success" %}
**Visibility:** Enable visibility (conditional logic) if you want the Dropdown menu with thumbnail to show/hide only when a customer selects a specific option from another field. [How to set up Conditional logic?](/product-options/advanced-setup/how-to-set-up-conditional-logics.md)
{% endhint %}
Example: Show "Choose Material" only if “Customize Design = Yes”
{% hint style="success" %}
**Help text:** Add a short description to explain the purpose of the Dropdown menu with thumbnails option. It can be displayed as Tooltips or Content (Below/Beside the option title, Below the option).
{% endhint %}
{% hint style="success" %}
**Default value:** Pre-select the Dropdown options every time the customer goes to the site. It can save time for customers by providing common or expected choices.
{% endhint %}
Example: Default to “White” if most customers choose that.
{% hint style="success" %}
**Default text on dropdown:** Display placeholder text in the dropdown before the customer makes a selection.
{% endhint %}
Example: Set a placeholder like “Choose a style…” that disappears after selection.
{% hint style="success" %}
**Search bar:** If your dropdown contains a long list of options, enable a search bar to make it easier for customers to find their preferred choice.
{% endhint %}
Example: If you have more than 10-15 options, you can enable a small search bar for better usability.
{% hint style="success" %}
**Limit selectors:** In the **Quantity** section, tick **Limit how many different option values can be selected** to let customers pick more than one value (for example, "Pick up to 3 toppings"), then set **Min selected option values** and **Max selected option values**. See [Limit min/max selectors](/product-options/faq/limit-min-max-selectors-in-checkbox-button-options-swatch.md).
{% endhint %}
{% hint style="success" %}
**Quantity:** Lets customers choose how many units of each value they want. Turn on the **Quantity** column for the values that need it, then set **Min quantity** and **Max quantity** to limit the total quantity across all values. Learn more in [How to use the Quantity feature](/product-options/advanced-setup/how-to-use-the-quantity-feature-for-options.md).
{% endhint %}
Example: Select multiple fragrances for one dropdown menu with thumbnails option
**Step 4: Save and Test**
* Click Save to apply the settings.
* Visit the product page on your store to check if the dropdown menu with thumbnails option works correctly.
### 3. Real-World Applications of Dropdown menu with thumbnails
* Fashion: Shirt color, fabric style, or button designs
* Home & Decor: Furniture finishes, wall color options
* Custom Gifts: Engraving icons, packaging patterns
* International Products: Flag thumbnails for language or country options
* Food & Beverage: Cupcake toppings, smoothie base colors
