Presentation in the shop

as list

One row per product. The most readable option, good for many lines and for input fields.

as slider

Side by side with paging. Good when the image matters and space is short.

as gallery

A grid of tiles. The choice for looks - but without an input field.

Show image

Adds the product cover to the list view.

Click behavior

What a click on the product in the list view triggers.

• Open product info
• Select product

Reduce distances

Moves the gallery tiles closer together.

Full area marking

Hides the selection buttons in slider and gallery; the whole product becomes clickable.

When should groups collapse?

From about six groups on. Below that, opening and closing costs more clicks than it buys in clarity.

The three switches for this sit on the configurator, not on the stream - described in the chapter “Creating a configurator”.

When is a summary worth it?

As soon as scrolling makes the customer lose track of what they have already chosen. With two groups it is not needed.

With images or without?

With images when the choice is made visually. Without when the numbers decide - the list then reads faster.

Full width

The configurator sits under the image and takes the full width.

• Below the image, above the description (full width)
• Below the image, below the description (full width)

Right column

The configurator sits right next to the price, inside the buy box.

• Below the price, above the “shopping cart” button (right column)
• Below the price, below the “shopping cart” button (right column)

The right column is narrow. For a few short groups this is the most direct solution, for long journeys it is not.