Views #

Views represent the different sides, surfaces, or angles of a customizable product in Product Designer App.

Each View can have its own product images, background layers, Design Areas, masks, and print configuration. Customers can switch between Views in the Design Studio to customize different parts of the product.

Common examples include:

• Front
• Back
• Left
• Right
• Inside
• Outside
• Left Sleeve
• Right Sleeve
• Top
• Bottom

A simple product may require only one View, while products such as apparel, packaging, cards, or multi-panel items may require several Views.

How Views Work #

Views are created inside a Product Base.

The typical structure is:

Product Base → Views → Background Layers → Design Areas → Customer Customization → Print Files

Each View represents one customizable side or product surface. It can use a completely different visual setup and printable area from the other Views.

For example, a T-shirt Product Base may contain:

Front View
├── Front product image or background color
├── Front Design Area
└── Front mask

Back View
├── Back product image or background color
├── Back Design Area
└── Back mask

When customers switch from Front to Back, the Design Studio loads the layers and Design Areas configured for that View.

Views and Printable Sides #

A View usually corresponds to a printable side, but the two concepts should remain consistent throughout the product configuration.

For example:

Product	Suggested Views
Mug	Front or Wrap
Business Card	Front and Back
T-shirt	Front and Back
Hoodie	Front, Back, Left Sleeve, Right Sleeve
Phone Case	Back
Packaging Box	Front, Back, Left, Right, Top, Bottom

The original Product Base configuration requires you to select the number of product Views before opening the detailed design setup.

The number of Views should match:

• The actual customizable surfaces of the product
• The printable sides supported by the Printing Type
• The Design Areas required for production
• The files expected by your fulfillment workflow

Do not add unnecessary Views when customers cannot customize or print those surfaces.

Before You Begin #

Before configuring Views, make sure you have:

• Created a Product Base
• Selected at least one Printing Type
• Chosen the required number of Views
• Prepared product mockup images
• Identified the printable surfaces
• Measured the real print dimensions for each surface

Product Designer App requires a Product Base and at least one Printing Type before the product can be configured for customer customization.

For multi-view products, prepare one product image or image set for each View.

Configure Product Views #

Step 1. Open the Product Base #

In the WordPress administration area, navigate to:

Product Designer App → Products

Locate the Product Base you want to configure and open it for editing.

The Product Base management page allows you to create, edit, duplicate, import, export, or remove Product Bases.

Step 2. Set the Number of Views #

In the Product Base information, select the number of Views required for the product.

Examples:

Mug: 1 View
Business Card: 2 Views
T-shirt: 2 Views
Hoodie: 4 Views
Packaging Box: Multiple Views

Each configured View represents one side or surface that can be displayed and customized in the Design Studio.

Choose the number carefully. Changing it after completing the design setup may require you to review or recreate View-specific layers.

Step 3. Open the Design Setup #

Click Setup Design to open the Product Base configuration.

The setup contains two primary sections:

• Info
• Layers

The Info section controls general product settings such as units, colors, and sizes.

The Layers section controls the Views, product images, visual layers, and Design Areas.

Switch to the Layers tab to begin configuring Views.

Step 4. Select a View #

Select the View you want to configure.

Depending on the number of Views, the interface may display multiple View tabs or selectors.

Configure one View at a time.

For each View, you should define:

• View name
• Background or product image
• Background layers
• Design Areas
• Masks or overlays
• Product color behavior
• Layer order

Each View can use an independent configuration.

Step 5. Name the View #

Give each View a short, descriptive name. Recommended names include:

• Front
• Back
• Left Sleeve
• Right Sleeve
• Inside
• Outside
• Top
• Bottom
• Front Panel
• Rear Panel

Avoid unclear names such as:

• View 1
• Side A
• Layer 2
• Product Side

Descriptive View names help:

• Customers understand which side they are editing
• Administrators identify the correct configuration
• Support staff troubleshoot product issues
• Production teams match files to printable surfaces

Keep naming consistent across the Product Base, Printing Type, order details, and exported files.

Configure the View Image #

Add a Background Image #

The background image displays the product behind the customer’s design.

A View background may contain:

• Product mockup
• Product color
• Texture
• Shadows
• Highlights
• Transparent areas
• Surface details

Product Designer App supports adding one or multiple background layers to a View.

Use a separate image for every product surface when the Views look different.

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

• Custom colors
• Background with image (3)

For example:

Front View → tshirt-front.png
Back View → tshirt-back.png
Left Sleeve View → tshirt-left-sleeve.png
Right Sleeve View → tshirt-right-sleeve.png

Recommended Image Format #

PNG is generally recommended when the View requires:

• Transparency
• Separate shadow layers
• Product color replacement
• Masks
• Overlays
• Complex edges

JPG may be used for simple product mockups without transparency.

The product configuration also supports image-based backgrounds for product colors in applicable versions and configurations.

Keep View Images Consistent #

For a professional switching experience, all View images should use a consistent canvas.

Keep the following consistent whenever possible:

• Image width and height
• Product scale
• Product position
• Background transparency
• Lighting
• Camera angle
• Margin around the product
• Shadow style

