Create a color input field: make a color changeable

In the template editor, a color input field lets users change a color in your design in the design generator, for example the fill of a shape or the color of a text. You decide whether they may pick any color or only colors from your palette.

This takes three steps:

1. Create the color input field in the template editor.
2. Configure the input field in the Input Fields view.
3. Test the input field in the design generator.

Create the color input field

Rectangles and circles start without a stroke. If the stroke should be changeable, turn it on first with Stroke Color under Appearance in the properties panel.

1. Click the square with the plus in the toolbar at the top. This is the Create Input Field tool.
   
2. Click the shape or text whose color users should change. You can click it on the canvas or in the layers panel. A popup opens.
   No popup opens?

   If the element sits inside a group or mask, a click on the canvas selects the whole group. Groups have no popup. Locked elements can't be clicked on the canvas either. Press Esc and start again at step 1. Then click the element itself in the layers panel.

3. Depending on the element, go on in the popup like this:
   • For a shape (rectangle, circle or path): Choose on the left of the popup how users may change the color.
     • Fill Color: users pick any color for the fill.
     • Stroke Color: users pick any color for the stroke.
     • Select Fill Color: users pick the fill from your color palette.
     • Select Stroke Color: users pick the stroke from your color palette.
     The shape is red now instead of a gradient?

     Fill Color and Select Fill Color replace a gradient with a single color. Undo the step (Cmd + Z, on Windows Ctrl + Z). Connect the colors of the single gradient stops with Select Custom Property instead, as described in step 4 for texts.

     
     
   • For a text: Click Select Custom Property on the left of the popup. For texts, the popup doesn't suggest a color. You connect the color in the properties panel in the next step.
     
4. Depending on the element, go on like this:
   • For a shape: Click Add Field.
   • For a text: Click the color value next to Color under Fill Color in the Appearance section of the properties panel. The Create Field popup opens. Choose Color for any color or Color Selection for your color palette.
     
   
   The color input field is now created and connected to the color.

Configure the input field

The Input Fields view shows all input fields of your template, and you configure them there.

1. Click Input Fields at the top right of the toolbar. The Input Fields view opens.
   
2. Look at the bottom of the list for your new input field. It is called Pick Color (for Color) or Select Color (for Color Selection) and already shows the color that was in the element. That is the default value.
3. Click the input field's name and type a heading that says which color users change, for example "Background color".
4. Depending on the field type, go on like this:
   • For Color:
     • There is nothing more to set. Go on with step 11.
   • For Color Selection:
     • Click the gear on the right of the input field. Your palette is under Color options: the previous color, white and black.
   
   
5. Click Add option. A new color appears. It is a copy of the last color.
6. Click the new color and pick your color. Repeat steps 5 and 6 for every color of your palette.
7. Click the trash can in the row of every color you don't need. One color always has to stay.
8. Choose under Type how users see the palette: Dropdown, Button Grid or Carousel.
9. Choose the size of the swatches under Size: Small, Medium or Large.
10. Click Done. The settings close.
11. Click × at the top right to close the Input Fields view.

Test the input field in the design generator

The design generator is the page where users fill in your template and export their design. You can test the input field there safely: whatever you select doesn't change your template for good.

1. When you are done with your input fields, click Share at the top right and then Publish Template Link. If you have published the template before, the menu item is called Open Template Campaign. A popup with the share settings opens. Your template can now be reached through a link.
2. Click Copy URL and open the link in a new browser tab. The design generator opens.
3. Choose a different color in your input field. Check that the design changes the way you want.