Overview
The Color Picker tool can be used for multiple options on a product! This field can be used to specify colors, patterns, or a plethora of possibilities! This field will be passed through to the cart as a line item property.
Settings
These settings can be set or altered by clicking the blue gear icon that is located on the top right of the field when selected.
- Allow Multiple Selection
- Show Conditional Logic Fields Under Option
Allow Multiple Selection
Be able to allow the user to select and pass through multiple images to the cart.
Edit Colors
In order to choose the colors, click the field to select it, and then click the 'Edit Colors' button on the field.
Add New Color
To add a new color click the 'Add New Color' button in the top right of the dialog box. A new color field will populate in the field grouping. Set the name and click the color icon to set the color. You can use either the color picker or set the colors hex code (#0099ff) manually. Click out of the color picker when finished editing the color.
- Click Edit Colors on the field
- Click Add new colors
- Set Color Name. Click blue check to save.
- Adjust Colors. Click out of color picker when done editing.
- Save dialog box.
Edit Color
To edit an existing color, click the color icon, and make the needed changes. Be sure to save the dialog box when finished.
Reorder
If you want to reorder the colors in the field and how they appear on the front end, click the grey box and drag the image to the proper position.
Color Name
To set the colors name either click the red text 'Click to edit color name' or the name of the current color. This name will be visible to the end user on the stores front end. Be sure to click the blue check when done editing the name of the color.
Remove Color
If conditional logic depends on some of the values and you are editing them, you will have to update your conditional logic.
** When making edits/additions/changes. Click save to commit these changes on dialog boxes and save the form for these changes to be made live on your site.**
Front-end