The UI Composer lets you build custom user interface layouts for the product customizer. Instead of using the default layout, you can control exactly where modules, actions, and panels appear — creating a tailored experience for your customers.

Before you start

• Chamevo is installed and your license is active.
• You have at least one product to test the layout with.

Open the UI Composer

1. Go to Chamevo → UI Composer in the WordPress admin.
2. You see the visual layout builder.

Create a new layout

1. In the UI Composer, click Add New.
2. Give the layout a name (e.g., "Minimal Layout", "Full Featured Layout").
3. The editor opens with a blank canvas where you can build your interface.

Add components

The UI Composer provides a set of building blocks you can arrange:

• Modules — the content panels customers interact with (Images, Text, Graphics, Layers, Products, etc.).
• Actions — toolbar buttons (Undo, Redo, Download, Print, Reset, Zoom, etc.).
• Containers — structural wrappers that group components together.

Drag components from the available elements panel into your layout. Arrange them in the order and position you want.

Configure component behavior

Each component in the layout can be configured:

• Set visibility for specific screen sizes (show/hide on mobile, tablet, desktop).
• Adjust positioning and sizing within the layout.
• Set the icon and label style (icon only, text only, icon + text).

Assign a layout to products

Once you create a layout in the UI Composer:

1. Go to Chamevo → Settings → General → Display.
2. In Main User Interface, select your custom layout from the dropdown.

The selected layout applies globally. To use the default layout, select Default.

Common layout patterns

Minimal layout

For products with limited customization (e.g., engraving, simple text personalization):

• Include only the Text module (or Text Layers).
• Add a single action row: Undo, Redo, Done.
• Remove panels that are not needed (Graphics, Images, Layers).

Full-featured layout