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, color picker shape or hidden hex field, 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.
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%. |
| Space above (px) | Extra gap between this option and the one above it (0–80 px). Leave empty to keep default calculator spacing. Available on input types and on display types such as Content, Heading, Divider, Calculation, Modal, and Product Designer. |
| Show step number | Adds a numbered circle before the option title. Numbers count other visible options that also have this on. Options without it keep the same step and do not increment. This is not the multi-step pages setting under Optional Features. Circle colors, size, and weight live in Style tokens (--calc-label-step-*). |
| 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 in the open dropdown list (16–150 px, default 22×22). Images keep their proportions inside this box. The selected value in the closed dropdown stays a compact fixed size so every dropdown is the same height. |
| 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. |
| Large preview on hover | When a dropdown has value images, show a larger popover of the picture when the customer hovers the selected value or a choice in the open list. Same preview used for swatches. Off by default. |
| Preview width (px) | Width of that hover popover image when Large preview on hover is on (default 200). |
| Setting | Description |
|---|---|
| Number of columns | Controls how radio choices are arranged. Options: Auto (wraps naturally), 1, 2, 3, 4, 5, or 6 columns. |
| 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, 4, 5, or 6 columns. |
| 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, 4, 5, or 6 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. |
| 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, 4, 5, or 6 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. |
| Large preview on hover | Show a larger popover of the swatch (color or image) when the customer hovers a tile. Off by default. |
| Preview width (px) | Width of that hover popover when Large preview on hover is on (default 200). |
| 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. |
| Setting | Description |
|---|---|
| Swatch shape | Shape of the clickable color chip: Circle, Square, or Rounded square. Same choices as color and image swatches. |
| Hide hex code | When on, the hex text field is hidden. Customers click the swatch to open the color picker. |
| Initial color | Color shown when the calculator first loads. |
A drop shadow on that swatch is a style token (--calc-colorfield-shadow), not an option setting — same idea as button and swatch shadows.
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, Large preview on hover, 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".
On Advanced settings, display types support Column width and Space above (px) so you can place blocks side by side and add extra gap before a row. Spacer only has column width (height is on Basic settings). Price uses Advanced settings for column width; typography is on Basic settings.
Content and Calculation also include Tooltip and Help text on Advanced settings. Modal includes popup width, inline image, and label styling there as well. Heading and Divider do not use tooltip or help text.
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.