Quick Start

This guide walks you through building a complete, live parts diagram — from uploading an image to a clickable page on your store that customers can use to find and order the exact parts they need.

By the end you’ll have:

• An exploded-view diagram with numbered hotspot pins
• Each pin linked to a real Shopify product
• A published page customers can navigate to

---

Before you start

Make sure you’ve completed Install the App and Page Styling Setup so your store’s diagram pages are styled correctly.

You’ll also want at least one product in your Shopify catalog to link to — for example, a carburetor, filter, or gasket.

---

Step 1 — Create a Page

Diagrams live inside Pages. A Page is the published URL customers visit — it can hold one or more diagrams for a machine or product family.

1. Go to PartsDiagram Pro → Pages and click Create Page
2. Fill in the details:

Field	Example
Page Title	Yamaha YZ450F 2022 — Engine
Handle (URL slug)	yamaha-yz450f-2022-engine
Meta Title	Yamaha YZ450F 2022 Engine Parts Diagram
Meta Description	Find and order OEM engine parts for the Yamaha YZ450F 2022 with our interactive parts diagram.

3. Click Save

Tip

Use consistent naming across pages. A format like {Brand} {Model} {Year} — {Section} (e.g. Honda CRF450R 2021 — Suspension) makes it easy to manage dozens of pages later.

---

Step 2 — Create a Diagram

Each page can contain multiple diagrams (e.g. Engine, Suspension, Exhaust). Now create the first diagram for the page you just made.

1. In the Pages list, click into your new page and select Create Diagram
2. Fill in the diagram form:

Field	Example
Heading	Engine Assembly
Menu Label	Engine
Parent Page	Yamaha YZ450F 2022 — Engine
Model category	YZ450F
Brand category	Yamaha

3. Click Create — you’ll land in the diagram editor

Note

Model and Brand categories are used by the Shopify theme block to automatically display this diagram on the matching product page. For example, setting Brand = Yamaha and Model = YZ450F means any Shopify product tagged with those values will show this diagram automatically.

See Manage Categories to set up your category lists first.

---

Step 3 — Upload your diagram image

In the editor, click Upload image and choose an exploded-view image of the assembly.

Supported formats: PNG, JPG, WEBP, SVG

Tips for a great diagram image:

• Use a clean white or light grey background — parts stand out clearly and hotspot pins are easier to read
• Make sure all labelled parts are visible and not overlapping each other
• Higher resolution (1200 px+ wide) looks much better when customers zoom in on mobile
• Manufacturer service manual diagrams work perfectly out of the box
• Avoid images with dense text annotations already printed on them — your hotspots will cover them

Once uploaded, the image appears on the editor canvas ready for hotspot placement.

Tip

Need a clean diagram image? See Uploading Diagram Images for tips on sourcing, preparing, and cleaning up images.

---

Step 4 — Place hotspots

A hotspot is the numbered callout pin customers click to see and order the matching part.

1. Click Add Mark in the editor toolbar (or press M)
2. Click on the part you want to label — a numbered pin appears
3. Drag it to fine-tune its position
4. The pin is assigned the next available number automatically (1, 2, 3…)
5. Repeat for every part on the diagram

Example workflow for an engine diagram:

• Click the carburetor → pin #1 appears
• Click the air filter → pin #2 appears
• Click the valve cover → pin #3 appears
• Continue until all labelled parts have pins

You can drag any pin to reposition it at any time. To remove a pin, select it and click Delete Mark in the toolbar.

Tip

Use the Duplicate button to copy a hotspot when a part appears multiple times in the diagram (e.g. four identical bolts). Each copy gets its own number but starts linked to the same product.

---

Step 5 — Link each hotspot to a product

Once your pins are placed, link each one to the matching Shopify product.

1. Click a hotspot pin on the canvas to select it
2. In the product table at the bottom of the editor, find the row for that pin
3. Type the product name or SKU into the Search products field — for example, type “carburetor” or “yz450f carb”
4. Select the correct product from the dropdown
5. Shopify pulls in the product title, price, and live stock status automatically
6. Optionally, set a Required Qty — how many of this part a customer needs per machine (e.g. 4 for a set of four spark plugs)

Example product table:

#	Part	Price	Required Qty	Stock
1	Carburetor — Keihin FCR 39mm	$189.99	1	✅ In stock
2	Air Filter	$24.99	1	✅ In stock
3	Valve Cover Gasket	$12.49	1	⚠️ Ships in 2–4 days
4	Spark Plug	$8.99	1	✅ In stock

Repeat for every pin on the diagram. All hotspots must be linked before you can save.

---

Step 6 — Add part sub-variants (optional)

Some parts ship in multiple configurations — different thread pitches, materials, or OEM vs aftermarket options. PartsDiagram Pro lets you attach multiple variant options to a single hotspot using sub-variant labels like 4-A, 4-B, 4-C.

For example, hotspot #4 (Spark Plug) could offer:

• 4-A — NGK Standard Spark Plug — $8.99
• 4-B — NGK Iridium Spark Plug — $14.99

This lets customers choose the right version without cluttering the diagram with extra pins. See Linking Parts to Products for full details.

---

Step 7 — Save and publish

Click Save in the top-right corner. PartsDiagram Pro generates a clean page at a URL like:

yourstore.com/a/pages/yamaha/yz450f/2022/engine-assembly

The URL is based on the handle and category fields you set in Steps 1 and 2. You can adjust the handle in the diagram settings before saving if you need a different URL.

---

What customers see

When a customer visits the diagram page they get a fully interactive experience:

• The exploded-view image fills most of the screen with numbered callout pins
• A parts table beside (or below on mobile) shows the part name, SKU, price, required quantity, and live stock status
• Clicking any pin highlights the matching row in the table — and clicking any row highlights the pin on the diagram
• An Add to cart button on each row lets customers order directly from the diagram
• Zoom and pan controls let customers inspect fine details on large diagrams

---

What’s next

• Add more diagrams to the same page (e.g. Suspension, Exhaust) — each appears as a tab or section on the page
• Set up categories to connect diagrams to product pages automatically — see Manage Categories
• Deep link to a specific hotspot by appending ?part=4 to the URL — the diagram will open with pin #4 highlighted
• Track diagram analytics in the PartsDiagram Pro dashboard to see which parts customers click most