Dropdown Menu with Thumbnails
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.
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.
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.
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.
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.
- 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.
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.
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).
- SKU - a SKU for that value. Advanced plan and above. See How does Product Option SKU works?.
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.
Default text on dropdown
Show a placeholder such as "Choose a style…" before the customer picks a value.
Search bar
If the dropdown has many values (10-15 or more), enable a search bar so customers can find their choice faster.
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.
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.
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?.
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.
Related guides
- Dropdown menu
- Manage add-on (additional fee for option)
- How to Use the "Quantity" Feature for Options
- How to set up Conditional logics?
Updated on: 25/09/2026
Thank you!