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

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.

This is the interface of the online product design tool.

Select sides of the product.

Add text for the product.

Click clipart 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.

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.

Add your name, phone, url with QR Code.

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

Select actions on online product design tool.

Click here to fullscreen

When finish design, click Save on action bar.

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

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

III. How to configure

III.1. Configuration

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

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.

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.

Admin will see the design of product ordered by customer.

III.4. Dashboard

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

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

III.5. Images Categories

Go to ONLINE PRODUCT DESIGN -> Image Categories.

III.5.1. Manage Images Categories

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

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

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

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

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

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

III.5.2. Add New Image Category

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

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.

III.6.1. Manage Images

You can filter the desired images with the provided filter.

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

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

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

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

If you have lots of images, you can 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.

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.

III.7.1. Manage Fonts

You can filter the desired fonts with the provided filter.

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

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

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

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

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

III.7.2. Add New Font

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

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.

III.8.1. Manage Colors

You can filter the desired colors with the provided filter.

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

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

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

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

If you have lots of colors, you can 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.

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!