Skip to main content
An image layer is any raster image placed on the canvas — a logo, a background, a decorative element, or a placeholder that the customer fills with their own photo.

​
Add an image

1

Pick Image from the Add panel

Customei opens the library picker.
2

Pick from the library or upload

  • Click an asset in the picker to place it.
  • Click Upload to add a new file from your computer. Supported formats: PNG, JPG, WebP, SVG. Uploads land in your library for reuse.
3

Position it

The layer drops onto the canvas at a sensible size. Drag to move, corner handles to resize, the rotation handle above the bounding box to rotate.

​
Image properties

Selecting an image layer shows these properties on the right:
  • Source — the library asset reference. Click Replace to swap it without losing the transform.
  • Position and size — X, Y, width, height, rotation.
  • Opacity — 0–100%.
  • Flip — horizontal or vertical mirroring.
  • Tint — a color multiplier useful for brand-matching one-color icons.

​
Two roles: decoration vs placeholder

Image layers can play two very different roles:

​
Decoration

A decorative image is fixed — it’s part of the template and doesn’t change per order. Use it for:
  • Backgrounds, borders, and frames.
  • Brand logos that stay the same on every product.
  • Pre-baked art that doesn’t need personalization.
You don’t bind decorative images to any option field.

​
Placeholder (customer upload)

A placeholder image layer is one the customer replaces with their own photo. You:
  1. Drop a stand-in image on the canvas (a “photo here” graphic).
  2. In the option set, add an Image upload field.
  3. Bind the upload field to the placeholder layer.
At runtime, when the customer uploads a photo, Customei:
  • Sends the file to a staging bucket (via app proxy).
  • Swaps it into the placeholder layer.
  • Re-renders the preview with the new image.
  • Attaches the staged image to the line item so your printer gets the original.
See the Upload and staging page for how upload storage works.

​
Cropping and content editing inside a frame

Most image layers are rectangular and just scale together with their bounding box. If you want the frame and the content to move independently — for example, a fixed photo slot with an image the customer can pan and zoom inside it — use a frame layer instead. Inside a frame, the image content has its own offset, scale, and rotation relative to the frame bounds. That lets customers reframe their photo without resizing the slot on the product.

​
Background removal

If you want customer uploads to automatically have their background removed (for example, a “hero face” cutout on a mug), Customei supports a background-removal pipeline on the Image upload field. Enable it from the field settings in the option set:
  • Background removal: On — customer uploads go through an AI cutout step before landing on the canvas.
  • Background removal: Off — uploads are used as-is.
Background removal is a compute-heavy step and counts against your credits. It adds a few seconds of processing on every upload.

​
Tips

  • Use high-res sources. Customei scales down at publish time — you can always go smaller, but not bigger. For most print products, source images should be at least 300 DPI at the final size.
  • SVGs are for logos, not photos. SVG works great for brand marks; avoid it for complex illustrations because the storefront rasterizer is simpler than a full browser SVG renderer.
  • Tint is free color variety. A single white PNG icon can become every brand color by binding a Swatch field to the tint property.

​
Next