Design Areas #

Design Areas define where customers can place text, images, artwork, and other editable elements on a customizable product.

Each Design Area belongs to a specific product View and controls both:

• The editable region shown in the Design Studio
• The physical dimensions of the exported print file

Every printable product View should contain at least one valid Design Area. Without a Design Area, customers cannot add or position design elements on that surface.

Common examples include:

• Front Print
• Back Print
• Left Chest Logo
• Sleeve Print
• Full Wrap
• Card Front
• Packaging Panel
• Label Area

How Design Areas Work #

A Design Area connects the visual product preview with the production output.

The basic workflow is:

Product Base → Product View → Design Area → Customer Artwork → Saved Design → Print-Ready File

The on-screen size and position determine where customers can design, while the Print Size determines the physical dimensions of exported PNG, PDF, and SVG files.

These two settings are related, but they serve different purposes.

Design Area Position vs. Print Size #

Understanding this difference is essential.

Position and Display Size #

These values control how the Design Area appears over the product mockup in the Design Studio.

They determine:

• Where the editable region appears
• How large it looks on the product preview
• Which part of the product customers can customize
• Whether artwork is clipped by the editable boundary

Print Size #

Print Size defines the real production dimensions of the exported artwork.

For example:

Display area on mockup: 320 × 420 pixels
Print Size: 12 × 16 inches

The preview area may be relatively small on screen, but the exported file is generated using the configured physical size.

The Print Size should always match the actual dimensions required by your production process.

Before You Begin #

Before configuring Design Areas, make sure you have:

• Created a Product Base
• Selected a Printing Type
• Configured the required Views
• Uploaded product mockup images
• Selected the correct Measurement Unit
• Measured the real printable dimensions
• Identified any non-printable margins or product features
• Prepared masks when required

The Product Base supports Pixels, Inches, and Centimeters as measurement units. The selected unit affects the Design Area Print Size and exported files.

Use the same unit as your print provider or production workflow whenever possible.

Create a Design Area #

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.

Click Setup Design to open the detailed product configuration.

Step 2. Select the Measurement Unit #

Open the Info tab and select the unit used for the product.

Available units include:

• Pixels
• Inches
• Centimeters

The selected unit controls how the Print Size is interpreted.

Examples:

12 × 16 inches

30 × 40 centimeters

3600 × 4800 pixels

Use one consistent unit throughout the Product Base.

Step 3. Open the Layers Tab #

Switch to the Layers tab.

Select the product View where you want to create the Design Area.

Each View can have a completely different image, Design Area, mask, and layer structure.

Examples:

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

Step 4. Add a Design Layer #

Create a new Design Layer for the selected View.

The Design Layer acts as the editable area where customer artwork is placed.

Every printable region should have at least one Design Layer.

A View may contain:

• One large Design Area
• Several independent Design Areas
• One main area and one or more optional logo areas

Example:

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

Step 5. Enter a Layer Name #

Use a descriptive name that clearly identifies the printable region.

Recommended names include:

• Front Print
• Back Print
• Left Sleeve
• Right Sleeve
• Full Wrap
• Logo Area
• Pocket Area
• Front Panel
• Card Front

The Product Base documentation recommends descriptive names such as Front Print, Back Print, and Logo Area.

Avoid generic names such as:

• Layer 1
• Area A
• Design
• Print Zone

Clear names make product setup, order review, troubleshooting, and production easier.

Configure the Print Size #

Set the Real Production Dimensions #

Enter the actual printable width and height.

Examples:

T-shirt front: 12 × 16 in
Sleeve logo: 3 × 4 in
Business card: 3.5 × 2 in
Poster A3: 297 × 420 mm
Mug wrap: 9 × 3.5 in

Print Size is one of the most important Product Base settings because it determines the dimensions of exported print files.

Do not use the dimensions of the product mockup image as the Print Size unless they exactly match the required production dimensions.

Print Size and DPI #

