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. Manage Clip Art Categories
  7. Manage Clip Art Images
  8. Manage Fonts
  9. 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.
  • Button Text to Start Design: Enter text for the button on the product page to allow users to start designing.
  • Button Text to Edit Design: Enter text for the button on the product page to allow users to start designing.



 

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


 

  1. Image Settings
    From here, you can configure text settings to allow users to upload images for product designing.
  • Allow to Upload Image: Select YES to allow users to upload images for product designing.
  • Allow to Add Clip Art: Select YES to allow users adding clip art image for the product personalization.

 

  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. 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 a 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 to 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 a new clip art image.
    • Image Title: Set title for the image.
    • Image: Upload a clip art image from here.
    • Image Category: Select the 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 a new font file.
    • Font Name: Add the 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 the 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 the “Add Clip Art” tab to use clip art images for product designing. Users can select the 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 the 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 the 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.

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