Option Basic Settings

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 every field that appears on that tab by option type. For fields on the Advanced settings tab (tooltip, help text, placeholder, column width, layout choices, and similar), see Option Advanced Settings. For how keys work in formulas, see Working with Options and Formula Editor.

Quick Reference

Shared fields (most types)

Setting Description
Label Name shown for this option in the calculator. Use the translate control to add other languages when translations are enabled.
Hide option label on calculator Hides the title above the field on the storefront. The label is still used for cart line properties, formulas, and accessibility. Shown for input options that have a row title (not heading, content, popup, divider, spacer, calculation, price, or product customizer).
Key Unique ID for formulas and rules. Only letters, numbers, and underscores; stored in uppercase (the field reminds you: A–Z, 0–9, and _). Changing the key breaks references that used the old key. Modal options do not show Key.
Required When checked, the customer must complete this option before adding to cart. Not shown for display-only types: Content, Heading, Divider, Spacer, Calculation, Price, and Modal.
Type Option type. Changing the type replaces type-specific configuration while keeping label, key, and other shared fields where they apply.

Modal options show Label and Type on this row only (no Key and no Required).

Choice-based options

Applies to: Dropdown, Radio button, Switch, Checkbox group, Button, Color swatch, Image swatch, and Quantity (when format is Dropdown, Radio List, or Buttons).

Below the shared fields, a Values & Pricing section appears with a table where you define each choice.

Column Description
Default Pre-selects this choice when the calculator loads. Checkbox groups allow multiple defaults.
Label Customer-facing name for the choice. For Quantity choice rows this is the numeric quantity value instead.
Formula Per-choice pricing formula (same syntax as all Appify CPO formulas).
Rate Multiplied by the formula result to produce the choice price. The header shows Formula × Rate = Choice Price.
Color Color swatch only — a color picker to set the swatch color.
Image Image swatch and Button — an Upload button to attach an image (optional for Button; shown inside the button next to the label). Use Clear on Button rows to remove the image.
Picker Color swatch and Image swatch only — on the last value row, cycle Color → Image → Picker (single-select only). The storefront shows a rainbow wheel tile; customers pick any color. The label under the tile stays your merchant label (for example Custom); the cart and summary show the hex after they confirm. Product Designer color bindings use the chosen hex.
Add to cart Optional. Link a store product/variant to this choice so it is added with the custom product. See Add-on products.
  • Click Add value to add a new choice row. Drag the grip handle on any row to reorder.
  • Switch is fixed to two choices — Add value, delete, and reorder are not available.
  • When Allow custom quantity is enabled on a Quantity option, a Custom row is appended automatically. It has no Default checkbox and cannot be reordered.

Per-choice advanced settings — Click the gear icon on any choice row to access SKU fragment and Choice Token. The choice token is the stable value used in formulas and pricing-table keys (via OPT_TOKEN("KEY") and HAS()); it is auto-generated from the label for most types. Put the same tokens in a pricing table's blue column and/or green header row. Quantity choice rows (fixed numbers in Dropdown, Radio List, or Buttons) do not have this gear icon — the quantity number itself is the value key.

Image swatch — sourcing images from Shopify

An Image swatch has an Image source setting:

  • Manual (upload per choice) — You author each value and upload its thumbnail. This is the default.
  • Shopify product variants — The swatch values and thumbnails come from the linked product's single Shopify option (for example Color or Pattern), using each variant's featured image. You don't maintain a parallel list: when the product's variants change, the swatch updates automatically. Unavailable variants show as dimmed, non-selectable swatches.

Use the Shopify source when the visual choice is already a Shopify variant option and you want the calculator, Personalization preview, and Product Designer to drive images from the catalog instead of uploaded copies. Requirements and behavior:

  • The product must have exactly one Shopify option. For products with multiple options (such as Color and Size), keep size or other axes as normal calculator options — only one option can map to variant images. Manual values are ignored on the storefront while this is on.
  • Sync selection to Shopify variant (on by default) makes choosing a swatch select the matching variant, so price, cart, and the Product Designer preview update without reloading the page. Turn it off if the swatch should only drive the calculator and bindings, not the cart variant.
  • Formulas, visibility rules, personalization layers, and canvas bindings reference the Shopify option value (for example Navy) as the choice token. Manual Values & Pricing rows are hidden on the storefront while this is on; they return if you switch back to Manual.
  • Multiple selections is not available with the Shopify source — each swatch maps to one variant.

