Canvas tools and guides

Canvas tools and guides

Overview

Canvas tools are the controls in the horizontal row beside the logo at the top of the editor. They help customers measure, align, and preview their design. You manage them in Calculator Editor → Step 5 (Designer): click a tool chip in the preview to turn it on or off and set whether it is on by default when customers open the editor. Use + to add optional tools. Hover a chip or open the (i) help on + for per-tool details.

Tool reference

Tool What it does Notes
Ruler Unit labels and tick marks on the artboard edges Set Units (in, ft, m, cm, mm, px) and tick granularity under gear → Designer or Image Edit → Ruler. Grid and snap spacing follow these settings. When the ruler is off, dotted edge guides still show product width and height.
Grid Light overlay grid on the artboard Spacing follows ruler tick granularity. On by default in new configs.
Person silhouette 165 cm (5′4″) scale figure beside the canvas No settings — a size reference.
Snap to grid Snaps move/resize to grid spacing Uses the same spacing as the visible grid.
Bleed guide Customer toggles a cyan bleed outline Bleed distance comes from artboard defaults or a bleed binding.
Safe zone guide Customer toggles a green safe-area outline Inset comes from artboard defaults or a safe zone binding.
Show panels Bright green vertical lines at wallpaper panel seams Add from + when needed. Requires a Product image binding with panel width set. See Wallpaper and product image bindings.
Fit to Design Resizes the artboard to wrap placed content An action button on the storefront, not a persistent on/off toggle.
Preview Toggles the product mockup overlay Designer only. Driven by your Product preview binding. Hidden when Customer access is Product preview. See Preview scenes, effects, and clear stickers.
Undo / Redo Revert or re-apply canvas edits Action buttons. Undo applies to canvas changes only — not to calculator option changes in the right panel.

Guide colors

The canvas draws three guides so customers keep artwork inside print boundaries:

Guide Color Meaning
Trim / cut Black (dashed) Final product size; die-cut outline when a cut-line binding is configured
Bleed Cyan Bleed margin outside the trim
Safe zone Green Keep logos and text inside this area

These colors are the same in the Step 5 preview and on the storefront. See Cut lines and die-cut export for trim shapes.

Examples

  • Print stickers — Turn on Ruler (inches), Bleed guide, and Safe zone guide so customers keep text away from the cut edge. Leave Snap to grid on for tidy alignment.
  • Wallpaper — Add Show panels and Ruler (feet) so customers see seam positions at true scale. See Wallpaper and product image bindings.

    • Related Articles

    • Binding calculator options to canvas properties

      Overview A binding maps a calculator option (Width, Height, Material, Shape, …) to a property of the editor canvas (artboard width, background color, cut-line shape, bleed, …). When the customer changes a bound option in the editor's right panel, the ...

    • Configuring Step 5 (Designer)

      Overview Step 5 — Designer appears in the calculator wizard once you've added a Product Designer option in Step 2 — Options & Pricing. (When no Product Designer option exists, this step is hidden.) Clicking it opens a full-screen workspace that ...

    • Designer features (left sidebar)

      Overview Features are the tools customers use inside the full-screen editor — adding text, clipart, shapes, uploads, and more. You turn them on and configure them from the left sidebar of Calculator Editor → Step 5 (Designer). Each feature is a ...

    • How customers use the Product Designer (storefront)

      Overview When a customer clicks your Product Designer button, a full-screen editor opens with their current calculator option values applied (artboard size, background, bound product image, and so on). This page walks through the customer experience ...

    • Wallpaper and product image bindings

      Overview Wallpaper-style calculators need the bound pattern image to match real wall size on the artboard — not stretched to fill the screen. In Appify CPO you do this with a Product image canvas binding (Step 5 → Designer mode → right panel → Canvas ...