Position, size, and rotation

Placing a layer on the product photo — axes, width and height, opacity, and rotation.

Every layer, text or image, is positioned with the same settings.

The settings

Setting	Range	Default	What it does
X position	0 – 100%	50	Horizontal position. 0 is the left edge, 100 the right
Y position	0 – 100%	50	Vertical position. 0 is the top, 100 the bottom
Width	0 – 100%	25	The layer's width as a share of the image. Image layers and Textarea only
Height	0 – 100%	25	The layer's height. Image layers and Textarea only
Opacity	0 – 100%	100	Transparency. 100 is solid
Rotation	-180 – 180°	0	Rotation in degrees. Negative is anticlockwise

All position values are percentages of the image, not pixels. This keeps the layer in the same relative place whether the image is displayed on a phone or a large monitor.

Positions are percentages of the image, so they hold at any display size.

Which types get width and height

Type	Width and height	Instead they get
Image layers — File upload and the eight selection types	Yes
Textarea	Yes — it is a block of text
Text and Number	No	Curve and Auto-fit max width

Text and Number are single-line types. They are sized by the font size and grow as the customer types, so they use auto-fit instead of a fixed width.

How to position a layer

1

Start from the middle

Both axes default to 50, which places the layer in the center. Adjust from there.

2

Set the vertical position first

Y position is usually easier to set, because the print or engraving area is at a known height on the product.

3

Then the horizontal position

X position at 50 centers the layer, which is correct for most personalization.

4

Size it

Image layers: set Width and Height. Text layers: adjust Font size on the text layer settings.

5

Rotate only if the product needs it

Rotate a layer only to match a slanted surface or an intended design. On a straight product, rotation looks incorrect.

6

Test with the extremes

Test a one-character entry and a maximum-length entry, and both a tall and a wide uploaded image. Positioning problems appear at these extremes.

7

Check it on mobile

The percentages are the same, but a layer that is readable on a desktop preview can be too small on a phone.

Opacity

Value	Use for
100	Almost everything. Printing and engraving are opaque
60–90	Etched glass, watermarks, subtle tone-on-tone printing
Below 50	Rarely. The customer may think their text has not registered

If a layer does not sit well against the photo, adjust the color before reducing the opacity.

Rotation

Value	Use for
0	Almost everything
A few degrees either way	Matching a product photographed slightly off-square
90 or -90	Text running up the side of a product — a spine, a pen barrel
180	Rarely useful outside deliberate design

For text on a curved surface, such as around a mug or a ring, use Curve instead of rotation. Rotation turns the whole line, while curve bends it.

Several layers on one image

Goal	How
A name above a date	Same X position, different Y position — for example 40 and 55
Two layers side by side	Same Y position, different X position — for example 30 and 70
Text over an uploaded photo	Position the text within the photo layer's area, and give it a stroke for contrast
Layers that must never overlap the product edge	Give each a crop area

Notes

• Percentages are relative to the background image, so positions stay accurate across products only if your photos are framed consistently. See Choosing the background.

• If you let customers move a layer, your position is their starting point. See Customer controls.

• A crop area limits where a layer can appear. Use one whenever customers can move a layer.

• Changing the background moves every layer. Set the background first.