Magetop Product Designer Extension Guide

Magetop Product Designer Extension Guide will give you solid understanding of how to use Extension. These Magento 2 tutorials cover back-end and front-end development.

I. Introduction

Magetop Product Designer Extension

We have everything that you would want from an online product design tool. It is a Web-to-Print tool with diverse features; using which, your customers can create customized and print-ready designs. They can browse from a huge library of images, texts, clipart and ready templates to create personalized designs on any and every device. And this is what makes it fully-responsive!

Highlight features:

  • Free custom product’s design.
  • Save customized design in my account.
  • Share customized design with my friends.
  • Free transform text or artwork from libraries.
  • Crop uploaded photo.
  • Design on different sides of product.
  • User-friendly online product designer tool.
  • Download ready designs in JPG & PNG.
  • Support QR-code (name, phone, url).
  • Support zoom in/out & full screen for design area.

II. How to use

To customize the product you want, click to Customize It button on that product page.

click to Customize It button on product page

This is the interface of the online product design tool.

Interface of OPD

Select sides of the product.

Select sides of the product

Add text for the product.

Add text for the product

Click clipart you want to add to the product.

Click clipart you want to add to the product

Click image you want to add to the product.

Click image you want to add to the product

Click shape you want to add to the product.

Click shape you want to add to the product

Upload your image and click it to add to the product.

Upload your image and click it to add to the product

Setup draw option you want, click Start Drawing to draw on product and click Stop Drawing after finish it.

Draw on product

Add your name, phone, url with QR Code.

Add your name, phone, url with QR Code

Click on an item, customer can select action as copy, delete, change color for it.

Click on an item and select the action

Select actions on online product design tool.

Select actions on online product design tool

Click here to fullscreen

Click here to fullscreen

When finish design, click Save on action bar.

Click Save on action bar
Login after click Save button

The product image will change to customer design. Product price also change according to design.

The product image will change to customer design

When you added this product to your cart, you will see the design template on Shopping Cart Page.

Design template of designed product on Shopping Cart Page

III. How to configure

III.1. Configuration

To go to Configuration, choose ONLINE PRODUCT DESIGN -> OPD Setting.

Go to Configuration
Configuration

General Settings

  • Enable Extension: Select “Yes” to enable Online Product Design Tool.
  • Min Width: Enter the number of the minimum width of design template.
  • Min Height: Enter the number of the minimum height of design template.

When complete, click Save Config button.

III.2. Import Sample Data

Go to ONLINE PRODUCT DESIGN -> Import Sample Data.

Go to Import Sample Data

Import Sample Data and Media Files.

III.3. View Design on Order Detail Page

To view design of customer, go to SALES -> Orders. Choose order admin want to see detail. Click to View Design button in Items Ordered.

Click View Design button on Order Detail Page

Admin will see the design of product ordered by customer.

View Design of Customer Design

III.4. Dashboard

To go to the Dashboard, choose ONLINE PRODUCT DESIGN -> Dashboard.

Go to Dashboard

In Online Product Design Dashboard, you can see report about Items, Top Designs, Top Orders.

Online Product Design Dashboard

III.5. Images Categories

Go to ONLINE PRODUCT DESIGN -> Image Categories.

Go to Images Categories
III.5.1. Manage Images Categories

You can filter the desired image categories with the provided filter.

Filter the desired image categories

Select one or more categories by checking the box corresponding to the category you want to select in the first column of the table.

Select one or more categories by checking the box

You can perform Mass Actions for that column such as: Select All, Unselect All, Select Visible, Unselect Visible.

Perform Mass Actions (Images Categories)

Select the action you want to perform. Click Submit button to perform that action.

Perform Action (Images Categories)

Click Edit in the last column on the table to edit the category.

Click Edit in the last column (Images Categories)

If you have lots of categories, you can choose the number of categories displayed on the table.

Choose the number of categories displayed on the table (Images Categories)
III.5.2. Add New Image Category

From the Images Categories page, click Add New Category button.

Click Add New Category

Fill out the Category Information on the form.

Fill out the Category Information on the form
  • Title: Enter the title of category.
  • Status: Select status of category:
    • Enabled.
    • Disabled.
  • Position: Enter the position of category.

When complete, click Save button.

III.6. Manage Images

Go to ONLINE PRODUCT DESIGN -> Manage Images.

