How can I show options in steps (tabs)?

If you have many options and don't want customers to scroll through one long list, you can split them into steps using the Tabs option type. Each step is shown on its own tab, with optional next / previous buttons so customers move through the configuration one step at a time.

How the tabs option works

The tabs option is added at the top level of the options;

• Every sibling top-level option automatically becomes one tab. The tab title comes from that option's label (or its name if no label is set).
• To show several options inside one tab, wrap them in a Group option. The group becomes the tab and its children render inside the tab panel. See: How can I create a layout with columns?
• Use only one tabs option per configuration. Additional tabs options are dropped when the options are rendered.

Setup

1. Add a new option and select the type Tabs.
2. Add the options that should become steps next to (not inside) the tabs option.
3. For a step that contains more than one option, add a Group option and put those options inside the group.

Settings

In the Advanced tab, enable on Tabs navigation for a wizard-style flow (next / previous), and Tabs validation if the customer must complete a step before moving on.

Many tabs: labels are cropped

Tab labels share the available width, so with many tabs the label text is cropped. Two ways to fix this:

• Reduce the number of tabs by grouping related options into fewer Group options.
• Hide the tab labels if you use the next / previous buttons and don't need the labels. You can ask the AI assistant in the app to add it for you.

Tabs stacked vertically on mobile

On mobile screens the tabs can wrap onto separate lines. To keep them on one horizontal row (scrolling horizontally when needed), add this CSS in the Design section:

@media (max-width: 480px) {
  .cl-po--tabs-nav {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .cl-po--tabs-nav .cl-po--tab-item {
    width: auto !important;
    min-width: max-content;
    max-width: 90px;
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

You can also ask the AI assistant in the app to adjust your custom CSS (for example to change the spacing between tabs).

Live preview gallery

Tabs can also be used to split a setup of a product into steps for each view, e.g. Front / Back / Left / Right.

Enable the Swicht preview view setting in the Advanced tab of the tabs option. The app will auto-select the live preview view based on the options in the current tab. For example, if the first tab contains options for the front view, the live preview will show the front view when that tab is selected.

A live example of this setup is our T-Shirt Designer Variants product in the demo store.