Diagram Editor

The editor is where you transform a flat image into an interactive diagram. Open it by clicking any diagram from the list, or by clicking Save on the create screen.

Layout

The editor is a two-column workspace:

• Canvas (left) — your diagram image with the hotspot overlay.
• Inspector (right) — properties of the currently selected hotspot: label, mapped product, mapped variant, custom display title.

A toolbar at the top of the canvas switches between modes:

Mode	Shortcut	What it does
Select	V	Move and resize existing hotspots
Draw rectangle	R	Click-and-drag a rectangle hotspot
Draw point	P	Click to drop a point hotspot
Pan	Space (hold)	Drag the canvas
Zoom	scroll	Zoom canvas under cursor

Drawing hotspots

Rectangle hotspots

Best for parts with a clear bounding box (a wheel, a button, a panel).

1. Press R or click the rectangle tool.
2. Click-and-drag from one corner to the opposite corner of the part.
3. Release to commit. The hotspot is selected and its inspector opens.

Point hotspots

Best for small parts where a rectangle would feel cluttered (a screw, a connector, an indicator light).

1. Press P or click the point tool.
2. Click the location once. The point is dropped and selected.

Editing a hotspot

• Drag the body to move.
• Drag a corner handle to resize (rectangles only).
• Press Delete or Backspace to remove the selected hotspot.
• Use Cmd/Ctrl + Z / Shift + Cmd/Ctrl + Z for undo / redo.

Mapping a hotspot to a product

This is what makes the hotspot interactive on the storefront.

In the inspector for the selected hotspot:

1. Use the Product picker to search by title or SKU. Pick the matching Shopify product.
2. If the product has variants, the Variant dropdown becomes active. Pick the specific variant the hotspot represents.
3. Leave it on "Any variant" if the hotspot represents the product as a whole and shoppers should see the variant picker in the popup.
4. Pick a single variant to lock the hotspot to that exact SKU — no picker shown in the popup.

The app records a snapshot (price, compare-at price, image, SKU) at mapping time, so the storefront can render an accurate first paint even before live data loads.

Labels and display titles

Field	Where it shows	When to fill in
Label	Hover tooltip on the image; bold title in the side panel and popup	Always recommended — short and friendly ("Toe buckle", not "TC-447-A")
Custom display title	Overrides the product name shown in the popup body	Rarely needed. Use it when the Shopify product name is too long or technical to surface to shoppers

Label takes priority over product title

If a hotspot has a label, the storefront shows the label as the bold title for that part. If the label is empty, the storefront falls back to the underlying product's title. This keeps the side panel readable even when many parts share the same base product.

Saving

The editor auto-saves every few seconds while you work. The header shows a Saved indicator after each change. There's no separate "publish" step — once a hotspot is saved on a diagram that's assigned to a product, it's live on the storefront.

Keyboard shortcuts (full list)

Action	Shortcut
Select tool	V
Rectangle tool	R
Point tool	P
Pan canvas	hold Space and drag
Undo / Redo	Cmd/Ctrl + Z / Shift + Cmd/Ctrl + Z
Delete hotspot	Delete or Backspace
Zoom in / out	scroll wheel
Fit to canvas	0 (zero)
100% zoom	1