Color dropdown

A dropdown with a color chip beside every entry, for long color lists that would take too much space as a swatch grid.

A Dropdown where each entry has a color chip. Use it for a long color list. Forty colors take up most of the page as a swatch grid, but only one line as a dropdown.

What customers see

A field showing the current color and its name. Opening it lists every color with a chip beside its name, and the list is searchable if you turn search on.

Each entry carries a color chip beside its name.

Basic

Setting	What it does
Label / Name	Customer-facing text, and the name on the order.
Required field	Blocks add to cart until a color is chosen.
Hidden label	Hides the label.
Swatch style	Color or Image. Starts on Color.
Option values	The colors, with a Color column for each. Single or split two-color chips. See Working with option values.
Allow multiple	Lets the customer choose several colors.
Min selections / Max selections	Shown once Allow multiple is on.
Placeholder	The unselected prompt.
Help text	Guidance that stays visible.
Default value	Preselects a color.
Conditional logic	Show or hide based on other choices.

Advanced

Setting	What it does
Add-on quantity / Quantity	How the add-on scales with quantity.
Search suggestion	Adds a search box. Worth turning on past about fifteen colors.
Not allow deselect	Stops the customer clearing their choice. Single-select only.
Color preview	Previews the chosen color applied to a text option.
Select text box	Which text option the preview applies to. Appears once Color preview is on.
Out of stock options	How sold-out colors look.
Help text position	Where the help text sits.
HTML class / Column width	Styling hook and field width.

Color preview

Turn on Color preview and set Select text box to a Text option in the same option set. The customer's text is then displayed in the color they selected, without using the Personalizer.

Use it when the color applies to text, such as thread color, ink color, or foil color. See Swatch style and previews.

Personalizer

Supported as an image layer. Each color value can have an image that is displayed on the product photo when it is selected. The settings are image shape, background mode, size, position, rotation, crop area, and customer controls.

Use this when you have a photograph of the product in each color. See Image layers.

Add-on pricing

Prices are set on each color value, so a premium finish can cost more than a standard one, and each value can use a different mode.

Out of stock options works only when values are linked to add-on products. Sold-out colors can then be blurred or hidden automatically. See Stock and inventory.

Color dropdown or Color swatch?

	Color dropdown	Color swatch
Space used	One line, closed	A grid, always open
Color names visible	Yes, beside each chip	On hover, as a tooltip
Search	Yes	No
Slider layout	No	Yes
Best for	Twenty or more colors, or named colors	Under twenty, where seeing them all matters

If your colors have meaningful names, such as Antique brass or Sage, a dropdown is better because it shows the name and color chip together. If the color itself is all the customer needs to see, a swatch grid is a better choice.

Examples

Forty thread colors

Setting	Value
Label / Name	Thread color
Swatch style	Color
Search suggestion	On
Not allow deselect	On
Required field	On
Color preview	On, pointing at Embroidered name

Two-tone finishes

Each value is set to a two-color split chip, so Black and gold displays both colors.

Colors with different prices

Standard colors are free, and metallic colors are priced using New product so you can track their inventory.

Notes

• Available on the Advanced plan.

• Works in Shopify POS.

• There is no slider or collapsible layout, because a dropdown is already compact.

• Color chips are set on each value in the values table rather than globally.

• Colors displayed on screen may not exactly match the physical product. If color accuracy matters, mention this in the help text.