Magento 2 Product Designer

Magento 2 Product Designer offers the web to print feature. Let the buyer personalize the products using text, images, clip art, etc. and offer rich shopping experience.

Table of Content

  1. Extension Installation Guide
  2. Configuration
  3. Text Settings
  4. Image Settings
  5. Price Settings
  6. Enable Designing for the Product
  7. Manage Clip Art Categories
  8. Manage Clip Art Images
  9. Manage Fonts
  10. Product Designer in Frontend

 

  1. Extension Installation
  • For Magento Marketplace Customers
  • Create a folder structure in Magento root as app/code/Meetanshi/ProductDesigner
  • Download and extract the zip folder and upload our extension files to the app/code/Meetanshi/ProductDesigner via FTP.
  • Login to your SSH and run below commands step by step:
  • php bin/magento setup:upgrade
  • For Magento version 2.0.x to 2.1.x - php bin/magento setup:static-content:deploy
  • For Magento version 2.2.x & above - php bin/magento setup:static-content:deploy –f
  • php bin/magento cache:flush
  • For Meetanshi Customers
  • Extract the zip folder and upload our extension to the root of your Magento 2 directory via FTP.
  • Login to your SSH and run below commands step by step:
  • php bin/magento setup:upgrade
  • For Magento version 2.0.x to 2.1.x - php bin/magento setup:static-content:deploy
  • For Magento version 2.2.x & above - php bin/magento setup:static-content:deploy –f
  • php bin/magento cache:flush

 

  1. Configuration
    For configuring the extension, login to Magento 2, move to Stores à Configuration à Meetanshi à Product Designer where you can find various settings to enable the extension.
  • Product Designer: Enable the Product Designer extension from here.
  • Fix Product Design Area: Set YES to fix the design area of the product so that the users will only be able to design in the area defined by the admin.
    • If you have set YES to fix the product design are from the above option, move to Catalog > Products > Edit a product with the product personalization enabled, go to Image And Videos and click on the already uploaded image and set the design area.

  • Button Text to Start Design: Enter text for button on the product page to allow users start designing.
  • Button Text to Edit Design: Enter text for button on the product page to allow users start designing.


 

  1. Text Settings
    From here, you can configure text settings to allow users add text for the product designing.
  • Allow to Add Text: Select YES to allow users adding text for the product personalization.

 

  1. Image Settings
    Configure the image settings to allow users upload images for the product designing.
  • Allow to Upload Image: Select YES to allow users upload images for product designing.
  • Allow to Add Clip Art: Select YES to allow users adding clip art image for the product personalization.
  • Max. Image Upload Size: Specify the maximum image file size uploaded by the users for product designing.
  • Max. Number of Images Allowed: Enter the maximum number of images users can upload for product designing.
  • Allowed Image Format: Select allowed image formats uploaded by the users.
  • Printable Design Image Width: Enter the width of printable design image.
  • Printable Design Image Height: Enter the height of printable design image.
  • Printable Design Image Format: Select the image format of the printable design image.

 

 

  1. Price Settings
    Configure price settings to charge users additionally for product designing.
  • Price for Designing: Select YES to charge additionally for product designing.
    • Free: No additional amount to charge for product designing.
    • Fixed: Set a fixed amount to charge for each object added for product designing.
    • Per Object: Set amount per object to charge additionally for product designing.
  • Price Per Text Object: Set price for each text object added for product designing.
  • Price Per Image Object: Set price for each image object added for product designing.
  • Price Per Clip Art Object: Set price for each clip art object added for product designing.​​​​​​​

 

  1. Enable Designing for the Product
    The extension comes with the product attribute to enable designing for the products. Go to Catalog à Products, edit a product for which you want to enable the designing, expand the tab “Product Designer Options” and set “Yes” to “Allow Product Designing”.

  1. Manage Clip Art Categories
    Product Designer extension allows the admin to add clip art categories to manage clip art images. Go to Product Designer à Manage Clip Art Categories where you can see already added and stored clip art categories enlisted.

  • Add New Clip Art Category
    Click “Add New Category” to add new clip art category.
  • Category Name: Add the name for the clip art category.
  • Category Status: Enable or disable clip art category from here.

​​​​​​​

 

  1. Manage Clip Art Images
    Product Designer extension allows the admin to add clip art images to allow users use them in product personalization. Go to Product Designer  à Manage Clip Art Images where you can see already added and stored clip art images enlisted.

 

  • Add New Clip Art Image
    Click “Add New Image” to add new clip art image.
  • Image Title: Set title for the image.
  • Image: Upload clip art image from here.
  • Image Category: Select clip art category for the image you are adding.
  • Image Status: Enable or disable clip art image from here.

​​​​​​​

 

  1. Manage Fonts
    Product Designer extension allows the admin to add fonts for users to use while using text object for product personalization. Go to Product Designer à Manage Fonts where you can see already added and stored fonts enlisted.

  • Add Font
    Click “Add New font” to add new font file.
  • Font Name: Add name of the font you are adding.
  • Font File: Upload font file in ttf format from here.
  • Font Status: Enable or disable font from here.

​​​​​​​

 

 

  1. Product Designer in Frontend
    Once configured, the users can see product designing button on the product page.
  • Start Design Button
    On click of “Start Design” button, users can start product designing.

​​​​​​​

  • Product Designing using Text Object
    On click of “Start Designing” button from the product page, users can see 3 tabs. “Add Text” tab is opened by default and users can enter text, set font style, increase or decrease the font size, set text color, make the text bold, italics, underline etc. for text designing to look good on their product after printing. If a particular price is set for text object designing, it will be shown as the product designing fee.

​​​​​​​

 

  • Product Designing using Image Object
    Click “Upload Image” tab to upload image for product designing. After the image is added, users can move it on the product to set at the best position to make printable product look good. If a particular price is set for the image object designing, it will be shown as the product designing fee.

     

 

  • Product Designing using Clip Art
    Click “Add Clip Art” tab to use clip art images for product designing. Users can select clip art category from the dropdown to find related clip art images. After the category is selected, users can click on it to add to the product and set at the best position to make printable product look good. If a particular price is set for the clip art object designing, it will be shown as the product designing fee. Users can click “Save” to store the product designing and proceed to buy the personalized product.


 

  • Personalized Product Options on the Cart Page
    When users add personalized product to the cart after designing, it shows reference design and printable design images.

 

  • Reference Design Image
    On Click of reference design image, users can see the image on a separate page on how the product will look after designing.

​​​​​​​

 

 

  • Printable Design Image
    On Click of printable design image, users can see the image on a separate page on what objects will be printed on the product.

​​​​​​​​​​​​​​