Diagram Editor

The editor is where you transform a flat image into an interactive diagram by drawing hotspots and mapping them to Shopify products.

Open it by clicking any diagram name from the list, then clicking Edit, or by clicking Save & Continue on the create screen.

Layout

The editor is a split workspace:

Area	What it is
Canvas (centre)	Your diagram image with the hotspot overlay
Toolbar (left edge)	Tools for drawing, selecting, and navigating
Inspector (right panel)	Properties of the currently selected hotspot
Parts List (bottom)	Table of all hotspots — label, type, and mapping status

A toolbar runs down the left edge of the canvas:

Icon	Tool	Shortcut	What it does
Arrow	Select	V	Move and resize existing hotspots
Pentagon	Polygon	R	Click-and-drag a rectangle hotspot
Pin	Pin	P	Click to drop a point hotspot
Hand	Pan	Space (hold)	Drag the canvas
+ magnifier	Zoom in	scroll up	Zoom in
− magnifier	Zoom out	scroll down	Zoom out
Curved arrow	Undo	Cmd/Ctrl + Z	Undo last change

Drawing hotspots

Polygon hotspots

Best for parts with a clear bounding area — a boiler, a panel, a wheel.

1. Press R or click the Pentagon 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.

Pin hotspots

Best for small, precise parts where a rectangle would feel too large or cluttered — a screw, a connector, a valve.

1. Press P or click the Pin tool.
2. Click once at the exact location. The pin is dropped and selected.

Editing a hotspot

• Move — drag the hotspot body.
• Resize — drag a corner handle (polygon hotspots only).
• Delete — press Delete or Backspace while the hotspot is selected.
• Undo / Redo — Cmd/Ctrl + Z / Shift + Cmd/Ctrl + Z.

Assigning a product to a hotspot

With a hotspot selected, use the Mapped Products section in the right-hand inspector:

1. Click the product search field and type a product name or SKU.
2. Pick the matching Shopify product from the results.
3. If the product has variants, the Variant dropdown becomes active:
   • Leave it on "Any variant" — shoppers see a variant picker in the popup when they click this hotspot.
   • Pick a specific variant — the hotspot is locked to that exact SKU and no picker is shown.

The app stores a snapshot of the product's price, image, and SKU at mapping time, so the storefront renders immediately on first load.

Labels and display titles

Field	Where it shows	When to fill in
Label	Hover tooltip; bold title in parts list and popup	Always recommended — use a short shopper-friendly name like "Boiler" instead of a SKU
Custom display title	Overrides the product name in the popup body	Rarely needed — use when the Shopify product name is too long or technical

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, it falls back to the product title. This keeps the parts list readable when many hotspots share the same base product.

Saving

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

Zoom and navigation

Action	How
Fit entire diagram to canvas	Press 0 (zero) or click Fit
Jump to 100% zoom	Press 1
Zoom in / out	Scroll wheel
Pan the canvas	Hold Space and drag

Keyboard shortcuts (full list)

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