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 “Select 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 “Select 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 each option as a tile. Every tile previews the typeface with the letters “Abc”, so the shopper sees the actual style before choosing. The heading above the tiles reads “Select a font”. Composerie loads each Google Font on the fly, so the preview is accurate even for fonts the shopper has never seen.
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.
As with colors, the chosen font shows in the preview at once. Tap a tile and the preview text switches to that typeface right away.
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.