> ## Documentation Index
> Fetch the complete documentation index at: https://docs.customei.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Groups and layout
> Break a long list of questions into sections, move options around, and add a divider between them.
An option set with thirty questions in one column is the fastest way to lose a shopper. Groups, dividers and a little reordering turn the same set into something that reads like a short form.
## Group a few options together
Click the folder icon in the option list toolbar to add a group. A group is an option in the list like any other, except it holds the ones you put inside it.
| Setting | What it does |
| ----------------- | --------------------------------------------------------- |
| **Group label** | The heading the shopper reads |
| **Display mode** | How the group behaves on the product page |
| **Default state** | Whether it starts open or closed, on the collapsible mode |
Three display modes:
| Mode | On the product page |
| --------------- | --------------------------------------------------------------- |
| **Collapsible** | A heading the shopper clicks to open and close |
| **Flat** | Just a heading with the options under it, always open |
| **Tabs** | The group's sub-groups become tabs the shopper switches between |
For a product with two people on it, meaning two names, two hairstyles and two outfits, make one group per person and set them to **Collapsible**, with the first one **Expanded**. The shopper finishes person one, closes it, and the form suddenly looks short.
A group has no **Template connections** card, because a group does not change the artwork. It only arranges the options that do.
## Putting options into a group
Hover any option row and two icons appear on the right: **...** and a bin.
| Action | What it does |
| --------------------- | ------------------------------------------------------------ |
| **Duplicate** | Copies the option, with its settings, choices and conditions |
| **Move** | Sends it to a numbered position in the list |
| **Move to group** | Drops it inside one of your groups |
| **Remove from group** | Appears once the option is in a group, and takes it back out |
You can also drag a row by the handle on its left. For a big jump, **Move** is easier than dragging past twenty rows.
On a **group** row the menu is different: **Add sub-group** (a group inside this group, which is what the Tabs mode needs), **Ungroup** (dissolve the group and leave its options in place), and **Duplicate**.
The order of options in the list is the order your shopper meets them. Put the choices that change the artwork the most near the top. Shoppers who see the design react to their first answer will keep going.
## A divider between sections
**Divider** is an option type that asks nothing. It draws a labelled break in the form, for when a group would be too heavy.
Pick a **Style**, type the wording in **Divider label**, and set an **Accent colour** to match your shop. **Icon** puts a small symbol beside the label, and choosing *custom* there lets you upload your own. An animated GIF works and keeps its movement.
The **Line style** and **Line thickness** settings only apply to the styles that actually draw a rule. Under **More settings** you can also set the label colour and force the label to uppercase.
## Rearrange the three panes
The option-set screen has three panes: the option list, the option being edited, and the preview. **Edit layout** at the top right lets you drag them into the order you like.
Click **Done** to keep the arrangement, or **Reset to default** to put it back. This only changes what you see in the admin. Your shopper's product page is unaffected.
## Where to next
Hide options until the shopper's earlier answers make them relevant.
See the form the way a shopper will.