Color picker

Let the customer choose any color, with an optional live preview of their text in that color.

A field that opens a color picker, so the customer can choose any color instead of selecting from a list you define.

Use it only when you can produce any color, such as custom paint, custom thread, or printed ink. If you offer a fixed range of colors, use Color swatch instead. A picker allows customers to request colors you cannot supply.

What customers see

A field showing the currently selected color. Selecting it opens a picker, where the customer chooses a color visually or enters a value.

The field shows the selected color, and opens a picker when the customer selects it.

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.
Price	The add-on charge for choosing a custom color.
Placeholder	Text in the field before a color is chosen.
Help text	Guidance that stays visible.
Default value	A starting 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.
Color preview	Shows a live preview of the chosen color applied to text.
Select text box	Which text option in this option set the color preview applies to. Only appears once Color preview is on.
Help text position	Where the help text sits.
HTML class / Column width	Styling hook and field width.

Color preview and Select text box

Use these two settings together to preview the customer's text in the color they selected, without using the Personalizer.

1

Add a text option first

The color is applied to a text option, so add a Text or Textarea option first.

2

Turn on Color preview

On the Color picker's Advanced tab.

3

Point Select text box at the text option

Choose the text option you just added.

4

Test it

Enter text in the text field and change the color. The preview updates.

To draw the text on the product photo instead of previewing it beside the field, apply the Personalizer to the text option. Color picker has no Personalizer settings of its own.

Add-on pricing

The price applies to the whole option, so it is a charge for selecting a custom color. This is common when a custom color costs more to produce than a standard one.

All three modes are available. Typically:

• Fixed amount for a flat custom color surcharge with no inventory to track.

• New product to track how many custom color orders you receive.

See Add-on pricing.

Examples

Custom paint color with a surcharge

Setting	Value
Label / Name	Custom paint color
Price	New product $15.00, mode One time charge — a once-per-order fee cannot use Fixed amount
Help text	We match to the nearest available paint. Allow 5 extra days.
Conditional logic	Show when Finish is Custom color

This combines a swatch list of standard colors with a picker that is displayed only when the customer selects "custom".

Thread color for embroidery, previewed

Color picker with Color preview on, Select text box pointing at the Embroidered name text option.

Ink color on a printed card

Default value set to your most common ink color and Required field off, so most customers keep the default.

Notes

• Available on paid plans.

• Works in Shopify POS.

• This type has no Personalizer settings. Apply the Personalizer to the text option instead.

• The selected color is stored in the order as a color value. Your team needs to match it to your own color system.

• The picker cannot be restricted to a subset of colors. To limit the choices, use Color swatch.

Colors differ between screens, so the color a customer selects on their device will not match your product exactly. State this in help text, for example "We match to the nearest available shade."