Shopify Single Color Picker Input Field Block Help Guide

The tables below explain each of the settings within this product form block

Label Displayed above the color picker field within the product form. The label should be meaningful to help the user and must be unique within the form
Default Color Select a colour which will be displayed to the user by default


Conditional display settings (applicable to conditional color picker field)

(Leave this section blank if the input field should be available to complete regardless of other options selected)

The following settings will only require completion if the color picker field is dependant on another product form field.

For example:

If the input is to capture a personalised colour, then you may only want the user to be able to provide a colour, if they have selected the 'Use my colour' option.

Label of controlling form field

Enter the name of the label for the field that will control this text input field (i.e. Use my Colour)

If this text input field is dependant on two or more controlling fields, enter each label separated by the | symbol (i.e. Use my Colour | Customise Product)

Value of the controlling form field that will enable/disable this field

Enter the value a user must select to either enable / disable this text input field (i.e. Yes)

If this text input field is dependant on two or more controlling fields, you can set values for both fields by separating the values with the | symbol (i.e. Yes | Yes)

For multiple values within a controlling field, separate each value with a comma (i.e. Yes | Apply to Border Only, Border and Main Image)

Disable color picker when value selected

Check this option if you would like the color picker field to be disabled, when the the value(s) entered above are selected by the user

(if unchecked, the reverse will happen, meaning this color picker field is only enabled when the value(s) entered above are selected by the user)

Hide color picker when disabled

Check this option if you want the color picker field to be removed from the form, until a user selects value(s) to enable the color picker field


Example conditional set up


A conditional color picker is to be displayed only if a user selects the 'Yes' option, from the 'Use my colour' variant menu.

If a user selects No, then the color picker should be disabled and hidden.

Label Select Colour
Default Color #312CD6
Label of controlling form field Use my Colour?
Value of controlling form field No
Disable the text input field when value selected Yes
Hide text input field when disabled Yes