> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://staging.chrisp.chat/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Setting up the user interface of the designer

## General Layout Options

In ****Settings > General > Display tab****  you find various options to configure the layout and look of the designer.

### Display Behaviour

The Option "Open Product Designer In..." will set the display of the product designer, when and where it appears.

|  |
| The product designer will be displayed directly inside the page. | The product designer will be opened in a lightbox, right now only the sidebar layout (see UI Composer) can be used in lightbox mode. | The product designer will be displayed in the page after the customer clicks on the "Customize" button. |

## UI Composer

****Important****  
In the UI Composer, you focus solely on configuring the user interface elements of the product designer, excluding the content for your customizable products. This content is instead managed and created within the Product Builder backend.

${frame}[](https://www.youtube.com/embed/oJLJbBc2xR8?&wmode=opaque)

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.

In the UI Composer, you focus solely on configuring the user interface elements of the product designer, excluding the content for your customizable products. This content is instead managed and created within the Product Builder backend.

## Showing Different UI Composer for Each Product

It is possible to show different UI´s for each product. You could do that by go to Individual Product Setting:

![](https://storage.crisp.chat/users/helpdesk/website/-/5/5/6/e/556e5b4c25166800/be9c5510-479c-44b1-9fdd-450576_tev63i.png)

Then on the Main User Interface option, you could select the different UI for that product:

![](https://storage.crisp.chat/users/helpdesk/website/-/f/e/2/8/fe2889299cbe1800/3c306d7f-4eb4-4ee5-b858-b46f05_fhd732.png)