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
Scenario:
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 |