For raster exports, the expected pixel dimensions depend on the physical size and export resolution.

Example:

Print width: 12 inches
Print height: 16 inches
Resolution: 300 DPI

Expected output:

Width: 3600 pixels
Height: 4800 pixels

Calculation:

Physical size × DPI = Pixel dimensions

A large pixel size is normal for print-ready files.

Match the Production Specification #

Before entering the Print Size, confirm the required dimensions with:

• Your print provider
• Your fulfillment partner
• Your production equipment
• Your product template
• Your manufacturing workflow

Even a small difference can cause:

• Incorrect print scale
• Cropped artwork
• Unexpected margins
• Poor placement
• Rejected production files

Position and Resize the Design Area #

Match the Product Mockup #

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

Customers should see a clear relationship between the editable boundary and the actual print location.

The Product Base guide specifies that customers can only place their artwork inside the configured Design Area.

Check that the area:

• Covers the intended printable surface
• Does not extend beyond the product
• Avoids seams, buttons, handles, holes, or edges
• Matches the product angle
• Leaves any required safety margin
• Is large enough for comfortable editing

Keep the Area Inside the Product Image #

A Design Area positioned outside the product mockup may result in:

• Invisible artwork
• Clipped designs
• Confusing editing behavior
• Incorrect preview placement

The Product Base troubleshooting guidance recommends verifying that the Design Area is inside the product image and has a valid size.

Match the Aspect Ratio #

The display area and Print Size should normally use the same aspect ratio.

For example:

Print Size: 12 × 16 in
Aspect ratio: 3:4

The on-screen Design Area should also use approximately a 3:4 ratio.

If the aspect ratios differ, customer designs may appear stretched or may not match the exported file.

Rounded Corners #

Rounded corners can be applied to the editable area when the product does not use a rectangular print region.

This option is useful for products such as:

• Phone cases
• ID cards
• Credit cards
• Stickers
• Labels
• Rounded signs

The Product Base configuration supports rounded corners for Design Areas.

Use a corner radius that matches the real product shape.

Do not use rounded corners only for visual decoration when the actual print file must remain rectangular.

Masks #

A mask improves the live product preview by controlling how customer artwork appears on the product.

Masks may simulate:

• Fabric folds
• Curved surfaces
• Product edges
• Transparent windows
• Camera openings
• Buttons
• Shadows
• Highlights

The Product Base documentation states that masks are used only for the live preview and are not included in exported print files.

When to Use a Mask #

Use a mask when the product surface is not visually flat or rectangular.

Examples:

T-shirt #

A mask can add:

• Wrinkles
• Fabric texture
• Shadows
• Highlights

Phone Case #

A mask can exclude:

• Camera opening
• Rounded edges
• Buttons
• Border areas

Mug #

A mask can simulate:

• Curved edges
• Highlights
• Handle overlap

Packaging #

A mask can display:

• Cutouts
• Transparent windows
• Folds
• Panel boundaries

Mask vs. Print Boundary #

A mask and a Design Area are not the same.

Design Area #

Controls where customers can place artwork and defines the print output.

Mask #

Controls only how the artwork is displayed in the live preview.

A mask should not be used as a substitute for an accurate Design Area.

Multiple Design Areas #

A View can contain more than one Design Area.

Example:

T-shirt Front
├── Main Chest Print
├── Left Chest Logo
└── Pocket Area

Multiple Design Areas are useful when:

• Customers can customize separate regions
• Different regions use different print sizes
• Each region has a different price
• Each region requires a separate production file
• Artwork must remain isolated within specific boundaries

Keep the areas clearly separated and use descriptive names.

Design Areas and Printing Types #

Design Areas should match the printable sides and pricing rules defined in the assigned Printing Type.

For example:

Printing Type
├── Front
├── Back
└── Left Sleeve

Product Base:

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

Consistent names and structure make side-based pricing easier to understand and test.