Go to Manage Images
III.6.1. Manage Images

You can filter the desired images with the provided filter.

Filter the desired images

Select one or more images by checking the box corresponding to the image you want to select in the first column of the table.

Select one or more images by checking the box (Manage Images)

You can perform Mass Actions for that column such as: Select All, Unselect All, Select Visible, Unselect Visible.

Perform Mass Actions (Manage Images)

Select the action you want to perform. Click Submit button to perform that action.

Perform Action (Manage Images)

Click Edit in the Action column on the table to edit the image.

Click Edit in the Action column (Manage Images)

If you have lots of images, you can choose the number of images displayed on the table.

Choose the number of images displayed on the table
III.6.2. Add New Image

From the Manage Images page, click Add New Image button.

Click Add New Image button

Fill out the Image Information on the form.

Fill out the Image Information on the form
  • Title: Enter the title of image.
  • Status: Select status of image:
    • Enabled.
    • Disabled.
  • Image Type: Select type of image.
  • Image Categories: Select categories of image.
  • Price: Enter the price of image.
  • Upload Image: Click Choose File button and upload the image. (Allow image type: png, jpg, jpeg,svg).
  • Position: Enter the position of image.

Click Save button when complete.

III.7. Manage Fonts

To go to the Manage Fonts page, choose ONLINE PRODUCT DESIGN -> Manage Fonts.

Go to Manage Fonts
III.7.1. Manage Fonts

You can filter the desired fonts with the provided filter.

Filter the desired fonts (Manage Fonts)

Select one or more fonts by checking the box corresponding to the font you want to select in the first column of the table.

Select one or more fonts by checking the box

You can perform Mass Actions for that column such as: Select All, Unselect All, Select Visible, Unselect Visible.

Perform Mass Action (Manage Fonts)

Select the action you want to perform. Click Submit button to perform that action.

Perform Action (Manage Fonts)

Click Edit in the last column on the table to edit the font.

Click Edit in the last column (Manage Fonts)

If you have lots of fonts, you can choose the number of fonts displayed on the table.

Choose the number of fonts displayed on the table (Manage Fonts)
III.7.2. Add New Font

From the Manage Fonts page, click Add New Font button.

Click Add New Font button

Fill out the Font Information on the form.

Fill out the Font Information on the form
  • Title: Enter the title of font.
  • Status: Select status of font:
    • Enabled.
    • Disabled.
  • Upload Font: Click Choose File button and upload the font. (Allow type: ttf, otf, woff).
  • Position: Enter the position of font.

When complete, click Save button.

III.8. Manage Colors

Go to ONLINE PRODUCT DESIGN -> Manage Colors.

Go to Manage Colors
III.8.1. Manage Colors

You can filter the desired colors with the provided filter.

Filter the desired colors

Select one or more colors by checking the box corresponding to the color you want to select in the first column of the table.

Select one or more colors by checking the box (Manage Colors)

You can perform Mass Actions for that column such as: Select All, Unselect All, Select Visible, Unselect Visible.

Perform Mass Action (Manage Colors)

Select the action you want to perform. Click Submit button to perform that action.

Perform Action (Manage Colors)

Click Edit in the Action column on the table to edit the color.

Click Edit in the Action column (Manage Colors)

If you have lots of colors, you can choose the number of colors displayed on the table.

Choose the number of colors displayed on the table
III.8.2. Add New Color

From the Manage Colors page, click Add New Color button.

Click Add New Color button

Fill out the Color Information on the form.

Fill out the Color Information on the form
  • Title: Enter the title of color.
  • Color: Choose the color.
  • Status: Select status of color:
    • Enabled.
    • Disabled.
  • Position: Enter the position of color.

Click Save button when complete.

IV. Conclude

Above is our guide for Magetop Product Designer Extension. If you have any questions please boldly contact us. We will help you. Thanks for reading.

It comes to the end of the blog: Magetop Product Designer Extension Guide.

You can read more useful posts like Magetop Mega Menu Extension Guide.

Follow us for the more helpful posts!

We hope this is a useful series for you.

Thank you for reading!

4.5 2 votes
Article Rating

Aaron LX

Aaron is a passionate writer, crazy about shopping, eCommerce and trends. Besides his outstanding research skills and a positive mind, Aaron eagerly shares his experience with the readers.

Leave a Reply or put your Question here

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x