Image placeholders are places where shoppers can upload their own pictures. An image placeholder sets the boundaries where the picture will be uploaded and is represented on the canvas by a dashed line. You can format image placeholders in many ways to give customers further options.

How It Works

When you add an Image placeholder to your design:

  • Shoppers will be able to upload their own image (JPG, PNG, BMP, HEIC).

  • The image appears inside the placeholder you set on the design.

  • You control the shape, position, and size of the placeholder. 

  • Shoppers are able to move the image inside the placeholder.
  • You can automatically apply filters, remove the background, cut out faces, to whatever image the shopper uploads.

Shoppers can upload one image per placeholder. The file types supported by image placeholders are JPG, PNG, BMP and HEIC. If you want customers to upload other formats, such as PDF or Vectors, check vector placeholders.

 


In this article:

To add an image placeholder

You can add image placeholders on Designs and on Templates, by clicking the Image Placeholder button.

add image placeholder.png

Each image placeholder you add will have a Name that you can edit, and a Unique Id for you to easily identify it. 

Transform the image placeholder

Directly on the canvas or by expanding the Transform toolbox, you can transform the image placeholder:

dynamic image transform.png

Change the uploaded image behavior

Changing the behavior of the placeholder will affect what happens when a customer uploads an image. You can configure different behaviors to apply effects and filters to the images:

 

Image behavior.png

Image type

You can choose between 3 image types to change the color mode of the user-uploaded image. Image types available are:

Full Color

Images in full color mode will remain exactly as the customer uploaded them. This is the standard mode for images.

full color image.png

Grayscale

Images in grayscale mode will be converted to grayscale (black and white)

grayscale image.png

Single Color (Image Tracing)

Images in single color mode will be traced and converted to vectors with a single color. You can pick what color to use for the vector, and even give multiple color options for customers to choose from.

single color image.png

change color.png

  1. Select the image placeholder
  2. Expand the Image Behavior toolbox
  3. Select from the dropdown the Image Type
  4. If you selected Single Color, click the color swatch or the color picker to select a color. Using the swatch you can add colors with Hex, RGB-A, or CMYK-A values (the last 2 depend on the color mode of your design). If you want to add transparency, just slide the Alpha control on the bottom of the chart.

2025-06-05 11.12.20.gif

Tip

If you select single image mode, you can add multiple color options to the user-uploaded image. To add more than one color option you can either use a color library or assign multiple color options by changing the Option number to the left of the color swatch and choosing a new color.

image single color.png

Add a mask

Masks let you give the placeholder a particular shape (other than a square or rectangle!).

  1. Select the image placeholder
  2. Expand the Image Behavior toolbox
  3. Click Upload mask
  4. Select the JPG file you want to use as a mask. 

2025-06-05 12.29.57.gif

For masks to work, the file needs to be a black-and-white image of the mask, where the shape you want the placeholder to have is black and the background of the image is white, in good quality (we recommend at least 1000x1000 px), since the better the quality the smoother the mask. Here are some examples of masks: 

masks.png

 

Tip

You can also create masks simply by layering elements on top of each other. This is especially helpful if you want to mask images with a specific design on top of them. To achieve this add a PNG on top of the user-uploaded image using a dynamic image, or a vector using a dynamic vector.

Fit / Fill

By default, customer-uploaded images are set to fit the placeholder. If you'd like the image to cover the entire placeholder, then you should enable the fill checkbox. When images fill the placeholder, they are resized (proportionally) to occupy the entire placeholder.

  1. Select the image placeholder
  2. Expand the Image Behavior toolbox
  3. Check Fill Area option 

2025-06-05 11.17.53.gif

Limit image size to placeholder area

When this is enabled together with the fill area, shoppers won't be able to leave any blank space in the placeholder. This means their image movement will be constricted, so the placeholder is filled with an image at all times.

  1. Select the image placeholder
  2. Expand the Image Behavior toolbox
  3. Check Fill Area
  4. Check Limit image size to placeholder option 

2025-06-05 11.27.55.gif

Rotation Lock

By default, customer-uploaded images can be rotated freely inside the placeholder. If you want customers only to be able to rotate it in 90° increments, then you should enable the 90 Degree Rotation Lock checkbox. 

  1. Select the image placeholder
  2. Expand the Image Behavior toolbox
  3. Check 90 Degree Rotation Lock option 

2025-06-05 11.19.24.gif

Automatically remove image background

You can remove backgrounds from shopper-uploaded images using either our built-in Customily background remover (free!) or third-party integrations like cutout.pro and remove.bg.

  1. Select the image placeholder
  2. Expand the Image Behavior toolbox
  3. Choose one of the available background removal options:
  • ✅ Customily Remove BG (Free)
  • 🔗 cutout.pro (requires external account)
  • 🔗 remove.bg (requires external account)

