Dropdown Menu with Thumbnails
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 “This option is required” if you want customers must choose the option before checking out.
Tick on "Hide option name” 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 Color Swatch Type = Color Thumbnail > Input the Hex Color Code > 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
Price Upsell product > Assign to Variant – What is it & How to Use
SKU – What is it & How to Use
Quantity – What is it & How to Use
Step 3: Advanced Settings (If Needed)
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?
Example: Show "Choose Material" only if “Customize Design = Yes”
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).
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.
Example: Default to “White” if most customers choose that.
Default text on dropdown: Display placeholder text in the dropdown before the customer makes a selection.
Example: Set a placeholder like “Choose a style…” that disappears after selection.
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.
Example: If you have more than 10-15 options, you can enable a small search bar for better usability.
Multiple selection: Allows customers to select multiple values from the dropdown.
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
Last updated