Image Dropdown
A dropdown where each option shows an image thumbnail next to its label. The customer clicks the dropdown to see the full list with images, then selects one. Unlike the Image Swatch grid, choices remain hidden until the dropdown is opened.
When to use
- Many image-based choices that would make a swatch grid too tall or wide
- Pattern/texture selection where labels alone aren’t clear enough
- Style variants (e.g., “Wrapping paper designs” with 20+ options)
- Compact UI where page space is limited but image context still helps
For fewer choices where seeing all images at once matters, use Image Swatch.
General settings
| Setting | Description |
|---|---|
| Label | Field label |
| Required | Customer must select an option |
| Help text | Guidance below the field |
| Placeholder | Blank default option text (e.g., “Select a style”) |
| Show image outside dropdown | When enabled, the currently selected option’s image is displayed as a preview above or beside the dropdown, so the customer always sees the selected image at full size without reopening the dropdown |
| Search suggestion | Makes the dropdown searchable by typing the option label |
| Don’t allow deselect | Prevents clearing back to the placeholder once a selection is made |
| Allow multiple | Enables selecting more than one option at a time |
| Min selections | Minimum number of items to select (with Allow multiple) |
| Max selections | Maximum number of items selectable simultaneously |
Values tab
| Field | Description |
|---|---|
| Label | Option name shown in the dropdown and in the order |
| Image | Thumbnail image for this option. Upload directly or enter a URL. Displayed in the dropdown list and (if “Show image outside dropdown” is on) as the preview. |
| Default | Pre-selected on page load |
| Disabled | Greyed out, unselectable |
| Price | Add-on price for this selection |
Storefront behavior
- Renders as a styled dropdown
- Each option in the open list shows a small image thumbnail to the left of the label
- The selected option’s label (and thumbnail if “show image outside” is on) is displayed in the trigger
Single selection
The selected option is recorded on the order. In the order: [Element label]: [Selected value label] — e.g. Gift Wrap Design: Polka Dots.
Multi-select (Allow multiple on)
Each checked value appears as its own line on the order. In the order, every selected option appears as a separate line:
Gift Wrap Design - Polka Dots: Yes
Gift Wrap Design - Stripes: YesUnselected values are not listed. After toggling Allow multiple on or off, open the element in the admin and click Save — the app automatically updates the behind-the-scenes setup in BigCommerce.
vs. Image Swatch
| Image Swatch | Image Dropdown | |
|---|---|---|
| Display | Visible grid of thumbnails | Collapsed dropdown |
| Best for | Fewer choices, side-by-side comparison | Many choices, compact UI |
| Searchable | No | Yes |
| Show selected image | Always visible | Optional “show image outside” setting |