When a shopper personalizes one of your products, they often pick a color and a font. This guide explains how those controls look and behave on the storefront, so you know what your customers see. It is written for merchants who set up personalizable products and want to understand the shopper side.
The color and font controls live in the personalization form next to the live preview. To learn how the whole form fits together, see personalization form fields.
Picking a color
A color field shows a row of round swatches. The shopper taps one to select it. The chosen swatch gets a checkmark so it is clear which color is active. The heading above the swatches reads “Choose a color”.
You control which colors appear. You can list a fixed set of swatches, so the shopper is limited to colors you approve. You can also turn on a free color picker, which lets the shopper choose any color with their device’s native picker. Leave the picker off when you want to keep choices on-brand, or turn it on when you want full freedom.
Text fields and text area fields can show a color row too. When you allow it, a “Choose a color” swatch row appears right under the input. So a shopper typing a name can also choose the color of that text in the same place.
The moment a shopper taps a swatch, the live preview updates to show the new color. There is no separate apply step. For more on the preview, see the live preview.
Picking a font
A font field shows its options as tiles with an “Abc” sample in each one, under the field’s own label. When you attach a font choice to a text field instead of giving it a field of its own, the tiles appear under the heading Choose a font, directly below the text box they govern. Font samples may need time to load. Check the selected font in the product preview after loading; a tile alone does not establish that the production font is ready.
When a field offers more than 12 fonts, a search box appears above the tiles. The placeholder reads “Search fonts…”. The shopper types part of a font name to filter the list down. This keeps long font lists easy to scan.
You decide how fonts are presented. You can show them as tiles, which is the default, or as a dropdown for a more compact layout. Tiles work well when you want the shopper to compare styles at a glance. A dropdown saves space when the form is long.
Tap a tile to choose the font, then check the preview after it loads. If the expected typeface does not appear, resolve the loading problem before relying on that preview.
To choose which fonts a field offers and how they display, see choose and load fonts in the Design Studio.
Next: learn how every choice shows up on the product image in the live preview.