Skip to content

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 cliparts (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

Note

All Aitoc extensions can be customised to fit particular business needs. If you have questions about any customization, please drop a message at [email protected]

Compatibility

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

Community Edition (Open Source) Enterprise Edition (Commerce) Cloud Edition
2.3.0 - 2.4.* 2.3.0 - 2.4.* 2.3.0 - 2.4.*

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 any Aitoc module before, in that case first you will need to add your Aitoc composer repository. Please go through the document to see how you can add 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

Uploading big images.

Some websites may encounter a problem with uploading big images to a design canvas. You'll see errors like "client intended to send too large a body" or "Nginx: 413 – Request Entity Too Large". To fix it, you need to update nginx.conf with the following line:

client_max_body_size 100M;

and php.ini with:

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 CPD menu for the end user on the frontend.
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 on 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 on product level.
Max Text Length Set the maximum number of symbols that can fit into the text design area. This setting can be overwritten on 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.

Warning

Don't forget to save your config settings.

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 the name for it. 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 pamily, you need to set the name for it and upload applicable fonts in .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 design canvas across different products. Each product image is unique, and the design canvas needs to be placed manually, hence this requirement. If you want to enable CPD on your configurable or grouped products, 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 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 then click the blue button "Go to product page" at the bottom right corner. You'll see the new screen appearing where you can draw your design cavas(es): Add or remove design areas (canvases), the changes will be applied automatically. To leave this screen, click on the blue button "Go to gallery page" at the bottom right corner. From the gallery page, you can click on the X button at the top right corner and close this setting.
Price How much adding a custom design to the product costs to end user.
Is Required You can override the global setting for this particular product. Defines whether 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 box "Use Config Value".

Frontend view

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

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

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

THANK YOU FOR CHOOSING AITOC EXTENSIONS!

Back to top