Font Picker (Premium)

Written By Floris de Vries

Last updated About 3 hours ago

Premium featureThe Font Picker is available on premium plans.

The Font Picker lets customers personalise a product with their own text in a chosen font. It is a single composite field that can include up to three controls in one block:

  1. A dropdown to choose the font.

  2. A free-form text input for the personalised text.

  3. An optional color picker, options list, or both.

Each control can affect the price independently, which makes the Font Picker ideal for engraving, signage, prints and other personalised products.

Label

The Label defines the heading displayed above the font dropdown on the product page.

Example: Font

Key (unique ID)

The Key is a unique technical identifier for the field, used internally by the calculator engine.

Important rules:

  • Only lowercase letters are allowed

  • Numbers and underscores are supported

  • No spaces or special characters

Required field

When Required field is enabled, the customer must complete every visible part of the field (font, text and – if shown – color) before the product can be added to the cart.

Font options

Each option consists of a Label, the Font itself (chosen via the built-in font picker, with Google Fonts support) and a numeric Value (float) for pricing. You can:

  • Reorder options by drag and drop.

  • Mark one option as the default.

  • Add or remove options at any time.

Use the value to charge a surcharge for premium fonts, e.g. 0 for free fonts and 5 for licensed ones.

Text input

The personalised text input is always shown together with the font dropdown.

  • Text label (Text to engrave by default) – the label shown above the text input. Translatable per language.

Color (optional)

Enable Allow customer to choose color to add a color sub-control. You can configure:

  • Color label (Font color by default).

  • Mode:

    • Options – a curated list of colors. Each color has a Label, Color and Value (float) for pricing.

    • Picker – free-form color choice, with a single configurable numeric value applied whenever any color is picked, and a Default color in hex.

    • Both – the customer can switch between curated options and the free picker via two radio buttons (“Standard colors” / “Custom color”, both translatable).

Using the Font Picker in pricing

When you build your formula, the Font Picker shows up in the Form fields dropdown with several entries that you can drop straight into the formula:

  • Font option value – the price defined on the chosen font option.

  • Number of characters – useful for per-character pricing on the personalised text.

  • Font color option value – the price defined on the chosen color (only when the color sub-control is enabled).

Pick the entries by their friendly name; the calculator wires up the right values behind the scenes. You don’t need to remember any key names.

Inside Conditional pricing rules you also get access to the position (index) of the selected font and color options, so you can write rules like “when the second font option is chosen, do X”.

Translations

All visible labels of the Font Picker are translatable from the Translations tab of the calculator: the main label, the text input label, the color sub-control label, every font and color option label, and – in Both mode – the two radio button labels (“Standard colors” / “Custom color”).

💡 Tip:For per-character pricing, drop the “Number of characters” entry into your formula and multiply it by the price you want to charge per character. Combining that with a computed property like Engraving total keeps the main formula short and readable.