Custom Product Designer

Description

Here's what Custom Product Designer (CPD) can do out-of-the-box:

• Add numerous canvases to the product.
• Add custom images/photos to the design canvas.
• Add custom writings (text) to the design canvas.
• Add ready-to-use clipart (images) to the design canvas.
• Adjust text font, text alignment, font size, text opacity, shadow blur, shadow opacity, shadow x-offset, shadow y-offset, shadow colour, outline size, and colour.
• Adjust images size, opacity, shadow x-offset, shadow y-offset, shadow blur, shadow opacity, shadow colour.
• Add or delete cliparts / fonts in the library.

Module Demo

Compatibility

Custom Product Designer module is compatible with the following Magento platforms:

Installation

Installing module using zip file

• Unzip and paste the extension file into your root Magento folder.
• Connect to your server by SSH.
• Go to your Magento root folder.
• To install the extension, perform this command:

php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy

Composer installation

If you haven't installed a Aitoc module before, first you will need to add your Aitoc composer repository. Please go through the document to see how you can add the composer repository.

To install the module, you will need to run following commands:

composer require aitoc/custom-product-designer
php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy -f

• To switch the extension on/off, perform these commands:

php bin/magento module:enable Aitoc_CustomProductDesigner
php bin/magento module:disable Aitoc_CustomProductDesigner

• To update the module, use below command:

composer update aitoc/custom-product-designer

client_max_body_size 100M;

upload_max_filesize = 10M
post_max_size = 10M

Initial setup

Go to STORES - CONFIGURATION - AITOC EXTENSIONS - CUSTOM PRODUCT DESIGNER to find global settings. Note that some of them can be overwritten on the product level.

Setting	Purpose
Button Text	Customise the text of your custom design button. This text will appear on the button that opens the CPD menu for the end-user on the front-end.
Allow Distortion of Objects	If you select "Yes", the customers will be able to change the aspect ratio of their design images. This setting can be overwritten at the product level.
Is Required	If you select "Yes", the customers won't be able to place an order without applying their design to the product first. This setting can be overwritten at the product level.
Max Text Length	Set the maximum number of symbols to fit into the text design area. This setting can be overwritten at the product level.
Default font size	Set the text font size which appears on the front-end.
Hide object manipulation UI	If Yes is selected, then the section of flip, clone, move for image, and text won't appear.

Clipart categories

You can edit the existing default clipart categories or add your new ones if needed when you go to the Custom Product Designer tab:

When adding a new category, you only need to set its name. When adding new images, you need to select the category from a dropdown menu:

Font families

You can edit the existing default font families or add your new ones if needed when you go to the Custom Product Designer tab:

When adding a new font family, you need to set its name and upload applicable fonts in the .zip archive. A zip file should include properly named font files. Two options are possible:

1. "[font family]-[style].ttf", i.e. "Palatino-italic.ttf".
2. "style.ttf", i.e. "italic.ttf"

To add new fonts, you need to select the category from a dropdown menu:

Product settings

Go to CATALOG - PRODUCTS and choose the simple product you'd like to configure for custom designs.

CPD must be set up on each product individually since there is no way to clone the design canvas across different products. Each product image is unique, and the design canvas needs to be placed manually, hence this requirement. Suppose you want to enable CPD on your configurable or grouped products. In that case, you need to set it up on each simple product included in said products.

Setting	Purpose
Enable Custom Product Designer	Enable or disable the extension for this particular product.
Customise your pictures and areas	Here, you see your product pictures from the Images and Videos tab. Click on the image where you'd like to add design area(s). You'll get to the gallery page Select the image and click the blue button "Go to product page" at the bottom right corner. You'll see the new screen where you can draw your design canvas(es): Add or remove design areas (canvases), and the changes will be applied automatically. Click on the blue button "Go to gallery page" at the bottom right corner to leave this screen. From the gallery page, you can click on the X button at the top right corner and close this setting.
Price	The amount that adding a custom design to the product costs.
Is Required	You can override the global setting for this particular product. Defines whether the custom design is required to purchase a product.
Allow Distortion of Objects	You can override the global setting for this particular product. This setting defines whether the custom design images aspect ratio can be distorted.
Max Text Length	You can override the global setting for this particular product. Defines max text length for text designs. If you want to use a global setting, check the "Use Config Value" box.

Frontend view

Your customers can apply a custom design to each product that the extension has been configured for:

Print-ready source files

If your customer ordered a customized product, you would find the button "DOWNLOAD SOURCE", when you go to the Order View page.

Click on this button to download the .zip archive with print-ready source files containing custom info, .svg, and .jpeg images.

THANK YOU FOR CHOOSING AITOC EXTENSIONS!