Configuring Options

Configuring Options

Overview

Once you create a layer, configure how it behaves by clicking it in the Layers list and adjusting settings in the Layer Settings panel (right side). Here you set positioning, sizing, default values, what customers can do, and how the layer responds to option changes.

Details

Position and size

X, Y — Where the layer appears, measured in pixels from the top-left corner of the image.

Width, Height — Layer size in pixels.

Rotation — Angle in degrees (0–360) for image and text layers.

Arc curvature — For text layers only; curves the text along a circular arc (useful for badges or circular designs).

Use Edit on canvas to adjust these visually by dragging in the preview instead of typing numbers.

Default values

For text layers:

  • Default text — What shows in the preview before the customer enters text
  • Placeholder — Hint text shown in the input field on the storefront

For image layers:

  • Default image — If none is selected, a dashed box shows the layer's position on the preview

Customer controls

Toggle what customers can do on the storefront:

  • Change position — Customers can drag the layer
  • Change size — Customers can resize the layer (drag corners)
  • Rotate — Customers can rotate the layer

If all are disabled, the layer is static.

Image layer settings

Image behavior

  • Single image — All option values show the same image
  • Per-value image — Each value has its own image for this layer (different from the option's swatch if one exists)

Image shape

  • Square — No masking
  • Circle — Circular mask (e.g., badges)
  • Oval — Oval mask
  • Custom — Upload a mask image; transparency defines the shape (black = visible, transparent = hidden)

Shopify-synced image swatches

When the source option is an Image swatch with Image source set to Shopify product variants in Calculator Editor → Options & Pricing, each swatch value uses that variant's featured image on the personalization preview. You configure the option on Basic settings — see Option Basic Settings for the single-option requirement and Sync selection to Shopify variant.

Preview images per value — For synced swatches, this section shows an informational note instead of a mapping table. Per-value images come from the product catalog automatically; there is nothing to upload or map in Step 4. Position, size, rotation, image shape, and customer controls still apply as for other image layers.

Background swap layers — A synced swatch can drive a Background swap layer so the base product image in the preview changes when the customer picks a variant color or pattern.

Linked options (text layers only)

Link a text layer's appearance to other options:

Font family — Select a Font picker option. Text uses the customer's font choice.

Font color — Select a Color picker or Color swatch option. Text color updates with the customer's selection.

Font size — Select a Number input or Slider option. Text size changes based on the customer's number.

When you link an option, the text uses that option's initial value on page load. If no option is linked, the text appearance is fixed as you configure it.

Multi-select configuration

For options that allow multiple selections, choose:

  • Slots — Fixed number of slots (1–50), filled in order. Use this when order doesn't matter (e.g., photo galleries).
  • Per value — Each possible value gets a fixed position. Use this when specific items need specific spots (e.g., toppings always in the same place).

See Multi-Select Options for detailed configuration.

Layer label

Give your layer a descriptive name for easy tracking (e.g., "Mug Color", "Customer Text"). The default is the option name.

Examples

Text on mug — Text layer with default text "Your Name Here". Link font family to a Font picker, font color to a Color swatch, and size to a Number input. Text defaults appear on load, then update as the customer chooses font, color, and size.

Logo with transparency — Image layer with Image shape set to Circle. Upload a circular logo as the image. Set Image behavior to Per-value if you want different logos for different option selections.

Draggable photo — File upload layer with Slots mode, 4 slots. Toggle Change position and Change size on. Customers can move and resize each uploaded photo independently.

Variant color on apparel — An Image swatch uses Shopify product variants for Color. Add an image layer (or Background swap) linked to that swatch. Each choice shows the variant's featured shirt photo on the live preview without uploading per-color images in Step 4.

    • Related Articles

    • AI Bulk Generate Options

      This is different from the Build with AI wizard that appears when creating a new calculator — AI Bulk Generate adds options to an existing calculator. Overview AI Bulk Generate lets you describe the options you need in plain English, and Appify CPO ...

    • Multi-Select Options

      Overview Options that allow multiple selections—checkboxes, multi-file uploads, or multi-select swatches—can display multiple layers on the product image. You choose between Slots (filled in order) or Per value (each value has a fixed spot). Each ...

    • Binding calculator options to canvas properties

      Overview A binding maps a calculator option (Width, Height, Material, Shape, …) to a property of the editor canvas (artboard width, background color, cut-line shape, bleed, …). When the customer changes a bound option in the editor's right panel, the ...

    • Configuring Step 5 (Designer)

      Overview Step 5 — Designer appears in the calculator wizard once you've added a Product Designer option in Step 2 — Options & Pricing. (When no Product Designer option exists, this step is hidden.) Clicking it opens a full-screen workspace that ...

    • 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, ...