Create a New Custom Product - color customization T-shirt including coloring on the FLY.

Here we will learn how to create a product with the ability to color different parts, but unlike the previous example, here we will also use automatic coloring on the Fly.

The steps from the previous example are repeated first.

First of all, we need to add images* for all the views we need. To activate additional views, open the settings:  

*Remember. Our plugin works with png images of the same size with transparent backgrounds. Recommended size for the PNG images is 1500px X 1500px. Squares work best in general. Each png image represents a transparent layer with the product component on the product preview. The software stacks images automatically – showing different product parts on top of each other. You can create a full representation of the product and offer a true ‘Build Your Own Product’ experience.

Please note that if you upload big images (for example 3500x3500px) each more than 1 MB the custom product page will LOAD VERY SLOW and most likely the product won't add to cart.

So please use smaller images (up to 1500px). And the recommended size for the images is 500kb - 800kb.

In the next step, we add our first tab. In our example, this will be the "Front" tab.

Fill in the following fields

Title: any title, the more descriptive the better.

Description (optional): some additional information.

Select view to (optional): you can choose the view that will be displayed when you go to this tab.

SKU prefix: you can add sku prefix which will participate in combining the complete sku code.

Save

Then we have to add the first category to this tab. We will add a category to change the collar color.

A little more about creating a category:

1. Title: any title, the more descriptive the better.
2.  link to types guide (coming soon)
3. There are some categories that cannot be deselected. This function makes it possible.
4.  Synchronize Options By Label Guide
5. When activated, any layers from this category will be invisible in the final print version
6. If this feature is enabled, the customer will not be able to add an item to the cart until they select an option from this category.

1. Description: some additional information.
2. For developers.
3. Select view to: you can choose the view that will be displayed when choosing an option from this category.
4. You can customize what happens to previous selections after changing a parameter in that category.
5. Save!

Fill in the following fields

Title: any title, the more descriptive the better.

Type: in this case we use "Color thumbnail".

Save

The last step in creating a category is adding options. 

Please fill in and set up the following fields

1. Option label: any label, the more descriptive the better.
2. Upload the image. Recommendations are described at the beginning of the article.                       You will learn how to prepare images in this guide: Preparing Custom Product Images
3. Choose which color will be displayed on the thumbnail. 
4. Price: You have the opportunity to set a price for each color.
5. SKU: Functionality also allows you to add SKUs for each color. For more information please read this article: Inventory - SKU Management. Combined SKU. SKU per product property.
6. Stock: you can indicate if this option is available or not. 
7. Save

Here is the result.

Now we will learn how to color an image without a lot of images, but with only one.

For more information please use this guide: Recoloring Custom Product Layers On The Fly

This time we paint the sleeves, but this is done with a built-in function.

First of all, we need to add additional "Color thumbnail" category, but without any images.

Next step is to add a new layer in the "Layers" tab.

Fill in the following fields

Title: any title, the more descriptive the better.

Type: Image.

View: select the one you want to color.

Image: you need to upload PNG image in the same way you upload images for the preview inside of Category Options.

Go to Advanced tab.

In advanced tab please Enable the Colorize Image Layer.

Fill in the following fields in the Advanced tab

• Colorize image layer  [  o]  Enable.
• Choose in custom layer the panel in which the necessary recolor category is located. 
• Choose in custom layer the category in which the required option is located with “Color thumbnail” type only. (Created in step 1 at the top of the page).
• Blend mode: There are three modes of recoloring in Custom Product Builder.

1. Normal - Edits or paints each pixel to make it the result color.
2. Luminosity - Creates a result color with the hue and saturation of the base color and the luminance of the blend color.
3. Multiply - Looks at the color information in each channel and multiplies the base color by the blend color. The result color is always a darker color. Multiplying any color with black produces black. Multiplying any color with white leaves the color unchanged. When you’re painting with a color other than black or white, successive strokes with a painting tool produce progressively darker colors. The effect is similar to drawing on the image with multiple marking pens.

• Blend Strength: Transparency level. Goes from 0 to 1, which translates to 0% to 100% opacity.
• Save.

Here is the result.

IMPORTANT:  To make sure the product categories / options are saved properly – first click SAVE at the bottom of the category / panel / option screen, and only after that the SAVE button at the top of the page.