Articles on: 18 Option Types

Create a Dropdown Menu with Thumbnails

The Dropdown Menu with Thumbnails in OPTIS Product Options 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:

A product with a dropdown menu to select scent

Step 1: Add a New Option

Go to your OPIS Product Options settings.

Click Add Option > Dropdown Menu with Thumbnail.

Step 2: Set Up the Basic Info

Label: Enter a name like Choose Color, Select Pattern, Pick Style.

Option Values: Add the values (e.g., Blue, Red, Wood, Marble).

Step 3: Assign the Thumbnails

You now have two choices depending on what fits your product:

🟦 Option A – Use Color Thumbnails

Choose Color Swatch Type = Color Thumbnail

Input the Hex Color Code (e.g., #000000 for black, #FF0000 for red)

The app will display a circular or square color dot beside each option in the dropdown.

🖼️ Option B – 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 Add-On > Assign to Variant – What is it & How to Use

SKU – What is it & How to Use

Quantity – What is it & How to Use

4. Advanced Settings (Optional)

Conditional Logic: Show the dropdown only when another field has a specific value.
Example: Show "Choose Material" only if “Customize Design = Yes”

Helptext: Add a helpful note or tip below the dropdown.
Example: “Preview each color by clicking the dropdown.”

Default Value: Pre-select one of the options by default.
Example: Default to “White” if most customers choose that.

Default Text on Dropdown: Set a placeholder like “Choose a style…” that disappears after selection.

Enable Search Bar: If you have more than 10-15 options, you can enable a small search bar for better usability.

5. Save and Preview

Click Save to apply changes.

Visit the product page to test and verify that:

Thumbnails appear correctly

Dropdown functions as expected

Selections update correctly on cart page

6. Use Cases for Dropdowns 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

✅ Pro Tips

Keep thumbnail image sizes consistent for better UI.

Use descriptive option labels to complement the thumbnails.

Stick to one thumbnail type per dropdown for clarity.

Updated on: 28/04/2025

Was this article helpful?

Thank you!