Image dropdown

A dropdown with a picture beside every entry, and an option to show the chosen image outside the closed field.

A Dropdown where each entry includes an image. Use it when the choice is visual but the list is too long for a swatch grid, such as 30 print designs, 20 fabric patterns, or a catalog of frame styles.

What customers see

A field showing the current choice. Opening it lists every entry with its picture, and the list is searchable if you turn search on. With Image display outside dropdown on, the selected picture is also displayed beside the closed field.

Each entry carries a picture, so a long visual list stays compact.

Basic

Setting	What it does
Label / Name	Customer-facing text, and the name on the order.
Required field	Blocks add to cart until something is chosen.
Hidden label	Hides the label.
Option values	The choices, each with an Image column. Upload a picture, or reuse one of the product's own images. See Working with option values.
Allow multiple	Lets the customer choose several.
Min selections / Max selections	Shown once Allow multiple is on.
Placeholder	The unselected prompt.
Help text	Guidance that stays visible.
Default value	Preselects a value.
Conditional logic	Show or hide based on other choices.

This type has no Swatch style setting, because it always displays images.

Advanced

Setting	What it does
Add-on quantity / Quantity	How the add-on scales with quantity.
Search suggestion	Adds a search box to the list.
Not allow deselect	Stops the customer clearing their choice. Single-select only.
Image display outside dropdown	Shows the chosen image beside the closed field, so the choice stays visible without reopening the list. Off by default.
Out of stock options	How sold-out entries look.
Help text position	Where the help text sits.
HTML class / Column width	Styling hook and field width.

Image display outside dropdown

Turn this on when customers need to keep seeing their selected image while they complete the rest of the form, for example a print design, fabric, or frame.

Without it, the closed dropdown displays only the value name, and the customer has to reopen the dropdown to see the image again.

Personalizer

Supported as an image layer. When a value is selected, its image can be displayed on the product photo. The settings are image shape, background mode, size, position, rotation, crop area, and customer controls.

Customers can then select a design from the dropdown and see it on the product in the Personalizer preview. See Image layers.

Add-on pricing

Prices are set on each value, so different designs can cost different amounts. Linking values to add-on products gives each design its own inventory, which Out of stock options then uses. See Add-on pricing.

Image dropdown or Image swatch?

	Image dropdown	Image swatch
Space used	One line, closed	A grid, always open
Names shown	Beside each picture	On hover
Search	Yes	No
Slider layout	No	Yes
Picture size	Small thumbnails	Adjustable, plus a zoom tooltip
Best for	Twenty or more designs	Under twenty, where the picture is the whole decision

If customers need to compare pictures side by side, use Image swatch.

Examples

Thirty print designs

Setting	Value
Label / Name	Print design
Option values	Thirty entries, each with its artwork image
Search suggestion	On
Image display outside dropdown	On
Required field	On
Personalizer	On, so the design appears on the product photo

Fabric swatches with different prices

Standard fabrics are free, and premium ones are priced through New product so each has its own inventory.

Frame styles

Values with a photograph of each frame style, Image display outside dropdown on, and Not allow deselect on.

Notes

• Available on the Advanced plan.

• Works in Shopify POS.

• This type is always image-based. There is no text-only or color mode.

• Every value needs an image. Without one, the entry is blank.

• Use images with consistent sizing, cropping, and lighting, so the list looks consistent.

• Image dropdown does not support slider or collapsible layouts.