You can lay out a Shopify product options form without touching code. In Appify Custom Product Options, every option has an Advanced settings tab. It controls column width, swatch grids, hover previews, searchable dropdowns, helper text and step numbers. Set them once per option, and the form stops looking like a long stack of fields.
This guide is for a store that already has a calculator working. The pricing is done. Now the form needs to be easy to read and quick to fill in. Every setting below is on the option's Advanced settings tab, next to Basic settings.
Put fields side by side with column width
Most input options have a Column width setting. It decides how much of its row the option takes.
- Percent: 25, 33, 50, 66, 75 or 100. Use matching percents on one row, such as 50 and 50, or 33, 33 and 33.
- Fill leftover: the option splits whatever space is left with other Fill leftover options.
- Fixed: a set pixel width, or Fit content so the option is only as wide as what is inside it.
On one row, use Percent widths together.
Width and height on one row
Set a Width number input to 50 and a Height number input to 50. They sit next to each other instead of one under the other.
An icon between two fields
Say a flooring calculator has Area and Boxes fields with a swap icon between them. Set both fields to Fill leftover. Set the icon, a content option, to Fixed with Fit content. The icon stays narrow, and the two fields stay the same width.
Display blocks follow the same logic. Content, Heading, Divider, Calculation, Modal, Product Designer and Price blocks all take a column width. On Content, Heading, Divider, Calculation, Modal and Product Designer blocks, Space above (px) adds a gap of 0 to 80 px before a row where the default spacing is too tight. To put a live total and a price per piece side by side, see how to show a live total, unit price and crossed-out was price.
Guide the shopper with text and numbers
Three settings carry most of the guidance, and each one has a different job:
| Setting | What the shopper sees | Use it for |
|---|---|---|
| Tooltip | A small info icon by the label. Hover shows the text. | A short clarification, such as how to measure. |
| Help text | A line of text under the field. | Format guidance or extra instructions. |
| Placeholder | Gray hint text inside the empty field. | An example value, like "e.g., Happy Birthday!" |
Content blocks take help text but no tooltip, because a block with no label has nowhere to put the icon. Calculation blocks take both.
Show step number adds a numbered circle before the option title. The numbers count only the visible options that also have it switched on. An option without it keeps the same step and does not add one. This is separate from the multi-step pages setting. If your form does use pages, see our guide on what to look for in a multi-step product configurator app.
Make long dropdowns searchable
A dropdown with 40 fabrics or 60 paper stocks is slow to scroll. Turn on Search in dropdown and a filter bar appears at the top of the open menu. Shoppers type a few letters and the list narrows. The help doc recommends it for lists of more than 10 items.
If your choices carry images, three more dropdown settings matter:
- Image width / height (px): the size of choice images in the open list, 16 to 150 px, with 22 by 22 as the default. The closed dropdown stays compact, so every dropdown has the same height.
- Image padding (%): space inside the image box, 0 to 40. Use it when a picture sits flush against the edge.
- Large preview on hover: a bigger popover of the picture when the shopper points at the selected value or a choice in the list. Set its size with Preview width (px), which defaults to 200.
Build a swatch grid that stays tidy
Color swatches and image swatches share the same layout settings. A finish or material picker with 30 tiles is where they earn their place.
| Setting | Choices |
|---|---|
| Shape | Circle, Square or Rounded square |
| Width / Height (px) | Tile size, with Maintain aspect ratio to keep tiles in proportion |
| Number of columns | Auto, or 1 to 6 |
| Show labels | Always, Hovering or Hide |
| Large preview on hover | A larger popover of the color or image, sized by Preview width (px) |
| Image padding (%) | 0 to 40 for swatches that show a picture. Solid colors are not affected. |
A tidy example: 4 columns, Rounded square, 60 by 60 px tiles, and labels set to Hovering. The grid stays clean until a shopper points at a tile, and the hover preview shows the finish up close.
Fix cramped swatch pictures without editing files
If finish photos run right to the edge of each tile, set Image padding to 12. Every picture is inset evenly inside the same tile. The help doc gives 8 to 16 as a typical correction. You can also tell Chat with AI something like "add a bit of padding around the finish swatches."
Page through big swatch sets
Turn on Carousel pages and swatches show one page at a time instead of a long scrolling list. Then set:
- Carousel buttons: above, below, or left and right of the grid.
- Pagination dots: optional dots that show the active page.
- Rows per page: 1 to 20, which together with columns sets the page size.
Arrange radio buttons, checkboxes and buttons
Radio choices, checkboxes and buttons each have Number of columns: Auto, or 1 to 6. A short list of sizes reads better in 3 columns than in a tall single stack.
- Checkboxes: Limit selections sets a minimum, a maximum or both.
- Buttons: turn on Multiple selections, then set Min and Max. Image placement puts a value image above, left of, right of or below the text. Equalize button height makes every button match the tallest, so one two-line label does not make a ragged row.
Ask Chat with AI instead of hunting for the setting
You do not have to remember which tab holds what. Chat with AI can change most of these settings by name: swatch hover preview and carousel, selection limits, image padding, and more. Ask for "two columns, rounded square swatches, labels on hover" and review the result in the calculator. Our guide to AI-assisted setup for Shopify product options covers what else it can do.
A form that is easy to read gets filled in. If you are still sorting out what each option type does, start with what product options are on Shopify.
FAQ
Can I put two options on the same row?
Yes. Give both a matching Percent column width, such as 50 and 50.
When should I turn on Search in dropdown?
For long lists. The help doc recommends it for dropdowns with more than 10 items.
Can shoppers see a bigger version of a swatch?
Yes. Turn on Large preview on hover for color swatches, image swatches or dropdowns with value images. It is off by default.
How do I fix swatch pictures that touch the tile edge?
Raise Image padding. A value between 8 and 16 is typical. The tile stays the same size.
Is Show step number the same as multi-step pages?
No. It only adds a numbered circle before the option title. Multi-step pages are a separate setting under Optional Features.
A form your shoppers finish, not scroll.
Whatever you sell, however you price it · The last options app you'll shop for