The editor

The projects list#

Modules → Image Maps opens the list of your projects.

The toolbar above the list has Export All, Import, Backup All and Restore — see Import, export and backup.

The project screen#

A project has four tabs. Builder and Styles appear once the project has an image.

The bar at the bottom of the screen has Preview, Save and stay and Save. Nothing is written to the database until you save.

Note

The editor keeps a copy of unsaved work in your browser. If the tab closes before you save, reopening the project offers to restore the draft.

General#

• Name — your internal label. It is shown to visitors only as the label of the first scene, until you rename that scene.
• Slug — the short name used to place the map (living-room). Leave it empty and a unique one is generated. Slugs are unique per shop.
• Main image — JPG, PNG or WebP, up to 10 MB by default. Remove image deletes it from the project.
• Project enabled — the map is shown in the shop only when this is Yes.

Canvas#

• Canvas width type — Full width (responsive) keeps the image's own size at most, Full width (stretched) fills the container, Fixed width uses your value in %, px or vw.
• Canvas alignment — left, center or right.
• Page layout — Full width (no theme container) or Theme container (section + container) to line the map up with your theme's content width. Embedded in a description, a map always fills its column.
• Loading animation — a skeleton and fade-in while the image loads. On by default.
• Image credit — an optional small caption on the map, links allowed, for photo attribution.
• Schedule and Product filters — see Targeting and scheduling and Product list and filters.

Drawing areas#

Pick a tool in the Builder toolbar:

While a drawing tool is active, clicks draw instead of selecting, so you can draw over existing shapes. When drawing a polygon on a zoomed canvas, drag to pan without dropping a point.

Selecting and arranging#

• Click a shape to select it; Ctrl+Click adds to the selection, Ctrl+A selects all.
• Drag to move, or nudge with the arrow keys (Shift moves 10 px).
• With a shape selected, the toolbar shows Unselect, Remove, Duplicate and Done, and the Align buttons.
• Right-click a shape for Duplicate here, Lock / Unlock, Bring to front, Send to back and Group selected / Ungroup.
• List shows every shape by name; the labels button shows or hides shape labels on the canvas.

Grid and guides#

• Grid — Off, or from Finest to Coarsest. The grid scales with the image, so it stays visible on large photos.
• Smart guides — snapping lines to other shapes' edges and centers. On by default.
• Canvas BG — the editor background around the image (editor only).

Rounded and curved polygons#

Polygons can have rounded corners and smooth curves, shaped directly on the canvas like the pen tool in design software:

• Round corners — drag the small dot inside a corner to round all corners evenly; Alt + drag rounds only that corner.
• Curve edges — click a point to show its tangent, then drag the blue control dots. Alt + drag a point pulls out a curve handle; Alt + click makes it a sharp corner again.
• While drawing, Alt + drag places a curved point straight away.

On polygons with many points, only the active corner's dot is shown. Curves and corners are saved with the project and look the same in the shop.

The shape inspector#

Selecting a shape opens its settings on the right, in five panels:

Zoom and preview#

• Zoom with Ctrl + scroll, the − / + buttons or the slider. Fit shows the whole image, Fit shape zooms to the selected shape.
• Preview in the bottom bar opens the map in your storefront theme with Desktop, Tablet and Mobile widths. It includes unsaved changes, live prices and synced titles.
• Preview in the projects list opens the saved map on its own page in a new tab.

Keyboard shortcuts#

Press ? in the Builder, or click ? next to the zoom controls, for the full list.