Design & Layout

By default the configurator layout consists of three main elements.

Section	Description
Header	The header can be different from the regular layout
2D / 3D Viewer Canvas	Visual representation of the configured product
Options	Options that can be chosen in configuration
Navigation	Navigation in tabs and via next / prev buttons
Footer	The regular footer is replaced with a configurator footer, which by default holds the “add to cart”, “load design”, and “save design” buttons, the price display

Desktop layout.

Example of the product configurator on desktop

Example of the product configurator on mobile

Elements:

• Logo

• Navigation Menu

• Company Selection

• Saved Designs

• User login

• Cart

The header is fixed in the top part and remains visible.

2D / 3D Viewer Canvas

The 2D / 3D viewer functionality varies per render implementation.

Options

All possible options and variations are described in 04.04 Selects and options

Navigation

Navigation on the right side is done via tab icons. In the bottom of the options panel there are previous and next buttons, depending on if there’s a previous or next step available.

Footer

The footer consists of “add to cart”, “load design”, and “save design” buttons and the price display.