teeinblue - Set up personalize skin color

Set up skin color and body showing by conditioning

This article will guide you to setup skin options on store as this example:


Click on a "Skin color" option will change the skin color of the girl on live preview and show options in the corresponding color.





Step 1. Setup "Skin color" clipart category

  1. Go to Cliparts page → create a new category called "Skin color".

  2. Upload 2 small square cliparts which represent different skin colors


Example clipart:  Light: Download  -  Dark: Download

  1. (optional) You can upload random cliparts and set a color for each clipart to show the thumbnail on store as color, not image
    (read more about: Edit clipart color)

Example color hex: Light: #FFD6C1  -  Dark: #A45431

Step 2: Setup clipart category for each color

  1. Go to Cliparts page → create a new category for the first skin color, example Light color.
  2. Upload cliparts in Light skin


  3. Create a new category for other skin color and upload cliparts

Step 3: Setup condition in Artwork

After preparing all clipart categories, you can go to Artworks page and create a new artwork.

Step 3.1. Upload a layer to show option for skin colors

  1. Upload a random layer in any shape or color... 
    Let's call it "Skin layer".
Example layer: Download

  1. Resize the "Skin layer" as small as possible.
    And move it to a position where you can hide it. You can place it within the area of the body, because there will be a body layer later; or hide it under hair/background/any other layer.


  2. This "Skin layer" will be added an option to change between different skin colors.
    Click on the layer -> select the personalization option: "1 Clipart category" and choose the "Skin color" clipart category (prepared in Step 1)



Step 3.2. Show personalization options depending on selected skin color

To do this, we need to use the Add condition for layer feature.
  1. Upload a body layer in a color. Example: Light color body.


  2. Resize and move the body to the correct position. Make sure to overlap the "Skin layer" to hide it.


  1. Add a personalization option: "1 Clipart category" for the Light body. And select the "Light body" clipart category (prepared in Step 2).
    If you have multiple clipart categories for this Light body, you can select "1 Group of clipart categories".


  2. Add condition for this Light body option:
    1. Click on Advanced Options to open more settings
    2. In Add Condition on, select "Skin layer" option (which is added a Skin color option in step 3.1.)
    3. Select the "Light" clipart in the Skin color options.


      This makes the "Light body" option only show up on store when customer selects the "Light" value in "Skin colors" option.

  3. Enable the "Show option as default" toggle. To show this "Light color body" layer on artwork from the beginning (when customers have not select any options yet).


You can choose to enable this option in another body layer, like "Dark color body", to show the Dark body from the beginning instead of Light.
But if you don't enable on any layer, there will be no body showing up on artwork by default.

  1. (optional) Scroll down to the Default value feature.
    1. Click on Show cliparts to select
    2. Select a clipart that you want to pre-tick when customers select the Light value in Skin option.


  2. Follow the same steps for other color, such as Dark color.
    1. Upload a "Dark color body" layer.
    2. Resize and move it to the same position as the "Light color body" layer.

Tips: you can check the resolution number below the clipart to make sure the new Light body layer has the same size as the original.


    1. Add personalization option


    2. Add condition to depend on the "Dark" value of Skin color. And select Default value if necessary.
Only enable "Show option as default" in one layer (light or dark body).
If you enable on 2 layers, both Light and Dark body layers will show up on artwork from the beginning.

  1. Make sure to reorder all body layers on top of the skin layer. In order to hide that Skin layer.


  1. Save & Done!

  1. Bonus: Remember to double check the position of each options and re-order it in Campaign.

Other cases

1. There are more than one layer depending on skin color:
You can follow the steps above normally, and Add condition to all those layers to depend on the same Skin layer's option.

For example: a body has 3 parts: neck, hand and pants. You can set the same Condition to all 3 layers to depend on one Skin layer's option.


2. There are more than one person:
In this case, you'll need to add more than one Skin layers to add different Skin color option.
For example: you have 2 people → upload 2 "Skin layer" layers → add "Personalize option: 1 clipart category" and choose the same "Skin color" clipart category for each Skin layer. 


Then add condition of each person to each skin layer.


On store, customers will see 2 "Skin color" options for each person.


Click on an option will show the other options for body of a person.

    • Related Articles

    • Set up artwork and printarea for Mug

      For mug, most fulfillment providers use the wrap-around method to print on the outside of the mug. That's why the mug's printarea is usually in a horizontal rectangle shape. Depending on the position you want to print on the mug, you will need to ...

    • Artwork Size

      Artwork size is the size of the area containing your design file. How to set size for the Artwork When you create a new artwork, you need to set size for this artwork Click New artwork button then a window appear and you will set size for this ...

    • Add Condition for Layer

      What is Condition for Layer You can set a dependency for a layer to show up only when another layer meets a condition. I.e. Layer "B" and its personalization option can only appear if customer selects a specific option in layer "A". How it works ...

    • Artwork Category

      What an Artwork is Artwork is a design to be added to a print-on-demand product for selling. Learn about how to upload and edit Artwork here: Upload & manage Layers in Artwork How to add an artwork to a category Create an Artwork in Artwork page Or ...

    • Set up wing for different size of dogs

      STEP 1: Divide your dogs to 3 groups according to size: big dogs, medium dogs and small dogs. Then, upload "Wing" layer to your artwork. In our instruction, we will start with big size of dog breeds. STEP 2: Open personalization editor. Enable "Add ...