The Builder Interface
The builder is a canvas-based design tool with a top bar, a secondary toolbar, a left sidebar, and the main canvas area. Here's a full walkthrough of every element.
Top Bar
The top bar is always visible and contains the session-level controls.
| Element | Description |
|---|---|
| Sidebar toggle | Show or hide the left sidebar |
| Brand logo / name | Your store's logo and/or name (configured per tenant) |
| Sheet size selector | Dropdown to switch between your configured sheet sizes. The canvas resizes to match. |
| Quantity | How many copies of this gang sheet the customer wants to order |
| Price display | Live price based on the selected size, pulled from your Shopify variant pricing |
| Save & Add to Cart | Exports the canvas, uploads it, and adds to the Shopify cart |
| Close | Closes the builder tab |
Secondary Toolbar
The toolbar has four grouped sections:
Create
| Button | Action |
|---|---|
| Upload | Open file picker — supports PNG, SVG, JPG, TIFF, WebP, BMP |
| Jersey | Open the Jersey Creator for name & number graphics |
| Batch | Open the Batch Jersey Creator for roster imports |
| Templates | Save or load a complete canvas layout |
Edit
| Button | Keyboard Shortcut | Action |
|---|---|---|
| Undo | Ctrl+Z | Undo last action |
| Redo | Ctrl+Y | Redo last undone action |
| Duplicate | Ctrl+D | Duplicate selected image |
| Delete | Delete / Backspace | Remove selected image |
Transform
| Button | Action |
|---|---|
| Rotate 90° | Rotate selected image 90° clockwise |
| 180° | Rotate selected image 180° |
| Flip H | Flip selected image horizontally |
| Flip V | Flip selected image vertically |
Crop
| Button | Action |
|---|---|
| Crop (drag) | Start interactive crop — drag handles to crop, then click Apply |
| Circle | Apply a circular mask to the selected image |
| Rounded rectangle | Apply a rounded rectangle mask |
| Diamond | Apply a diamond mask |
| Remove mask | Remove any applied shape mask |
Left Sidebar
The sidebar has three tabs:
Images Tab
- Upload zone — Click to browse or drag & drop files directly onto the zone.
- Image thumbnails — All images uploaded in the current session appear as thumbnails. Click a thumbnail to add another copy of that image to the canvas. Click "Remove" to delete it from the library (does not remove copies already on the canvas).
Builder Tab
The Builder tab contains canvas settings and tools:
Dimensions Panel (when image is selected)
Type exact values to position or resize the selected image:
| Field | Description |
|---|---|
| W | Width in inches |
| H | Height in inches |
| 🔒 / 🔓 | Lock/unlock aspect ratio |
| X | Horizontal position from left edge in inches |
| Y | Vertical position from top edge in inches |
View Controls
- Zoom In / Out / Fit / Fit Width — Controls for the canvas viewport.
- Zoom slider — Drag to zoom from 10% to 500%.
- Grid — Show or hide the reference grid.
- Snap — Enable snap-to-grid for easier alignment.
- Guides — Show smart alignment guides when dragging images near other images or edges.
- Bleed — Show the bleed margin overlay.
- Dark/Light toggle — Switch between dark and light mode.
Grid & Bleed Settings
When Grid or Bleed is enabled, configure:
- Grid spacing — How far apart grid lines are, in inches (minimum 1/16").
- Bleed size — How wide the bleed zone is, in inches.
Auto-Nest
See Auto-Nest & Fill Tools for full documentation.
- Spacing — Gap between nested images in inches.
- Preview Nest — Show a preview of the nested layout before committing.
- Auto-Nest (skip preview) — Apply immediately without preview.
Selected Image Info
When an image is selected, shows:
- Filename — Source file name.
- Original resolution — Pixel dimensions of the source file.
- Print size — How large it will print at the current canvas position.
- DPI badge — Color-coded effective DPI at current print size:
- 🟢 Good — 200+ DPI (safe for DTF printing)
- 🟡 OK — ~150–200 DPI (may soften slightly)
- 🔴 Low — Below ~150 DPI (may print blurry)
- Aspect ratio lock toggle — Lock or unlock free resize.
Replicate
- Copies — How many times to duplicate the selected image.
- Replicate Selected — Place N copies of the selected image on the canvas.
- Fill Sheet — Tile the selected image to fill all remaining space on the sheet.
Sheet Summary
Live stats for the entire canvas:
- Total images — Count of all images placed.
- Unique designs — How many distinct source files are used.
- Utilization — What percentage of the sheet area is covered. Color-coded green (≥70%), yellow (≥40%), red (<40%).
- Per-design counts — How many copies of each design are on the sheet.
Layers Panel
Click "Layers" to expand a list of every image on the canvas:
- Click an item to select it.
- Eye icon to show/hide an image.
- Up/down arrows to reorder layers.
Library Tab
Access your saved Design Library — a persistent gallery of artwork you've uploaded previously. Click any design to add it to the canvas.
Canvas
The canvas represents the physical sheet at 1:1 scale (zoomed to fit the viewport). Interaction:
| Action | Effect |
|---|---|
| Click an image | Select it |
| Drag an image | Move it |
| Drag a corner handle | Resize (aspect-locked by default) |
| Drag the rotation handle | Rotate freely |
| Drag an empty area | Pan the canvas |
| Scroll wheel | Zoom in/out |
| Drop a file | Upload and place directly on canvas |
Delete / Backspace | Remove selected image |
Keyboard Shortcuts
Press ? anywhere in the builder to open the full keyboard shortcut reference. Common shortcuts:
| Shortcut | Action |
|---|---|
Ctrl+Z | Undo |
Ctrl+Y | Redo |
Ctrl+D | Duplicate |
Delete | Delete selected |
+ / - | Zoom in / out |
Arrow keys | Nudge selected image |
? | Toggle shortcut reference |