How to show all 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.

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.

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"
}

Quick Reference

multiRowOfPillsWrapped
multiRowOfPills
multiRowOfTabs
multiSwatch
multiCarouselLarge
multiCarouselSmall
multiRowOfThumbnails

Many long labels

multiRowOfPillsWrapped

Simplest name only pill. Display automatically wraps each pill no matter how long the text labels are. Most versatile. descriptions will be ignored.

2-4 short pills

multiRowOfPills

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

Tabbed options

multiRowOfTabs

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

Multiple discs

multiSwatch

Discs designed to choose colors and textures like linen, leather, gold-foil. Uses a 1:1 image masked into a circle. the name is the label. No descriptions.

Image with title & blurb

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

Smaller 1:1 image and “name” is displayed only. Ideally this is used sans a “description” but if it is present, the selected item’s description will be displayed below across the screen.

2 to 4 images no scroll

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. descriptions of the selected items if present will display across the screen.

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.

All about product information architecture