Option Advanced Settings

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 calculator editor and switch to the Advanced settings tab (next to Basic settings) to access them. Type-specific fields on Basic settings are covered in Option Basic Settings.

You can also ask Chat with AI to change most of these settings by name — popup title and trigger look, quantity custom entry, button image position, swatch hover preview and carousel, selection limits, image padding, decimal places, date format, SKU fragments, or hiding an option from the storefront. A modal's Show on option label is still set here.

Quick Reference

Shared Settings

The following settings are available for most input option types (text, number, choice, picker, measurement, and file upload types).

Setting Description
Tooltip A small info icon appears next to the option label. When the customer hovers over it, the tooltip text is displayed. Use it for brief clarifications.
Help text A line of helper text displayed below the input field. Use it for formatting guidance or additional instructions.
Placeholder Gray hint text shown inside the input before the customer types. Use it to show an example value like "e.g., Happy Birthday!"
Column width Controls how wide the option is within the calculator layout. Choose from 25%, 33%, 50%, 66%, 75%, or 100%. Place options side by side by giving them widths that add up to 100%.
Setting Description
Search in dropdown When enabled, adds a search/filter bar at the top of the dropdown menu so customers can type to find choices quickly. Recommended for lists with more than 10 items.
Image width / height (px) Pixel size of optional choice images shown in the dropdown (16–150 px, default 22×22). Images keep their proportions inside this box.
Image padding (%) Space inside the image box around the picture, as a percent of the box (0–40). Use it when a choice image sits flush against the edge of its box. 0 keeps the picture edge-to-edge; 8–16 is a typical correction. The box size does not change.

Radio Button

Setting Description
Number of columns Controls how radio choices are arranged. Options: Auto (wraps naturally), 1, 2, 3, or 4 columns.

Checkbox

Setting Description
Limit selections Set a minimum and/or maximum number of checkboxes the customer can select. Leave blank for no limit.
Number of columns Arrange checkboxes in Auto, 1, 2, 3, or 4 columns.

Button

Setting Description
Multiple selections Enable to allow customers to select more than one button.
Min / Max selections When multiple selections is on, set the minimum and maximum allowed.
Number of columns Arrange buttons in Auto, 1, 2, 3, or 4 columns.
Image placement Where an optional value image appears relative to the label: Above text, Left of text, Right of text, or Below text.
Image width / height (px) Pixel size of button images (default 24×24).
Image padding (%) Space inside the image box around the picture, as a percent of the box (0–40). Use it when a button image touches the edge of its box. 0 keeps the current look; 8–16 is a typical correction. The button and image box stay the same size.
Maintain aspect ratio When enabled, height follows width so images stay proportional.
Equalize button height When enabled, every button matches the height of the tallest button so a multi-line label does not make only some buttons taller.

Color Swatch

Setting Description
Multiple selections Allow customers to pick more than one color.
Min / Max selections Set selection limits when multiple selections is enabled.
Show labels Control when the swatch label is visible: Always, Hovering (on mouse hover only), or Hide.
Number of columns Arrange swatches in Auto, 1, 2, 3, or 4 columns.
Shape Choose Circle, Square, or Rounded square.
Width / Height (px) Set the pixel dimensions of each swatch.
Image padding (%) For swatches that show a picture: space inside the swatch, around the picture, as a percent of the swatch (0–40). Solid color swatches are not affected. 0 (the default) keeps the current look; 8–16 is a typical correction when a picture sits flush against the swatch edge. The swatch stays the same size.
Maintain aspect ratio When enabled, changing width automatically adjusts height (and vice versa) to keep the swatch proportional.
Carousel pages When enabled, swatches are shown one page at a time instead of a long scrolling list. Number of columns sets columns per page (Auto uses 4 while the carousel is on).
Carousel buttons Place prev/next controls Above swatches, Below swatches, or Left and right of the grid.
Pagination dots Optional dots under the grid to show which page is active (when there is more than one page).
Rows per page How many rows of swatches appear on each page (1–20), together with columns to define page size.

Image Swatch

Image swatches share the same advanced settings as Color Swatch: Multiple selections, Min/Max, Show labels, Columns, Shape, Width/Height, Image padding, Maintain aspect ratio, and Carousel options (paging, button placement, pagination dots, rows per page).

Image padding is the quickest fix when a swatch picture looks cramped. Instead of editing the image file, set a percent (typically 8–16) and the picture is inset inside the same swatch tile. It cannot remove empty space from a picture that already has too much — for that, replace the image (AI-generated swatch icons now use consistent framing). You can also ask Chat with AI, for example "add a bit of padding around the finish swatches".

Display Types

Display types (Content, Heading, Divider, Spacer, Calculation, Modal) only support Column width. They do not have tooltip, help text, or placeholder settings since they do not collect customer input.

Some type-specific settings (for example Date format on Basic settings, or file size limits there) are not duplicated on Advanced settings — see Option Basic Settings and Option Types Reference.

Examples

  • Side-by-side layout — You set a "Width" number input to 50% column width and a "Height" number input to 50%. They appear next to each other on the same row.
  • Large swatch grid — You configure an Image Swatch with 4 columns, rounded-square shape, 60 × 60 px dimensions, and labels set to "Hovering" so the layout stays clean until the customer points at a swatch.
  • Cramped swatch pictures — Your finish photos run right to the edge of each 60 × 60 swatch. You set Image padding to 12 and every picture is inset evenly inside the same tile, without re-cropping the files.