Collapsible layouts and sliders

Configure custom layouts, scrolling, and sliders to display long lists of option values in a smaller space.

Use custom layouts to control how option values are displayed. You can collapse long lists, add scrolling, or display values in a slider.

These settings are available on the Advanced tab. Turn on Enable custom layout to access them.

Enable custom layout

Off by default. When disabled, all option values are displayed in the default layout. When enabled, you can select a Layout type.

Turning on Enable custom layout reveals the Layout type choices.

Layout type

Sets how the option values are displayed.

Value	Description
Expand (default)	The values are displayed in an expanded list. Customers can collapse it.
Collapse	The values are hidden. Customers click to expand the list.
Slider	The values are displayed in a horizontal slider.

Use Collapse for optional or less frequently used options. Use Slider when an option has many visual values.

Avoid using Collapse for required options. Customers may not open the collapsed option and can miss a required selection.

Scroll type

Limits the height of the option values. Available when Layout type is Expand or Collapse.

Value	Description
Default	All values are displayed without scrolling.
By fixed height	Sets a fixed height in pixels. Displays the Scroll height setting.
By number of option values	Displays a set number of values before scrolling. Displays the Number of option values setting.

By number of option values is more reliable, because the height of a value can differ between devices and themes.

Slider settings

Available when Layout type is Slider. Availability may depend on your plan.

Setting	Default	Description
Number of rows	1	Number of rows displayed in the slider.
Swatches per row	3	Number of swatches in each row. A decimal such as 4.5 displays part of the next swatch.
Show navigation arrows	Hide	Displays previous and next arrows.
Show indicators	Hide	Displays indicators below the slider.
Slider style	Style 1	Selects the arrow style. Available when Show navigation arrows is Show.

We recommend enabling Show navigation arrows or Show indicators so customers can see that more option values are available.