Pricing for choice-based types is driven entirely by this Values & Pricing table. They do not show the separate Pricing block described below. Font picker uses its own Font Configuration section instead (see Font picker below).

Pricing block (non-choice types)

For types that are not choice lists, Basic settings includes a Pricing section below the type-specific fields. It shows Option Price = Formula × Rate, with Formula and Rate fields for the whole option. Content, Calculation, and Price do not show this block.

Text box, Text area, Email

Setting Description
Default value Text pre-filled in the field; the customer can change it.
Minimum characters Optional minimum length.
Maximum characters Optional maximum length.

Number input, Slider

Setting Description
Initial value Starting numeric value; the customer can change it.
Minimum value Lowest allowed number.
Maximum value Highest allowed number.
Step Amount each stepper click changes the value.
Decimal places 0 for whole numbers only; higher values allow fractional input. Quantity does not show Decimal places (only Number input and Slider do).

Quantity

Setting Description
Quantity format Input (number field with steppers), Dropdown, Radio List, or Buttons (quantity cards).
Initial value / Minimum value / Maximum value / Step Shown for Input format. For Dropdown or Radio List, Initial value is omitted; defaults are chosen with the Default column in Values & Pricing. Step still applies to Input and to Custom quantity (only values on that increment). Listed preset quantities can be any number and remain selectable even when they are not a multiple of Step.
Allow custom quantity For Dropdown, Radio List, or Buttons, adds a final choice so the customer can enter their own quantity. On Buttons, that number field sits in a pill you can style (background, border, and corner radius) separately from the quantity cards.
Custom label Label for that custom-quantity choice when Allow custom quantity is on.
Label (per quantity value) Optional text next to a listed quantity, including Custom, in the calculator (below the number on button cards; after the number on radio and dropdown). Not sent to the cart. Translate it from the language icon on that row.
Show price and discount inline For Dropdown, Radio List, or Buttons, and only on the first Quantity option in the list: shows calculated product price next to each quantity (and custom) choice. Order fees are not included. A note appears if this option is not that first quantity. An in-app Help link can appear beside these controls. See Quantity inline pricing.
Inline price display When inline pricing is on: total, unit, or both. Optional Unit price suffix (ea, each) shows after the unit price. Savings use a green badge (e.g. -12% or -$5.00); dropdown options show the same in text.

Length, Area, Volume, Weight

For each measurement row (one row for single-axis types; see Dimensions for multiple):

Setting Description
Unit Unit label shown with the field (for example in, cm, lb).
Initial value Starting numeric value for that measurement.
Minimum / Maximum Allowed range.
Step Stepper increment.
Decimals Number of decimal places allowed (0 = integers only).

Dimensions

Same per-row fields as other measurement types, plus:

Setting Description
Dimension N label Customer-facing label for each axis (e.g. Length, Width).
Add dimension Adds another axis row. Rows can be removed with the row delete control or reordered by dragging the handle. You can also drop rows on the dashed drop zones between rows or at the end.

Room map

Setting Description
Unit Feet, feet and inches, inches, centimetres, or meters. Feet and inches shows a feet box and an inches box. Feet is a single feet length.
Require a closed shape Add to cart waits until every room closes. Off for an open run such as a fence.
Minimum rooms Rooms the customer starts with. They cannot delete below this. Blank is 1.
Maximum rooms Most rooms they can add. Blank is no limit. 1 hides Add room.
Allowed shapes Custom, Rectangle, and/or L-shape. One shape is used automatically and the picker is hidden.
Translations Opens the system strings (Wall, Close, Perimeter, and the rest). They are already filled in for each language.

Pricing uses INPUT("KEY", "area"), INPUT("KEY", "perimeter"), or INPUT("KEY", "rooms"). See Room map.

Date picker

Setting Description
Date format How the selected date is displayed (ISO, regional numeric styles, or long formats such as month name and weekday variants).

Time picker

Setting Description
Time format 12-hour or 24-hour display (no seconds).
Setting Description
Label Shown where the modal is triggered from the calculator layout.
Popup title Title at the top of the modal window.
Content type HTML (rendered markup) or Plain text (no formatting).
Popup Content Body of the modal (multiline field; placeholder text explains HTML or text).

Content (display)

Setting Description
Content type HTML or Plain text.
Content Text or HTML shown to the customer. Helper text under the field explains that this is what customers see. With HTML selected, Generate Content with AI is available.

Heading (display)

Setting Description
Heading level H1 through H6 (semantic heading size).
Heading text Visible heading text.

Divider (display)

