Custom Product Designer

Extension features

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 color, outline size and color
  • Adjust images size, opacity, shadow x-offset, shadow y-offset, shadow blur, shadow opacity, shadow color
  • Add or delete cliparts / fonts in the library

NOTE

All Aitoc extensions can be customized to fit particular business needs. If you have questions about any customization, please drop a message at support@aitoc.com

Installation

To install the extension to your Magento 2 store, please follow these steps:

  • 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
  • Reset JavaScript cache by removing all folders in pub/static:
_requirejs; adminhtml; frontend.
  • To switch the extension on/off, perform these commands:
php bin/magento module:enable Aitoc_CustomProductDesigner
php bin/magento module:disable Aitoc_CustomProductDesigner

You can activate/deactivate several Aitoc extensions at once by specifying their names separated by space in the command.

NOTE

To install the extension via composer please read this guide.

NOTE

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 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 Customize 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 text design area. This setting can be overwritten on product level.

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.
Customize 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 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.