Design Areas Across Multiple Views #

Repeat the setup for every printable View.

Example:

Front View
└── Front Print: 12 × 16 in

Back View
└── Back Print: 14 × 18 in

Left Sleeve View
└── Left Sleeve: 3 × 4 in

Right Sleeve View
└── Right Sleeve: 3 × 4 in

Each View may use a different:

• Position
• Display size
• Print Size
• Mask
• Layer structure

The Product Base guide confirms that each View can have its own Design Area, mask, background, and layer configuration.

Design Areas and Product Sizes #

A product size and a Design Area Print Size are different concepts.

Example:

Product sizes:
S, M, L, XL

Design Area:
12 × 16 in

All apparel sizes may share the same Design Area.

However, products such as posters, canvases, signs, and packaging may require a different Print Size for every product size.

When the output dimensions change significantly, consider using:

• Separate Product Bases
• Separate products
• Size-specific configurations
• Advanced custom integration

Design Areas and Customer Artwork #

The Design Area should provide enough space for customers to work comfortably while enforcing the real production boundary.

Customers should be able to:

• Add text
• Upload images
• Add artwork
• Move elements
• Resize elements
• Rotate elements
• Arrange layers

They should not be able to place printable content outside the intended region.

Before publishing, verify that customers can design only inside the editable area.

Save the Product Base #

After configuring all Design Areas, click:

Save Product

Saving stores:

• Layer names
• Positions
• Display dimensions
• Print Sizes
• Rounded corners
• Masks
• View assignments

The Product Base guide instructs administrators to save the product after all Views and design layers are configured.

Save regularly when working with several Views or complex layer structures.

Test the Design Area #

Always test the Design Area before publishing the product.

Test Editing Boundaries #

Open the product in the Design Studio and:

1. Add text.
2. Upload an image.
3. Move objects toward every edge.
4. Resize objects beyond the boundary.
5. Rotate objects near corners.
6. Confirm that the expected clipping or restriction applies.

Verify that customers cannot place printable content in non-printable areas.

Test the Preview #

Check that:

• The Design Area aligns with the product mockup.
• Artwork appears in the correct location.
• Masks display correctly.
• Product shadows and highlights remain visible.
• Rounded corners match the product shape.
• View switching does not move or distort the design.

Test Multiple Views #

For a multi-view product:

1. Add a design to the Front View.
2. Switch to the Back View.
3. Add another design.
4. Return to the Front View.
5. Confirm that both designs remain intact.
6. Repeat for every printable View.

Test Cart and Order Data #

Customize the product and add it to the cart.

Verify that:

• The design is saved.
• The correct View is included.
• Preview images are generated.
• Side-based pricing is correct.
• The order contains the required design data.

Test Print Files #

Place a test order and download the print files.

Confirm that:

• File dimensions match the configured Print Size.
• Artwork position is correct.
• No elements are unexpectedly clipped.
• Masks are excluded when expected.
• Product mockup layers are excluded when expected.
• Each View generates the correct output.
• The file matches the production specification.

The Product Base documentation recommends placing a test order and verifying that exported files match production requirements.

Example Configurations #

T-Shirt #

View: Front
Design Area Name: Front Print
Print Size: 12 × 16 in
Mask: Front wrinkle overlay

View: Back
Design Area Name: Back Print
Print Size: 14 × 18 in
Mask: Back wrinkle overlay

Business Card #

View: Front
Design Area Name: Card Front
Print Size: 3.5 × 2 in
Rounded Corners: Optional

View: Back
Design Area Name: Card Back
Print Size: 3.5 × 2 in
Rounded Corners: Optional

Phone Case #

View: Back
Design Area Name: Full Back Print
Print Size: Product-specific
Rounded Corners: Enabled
Mask: Camera and edge overlay

Mug #

View: Wrap
Design Area Name: Full Wrap
Print Size: 9 × 3.5 in
Mask: Curved preview and handle overlap

