Let customers pick font and color

A text element normally prints in the font and color you set in Text style. To let customers choose, link it to other options on the form: a Font picker for the font, and a Color picker, Color swatch, or Color dropdown for the color.

You set the link on the text option, in the Font and color part of the What customers can change card. The card says what it does: Customers pick them in another option on the form.

Once linked, each checkbox shows the name of the option customers use to pick the font or the color.

Before you start

• A Text, Textarea, or Number option with the Personalizer turned on. See Set up the Personalizer.
• Optional: the Font picker and color option already on the form. If they are not, you can add them from the card.

Steps

1. Open the text option’s Personalizer tab

   Select the text option and go to Personalizer > What customers can change > Font and color.

2. Tick Font from a Font Picker option

   What happens next depends on your form:

   Your form has	What happens
   One Font picker	It is linked straight away, and its name appears under the checkbox
   Two or more Font pickers	A list opens. Pick the one customers should use
   No Font picker	Select Add font option. A Font picker is added right after the text option and opened for you

   To change the linked Font picker later, select its name and pick another one.

3. Tick Color from a Color Picker, Swatch or Dropdown option

   It works the same way. To add a new color option, select Add color option and choose the kind of option.

   Option	Card description
   Color Picker	Any color the customer wants
   Color Swatch	A few colors as swatches
   Color Dropdown	A few colors in a dropdown

   

   Add color option inserts the new option right after the text option and opens it.

4. Fill in the new option

   If you added a new option, it opens on its Basic tab with a banner such as Customers pick the color for “Your text” here. Add the colors they can choose from. Add the fonts or colors customers can choose.

   Select Back to Your text in the banner to return to the text option.

   

   The banner reminds you which text the new option controls and takes you back to it.

5. Check the fallback notes

   Back on the text option, Text style now shows a note under Color and Font family, explaining when your own settings are used.

   

   After linking, your own Color and Font family become the starting look, used until the customer picks.

   Note	Meaning
   Shown until the customer picks a font in “Text font”.	Your Font family is used until the customer picks a font
   Shown until the customer picks a color in “Text color”.	Your Color is used until the customer picks a color
   Not used: “Text font” starts on Bungee.	The Font picker has a default value, so customers start on that font and your Font family is never shown

6. Test it in the preview

   In the Preview, type some text, then pick a few fonts and colors. The text on the product image changes with each choice. See Test like a customer.

What customers see

Customers pick a font and a color in the form, and the text on the product image changes straight away. The Font picker and color option also show the customer’s own words in the chosen font and color, because linking turns on Font preview or Color preview on those options.

How the link works

• A text element has one font source and one color source. Linking it to a new source removes it from the old one.
• One Font picker or color option can control several text elements. Link each text option to it.
• The link is the same setting as Font preview or Color preview with Select text box on the source option. Change it in either place and the other updates.
• Untick the checkbox to remove the link. The text goes back to your own font or color.
• If a linked option is hidden by conditional logic, the text uses your own Font family and Color on the storefront.

If a checkbox is ticked but no option is chosen, Save takes you to the problem instead of saving. The card shows Pick a Font Picker, or untick Font. or Pick a color option, or untick Color. If the form has no matching option yet, it shows No font option on this form yet. or No color option on this form yet. Choose or add an option, or untick the box.

Notes

• Only list fonts and colors you can produce. Every font in a Font picker is loaded for the preview, so keep the list short.
• The customer’s font and color are saved on the order with the rest of their choices.
• Give the Font picker and color option clear names on the cart page, such as Text font and Text color, so your team can read the order.

Was this helpful?

Report an issue