User Interface Settings (NEW)

The User Interface Settings section allows you to customize the visual theme and behavior of the Zakeke Visual Product Customizer. This includes adjusting UI-specific settings, defining colors and fonts, and tailoring tool visibility and behavior to better match your brand and user experience goals

IMPORTANT

This guide applies if your account was created after March 31st, 2025, as it refers to the new Zakeke UI.

If you signed up before that date and haven’t switched to the new interface yet, please refer to this section for instructions based on the previous UI.

Summary

1. Customizing your UI
2. Guide for the legacy version (for users signed up before March 31, 2025 who haven’t switched to the new Visual Product Customizer UI)
   
   

1. Customizing your UI

You access the User Interface editor from Settings > User Interface Settings

1.1 Customization Options

Below is a breakdown of the customization options that you have:

Settings

This section includes various functional and visual settings to fine-tune the behavior and layout of the customizer.

Font

This section allows you to define the font used throughout the UI, including labels, buttons, and tooltips inside the customizer.
Choose a font that aligns with your brand identity to ensure visual consistency between your website and the customization experience.

Tool Names, Icons, and Positions

For each available tool (e.g., Text, Upload, Pre-Designed Templates, etc.), you can:

• Rename the tool label

• Change its icon

• Decide its placement in the UI toolbar

This gives you full control over how the customization tools appear and are labeled for your end users.

Colors

You can customize the look and feel of the customizer by selecting a Predefined Theme. You can change specific colors of predefined themes to create your own theme.

1.2 Theme Management: General vs Product-Specific

Zakeke allows you to define the appearance and behavior of the Visual Product Customizer through UI themes. You can choose to apply a single theme across your entire catalog or create specific themes for individual products when needed.

This is managed through two types of themes:

General Theme

The general theme is your default configuration — it defines how the customizer looks and behaves for all products unless a product-specific theme is set.
Use it when you want a consistent experience across your store and don’t need any product-specific customizations.

Product-Specific Themes

A product-specific theme allows you to override the general theme for one or more selected products.
This is especially useful when you want to apply different branding, colors, or specific UI settings for certain products.

2. Guide for the legacy version

Not using the new UI yet?

If you signed up before March 31st, 2025 and haven’t switched to the new Visual Product Customizer UI, this section of the back-office will look different, and the instructions above won’t apply to your account.

Follow the steps below to manage it using the legacy interface.

You can personalize the UI of your Zakeke customizer via Settings > User Interface Settings.

There are 3 sections on this page:

2.1 Colors and Font

Here you can modify the colors and the font for your UI.

2.2 Tools names, icons and positions

Here you can modify the labels for the customization tools displayed in your UI, their corresponding icons and position in the toolbox. Read details here.

2.3 Settings

This is a general settings section where you can customize the following functions:

• • Show price: Decide whether to display the product's price in the UI.
    • Force "point" in price: This forces the use of a period (.) instead of a comma (,) as the thousand separator in prices.
  • Show product quantity: Choose whether to display the selected product quantity on the product page. Note: Customers cannot change the quantity in the customizer; they can only do so on the product page or in the cart. If you want to allow customers to purchase multiple variations of the same customization, consider enabling the Bulk Variation Form.
  • Undo/Redo: Allows users to undo or redo actions in the customizer.
  • Show dashed edge: Displays editable elements of a pre-designed template with a dashed outline.
  • Zoom level: Set the zoom level for your product in the UI, determining how "large" the product appears when the customer enters the customizer. Additionally, you can enable Auto-Zoom to Print Area for better focus on the customization zone.
  • Select the "3D View" window size: Set a custom width and height (in pixels) for the "3D View" window.
  • Open 3D on click: Customers can open the 3D view by clicking anywhere within the 3D preview window.
  • Show design size: Display either the total size of the design or the size of each design element to the end user. Details here.
  • Select the unit of measurement: This setting defines the unit of measure that will be displayed to all users across your customizer UI.
  • Add custom text: This text will be displayed near the "Add to Cart" button, below the product information.

IMPORTANT

UI customizations are only those listed above, therefore it's NOT possible to change layout or structural aspects of the UI.