Setting Description
Thickness (px) Line thickness in pixels.

Spacer (display)

Setting Description
Height (px) Vertical space in pixels.

Calculation (display)

Setting Description
Formula Expression whose result is shown read-only (same formula language as pricing). Hint text below suggests example expressions.
Display format Optional format string; use {result} where the computed value should appear (see the field’s example hint).

Price (display)

Price options hide the shared Key field (a key is still stored for visibility and internal use). Title label replaces the header Label for this type.

Setting Description
Display value Which live total to display: quantity, subtotal, quantity discount, discounts, fixed fees, after discounts, total, unit price, add-ons, or total with add-ons.
Decimal places Decimal places for money values (quantity and quantity discount ignore this).
Show was price For supported display values, show the pre-discount amount with a strikethrough when it differs from the current value.
Alignment Left, center, or right alignment for the block (on Live amount, between Display value and Decimal places).
Price label Main label beside or around the amount (for example “Total”). On the same row as Price label position. Translatable when translations are enabled.
Price label position Place the price label above, below, left, or right of the amount.
Post price label Optional second label (for example “per order”). On the same row as Post price label position. Translatable when translations are enabled.
Post price label position Place the post label relative to the amount, independently of the price label (for example price label above and post label to the right of the amount).
Style (Title / Amount / Was price) Font, size, color, bold, italic, underline, and (for was price) strike-through for the title text, the amount, and optionally the was price line.

The title is rendered inline with the amount (there is no separate row title on the storefront). Use Visibility rules to show or hide the row; there are no Value rules for this type.

Product Designer

Setting Description
Linked file upload option Optional link to a File upload option. When set, the button opens Image Edit mode for that upload; when empty, it opens Designer mode.

Button label text comes from the shared Label field. There is no Advanced settings tab for this type. Launch-button colors, radius, and width are not edited here — see Setting up the Product Designer option.

File upload

Setting Description
Accepted file types Allowed types, e.g. comma-separated extensions or patterns such as image/*.
Max file size (MB) Upper size limit per file.
Minimum files Minimum number of files required.
Maximum files Maximum number of files allowed.

Font picker

Setting Description
Font Configuration All Google fonts loads the full catalog, or Specific fonts limits the list to fonts you pick in the picker. Choosing All Google fonts clears the specific font list you had built.

Color picker

No extra type-specific fields appear under the shared Label, Key, Required, and Type row. The Pricing section (Option Price = Formula × Rate) appears below on this tab. Tooltip, help text, and column width for Color picker are on Advanced settings.

Which types use what

Every option uses the shared row as above (with Modal as the exception for Key / Required). Then:

  • Values & Pricing only (no separate Pricing block on this tab): Dropdown, Radio button, Switch, Checkbox group, Button, Color swatch, Image swatch, and Quantity when Quantity format is Dropdown, Radio List, or Buttons.
  • Pricing block on this tab (and no Values & Pricing table): Color picker, Font picker, Number input, Slider, Length, Area, Volume, Weight, Dimensions, Date picker, Time picker, File upload, Heading, Divider, Spacer, and Quantity when Quantity format is Input.
  • Neither table nor Pricing on this tab: Content, Calculation, Price, Product Designer.
  • Text box, Text area, and Email use Pricing only (no choice table).
  • Modal — Pricing on Basic settings appears when the option is open in the detailed editor (the view where Back to list appears at the top). If Modal is expanded inline in the options table, Basic settings does not include Pricing there; open the modal option in the detailed editor to set Pricing if you need it.

When your store uses translations, extra Translate controls can appear beside Label, custom quantity labels, dimension labels, dimension units, and a few system strings (such as the inline quantity savings label).

Details

Tooltip, help text, placeholder, and column width for many types live under Advanced settings, not here. Date and time pickers also expose placeholder (and related fields) on Advanced settings. See Option Advanced Settings.

The Pricing section uses the same formula language as elsewhere in the calculator; see Formula Editor for syntax and functions.

Examples

  • Sized product — You add Dimensions with labels Length and Width, units in, min/max and step set for each, then use Pricing (Formula and Rate) so area drives price.
  • Tiered quantities — You set Quantity to Radio List, define quantities 12 / 24 / 48 in Values & Pricing, turn on Show price and discount inline on your first Quantity option, and point customers to clear per-tier totals on the product page.
  • Variant color swatch — You add an Image swatch with Image source → Shopify product variants for a single-option product (for example Color). Personalization and Product Designer bindings use each variant's featured image without maintaining a duplicate value list.