Colors #

Product Colors allow customers to choose different color variations of a customizable product while maintaining an accurate preview in the Design Studio.

Colors can change the appearance of one or more product parts, such as the body, sleeves, collar, handle, or lid, without changing the customer’s design.

For example, when a customer switches from a White T-shirt to a Black T-shirt, Product Designer App automatically updates the product preview while keeping the design in the correct position.

Product Colors can also work together with WooCommerce product variations to provide a seamless purchasing experience.

How Colors Work #

Colors are configured inside a Product Base and control how the product appearance changes in the Design Studio.

The typical workflow is:

Product Base → Color Groups → Color Options → Image Layers → Customer Selects Color → Live Product Preview

Each color option updates the corresponding product image layers while preserving the customer’s artwork.

Understanding Color Groups #

A Color Group represents one physical part of a product that can change color.

Examples include:

Product	Color Groups
T-shirt	Body
Hoodie	Body, Sleeves
Mug	Body, Handle
Cap	Crown, Brim
Backpack	Body, Pocket
Shoes	Upper, Sole

Each Color Group contains one or more available colors.

Example:

Body
├── White
├── Black
├── Navy
└── Red

Before You Begin #

Before configuring Product Colors, make sure you have:

• Created a Product Base
• Configured at least one View
• Prepared product images for each color
• Identified which product parts can change color
• Organized your image assets

For products with multiple Views, prepare images for every color in every View.

Configure Product Colors #

Step 1. Open the Product Base #

Navigate to:

Product Designer App → Products

Open the Product Base you want to edit.

Step 2. Open the Info Tab #

Inside the Product Base configuration, open the Info tab.

Locate the Product Colors section.

This section is used to create Color Groups and define the available color options.

Step 3. Create a Color Group #

Click Add more product color.

Enter a descriptive name.

Examples:

• Body
• Sleeve
• Collar
• Handle
• Lid
• Pocket

Avoid generic names such as:

• Color 1
• Group A
• Option

Use consistent names throughout the product configuration.

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

Step 4. Add Color Options #

Inside each Color Group, create the available colors.

Example:

Color
White
Black
Navy
Red
Green

Each color can include:

• Name
• Color swatch
• Image configuration
• Display order

Customers will see these options in the Design Studio.

Displaying Product Colors #

Product Colors can be displayed in different ways depending on your product.

Solid Color #

The simplest option uses a color value.

Example:

White
Black
Blue
Red

This method works well for simple products.

Image-Based Colors #

Many products require different images for every color.

Example:

White
├── tshirt-white-front.png
└── tshirt-white-back.png

Black
├── tshirt-black-front.png
└── tshirt-black-back.png

Image-based colors provide the most realistic product preview.

Color Layers #

Each View can contain one or more layers that respond to Product Colors.

Example:

Front View

Highlight
Customer Design
Body Color
Base Image
Shadow

When the customer selects a new color, only the Body Color layer changes.

The remaining layers stay unchanged.

This approach reduces duplication and keeps product previews consistent.

Colors Across Multiple Views #

Every View should contain matching color layers.

Example:

Front View
├── White Body
├── Black Body
└── Navy Body

Back View
├── White Body
├── Black Body
└── Navy Body

Use identical Color Group names across all Views.

Products with Multiple Color Groups #

Some products contain several independently colored components.

Example:

Hoodie

Body
├── White
├── Black
└── Navy

Sleeves
├── White
├── Black
└── Gray

Customers can select a different color for each configurable component.

Recommended Image Preparation #

For best results:

• Use PNG images
• Keep all images the same size
• Use transparent backgrounds
• Maintain the same camera angle
• Keep the product position identical
• Use consistent lighting
• Export all colors from the same template

Consistent images create smooth transitions when customers change colors.

Colors and Design Areas #

Changing a product color should never change the Design Area.

The printable area should remain identical regardless of the selected color.

Example:

White T-shirt
Design Area:
12 × 16 inches

Black T-shirt
Design Area:
12 × 16 inches

Only the product appearance changes.

Colors and Pricing #

A product color may affect the final price.

Common examples include:

• Special color cost more
• Special color require special material
• Special color increase production cost

Color-based pricing may be configured through: Attributes tab → Generate Attributes → Configuration Extra Price and Stock

Colors and Customer Designs #

Customer artwork is independent of the selected product color.

When customers switch colors:

• Uploaded images remain
• Text remains
• Clipart remains
• Position remains
• Scale remains
• Rotation remains

Only the product preview changes.

Test Product Colors #

Before publishing your product, verify that every color works correctly.

Test each color and confirm that:

• The correct product image appears
• Customer designs remain unchanged
• Design Areas stay aligned
• Layer order is correct
• Shadows and highlights remain visible
• Every View updates correctly

Repeat the test for all product colors.

Example Configuration #

Example T-shirt:

Color Group
Body

Available Colors

White
Black
Gray
Red
Blue

Views:

Front
├── Body Color Layer
├── Design Area
└── Highlight

Back
├── Body Color Layer
├── Design Area
└── Highlight

When customers change from White to Black, both Views update automatically.

Best Practices #

• Use descriptive Color Group names.
• Keep all color images aligned.
• Use identical image dimensions.
• Maintain consistent lighting.
• Use transparent PNG images.
• Keep Design Areas identical across colors.
• Test every color before publishing.
• Reuse Color Groups for similar products.
• Remove unused colors.
• Organize images with clear file names.

Troubleshooting #

Color Does Not Change #

Check that:

• The Color Group exists.
• The selected color has an image.
• The color layer is visible.
• The Product Base has been saved.

Wrong Image Appears #

Verify that:

• The correct image is assigned.
• The image belongs to the correct View.
• The Color Group names match.
• The layer order is correct.

Design Moves When Color Changes #

Check that:

• Every color image has identical dimensions.
• Product alignment is consistent.
• Design Areas are unchanged.

Some Views Do Not Update #

Verify that:

• Every View contains the required color layers.
• Every color has an image for every View.
• Layer visibility is enabled.

Color Configuration Checklist #

Before publishing your product, confirm that:

• Color Groups have descriptive names.
• Every color has the correct image.
• Images are aligned across all Views.
• Design Areas remain unchanged.
• Customer designs persist when colors change.
• Every View updates correctly.
• Product previews are accurate.
• All colors have been tested.

Next Steps #

After configuring Product Colors, continue with:

1. Sizes — Configure available product sizes.
2. Design Areas — Define printable regions.
3. Product Images & Layers — Configure backgrounds, masks, and overlays.
4. Printing Types — Configure pricing for each printable side.
5. WooCommerce Integration — Connect the Product Base to your store.