Magento 2 Product Designer

1. Product Designer for Magento 2 User Guide 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 Product Designer for Magento 2 © Meetanshi

2. 1.Extension Installation •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: ophp bin/magento setup:upgrade oFor Magento version 2.0.x to 2.1.x - php bin/magento setup:static-content:deploy oFor Magento version 2.2.x & above - php bin/magento setup:static-content:deploy –f ophp bin/magento cache:flush Product Designer for Magento 2 © Meetanshi

3. 2.Configuration For configuring the extension, login to Magento 2, move to Stores → 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. oIf 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. → Configuration → → • •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. Product Designer for Magento 2 © Meetanshi

4. 3.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. 4.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. Product Designer for Magento 2 © Meetanshi

5. 5.Price Settings Configure price settings to charge users additionally for product designing. •Price for Designing: Select YES to charge additionally for product designing. oFree: No additional amount to charge for product designing. oFixed: Set a fixed amount to charge for each object added for product designing. oPer 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. 6.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”. Product Designer for Magento 2 © Meetanshi

6. 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. oCategory Name: Add the name for the clip art category. oCategory Status: Enable or disable clip art category from here. Product Designer for Magento 2 © Meetanshi

7. 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 → see already added and stored clip art images enlisted. → Manage Clip Art Images where you can •Add New Clip Art Image Click “Add New Image” to add new clip art image. oImage Title: Set title for the image. oImage: Upload clip art image from here. oImage Category: Select clip art category for the image you are adding. oImage Status: Enable or disable clip art image from here. Product Designer for Magento 2 © Meetanshi

8. 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 → already added and stored fonts enlisted. → Manage Fonts where you can see •Add Font Click “Add New font” to add new font file. oFont Name: Add name of the font you are adding. oFont File: Upload font file in ttf format from here. oFont Status: Enable or disable font from here. Product Designer for Magento 2 © Meetanshi

9. 10.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 Designer for Magento 2 © Meetanshi

10. •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 Designer for Magento 2 © Meetanshi

11. •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 Designer for Magento 2 © Meetanshi

12. •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. Product Designer for Magento 2 © Meetanshi

13. •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. Product Designer for Magento 2 © Meetanshi

14. •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. Product Designer for Magento 2 © Meetanshi