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.

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

Last updated