A tour of the template builder
The builder workspace — the tool rail, the inspector, the canvas, the Sides & Layers panel — and where each control lives.
Templates 101 explains what a template is. This page is the workshop tour: the panels you'll actually be clicking, and where each control lives, so the placeholder docs make sense when you get to them.
Open any template from Templates (or click Create template) and you're in the builder. Four regions, left to right.
The tool rail — far left
A vertical strip of eight icons under the heading Tools. Hover an icon to see its name. Each tool changes what the inspector shows and which elements you can move on the canvas — only the active tool's elements are interactive, the rest sit still so you can't nudge them by accident.
| Tool | What it's for |
|---|---|
| Canvas | Define where your customers can add their designs onto your products. |
| Image Placeholders | Where uploaded images will load on your design. |
| Text | How and where customers add text. |
| Graphic Elements | The library of stickers and backgrounds customers can add. |
| Masks & Overlays | Masks that cut designs to a shape, or overlays that sit on top of the artwork. |
| Products | Assign this template to products in your store. |
| Template Settings | How this template behaves for customers — features, discounts, and confirmations. |
| Output Settings | The print-ready files this template produces — size, format, and file naming. |
A red dot on Output Settings means a print file has no side placed on it. Fix that before you go live — see Sides and output files.
Switching tools deselects everything and, if you have unsaved changes, saves them a couple of seconds later.
The inspector — beside the rail
Click a tool and its settings open in the inspector panel. The heading is the tool's name; the controls below change with the tool and with whatever element you've selected on the canvas. This is where most of your build time goes:
- Text shows the element's linked fonts and colours, icon placements, box size, and the settings that decide what the customer can change. See Text placeholders.
- Image Placeholders, Graphic Elements and Masks & Overlays show a list of elements at the top (add with the + button, drag to reorder) and the selected element's size and settings below. See Image, sticker, background, and mask placeholders.
- Products, Template Settings and Output Settings replace the canvas with a preview or the print page.
Most sections in the inspector are collapsible. Click the heading to open or close it.
The canvas — centre
The middle of the screen is your design surface. It shows the base product image — your blank product — with the printable canvas area drawn on top of it. Everything a customer will edit sits inside that canvas.
The canvas is a live editing surface, not a picture of one. Drag a placeholder, resize it by a corner handle, rotate it (it snaps at 45° steps), nudge it with the arrow keys — what you see is what the customer's design frame will look like.
Set the canvas's shape and size in the Canvas tool:
- Print sizes — 10×12", 14×16", 16×18", 18×20" presets for common garment prints.
- Paper sizes — A5 to A0.
- Aspect ratio — Square (1:1), Portrait (4:5), Portrait (2:3), Landscape (3:2).
- Width, Height, Position X, Position Y, Rotation — set any of these by hand.
The rulers around the canvas run from 0 to 2000. That's the builder's design space, not your print size — the print size lives in Output Settings.
Two controls sit on the canvas itself:
- Zoom to print area / Reset zoom — toggles between the whole base image and a close-up of the canvas.
- Hide other elements / Show other elements — hides everything that isn't the active tool's type while you work.
The canvas is the printable area, not the whole product. A common first-template mistake is sizing the canvas to the entire T-shirt photo. Size it to where print actually goes. Everything outside the canvas is context for the shopper, not printable space.
The Sides & Layers panel — right
The right-hand panel has two lists. It's hidden while the Output, Products or Template Settings tools are active.
Sides. One per print location — front, back, sleeve. Click + (Add side) to add one. The … menu on a side offers Rename, Duplicate and Delete (only when there's more than one side). Duplicating a side copies its layers, elements and print-file placements. See Sides and output files.
Layers. Each side holds up to 3 layers. Every element belongs to a layer, and layer order decides what sits in front. Drag to reorder. The … menu offers Hide / Show, Rename, Duplicate and Delete. The Show other layers switch shows the elements on layers other than the one you're working on.
Deleting a side or layer asks you to confirm and warns that it may affect customer orders — a design saved in a shopper's cart loses anything on that side or layer.
The header — top
Across the top: a back arrow, the template name, View on your store, Undo, Redo and Save.
- View on your store appears once the template is assigned to a product. It opens that product on your storefront so you can test the customizer as a shopper. It's disabled while you have unsaved changes ("Save to see your changes").
- Save commits your changes and is disabled until you change something. A saved template that's assigned to a product updates that product's customizer straight away.
Leaving the builder with unsaved changes asks: "You have unsaved changes. Leave without saving?"
Editing a template that's already taking orders? Saving is live. If the template powers real orders, Duplicate it from the Templates page first, edit the copy, test it with View on your store, then reassign the product. The original keeps shipping while you tinker. More in Templates 101.
Keyboard shortcuts
| Keys | Action |
|---|---|
| Cmd/Ctrl + S | Save |
| Cmd/Ctrl + Z | Undo |
| Cmd/Ctrl + Shift + Z, or Ctrl + Y | Redo |
| Arrow keys | Nudge the selected element by 1; hold Shift for 10 |
| Cmd/Ctrl + C, Cmd/Ctrl + V | Copy and paste the selected element |
| Cmd/Ctrl + D | Duplicate the selected element |
| Delete or Backspace | Remove the selected element |
| Esc | Deselect |
Shortcuts that act on elements are ignored while you're typing in a field.
A sane build order
Templates come together fastest in this order:
- Set the Canvas — base image, size, position.
- Add sides if the product needs them.
- Drop in placeholders and position each one.
- Set Output Settings — the print file's format and size, and place each side on a print file.
- Assign the product in Products, save, and open View on your store. Design as a customer would, and fix what's awkward.
Common pitfalls
- Building against the whole product photo. Size the canvas to the printable area, not the blank.
- Forgetting to place a side on a print file. A side with no print file renders nothing, silently. The Output Settings tool shows a red dot and a warning. See Troubleshooting.
- Editing the live template in place. Duplicate before you experiment on anything customers are ordering from.
What's next
- The placeholder types you'll use most: text, images and assets, sides and output
- Assign products, variant images and size guides: Products, variants and cross-sells
- Make it match your store's look: Styling the customizer