Overview #

The Product Base Design is the foundation of all customizable products in Product Designer App.
Every product that customers can design must be created from a product base. A Product Base allows you to:

• Define print areas
• Configure printing prices
• Set up colors, sizes, and views (sides)
• Connect the design with a WooCommerce product

Without a Product Base, the design editor cannot work.

Add a New Product Base #

Open Product Management #

Go to: WordPress Admin Dashboard → PDA → Products

Available actions:

1. Products – Product base list (1)
2. Add product – Create a new product base (2)
3. Import – Import product from store (3)
4. Upload – Upload an exported product file (4)
5. Edit – Edit existing product (5)
6. Duplicate – Duplicate product (6)
7. Delete – Delete product (7)

Click Add product to continue.

Basic Product Information #

Configure the following fields:

1. Product name (1)
2. Printing type (required) (2)
3. Product thumbnail (3)
4. Number of views (sides) customers can design (4)
5. Export – Save product configuration to a file (5)
6. Save product – Save the product base (6)

After selecting the number of views, you can start setting up the design areas.

Setup Design #

Click Setup design to configure design settings (1).

1. Design Info #

Go to: Setup design → Info (2)

Configure:

• Unit: PX / IN / CM (3)
• Product colors: (4)
  • Add new color groups
  • Edit existing color groups
• Product sizes: (5)
  • Add or rename size options

*) Color Group Settings (4)

Each color group represents a changeable area on the product, not a single color. For each color group:

• Color name – Name of the color group (4.1) → You can set by Color position name (Area applied on product. Ex: Body, Chest…)
• Color type: (4.2)
  • Color picker
  • Custom colors
• Click Update color to save (4.4)

📌 From version 1.0.7, you can add custom colors by editing:
wp-content/plugins/product-designer-app/datas/colors.json

2. Layers Design (1) #

Select the Layers tab to configure design layers. Before starting, make sure you have standard product images prepared. Steps:

• Select the view (front, back, etc.) (2)
• Set the View name (3)
• Configure layers for that view (4)

*) Background Layers

Default behavior: One full-size background layer is applied

You can:

1. Upload a shape background (transparent areas stay unchanged) (1)
2. Refresh to restore default background (2)
3. Apply product color to background (3)
4. Move background position (4)
5. Add multiple background layers (5)

📌 From version 1.0.6:
You can use JPG images for product colors by selecting: (2)

• Custom colors
• Background with image (3)

*) Area Design Layers (Print Areas)

Area design layers define where customers can design and how print files are generated. Configure:

1. Layer name (1)
2. Print size (important for print output) (2)
3. Rounded corners (optional) (3)
4. Move and resize the area to fit product image (4)
5. Mask area layer (preview only, not included in print file) (5)
6. Add multiple area layers if needed (chest, sleeve, back…) (6)

📌 Print files are rendered based on area design layers.

*) Mask Layers

Mask layers are used to create realistic previews with shadows and highlights. Steps:

1. Upload a transparent mask image (1)
2. Remove the mask if not needed (2)
3. Position the mask correctly (3)

⚠️ Mask layers are preview-only and not included in print files.

*) Layer Notes

• Primary Background Layer → Product background, supports multiple layers
• Primary Area Layer → Main printable area, affects final print file
• Mask Layer → Mockup layer for realism (shadow, highlight)

You can create mask images using Photoshop by keeping the design area transparent and retaining highlights.

Attributes #

Go to the Attributes tab to (1):

• Add product attributes
• Create variants
• Manage:
  → Variant combinations (2, 3)
  → Stock (4)
  → Price (5)

Advanced Settings (1) #

Open the Advanced tab to configure:

1. Edit area size – Allow customers to resize design area (2)
2. Customer can add view – Allow adding more design sides (3)
3. Customize design layout – Enable/disable editor functions per product (4)
4. Resources – Select artwork/template folders (5)
5. Minimum quantity – Set minimum add-to-cart quantity (6)
6. Add empty design to cart – Allow checkout without design (7)
7. Discount by quantity (8):
   • Percent or Fixed (8.1)
   • Quantity limits (8.2)
   • Custom prices per level

📌 From version 1.0.7, customers can switch between related products directly in the editor.

Product List Management #

From the Products list, you can:

• Search products (1)
• Edit product bases (2)
• Remove product bases (3)

Product Base on Frontend #

• The Product Base defines where customers can design
• The design editor appears on the frontend once the product base is connected

Summary #

The Product Base Design is the most important configuration in Product Designer App. A properly configured product base ensures:

• Correct pricing
• Accurate print output
• Smooth customer design experience