Tip

Customily Remove BG is fast and built-in—perfect for most use cases. Use third-party services only if you require highly specific background handling. All third-party services require an account with either of them to be able to use it. For information on their costs visit cutout.pro or remove.bg

2025-06-05 11.36.51.gif

Automatically cut out faces

You can also cut out faces from portraits using our Customily Face Cutout tool (free and built-in), or the cutout.pro integration.

This feature detects the subject's face and crops it out from the background—great for turning shopper photos into stickers or placing faces in stylized designs. Face cutout works great with humans or animals. Customily's built in tool can cutout multiple faces in an image, while cutout.pro integration, cuts out one face at a time.

  1. Select the image placeholder
  2. Expand the Image Behavior toolbox
  3. Choose one of the available face cutout options:
  • ✅ Customily Face Cutout (Free)
  • 🔗 cutout.pro Face Cutout (external account required)

Tip

Customily Face Cutout BG is fast and built-in. It can cutout multiple faces in an image, however it works best with single portraits. Cutout.pro on the other hand, only cuts one image at a time, if shoppers upload an image with multiple faces, it will select one randomly. 
Cutout.pro requires an account with them to be able to use it. For information on their costs visit cutout.pro

2025-06-05 11.46.06.gif

Apply artistic filters (pencil, watercolor, cartoon)

Customily includes built-in filters and 3rd party integrations to give uploaded images an artistic or hand-drawn look:

✏️ Pencil Filter

Creates a sketch-style version of the image.

Pencil drawing.png

🎨 Watercolor Filter

Applies a soft, painted effect.

watercolor.png

🖌️ Cartoonize with VanceAI

Transforms portraits into cartoon style drawings (external account required - Check vanceai.com for costs).

cartoonize.png

To apply an artistic filter:

  1. Select the image placeholder
  2. Expand the Image Behavior toolbox
  3. Choose the desired filter:

  • ✅ Pencil (Free)
  • ✅ Watercolor (Free)
  • 🔗 Cartoon (via vance.ai) (requires external account)

Tip

You can combine artistic filters with any of the other settings on image behavior to get amazing results. For example:

  • Combine pencil with Single Color Tracing image type to create perfect line drawings for engraving
  • Combine background removal with watercolor to create beautiful watercolor portraits

 

Want More Advanced Effects?

If you're looking to apply more complex or trendy AI styles (like Ghibli, Renaissance, Pixar-style, etc.), consider using a Meta Filtered Image instead.

  • Meta Filters apply custom AI prompts to shopper-uploaded images
  • You define the style using a simple text prompt
  • Ideal for viral styles or advanced image transformations

Use Meta Filters when: you want greater control over how the image is transformed, or you're replicating effects not covered by the built-in filters.

Create Images from Text Prompts (Text to Image)

With Text to Image, shoppers can generate a brand-new image just by typing a short description. This feature uses AI to turn a prompt—like “a cat flying a rocket through space”—into a unique, automatically generated image.
Great for fun or imaginative products where the shopper doesn’t have a photo to upload, or wants something totally custom and unexpected.

Important

The Text to image with OpenAI is a 3rd party integration. You will need to have an account to be able to use it. For information on their costs visit openai.com.

  1. Select the image placeholder
  2. Expand the Image Behavior toolbox
  3. Check Text to image with OpenAI
  4. Enter the prompt you want to use as the default (shoppers will then be able to add their own prompt)

2025-06-05 12.16.53.gif

Add an outline to the uploaded image

You can add an outline (stroke) around the shopper’s uploaded image for extra definition and visual impact. This is especially useful when paired with features like background removal or face cutout, since the outline will follow the shape of whatever remains—creating clean, eye-catching effects.

  1. Select the image placeholder
  2. Expand the Advanced toolbox
  3. Define:

  • Outline Width

  • Outline Color

2025-06-05 12.25.44.gif

Test how the shopper-uploaded image will look

At any moment while configuring your image placeholder, you can test how it will look on your design, by clicking Try with an image button.

This is just for you to test, whatever image you upload there won't be saved, and won't be visible to your customers ever.

try with an image.png

Tip

Once you upload an image, you can also move it around and resize it as your customers would. To do that, double-click the image placeholder on the workspace until its boundaries turn red, and only the uploaded image is highlighted in blue. Then, you will be "acting as the shopper" who will be able to move the image around inside the placeholder. To exit this mode, click anywhere outside the placeholder.

2025-06-05 12.33.48.gif

Share

Was this article helpful?

6 out of 7 found this helpful
Have more questions? Submit a request