If the product appears much larger or smaller between Views, switching Views in the Design Studio may feel inconsistent.

Example:

Front image: 1000 × 1000 px
Back image: 1000 × 1000 px
Left image: 1000 × 1000 px
Right image: 1000 × 1000 px

The physical print dimensions are controlled by the Design Area, not by the display size of the product mockup.

Add Background Layers #

A View can contain multiple background layers.

These layers may be used for:

• Base product image
• Product color
• Texture
• Shadows
• Highlights
• Decorative details
• Separate product components

Product Designer App allows administrators to upload, restore, move, recolor, and combine multiple background layers.

Example layer structure:

Highlight Overlay
Customer Design
Product Color Layer
Base Product Image
Shadow Layer

The correct order depends on the desired visual effect.

For example, an overlay containing wrinkles or highlights may need to appear above the customer’s design, while the product color layer may remain below it.

View-Specific Product Colors #

Each View can display the selected product colors using its own images or color-enabled layers.

For example:

Front View
├── Front body color layer
└── Front sleeve color layer

Back View
├── Back body color layer
└── Back sleeve color layer

Use the same Color Group names across all Views when the color option represents the same physical product component.

Example:

• Body
• Sleeve
• Collar
• Handle
• Lid

Product Colors are configured in the Product Base information, while the corresponding View layers determine how those colors appear visually.

Add Design Areas to a View #

A Design Area defines where customers can place text, photos, artwork, and other design elements.

Each printable View should contain at least one valid Design Area.

Examples:

Front View → Front Print Area
Back View → Back Print Area
Left Sleeve View → Left Sleeve Logo Area
Right Sleeve View → Right Sleeve Logo Area

A View may also contain multiple Design Areas.

Example:

Front View
├── Main Chest Area
├── Left Chest Logo Area
└── Pocket Area

For each Design Area, configure:

• Layer name
• Real print size
• Position
• Display width and height
• Rounded corners if required
• Mask if required

The print size determines the dimensions of exported PNG, PDF, and SVG files, so it should match the real production specification.

Align the Design Area with the View #

Move and resize the Design Area until it matches the printable region shown on the product mockup.

Customers should be able to understand visually where their design will be printed.

Check that the area:

• Covers the intended printable surface
• Does not extend outside the product
• Matches the product angle
• Does not overlap non-printable details
• Is large enough for comfortable editing
• Uses the correct real print dimensions

The on-screen Design Area controls customer placement, while its Print Size controls the production output.

These values are related but serve different purposes.

Use Masks for View Previews #

A mask can improve the live product preview by placing surface details above the customer’s design.

Masks may simulate:

• Fabric folds
• Curved surfaces
• Product edges
• Highlights
• Transparent windows
• Shadows
• Texture

Masks are used for the live preview and are not included in the exported print file.

For example, a T-shirt mask may contain wrinkles and highlights while leaving the print region transparent.

A phone case mask may clip the preview around:

• Camera opening
• Rounded edges
• Buttons
• Product border

Use a separate mask for each View when the product shape or lighting is different.

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

Repeat the Setup for All Views #

After configuring the first View, repeat the process for every additional View.

Each View can have its own:

• Background image
• Background layers
• Product colors
• Design Areas
• Print dimensions
• Masks
• Layer order

This is especially important when different surfaces have different production requirements.

For example:

T-shirt Front
Print size: 12 × 16 inches

T-shirt Back
Print size: 14 × 18 inches

Left Sleeve
Print size: 3 × 4 inches

Right Sleeve
Print size: 3 × 4 inches

Do not assume that every View must use the same print dimensions.

Example View Configurations #

One-View Product #

A phone case may use one View:

View: Back
Background: phone-case-back.png
Design Area: Full Back Print
Mask: Camera and edge overlay

This is suitable when only the back surface can be customized.

Two-View Product #

A business card may use:

Front
├── Front background
└── Front full-size Design Area

Back
├── Back background
└── Back full-size Design Area

Each side can produce a separate print file.

Apparel Product #

A T-shirt may use:

Front
├── Front mockup
├── Front print area
└── Front wrinkle mask

Back
├── Back mockup
├── Back print area
└── Back wrinkle mask

A hoodie may additionally include:

Left Sleeve
Right Sleeve

The original Product Base guide uses Front, Back, Left Sleeve, and Right Sleeve as an example of a four-View hoodie configuration.

Packaging Product #

A packaging product may use:

Front Panel
Back Panel
Left Panel
Right Panel
Top
Bottom

Each panel can have its own printable dimensions and product preview.

For complex packaging, use clear View names that match the production dieline or fulfillment instructions.

Save the View Configuration #

After configuring all Views, click Save Product.

Saving the Product Base stores the View names, layers, Design Areas, product images, and related configuration.

Save regularly while working on products with many Views or layers.

After saving, reopen the Product Base and confirm that every View and layer remains available.

Test Views in the Design Studio #

Before publishing the product, open it in the storefront Design Studio.

Test every View individually.

Confirm that customers can:

• See all required Views
• Understand the View names
• Switch between Views
• Add text and images to each View
• Move and resize design elements
• Stay inside the correct Design Area
• See the correct product image
• See color changes on every View
• See masks and visual effects correctly
• Return to a previous View without losing the design

