This article showing how to setting design on different colors in PDP backend.

I.                   Helpers

PDP has helpers so you can set parameters for the product as quickly as possible. Take a look at it below

1.      Manage sample colors

Once you logged in to PDP Backend, from navigation menu. Select Catalog > Manage Sample Colors

At here, you can add the color which is appear in multiple products. It’s helpful to define product’s color with only one click.

1.      Manage sample sizes

From navigation menu. Select Catalog > Manage Sample Sizes

In there, you can add the sizes which is appear in multiple products. It’s helpful to define product’s side/page with only one click.

II.                Setting Up Product

1.      Product Information

When you want to add a new product. The first thing to do is to add the basic information for that product.

If you already know how to add basic information to the product. Please skip to section 2

From navigation menu. Select Catalog > New Product

In here. You will fill in the necessary information as shown below. Then click Save & Edit to save it to the database.

2.      Product Sides

Each product has its own side / page with different sizes. The size of these sides / pages will be a printable area

To add or edit a page. In the edit section of the product. We will switch to the Product Design tab

When you click on add / modify 1 page. A dialog about modifying the page will appear. You will add the information as below.

Especially with item number 3. You can use the Helper as mentioned before. (sample sizes)

3.      Product Colors

Here is the procedure to add one or more colors to the product

4.      Setup Design by Page & Color

Here is step to setup a “Design Area” for product by Page & Color.

Click on the side name (with image). A lite-designer will appear.

At this designer, you will need to set design images (background, mockup, guide line)

Detail to using the Lite-Designer:

1 for upload background image (which is the background for print the design onto it)

2 is the mockup image (which is seat on top of print design)

3 is guide-line, the extra guide image to instruct customer how to design (safe-area, etc…)

4 is design-area size controlling slider

5 is designer, you will control position of design-area, positions of background, mockup, guideline image

6 & 7 for update / abort change

Act Example: