Create a New Custom Product - color customization XBox controller

Welcome!

Here we will learn how to create a product with the ability to paint different parts.

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 3500x3500 px) 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 "Body colour" 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.

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.  link to guide (coming soon)
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", then we will show you "Image thumbnail".

Save

The last step in creating a category is adding options.

We have prepared all the necessary pictures in advance. 

You will learn how to do this in this guide: Preparing Custom Product Images

Please fill in and set up the following fields

1. Choose which view you upload the image for.
2. Upload the image. Recommendations are described at the beginning of the article.
3. Option label: any label, the more descriptive the better.
4. Choose which color will be displayed on the thumbnail.

1. Select the following required views.
2. Upload pictures for each of it.

1. Price: You have the opportunity to set a price for each color.
2. 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.
3. Stock: you can indicate if this option is available or not. 
4. Save

Here is the result.

Now we will show you how image thumbnails work. Please go to category settings.

Change the category type from Current to "Image Thumbnails".

Next, go to the options settings and add images. Use square images for best results.

As you can see, now images have appeared instead of icons with colours.

Now let's add another tab for the thumbsticks. Repeat the steps above.

This time we will choose the category type "Text list".

Here is the result. 

The end result of this product.

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.