The Product Base guide recommends testing View switching and all customization functions before publishing.

Test View Persistence #

Create a design on one View, switch to another, and then return.

Example:

1. Add text to the Front View.
2. Switch to the Back View.
3. Upload an image.
4. Return to the Front View.
5. Confirm that the original text remains unchanged.

Repeat this test for every View.

Test Cart and Order Data #

Customize multiple Views and add the product to the cart.

Verify that:

• All customized Views are saved
• Preview images are generated correctly
• The correct side information appears in the order
• Printing prices include the appropriate sides
• Each printable View can generate the expected output

Place a complete test order before making the product available to customers.

Test Print Files #

Download the print files from the test order.

Confirm that:

• Each customized View produces the expected file
• Files are associated with the correct View
• Print dimensions are correct
• No View is missing
• The artwork position is correct
• Masks and product mockups are excluded when required
• File names can be matched to the production surface

For example:

order-1052-front.png
order-1052-back.png
order-1052-left-sleeve.png

The Product Base documentation recommends verifying that exported files match actual production requirements.

Best Practices #

Use the following recommendations when configuring Views:

• Create only the Views customers can actually customize.
• Use clear names such as Front and Back.
• Keep image dimensions consistent across Views.
• Keep the product scale and position visually consistent.
• Use high-resolution mockup images.
• Match every Design Area to the real printable region.
• Use separate masks for different surfaces.
• Keep layer naming and ordering consistent.
• Match View names with Printing Type sides.
• Test product colors on every View.
• Test every View before publishing.
• Verify every output file with your production team.
• Use the same View order across similar products.
• Reuse a Product Base when multiple store products share the same View structure.

The original Product Base guidance also recommends descriptive names, organized layers, accurate Design Areas, reusable configurations, and testing every View.

Troubleshooting #

A View Does Not Appear #

Check that:

• The correct number of Views is configured.
• The View has been saved.
• The Product Base is assigned to the store product.
• The product has been published.
• The Design Studio is loading the latest Product Base configuration.
• Website and browser caches have been cleared.

The View Is Empty #

Verify that:

• A background image has been uploaded.
• The background layer is visible.
• The layer has not been moved outside the canvas.
• The image URL is accessible.
• The product image format is supported.
• The correct View is selected in the setup.

Customers Cannot Customize a View #

Check that:

• The View contains a Design Area.
• The Design Area has valid width and height.
• The Design Area is positioned inside the visible product.
• The Design Area is enabled.
• The required Design Studio tools are available.
• The corresponding Printing Type side is configured.

The Product Base troubleshooting guidance recommends checking that the Design Area exists, has a valid size, and is positioned within the product image.

The Product Jumps When Switching Views #

This usually occurs when View images have inconsistent:

• Canvas sizes
• Product positions
• Product scales
• Margins
• Aspect ratios

Prepare all View images on the same canvas and align the product consistently.

Product Colors Work on One View Only #

Verify that:

• The same Color Groups are used for every relevant View.
• Each View has a color-enabled background layer.
• The correct Color Type is selected.
• Image-based color options contain an image for every View.
• The color layer is visible and ordered correctly.

Product color changes require both Product Color Groups and correctly configured background layers.

The Wrong Printing Price Is Applied #

Check that:

• View names correspond to Printing Type sides.
• The correct Printing Type is assigned.
• Each side has a valid price.
• Combined-side pricing is configured.
• The system recognizes which Views contain customer designs.

Test one View at a time and then test multiple View combinations.

A Print File Is Missing #

Verify that:

• The customer added content to that View.
• The View contains a valid Design Area.
• The Design Area has a valid Print Size.
• The order saved the design data.
• The selected export process includes that View.

Some workflows may generate files only for Views that contain customer artwork.

The Print File Has the Wrong Size #

Review:

• Measurement Unit
• Design Area Print Size
• View-specific dimensions
• Product Base configuration
• Export settings

The Measurement Unit and Print Size directly affect exported file dimensions.

Do not use the product mockup dimensions as the required print size.

View Configuration Checklist #

Before completing the Product Base, confirm that:

• The correct number of Views has been selected.
• Every View has a descriptive name.
• Every View has the correct product image.
• Product scale is consistent across Views.
• Background layers are ordered correctly.
• Product colors work on all relevant Views.
• Every printable View has a Design Area.
• Every Design Area has the correct Print Size.
• Masks display correctly.
• Customers can switch between Views.
• Designs remain saved when switching Views.
• Printing prices are correct for each side.
• Cart and order data include all designed Views.
• Exported files match the correct Views.
• Every View has been tested before publishing.

Next Steps #

After configuring Views, continue with:

1. Product Images and Layers — Configure product mockups, color layers, shadows, highlights, and overlays.
2. Design Areas — Define editable regions and real production dimensions.
3. Colors and Sizes — Configure customer-selectable product options.
4. Printing Types — Match Views to printable sides and pricing rules.
5. WooCommerce Product Setup — Connect the Product Base to a sellable product.
6. Print File Export — Verify production files for every customized View.