The Personalizer editor
The canvas where you place printed options on the product image, and the toolbar for adding, finding, zooming, and hiding elements.
The Personalizer editor shows your background image with every printed option drawn on it. You select an element and drag it into place, and the values on its Personalizer tab update to match.
Before you start
- At least one option with the Personalizer switch on in its Personalizer tab. The editor appears once the first option is turned on. See Set up the Personalizer.
Where the editor appears
| Screen | Layout |
|---|---|
| Wide screen, preview in mobile view | Three panels side by side: the settings panel, the Personalizer editor, and the Preview |
| Smaller screen, or preview in desktop view | Two tabs at the top of the preview: Option form and Personalizer |
On a wide screen, the Personalizer editor sits between the settings panel and the Preview, with its toolbar at the top.
The toolbar
| Control | What it does |
|---|---|
| Add element | Prints another option on the product image |
| Elements | Lists every printed option, top element first |
| Zoom out, Zoom in | Changes the zoom between 50% and 200% |
| Fit to view | The percentage between the zoom buttons. Select it to return to 100% |
| Collapse Personalizer | Folds the editor into a narrow strip. Wide screens only |
Below the toolbar, the Background row shows the current background and a Change background button. See Choosing the background.
Add element
Add element lists the options in the form that can be printed but are not printed yet. Pick one and the app turns its Personalizer on with default settings, selects it on the canvas, and opens its Personalizer tab.
Add element only lists options that are not on the image yet.
When every supported option is already printed, the menu shows Every option that can be printed is already on the image.
Elements
Elements lists the printed options, with the element drawn on top first. Select a name to select that element and open its settings.
The eye icon next to a name hides the element in the editor and the preview only. Use it to reach an element that sits under another one. Customers still see it. An option that is hidden in the form shows a Hidden badge instead.
Elements lists the printed options top to bottom. A dimmed name is hidden in this preview only.
Zoom
Zoom in to place small elements precisely, such as a monogram or a name on a narrow strap. Scroll inside the canvas to move around the zoomed image.
Zooming only changes the editor view. It does not change the size of anything on the product.
Working on the canvas
| To | Do this |
|---|---|
| Select an element | Click it. Its option opens on the Personalizer tab in the settings panel |
| Move it | Drag it. It snaps to the horizontal and vertical center of the image, and a guide line appears |
| Nudge it | Press the arrow keys to move 1%. Hold Shift to move 5% |
| Resize an image | Drag a corner or side handle. Text is sized with Font size instead |
| Rotate it | Drag the handle above the element |
| Edit the print area | Click the dashed print area outline, then drag, resize, or rotate it |
| Deselect | Click an empty part of the canvas |
While an element is selected, a badge at the bottom of the canvas shows its position and rotation, and the size of image elements. Position and size are percentages of the image.
When you use a field in the Preview, the editor scrolls to its element. If the element was out of view or covered by another element, it is outlined in blue for a moment so you can find it.
Collapse a panel
On a wide screen, select Collapse Personalizer in the editor toolbar, or Collapse preview in the preview header, to give the other panels more room. The panel folds into a narrow strip. Select the strip to open it again.
A collapsed panel stays one click away as a narrow strip.
Desktop view
Select Show desktop view in the preview header to see the form at desktop width. The Option form tab then shows a product page: the product image with the design on the left and the form on the right. Switch to the Personalizer tab to edit the design.
Desktop view shows the design and the form together, the way a product page lays them out.
Notes
- Dragging and typing values change the same settings, so use whichever is faster.
- The editor uses the product you chose under Change background. The storefront uses the product the customer is viewing.
- Hiding an element from Elements is not saved and does not affect customers.
- If your plan does not include the Personalizer, the editor is locked. See Compare plans.
Was this helpful?
Thanks for your feedback! Tell us what was missing
Report an issue