A tour of the template builder

The builder workspace — the canvas, the layers panel, the toolbar, and the preview — 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 (or click New template and choose a blank canvas) and you're in the builder. Three regions.

📷 [screenshot: the template builder with the layers panel left, canvas centre, properties panel right, and the top toolbar labelled]

The canvas — centre

The middle of the screen is your design surface. It shows the base 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, nudge it with the arrow keys — what you see is what the customer's design frame will look like. There's no separate "design mode."

Set the canvas's shape and size in the Canvas settings:

  • Ratio presets — square, portrait, landscape, and common product ratios. Pick the one closest to your printable area.
  • Dimensions — the pixel size of the design area. This is the resolution customers design against, not your final print size (that's the output settings).
  • Position — where the canvas sits over the base image. Line it up with the actual printable region of the blank — the chest panel of a tee, the wrap of a mug.

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 layers panel — left

Every element on the current side is a layer: each placeholder, the background, any fixed art you've added. The layers panel lists them top-to-bottom, and top of the list means front of the canvas.

  • Reorder — drag a layer up or down to change what sits in front of what. A mask or overlay usually belongs at the top; a background at the bottom.
  • Lock — locks a layer so it can't be moved or resized by accident while you work on its neighbours.
  • Hide — toggles a layer's visibility in the builder so you can work behind it. Hidden-in-builder is a working convenience; it doesn't remove the layer from the template.
  • Sides — if the template has front, back, or sleeves, the side switcher sits here too. Switching sides swaps the whole layer stack. See Sides and output files.

The properties panel — right

Click a layer and its settings open on the right. The panel changes with what you selected — this is where most of your build time goes:

  • A text placeholder shows font, colour, size, alignment, and which of those the customer is allowed to change. See Text placeholders.
  • An image or asset placeholder shows fit rules, allowed uploads, and stickers/backgrounds/masks. See Image, sticker, background, and mask placeholders.
  • An image placeholder also shows the AI tools available on it — background removal, image generation, and the rest — which you toggle here. See Wrangler AI overview.

To add a placeholder, use the Add control in the toolbar, pick the type, and it drops onto the canvas ready to position.

The toolbar — top

Across the top: Add (new placeholder or side), undo/redo, zoom, and the two buttons you'll reach for most.

  • Preview — opens the customer's exact view of the template, live canvas and all. Use it constantly. Preview is the difference between "looks right in the builder" and "works for a shopper."
  • Save — commits your changes. A saved template that's linked to a product updates that product's customizer straight away.

Editing a template that's already taking orders? Saving is live. If the template powers real orders, Duplicate it first, edit the copy, test it in Preview, then switch the product's link over. The original keeps shipping while you tinker. More on duplicate/recover in Templates 101.

A sane build order

Templates come together fastest in this order:

  1. Set the canvas — base image, ratio, dimensions, position.
  2. Add sides if the product needs them.
  3. Drop in placeholders and position each one.
  4. Turn on the AI tools you want per image placeholder.
  5. Set output — the print-ready file format and side mapping.
  6. Hit Preview, design as a customer would, and fix what's awkward.
  7. Save and link the product.

Common pitfalls

  • Building against the whole product photo. Size the canvas to the printable area, not the blank.
  • Forgetting the output mapping. A side with no output file mapped renders nothing, silently. See Troubleshooting.
  • Editing the live template in place. Duplicate before you experiment on anything customers are ordering from.

What's next