Setting up the user interface of the designer

Modified on Mon, 15 Mar 2021 at 04:12 PM

Main UI Theme

First of all you need to decide which Main UI Theme you want to use, currently there are two available themes:


With the "Flat" theme you can position the main bar at the top or side in the product designer. The toolbar for editing the selected element will be position below the selected element or on mobile at the bottom of the screen.

View Flat theme in action →


The "Doyle" theme is our new theme that focus on a better user experience on mobile devices. It will limit the available layout options in the UI composer and puts the main bar to left side in the product designer. The toolbar will also be displayed on left side, only on mobile devices the toolbar is positioned at the bottom of the screen.

View Doyle theme in action →

You can set the main UI theme in the Settings > General > Display tab.

UI Composer

The UI Composer will help you to create your own user interface. You can choose from different layout options (depends on the selected main UI theme - see above), toggle modules and actions for your case, customize the colors and add your CSS.

You can even create different UI layouts and assign these to your shop products. This is useful if you want to display specific modules for one product, but hide these for another product.