Setting up the user interface of the designer

The Chamevo Designer UI determines how your customers see and interact with the customization tool. You can adjust the layout, display behavior, and interface elements to match your shop’s needs.

General Layout Options

Go to:

1. Settings in Wodrpess Dashboard
2. **General **
3. Display tab
4. **Save changes **

Here you can configure the overall look and layout of the Chamevo Designer.

Display Tab Options (Quick Overview)

• Main User Interface – Set up the designer UI with the UI Composer.
• Open Product Designer In... – Choose display: Page, Lightbox, or Next Page.
• Main Bar Placement – Position the main toolbar (sidebar layout only).
• Multi-Languages – Enable labels in multiple languages (e.g., WPML).
• Unit of Measurement – Select Pixel, mm, or cm for rulers/tooltips.
• Size Tooltip – Show element size directly on the canvas.
• Customization Required – Force users to customize one/all views.
• Applied Image Filter – Apply automatic ImageMagick filter on uploads.
• Color Selection Placement – Choose where color options appear.
• Bulk Variations Placement – Define placement for bulk selector.
• 3D Preview Placement – Decide where 3D preview is shown.
• View Thumbnails Placement – Set location for view navigation thumbnails.

2. Display Behaviour

The option “Open Product Designer In…” controls when and where the Chamevo Designer appears.

• Page – The designer opens directly inside the product page.
• Lightbox – The designer opens in a popup (lightbox). Note: Only the sidebar layout (set in UI Composer) works in lightbox mode.
• Next Page Customization – After clicking the Customize button, the customer is taken to a new page that displays the designer.

3. UI Composer

The UI Composer is where you configure the user interface elements of the Chamevo Designer.

1. **Settings **In Wordpress Dashboard
2. Edit Interface **or create New One**
3. Name your** UI **
4. Edit UI

What You Can Do in UI Composer

• Choose different layout options (depending on the selected main UI theme).
• Toggle modules and actions on/off (e.g., text tool, image upload).
• Customize colors to match your branding.
• Add custom CSS for advanced styling.
• Create multiple UI layouts and assign them to different products.

4. Showing Different UIs for Each Product

You can assign different UI layouts to specific products in Chamevo.

How To:

1. Go to the product’s Individual Product Settings.

1. Under Main User Interface, select the UI layout you want to use.
2. Save changes.

This allows you to tailor the designer’s interface for each product type.

Example:

• Posters → advanced tools (layers, effects, color picker)
• Business cards → simplified UI (text + logo only)
• T-shirts → text + image upload, clean workspace

Summary

• General Layout Options: Control where the Chamevo Designer opens (Page, Lightbox, or Next Page).
• UI Composer: Customize the look and feel of the designer (modules, colors, CSS, layouts).
• Per Product UI: Assign different UIs to different products for a tailored experience.
• T-Shirt Example: Page layout, simple UI (Text + Image Upload), assigned only to T-shirt products.

Updated on: 19/11/2025