Customer Interactions
The Personalizer supports three types of customer interaction with the canvas layers. Each can be enabled or disabled independently per element.
Drag
When Allow drag is enabled, the customer can click and drag the layer to reposition it anywhere on the product image.
The drag handle activates when the customer hovers over the layer — the cursor changes to a move cursor. Click and drag to move.
When to enable: Most personalized products where exact positioning matters to the customer (e.g., placing a name on a specific area of a shirt or mug).
When to disable: When you want the text or image to stay in a fixed position (e.g., inside an engraving area that you have defined). Disable drag and set the X/Y position precisely in the settings.
Resize
When Allow resize is enabled, the customer can resize the layer using corner handles that appear when the layer is selected.
Dragging a corner handle scales the layer proportionally. The text inside re-wraps or scales to fit.
When to enable: When the customer may want larger or smaller text on the product, or when the image they upload might need to be scaled to fit the product area.
When to disable: When the text size or image size is fixed by the product’s print area (e.g., an engraving plate with a fixed size).
Rotate
When Allow rotate is enabled, a rotation handle appears above the selected layer. The customer clicks and drags the handle in a circle to rotate the entire layer.
Rotation is in degrees (0–360°). The layer rotates around its center point.
Note: The Curve setting (in Text Settings) curves the text along an arc — this is separate from rotation. A customer can both curve and rotate a text layer if both are enabled.
When to enable: Products with a circular or angled print surface (e.g., round ornaments, angled badges, products photographed at an angle).
When to disable: Most flat-print products where angled text would look incorrect.
Selection handles UI
When the customer clicks on a layer, it enters “selected” state:
- A blue dashed selection border appears around the layer
- Drag handle: click anywhere inside the selection
- Resize handles: small squares at each corner
- Rotate handle: a circular handle at the top center, connected by a line
Clicking outside the layer deselects it and hides the handles.
The selection handles are not included in the captured design image. When the customer clicks “Add to Cart”, the handles are hidden from the canvas before the snapshot is taken, then immediately restored. The live preview is unchanged; only the saved design image is clean.
Snapping
When dragging or resizing, the layer snaps to:
- The horizontal and vertical center of the image
- The image edges (with a small margin)
Snap guides appear as faint lines when the layer aligns with a snap point.
Mobile / touch
All interactions work on touch screens:
- Drag: Single-finger touch and drag
- Resize: Pinch gesture
- Rotate: Two-finger rotate gesture
On mobile, the selection handles are made larger to be easy to tap on small screens.