Creating a Diagram

To create a diagram go to PartsDiagram Pro → Create Diagram in your Shopify admin.

---

The Create Diagram Form

Heading

The internal name for this diagram. This is what you’ll see in All Diagrams when managing your catalog. Make it descriptive enough that you can identify it at a glance — for example: BMW Z8 2003 — Engine Cooling System.

Create Page Diagram

This checkbox controls whether the diagram also creates its own dedicated Page at the same time.

Unchecked (default) — The diagram is created as a standalone diagram only. You’ll attach it to an existing Page later via that page’s edit form.

Checked — The form expands to show additional Page fields and the diagram and its Page are created together in a single step. This is the faster option when you’re building out your catalog from scratch.

When checked, the following additional fields appear:

Page handle — The URL slug for the diagram’s page (e.g. bmw/z8/2003/engine-cooling). Auto-generated from the heading but editable.

Page Meta Description — The description shown in search results for this diagram page.

Page Meta Title — The title shown in search results. Defaults to the heading if left blank.

Menu Label — A shorter label for navigation menus.

Upload Page Banner — An optional banner image for the page header. Accepts .jpeg, .jpg, .png.

Parent Page — Which page in your catalog hierarchy this diagram belongs to. Select the year or model page that this diagram lives under.

Model category — Assigns this diagram to a model category (e.g. Yamaha 10HP, BMW Z8). This is what the Shopify theme block uses to automatically display this diagram on the matching product pages in your store. See Manage Categories for how this works.

Brand category — Assigns this diagram to a brand category (e.g. Yamaha, BMW). Used alongside the model category for broader filtering and theme block matching.

Page category type — The level in your hierarchy this page represents (e.g. Diagram, Assembly).

Upload diagram image — The exploded-view image for this diagram. Accepts .jpeg, .jpg, .png. This is the image customers will interact with. See Uploading Diagram Images for tips on sourcing good images.

---

The Diagram Editor

Once the diagram is created, you land in the editor. Your image fills the canvas and a toolbar appears above it.

Toolbar

Control	What it does
Add Mark / Marking Mode	Toggles hotspot placement on and off. When ON, clicking anywhere on the diagram places a new hotspot at that position.
Line	Color of the callout line that connects the hotspot circle to the part. Click to change.
Circle BG	Background color of the numbered hotspot circle. Click to change.
Text	Color of the number inside the hotspot circle. Click to change.
Callout	Sets what type of hotspot this is — Single Product or Options Groups (for A/B/C sub-variants). See below.
Delete Mark	Deletes the currently selected hotspot.
Zoom In / Zoom Out	Zooms the diagram canvas for precise hotspot placement.
Reset Image	Reverts the image to its original upload (does not affect hotspots).
Reset Marks	Removes all hotspots from the diagram.
Reset All	Clears both the image and all hotspots.

---

Adding Hotspots

1. Click Add Mark in the toolbar — the label changes to Marking Mode: ON
2. Click anywhere on the diagram image — a numbered hotspot circle appears at that position
3. Repeat for every part you want to make clickable
4. When you’re done placing hotspots, click Marking Mode: ON again to turn it off

Hotspots are numbered automatically starting from 1. You can reposition a hotspot by turning marking mode off, then clicking and dragging it to a new location.

---

Duplicating Hotspots

Use this when the same part appears in multiple places on the diagram (e.g. a bolt used in 4 different locations).

1. Make sure Marking Mode is OFF
2. Click the hotspot you want to duplicate to select it
3. Press ⌘C (Mac) or Ctrl+C (Windows) to copy
4. Press ⌘V (Mac) or Ctrl+V (Windows) to paste
5. Drag the new hotspot to the correct position on the diagram

The duplicate gets the same number as the original (e.g. two hotspots both numbered 5) and will link to the same product. Set the Required Qty in the product table to reflect how many of that part the assembly uses.

---

Part Sub-Variants (A/B/C Options)

Use this when the same position on the diagram can be filled by more than one part — for example, a thermostat that comes in a 50°C and a 70°C version, both fitting the same location and listed as the same part number.

1. Make sure Marking Mode is OFF
2. Click the hotspot you want to turn into a sub-variant group
3. In the Callout dropdown in the toolbar, change Single Product → Options Groups
4. The hotspot number changes to show a dash suffix (e.g. 4-)
5. In the product table at the bottom, you’ll see multiple rows for that hotspot number — one for each variant (4-A, 4-B, 4-C, etc.)
6. Assign a different product to each row

Customers clicking that hotspot will see all the variant options side by side with their prices and stock status, and can choose which one to add to cart.

---

Linking Products to Hotspots

Below the diagram canvas is the product table. This is where you connect each hotspot to a Shopify product.

Column	Description
Rank	The hotspot number. Sub-variants show as 4-, 4-, 4- for A/B/C.
Title	Search field — type a product name or SKU to find and link it.
Price	Auto-filled from Shopify once a product is selected.
Required Qty	How many of this part the assembly requires. Defaults to 1. Increase for parts used multiple times (e.g. 4 identical bolts).
Action	Delete this product row.

Click Add product to add a new row if you need more products than hotspots (for example, additional sub-variants).

Caution

The diagram will not save if any hotspot is unassigned. Every hotspot on the diagram must have a product linked to it before you can click Save. If you’re not ready to link a hotspot yet, either delete it or save it as a draft by temporarily assigning a placeholder product.

Click Save when all hotspots are linked. The diagram is now live on its page.

---

Editing a Diagram

To edit an existing diagram, go to PartsDiagram Pro → All Diagrams, find the diagram you want to change, and click Edit. You’ll land in the same editor you used to create it.

What you can change

All of the same fields are available in edit mode:

• Heading — rename the diagram
• Page handle, Meta Title, Meta Description, Menu Label — update SEO and navigation fields
• Update Page Banner — replace the banner image for the diagram’s page
• Parent Page, Model category, Brand category, Page category type — reassign the diagram within your catalog hierarchy
• Update diagram image — swap out the exploded-view image. Your existing hotspots stay in place, so you’ll want to recheck their positions after uploading a new image
• Hotspots — add, move, duplicate, or delete hotspots using the same toolbar controls
• Product table — reassign products, update required quantities, or add/remove rows

Saving edits

The same rule applies: every hotspot must have a product linked before you can save. Click Save when you’re done.

---

Editing from the All Pages Menu

Caution

Some features are not available when you open a diagram from the All Pages menu.

When you navigate to a diagram via PartsDiagram Pro → All Pages (rather than All Diagrams), you’ll see a limited version of the edit form. Page-level fields like the banner image, meta fields, and parent page are available, but the full diagram editor — including hotspot placement, the toolbar, and the product table — may not load correctly.

Always edit diagrams from All Diagrams, not from All Pages. Use All Pages only to edit page-level content (handle, meta, banner, menu label).