Internal tool

Face map hotspots

Drag a hotspot to move it, or select an area and click the photo to place it. Each face keeps its own positions. Changes save in this browser and show on the face map straight away.

Preview face map
Arrow keys nudge the selected hotspot by 0.5% (hold Shift for 2%). Positions are percentages of the photo, so they hold at any screen size.
How this maps to Shopline. The face map becomes a theme section, and each hotspot becomes a block with the same fields you see here: label, area, copy, technique steps, a product picker, and an X/Y position per face. The merchant edits them in the theme editor without touching code. Export produces the same data as a file for handover.