Skip to main content
A frame is a special layer that holds content inside a fixed boundary. Unlike a regular image layer — where the image and its bounding box are one and the same — a frame has its own dimensions and an independent content transform, so the customer (or you) can pan and zoom the content inside the frame without resizing the frame itself. This is how you build a “photo slot”: a fixed rectangle or oval on the product where customers drop in their own photo and can re-frame it to fit.

​
The mental model

┌──────────────────────┐
│ Frame (fixed shape)  │
│   ┌─────────────┐    │
│   │ Content     │    │ ← content can be scaled, offset,
│   │ (moves     )│    │   and rotated independently
│   └─────────────┘    │
└──────────────────────┘
A frame has two distinct transforms:
  1. Frame transform — where the frame sits on the canvas and how big it is. This is like any other layer.
  2. Content transform — the scale, offset, and rotation of whatever is inside the frame, relative to the frame bounds. Anything outside the frame bounds is clipped.
When you edit the frame, you change the outer boundary. When you enter content-edit mode, you change the inner positioning without resizing the frame itself.

​
Add a frame

1

Pick Frame from the Add panel

A rectangular frame is dropped onto the canvas.
2

Resize the frame to fit the print area

Drag the corner handles. This is the final shape that the customer sees.
3

Assign content

Drag an image onto the frame or pick Set content from the frame’s Properties panel. The image fills the frame.

​
Content-edit mode

To reposition the content inside the frame without changing the frame itself:
  1. Double-click the frame, or pick Edit content from the right-click menu.
  2. The frame enters content-edit mode — you’ll see the full content (even the parts currently clipped) faded outside the frame bounds.
  3. Drag to pan, use corner handles to scale, use the rotation handle to rotate the content.
  4. Press Escape or click outside to exit content-edit mode.
The outer frame stays exactly the same while you’re editing the content. This is the key to building photo slots that don’t shift when a customer tries to recenter their image.

​
Frame shapes

By default, a frame is rectangular. You can also use elliptical frames — pick Frame → Ellipse from the Add panel. Any content placed inside is clipped to the ellipse shape. Custom shape frames (polygons, paths) are supported via the pen tool: draw a closed path, then convert it to a frame from the right-click menu.

​
Bind customer uploads to a frame

This is the standard “upload your photo” flow:
  1. In the template, add a frame where the photo should appear.
  2. In the option set, add an Image upload field.
  3. Bind the upload field to the frame’s content.
  4. (Optional) Set the field to Require reframing — customers must confirm their crop before adding to cart.
At runtime, when the customer uploads a photo, Customei:
  • Drops it into the frame.
  • Opens the reframing UI if reframing is required.
  • Saves the final frame + content transform in the order payload.
  • Regenerates the print file using the same transforms on paid orders.

​
Why frames and not just “resize the image”?

Because a customer’s photo shouldn’t dictate the print slot’s size. If they upload a portrait-orientation photo into a landscape slot, you want the slot to stay landscape and the photo to crop to fit — that’s exactly what a frame does.

​
Next