Packaging Box #

Front Panel → 8 × 10 in
Back Panel → 8 × 10 in
Left Panel → 3 × 10 in
Right Panel → 3 × 10 in
Top Panel → 8 × 3 in
Bottom Panel → 8 × 3 in

Each panel can use an independent Design Area and production size.

Best Practices #

Use the following recommendations when configuring Design Areas:

• Use the real production dimensions.
• Select the correct Measurement Unit.
• Match the display area to the Print Size aspect ratio.
• Keep the Design Area inside the product image.
• Avoid seams, holes, buttons, and non-printable edges.
• Use descriptive layer names.
• Use masks only for live preview effects.
• Test every View before publishing.
• Keep similar products consistent.
• Confirm dimensions with your print provider.
• Place a test order before launch.
• Download and inspect every print format you intend to use.
• Use separate Product Bases when output sizes differ significantly.
• Do not use the mockup image size as the production Print Size.

Troubleshooting #

Customers Cannot Add a Design #

Check that:

• A Design Area has been created.
• The Design Area has valid width and height.
• The Design Area is inside the product image.
• The correct View is selected.
• The Product Base has been saved.
• The Product Base is assigned to the product.

These checks match the Product Base troubleshooting recommendations.

The Design Area Is Not Visible #

Verify that:

• The Design Layer is enabled.
• Its width and height are greater than zero.
• It has not been moved outside the canvas.
• The correct View is active.
• The layer order is correct.
• The latest Product Base configuration is loaded.

Artwork Is Clipped Incorrectly #

Check:

• Design Area position
• Display width and height
• Rounded corner settings
• Mask alignment
• Product image dimensions
• Artwork position

Confirm whether the clipping is caused by the editable boundary or by the preview mask.

The Print File Has the Wrong Size #

Confirm that:

• The Measurement Unit is correct.
• The Print Size matches the production specification.
• Width and height have not been reversed.
• The Design Area was not resized incorrectly.
• The correct Product Base is assigned.
• The file is opened with the expected DPI.

The Product Base troubleshooting section specifically recommends checking the Measurement Unit, Print Size, and Design Area resizing.

The Preview Does Not Match the Print File #

This may happen when:

• The display aspect ratio differs from the Print Size.
• The mask is misaligned.
• The Design Area is positioned incorrectly.
• The product mockup uses a different proportion.
• The artwork is clipped differently during export.

Align the Design Area, Print Size, mask, and product image before retesting.

The Mask Appears in the Print File #

The standard Product Base behavior uses masks only for the live preview, not for exported print files.

If a mask appears in the output, verify:

• The image was added as a mask rather than a normal background layer.
• An export addon or custom setting is not including masks.
• The layer order and layer type are correct.

Some Views Do Not Generate Files #

Check that:

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

Some workflows may generate files only for Views containing customer artwork.

Design Area Configuration Checklist #

Before publishing the product, confirm that:

• The correct Measurement Unit is selected.
• Every printable View has a Design Area.
• Each Design Area has a descriptive name.
• The Print Size matches production requirements.
• Width and height are correct.
• The display area matches the Print Size aspect ratio.
• The area is positioned inside the product mockup.
• Non-printable features are excluded.
• Rounded corners are configured when needed.
• Masks align with the product.
• Customers can design only inside the intended boundary.
• Side pricing works correctly.
• Designs remain saved when switching Views.
• Cart and order data contain the design.
• Exported files have the correct dimensions.
• Every View has been tested.

Next Steps #

After configuring Design Areas, continue with:

1. Product Images and Layers — Configure product mockups, shadows, highlights, and overlays.
2. Views — Organize the printable sides and surfaces.
3. Colors — Configure product color groups and color-changing layers.
4. Sizes — Add product size options and WooCommerce variations.
5. Printing Types — Configure side-based and attribute-based pricing.
6. Print File Export — Verify dimensions, resolution, and production output.