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.
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.
Group settings. A group has a label and two display choices.
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.
Hover any option row and two icons appear on the right: … and a bin.
The row menu on an option.
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.
Move asks for a position number rather than making you drag.
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.
Divider is an option type that asks nothing. It draws a labelled break in the form, for when a group would be too heavy.
Divider settings, with nine ready-made styles.
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.
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.
Edit layout mode. Drag a pane, then click Done.
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.
