Products - Product Designer App

6 min read

The design product base is very important for design. Because all the products you want to design need to be set up based on the product base. Basically, You need to set up the design product base with print area, price… and connect to WooCommerce product.

Add product #

To start add new product base. You need select menu Products (1) -> Click Add product (2) to add new product. Also, You can click Import (3) to import product from store or Click Upload (4) if you have file product exported. Also, You can edit product (5), duplicate (6) or delete (7)

After click Add product (2) -> You are bring to add product page.

To add product. You need set Product name (1) -> Select Printing type (2) -> Select Product thumbnail (3) -> Select number of views (sides) allow customer design (4) and setup area print on next step -> After all setup completed. Click Export (5) to file save on your computer and you can upload when you want (point 4 in step 1) -> Click Save product (6) to save product.

Setup design #

1. Design info: After select views number. A screen setup area design showing. First, You need click Setup design (1) -> Click Info (2) -> Select Unit (3) you want using (supported PX, IN, CM) -> Setup colors by click button Add more product color or edit by click on color exists (4) -> Setup sizes by click button Add product size (5) or click on size exists and change name.

+) To setup color: You need setup color name (Note: This is the name of a color group. It means the color of the area you want to change. Not the name of a color. A color group contains a list of colors or choose from the color picker) (4.1) it is color position you want apply on product -> Select color type (4.2) supported color picker or custom colors (-> step 4.3 only for custom colors) -> Click Update color (4.4) for save change. You can refer product example we added to see how to setup exactly.

*) From version 1.0.7. We supported add custom color from list (If you want add/edit or change color name from list. You can edit file: root/wp-content/plugins/product-designer-app/datas/colors.json):

Add custom product color

2. Layers design: Select layers (1) to setup area design of product base

To start setup layer. You need have product images standard. Please refer here

First, You need select view you want setup (2) -> Set View name (3) -> Setup layers (4)

+) Background layers: Default we supported a background full size with canvas. If you want setup a shape background. You can upload shape image with area you don’t want change color is transparent by click Choose file (1) -> If you want back to default. Please click refresh (2) -> Select color (3) if you want apply color attribute for this background -> Move position of background if you want change (4). Also, You can add other background layer by click button Add more background layer (5)

*) From version 1.0.6: If you want setup JPG images with colors. You can use custom colors (1) and color type is Background with image (2) -> Upload your product color image correct with color (3).

Setup product color with image

+) Area design layers: Default we supported a area layer with size 900x900px. But you can set with size you want to fit size of print. To setup area layer. You need set Layer name (1) -> Set size print (2) -> Set rounded corners (3) if you need -> Move position and resize area layer to position you want to fit on product image (4) -> Select mask area layer (5) to add mask image for area design if you want (Note: mask layer only apply on area design for preview and it not include on file print). Also, You can Add more area design (6) if you want setup multiple area layer on one view for design.

+) Mask layers: Mask layer will be higher other layer and it like a befog on design. You can use mask layer for make preview like real product design. To setup mask layer. You need select image transparent with shadow of product (1) and move to position you want (3). If you don’t want setup mask. You can click remove (2). Note: mask layer only show on preview and not included on file print.

Note:
*) Primary background layer -> It is background layer. All image you upload will be background (If your image is shape with transparent it will convert to shape background). You can create multiple background layer. You can refer this product: https://youtu.be/B9PxJRlkZzc

*) Primary area layer -> It is design area. You need setup your size correct with file print you want download. File print will render based on this layer. You can create multiple area layer if you want (like chest, hand…). This layer only support for some special product you want setup shape or mask for area layer.

*) Mask layer -> It is mask for full product. It will help mockup of product like real. included shadown, highlight… You can create your mask from product image in photoshop (Make area design is transparent and keep highlight of image).

Attributes #

To setup attributes. You need click tab Attributes (1). On this tab, You can add new attribute for product (3) or setup variants (2) and manager stock, price (4, 5) for each variant.

Setup attributes, prices, stock, variants

Advanced #

To setup advanced, You need click Advanced tab (1)

+) Edit area size (2) – You can allow customer change size of area design (Default is disabled, you can enable on product have flexible size)

+) Custom can add view (3) – You can allow customer add more view design from design editor (Default is disabled, You can enable on product have flexible view like book…)

+) Customize design layout (4) – When you want enable/disable layout, function you want only for this product.

+) Resources (5) – If you want customize for show a folder artwork, template on this product. You can select folder you want (Default show root folder).

+) Min quantity can add to cart (6) – You can set a number you want for limit min quantity.

+) Add empty design to cart (7) – You can allow add product empty design to cart or not.

+) Discount (8) – To setup discount with quantity. You need select unit – percent or fixed (8.1) -> Add discount quantity (8.2) you want setup -> Setup price on quantity limit you want and remove row not setup (8.3)