Magento 2 Product Designer

1
Product Designer for Magento 2 User Guide

• Table of Contents
• Extension Installation Guide
• Configuration
• Text Settings
• Image Settings
• Price Settings
• Enable Designing for the Product
• Manage Clip Art Categories
• Manage Clip Art Images
• Manage Fonts
• Product Designer in Frontend
• Product Designer Images in Order View Backend

2

• Extension Installation
• For Magento Marketplace Customers
• Find the Composer name and version of the
  extension in the extensions composer.json file.
• Login to your SSH and run
• composer require meetanshi/magento2-product-design
  er
• 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
• arent any errors.
• To verify that the extension installed properly,
  run the command
• php bin/magento modulestatus Meetanshi_ProductDes
  igner
• By default, the extension is probably disabled.
• Enable the extension and clear static view files
• php bin/magento moduleenable Meetanshi_ProductDes
  igner --clear-static-content
• php bin/magento setupupgrade
• For Magento version 2.0.x to 2.1.x - php
  bin/magento setupstatic-contentdeploy
• For Magento version 2.2.x above - php
  bin/magento setupstatic-contentdeploy f
• php bin/magento cacheflush
• For Meetanshi Customers

3

• 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.
• o If you have set YES to fix the product design
  area from the above option, move to Catalog
• gt Products gt 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.

3. Text Settings From here, you can
configure text settings to allow users add text
for the product designing.
4

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

5

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

6

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

7

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

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

9
8. 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.

10
9. 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.

11

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

12

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

13

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

14

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

15

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

16
o 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.

17
o 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.

18
o 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

19
o 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.

20

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

11. 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 gt Orders gt Order View in
the backend.