Option Types Reference

Option Types Reference

Overview

Different option types appear as different kinds of personalization layers. This reference explains what each option type can do, and any special configuration steps.

Text Inputs (Text box, Text area)

Layer kind: Text

What it does: Customer text input appears as text on the product image.

Configuration:

  • Set Position, Size, Rotation, Arc curvature
  • Set Default text (what appears if no input yet)
  • Set Placeholder (hint in the input field)
  • Link Font family to a Font picker, Font color to a Color picker or swatch, Font size to a Number or Slider

Customer controls available: Change position, Rotate

Example: Mug engraving where customers type their name. Link it to a Font picker (customers choose font), Color swatch (customers choose text color), and Number input (customers set size).

Number Input, Slider

Layer kind: None (doesn't create a visual layer directly)

What it does: Controls a text layer's size or any other numeric sizing.

In personalization: Link to a text layer's Font size setting so customers can resize text.

Example: A "Text size" slider (0–72). Link it to an engraving text layer. Customers move the slider to resize text on the preview.

Layer kind: Image or Background swap

Image behavior:

  • Single image — All values show the same image
  • Per-value image — Each value has its own image for this layer

Configuration:

  • Set Position, Size, Rotation
  • Choose Image behavior (single or per-value)
  • Choose Image shape (Square, Circle, Oval, or Custom)
  • Set Default image (what shows if nothing selected)

Customer controls available: Change position, Change size, Rotate

Example: A "Mug color" dropdown (Red, Blue, Green). Each shows a different colored mug overlay.

Checkbox Group

Layer kind: Image

Multi-select mode: Choose Slots (1–50, filled in order) or Per value (each value has a fixed spot)

Configuration:

  • Choose Slots or Per value
  • If Slots: set slot count, position each slot
  • If Per-value: position each checkbox value
  • Choose Image behavior (single or per-value)
  • Choose Image shape (Square, Circle, Oval, Custom)
  • Set customer controls per slot/value

Customer controls available (per slot/value): Change position, Change size, Rotate

Example: "Toppings" checkboxes (Pepperoni, Mushrooms, Olives). Use Per-value mode so each always appears in the same spot.

Color Swatch, Image Swatch

Layer kind: Image

Image behavior:

  • Single image — Uses the swatch's built-in image
  • Per-value image — Each swatch value has its own image for personalization

Multi-select support: Yes for manually configured swatches (use Slots or Per value mode). Image swatch options with Image source → Shopify product variants do not support multiple selections — each value maps to one variant.

Configuration:

  • Choose Single image or Per-value image
  • Choose Image shape (Square, Circle, Oval, Custom)
  • Position and size

For Color swatch, the selected color is automatically used if you're displaying an image layer with that color. For a manual Image swatch, the swatch's uploaded images are used unless you upload different per-value images in Step 4.

Shopify-synced image swatch — When Image source is Shopify product variants, each value's preview image comes from that variant's featured image. The Preview images per value mapping table is not shown — configure the option in Options & Pricing instead. See Option Basic Settings and Configuring Options.

Customer controls available (per swatch value): Change position, Change size, Rotate

Example: "Logo color" color swatch — customers pick a color and the logo overlay changes. Pattern image swatch synced from Shopify — each variant's featured image appears on the product preview when the customer picks that swatch.

File Upload

Layer kind: Image

Multi-select support: Always (customers upload 1 or more files)

Multi-select mode: Slots (each file fills next slot) or Per value (not applicable; file contents are the values)

Configuration:

  • Choose Slots mode
  • Set slot count (e.g., 4 for up to 4 uploaded images)
  • Position each slot
  • Choose Image shape (Square, Circle, Oval, Custom)
  • Set customer controls per slot

Customer controls available (per file slot): Change position, Change size, Rotate

Drag-to-reorder: On the storefront, customers can drag files between slots to reorder them.

Example: "Photo collage" with 4 slots in a 2×2 grid. Customers upload photos; each fills the next slot. They can move each photo and resize it. Drag photos between slots to reorder.

Font Picker

Layer kind: None (doesn't create a visual layer directly)

What it does: Controls text layer font family.

In personalization: Link to a text layer's Font family setting. When customers pick a font, text on the preview updates to that font.

Example: "Engraving font" picker with options like Arial, Georgia, Script. Link to a text layer. Customers pick a font and see text change in real time.

Color Picker

Layer kind: None

What it does: Controls text layer color.

In personalization: Link to a text layer's Font color setting. When customers pick a color, text color updates.

Alternative: Link a Color swatch instead for predefined color choices.

Example: "Text color" color picker linked to engraving text layer. Customers pick any color and see text turn that color.

Dimensions

Layer kind: None (typically not used for overlays)

What it does: Captures multi-axis measurements.

In personalization: Not commonly used as a layer itself, but can provide sizing data for other calculations.

Not Supported

Product List — Cannot be used in personalization layers.

Combining Multiple Option Types

Each layer ties to one option, but you can layer multiple options:

  • Layer 1: Color swatch (background)
  • Layer 2: Text box (engraving text)
  • Layer 3: File upload (customer photo)
  • Layer 4: Font picker → linked to Layer 2 (font choice)

All stack on the base image, giving customers full customization control.

    • Related Articles

    • Option Types Reference

      Overview Appify CPO provides 30 option types that cover every kind of input your customers might need — from simple text fields to interactive color pickers and file uploads. This reference lists every type, grouped by category. To add an option, ...

    • Option Advanced Settings

      Overview Beyond the basic label, key, and required settings, each option has advanced settings that control how it looks and behaves. Some settings are shared across most option types; others are specific to a particular type. Open any option in the ...

    • Option Basic Settings

      Overview When you expand an option in Calculator Editor → Options & Pricing, the Basic settings tab is where you set its label, key, type, and most type-specific behavior (formats, limits, default values, and display content). This reference lists ...

    • Working with Options

      Overview Options are the building blocks of your calculator. Each option represents a field, choice, or display element that appears in the calculator on your storefront. This article covers how to manage options — adding, reordering, duplicating, ...

    • Setting up the Product Designer option

      Overview The Product Designer option is a launch button you add to a calculator so customers can open the full-screen editor. You add and configure it in Calculator Editor → Step 2 — Options & Pricing, the same place you add every other option. This ...