> 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)
### 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**
* Click Add Option > Dropdown menu with Thumbnails to create a new option
**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: Choose Thumbnail => Color => Input the Hex Color Code or Select the Color> The app will display a square color thumbnail beside each option in the dropdown.
🖼️ Use Image Thumbnails: Choose Swatch Type = Image Thumbnail > Upload an image for each option.
> **Recommended size:** 50x50px or similar square dimensions to keep things neat.
>
> **Note:** You cannot use both color and image thumbnails in the same dropdown option set - choose one style for consistency.
Other features:
* Price Add-On > Create Fee – [What is it & How to Use](https://www.youtube.com/watch?v=5Bq4t0IrVEU)
* Price Upsell product > Assign to Variant – [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" %}
**Conditional Logic:** Enable 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?](https://optis-options-helpdesk.crisp.help/en/article/how-to-set-up-conditional-logics-1dgigop/)
{% 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" %}
**Quantity:** Allows customers to select multiple values from the dropdown. You can set the **Min** and **Max** for each option value according to your own requirements. This allows you to control how many units of each option value customers can select.
{% 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
