Pick product attributes within a single screen

This feature is rolled for to white-label customers in early 2026.  This enables you to zip through production selection in a single screen if you have many attribute options that are easily understood, such that you can simply use a short text label to describe them.  Naturally, some product options may require a larger image, so this system caters for that with 3 displayStyles which support images.

Multiselect GIF

How to enable this for a product category?

Naturally, when you enabled this mode, it means all the products within that ENTIRE category will use this UX, instead of the more traditional wizard driven multi-screen step through flow.

To make a category display multiple subCategory attributes in a single screen, first add the filter to the Category.

subcat-multiflow

The 6 displayStyles you can define for each step

In other tutorials on how to write display styles JSON, you are already familiar with something like this below.  There are 6 displayStyles which are part of the family to define display styles within the subCatFlow>multi mode.  All of them are prefixed with multi.

{"type":"Choose a theme...","name":"Mother's Day","thumbnail":"","description":"","order":100,"tag":"","displayStyle":"multiRowOfPillsWrapped"}
Many long labels
multiRowOfPillsWrapped

multiRowOfPillsWrapped

Simplest Name only pill.  Display automatically wraps each pill no matter how long the text labels are.  Most versatile.

3 or 4 pills, short labels
multiRowOfPills

multiRowOfPills

This is a constrained version of PillsWrapped. Fits all into a single row and concatenates the labels if it runs over.

2 or 3 options in tabs
multiRowOfTabs

multiRowOfTabs

Tabbed design useful as the first root property.  Only use this if there are no more than 3 with short labels.

Image with title & blurb
multiCarouselLarge

multiCarouselLarge

For features where a larger image and short description needed

Image=8:5 and collapses into a 1:1 square thumbnail upon selection

Image and Title only
multiCarouselSmall

multiCarouselSmall

Smaller 1:1 image and “Name” is displayed only.  Descriptions are ignored.

2 to 4 images no scroll
multiRowOfThumbnails

multiRowOfThumbnails

This should be used only if there are no more than 4 (ideally 3) options as it will NOT scroll but rather squeeze all options into a single row.  Image may be 1:1 or even upto 2:5

How to set up your product selection flow

Similar to what is typically called the Information-Architecture or Product Hierarchy on a website. Learn how to use the multiple subcats available to set up products on your white-label app.