Configuring Hotspots
Hotspots are the numbered callout pins that customers click to identify a part. This guide covers everything you need to know about placing and configuring them.
What is a hotspot?
Section titled “What is a hotspot?”A hotspot is a small numbered pin overlaid on the diagram image. When a customer clicks a pin (or the matching row in the parts table), the corresponding part is highlighted and an Add to cart button appears. Each hotspot is linked to exactly one Shopify product or variant.
Adding a hotspot
Section titled “Adding a hotspot”In the diagram editor, you can add a hotspot in two ways:
- Click Add hotspot in the toolbar — a new pin appears in the center of the canvas
- Double-click anywhere on the diagram image — a pin appears at that exact position
The new pin is assigned the next available number. Numbers always start at 1 and increment by 1. You can change the display number in the hotspot settings panel if you need a custom sequence (for example, to match a manufacturer’s original numbering).
Moving a hotspot
Section titled “Moving a hotspot”Click and drag any hotspot pin to reposition it. The pin snaps to the nearest pixel so precise placement is easy even on dense diagrams. Zoom in using the + control (or scroll wheel) before dragging for finer control.
Hotspot settings
Section titled “Hotspot settings”Click a pin to open its settings panel on the right side of the editor. Available settings:
| Setting | Description |
|---|---|
| Number | The callout number shown on the pin and in the parts table |
| Linked product | The Shopify product or variant this hotspot maps to |
| Required quantity | How many of this part are needed per machine (shown in the Req. Qty column) |
| Note | Optional internal note — not shown to customers |
Linking to a product
Section titled “Linking to a product”Type in the Search products field to find a Shopify product by name or SKU. The dropdown shows matching results from your store’s product catalog. Select the correct match and the part name, price, and stock status populate automatically.
To link to a specific variant (e.g. a bolt that comes in M6 and M8 sizes), click Select variant after choosing the product and pick from the variant list.
Deleting a hotspot
Section titled “Deleting a hotspot”Click the hotspot pin to select it, then click the Delete (trash) icon in the settings panel. Alternatively, press Backspace or Delete on your keyboard while a pin is selected.
Deleting a hotspot does not affect the linked Shopify product in any way.
Reordering hotspot numbers
Section titled “Reordering hotspot numbers”Hotspot numbers are used to match pins to rows in the parts table — they don’t have to be sequential, but they do have to be unique. To re-number all hotspots in sequential order automatically, click Renumber hotspots in the diagram settings (gear icon, top-right).
Tips for dense diagrams
Section titled “Tips for dense diagrams”- Use the zoom controls (or scroll wheel) to work on tightly packed areas
- If two parts are very close together, place the pins slightly outside the parts and use the manufacturer’s callout lines as a visual guide
- For assemblies with 50+ parts, consider splitting them into two diagrams (e.g. Engine – Top End and Engine – Bottom End)
Saving your work
Section titled “Saving your work”Hotspot positions and settings are saved automatically as you work. You’ll see a Saved indicator in the top bar. Click Save & Publish when you’re ready to push the changes live to your storefront.