• To configure product personalization, follow the steps below:

1. Navigate to Products and open the desired product.
2. Enable the "Is Product Personalization" checkbox on the product form.
3. Once enabled, a new tab named "Design Personalization" will become visible.
4. Open the Design Personalization tab and click "Add a Line".
5. A wizard named "Create Design Configurations" will appear.

Design Configuration Options :

• The following configuration options are available in the wizard:

1. Design Type

• Enter the name of the design area, such as: Front , Back , Left Sleeve , Right Sleeve ,

2. Design Image

• Upload an image corresponding to the selected design type. This image will be used as the design canvas for customization.

3. Restricted Area

• If customization should be limited to a specific area of the image, enable the "Has Restricted Area" checkbox.


• When enabled, you can select and define the allowed design area directly on the uploaded image.


• Users will only be able to place design elements within the configured area.

• Important Note: If the product contains variants, personalization must be configured individually for each product variant. Configuration cannot be performed on the parent product template when variants are present.

Workflow :

• After completing the configuration, a new "Customize Product" button will be displayed on the corresponding product page on the website.

• When the user clicks "Customize Product", a customization screen opens, allowing them to design the product according to their requirements.

Customization Screen

• Design Preview Area : The center section displays the design canvas.


• The displayed image is based on the selected Design Type and Product Variant.


• Users can customize the product directly on this design area.


• Left Panel Options : The following design tools are available on the left side of the screen:

• Variant : If product variants are available, users can select the desirxed variant from the variant section.

• Text : Users can add custom text by entering content into the text box and clicking "Add Text Layer".


• Available text formatting options include : Font Family, Font Size, Bold, Italic, Underline and Text Color.

• Image : Users can upload images from their local device (computer or mobile)..


• Available image editing features include : Transform Tools, Fine-Tuning Adjustments, Quick Preset Filters and Crop Functionality.

• Shapes : Users can add geometric shapes from the available shape library.


• Additional customization options include : Shape Color, Border Color, Border Thickness

• Layers : The Layers panel allows users to manage the design hierarchy.


• Users can : Reorder layers, Duplicate layers, Lock layers and Delete layers.

• Right Panel Options : The following actions are available on the right side of the screen:

1. Preview Layout Render

• This option allows users to preview the final appearance of the current design before placing an order.

2. Download Mockup Output

• Users can download the generated design mockup in the following formats: PNG, JPG and WebP

• Add to Cart : After completing the design, users can :

1. Select the required Order Quantity.
2. Click "Add Customized to Basket" to add the customized product directly to the shopping cart.

Cancel Configuration

• The "Cancel Configuration" button allows users to discard all changes and return to the product page.

• Cart Features : From the shopping cart, users can:


• Preview the customized design from the Preview button.


• Edit the existing design before checkout from the Edit Design button.

• If the same product has different designs, each design is displayed as a separate product card.

• Backend Features : In the Sales Order form, each Sales Order Line includes the following options for authorized users:

1. View Design : Allows users to view the customer's submitted design.
2. Download Design : Allows users to download the final design file for production or reference purposes.