Customization - Color Thumbnails. Product options listed as HEX. (i.e: Colors)

This customization option helps you create a list of products options that will be shown to the customer as HEX color thumbnails. You can use this option when the online customer has the option of selecting from a set of available colors to configure component product parts including engraving. For each available color option, you can upload a transparent image (in jpeg, png, etc. formats).

OR if you go a step further you can configure automatic recoloring of GRAYSCALE image layers when user clicks on different color thumbnails. It means that you have to upload only 1 image and all the colors for this image will be created and displayed on the fly. That saves a lot of time when administering custom products!

If you want to use this feature, please read this article: Recoloring Custom Product Layers On The Fly 

To add this customization option to your product you should:

   1) Open your product in The Custom Product Builder and on the main page click Add Customization button.

 

   2) Please write the title of this category and select the “Color thumbnail”  In the “Type” section. Press the “Save” button at the bottom of this page.

3) Click on “Edit options” button in this customization category, and click “New option” button and make all the necessary color options.

You will see a window, where you should write the label of your option, drag and drop the image which will appear on your product’s preview (if you don't want to use automatic recoloring), and the color of the thumbnail.

Don't add image preview if you want to use automatic layer recoloring. You will add it to a custom layer and use thumbnails only as a color selector assigned to a product component.

Fill in the following fields in the Settings tab

1. Option label: some title. the more descriptive the better.
2. Color: Choose a color.
3. Price: You have the opportunity to set a price for each color.
4. 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.

5. After doing it press the “Save” button in the bottom of the page.

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.