Magento 2 Product Designer

Home > Magento Extension User Guides > 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 Contents

  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
  11. Product Designer Images in Order View Backend

 

  1. Extension Installation
  • For Magento Marketplace Customers
    • Find the Composer name and version of the extension in the extension’s composer.json file.
    • Login to your SSH and run:
      • composer require meetanshi/magento2-product-designer
    • Enter your authentication keys. Your public key is your username; your private key is your password.
    • Wait for Composer to finish updating your project dependencies and make sure there aren’t any errors.
    • To verify that the extension installed properly, run the command:
      • php bin/magento module:status Meetanshi_ProductDesigner
    • By default, the extension is probably disabled.
    • Enable the extension and clear static view files:
      • php bin/magento module:enable Meetanshi_ProductDesigner --clear-static-content
      • 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 area 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 edit designing.
  • Allowed Units to Define Product Size: Select the units that you want to use while defining the size in the product edit section.

  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.
  • Allowed Font Style: Select the font styles that you want the customers to choose from while designing the product with text.

  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 formats for the image upload by the users.
  • Reference Design Image Format: Select the image format of the reference design image.

  1. Price Settings
    Configure price settings to charge users additionally for product designing using any of the objects.
  • Price for Designing: Select YES to charge additionally for product designing using objects.
    • 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, and expand the tab “Product Designer Options”.”

 

  • Allow Product Designing: Select YES to allow users to design products from the frontend.
    • Select Unit to Add Product Size: Select the unit of size for the product.
    • Width: Enter the width of the product in the selected unit.
    • Height: Enter their height of the product in the selected unit.

  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 for which the personalization has been enabled.
  • 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, apply the 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 added to 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 image 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 added to the product designing fee. Users can click “Save” to store the product designing and proceed to buy the personalized product.

  • Product Designing with Advanced Properties
    The customers can also configure the advanced properties of the text, image, and clip art objects as per their requirements. Customers can configure the following advanced properties of the objects:
    • Shadow: The customers can add and customize the shadow of the text, image, and clip art object by selecting the object and configuring the shadow properties.
      • X-Dimension: Set the horizontal (X-dimension) position of the shadow.
      • Y-Dimension: Set the vertical (Y-dimension) position of the shadow.
      • Shadow Blur: Set the amount of shadow blur.
      • Opacity: Set the opacity of the shadow.
      • Shadow Color: Select the shadow color.

    • Opacity: Set the opacity of the text, image, or clip art from here.

    • Outline (Only for Text Objects): Set the outline of the text objects from here. The outline can be adjusted by configuring the size, opacity, and color.
      • Size: Select the size of text outline from here.
      • Opacity: Set the opacity of the text outline from here.
      • Outline color: Set the text outline color from here.

    • Pattern (Only for Text Objects): Customers can choose from a variety of patterns to apply to the text objects.

    • Dimension: Customers can resize the object size by manually setting the dimensions under the advanced properties.
      • Width x Height: Enter custom width and height dimensions that you want to set to the selected object.
      • Aspect Ratio: Turn it on if you want to keep the same aspect ratio.

    • Effect (Only for Text Objects): Select special effect that you want to apply to the text and configure its properties.

    • Filters (Only for Image and Clip Art Objects): Select the filters that you want to apply to the image or clip art objects. Select the object and choose from the following filters:
      • Grayscale                                               
      • Invert
      • Sharpen
      • Emboss
      • Remove White

    • Shapes (Only for Image and Clip Art Objects): Select the shapes that you want to apply to the selected image or clip art.

  • Personalized Product Options on Order Summary
    When users add personalized product to the cart after designing, it shows reference design image, object text file and image zip file.

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

 

  1. Product Designer Images in Order View Backend
    Once an order with product designer placed successfully, the admin can see product designer reference image, object text file and image zip file in Sales > Orders > Order View in the backend.

​​​​​​​

 

 

 

 

Updated:

Other Articles

and 238 more ...