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:
- How to add an image placeholder
- Transform the image placeholder
- Change the uploaded image behavior (filters and more!)
- Add an outline to the image
- How to test how the shopper-uploaded image will look
To add an image placeholder
You can add image placeholders on Designs and on Templates, by clicking the Image Placeholder button.
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:
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 type
You can choose between 3 image types to change the color mode of the user-uploaded image. Image types available are:
Full ColorImages in full color mode will remain exactly as the customer uploaded them. This is the standard mode for images. |
GrayscaleImages in grayscale mode will be converted to grayscale (black and white) |
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. |
- Select the image placeholder
- Expand the Image Behavior toolbox
- Select from the dropdown the Image Type
- 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.
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.
Add a mask
Masks let you give the placeholder a particular shape (other than a square or rectangle!).
- Select the image placeholder
- Expand the Image Behavior toolbox
- Click Upload mask
- Select the JPG file you want to use as a mask.
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:
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.
- Select the image placeholder
- Expand the Image Behavior toolbox
- Check Fill Area option
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.
- Select the image placeholder
- Expand the Image Behavior toolbox
- Check Fill Area
- Check Limit image size to placeholder option
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.
- Select the image placeholder
- Expand the Image Behavior toolbox
- Check 90 Degree Rotation Lock option
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.
- Select the image placeholder
- Expand the Image Behavior toolbox
- 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
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.
- Select the image placeholder
- Expand the Image Behavior toolbox
- 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
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 FilterCreates a sketch-style version of the image. |
🎨 Watercolor FilterApplies a soft, painted effect. |
🖌️ Cartoonize with VanceAITransforms portraits into cartoon style drawings (external account required - Check vanceai.com for costs). |
To apply an artistic filter:
- Select the image placeholder
- Expand the Image Behavior toolbox
-
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.
- Select the image placeholder
- Expand the Image Behavior toolbox
- Check Text to image with OpenAI
-
Enter the prompt you want to use as the default (shoppers will then be able to add their own prompt)
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.
- Select the image placeholder
- Expand the Advanced toolbox
-
Define:
-
Outline Width
- Outline Color
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.
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.