Linking Parts to Products
Every hotspot on a diagram needs to be linked to a Shopify product (or a specific variant) before customers can use it. This page explains how that linking works and covers advanced scenarios like variants and bundles.
How linking works
Section titled “How linking works”When you link a hotspot to a product, PartsDiagram Pro reads the following data from Shopify in real time:
- Product title — shown as the part name in the table
- Price — pulled from the linked variant’s current Shopify price
- Inventory quantity — used to display the stock status badge
- SKU — shown below the part name in the table
Any price or inventory updates you make in Shopify are reflected immediately on the diagram page — no re-publishing required.
Linking via the diagram editor
Section titled “Linking via the diagram editor”The primary way to link hotspots is directly in the diagram editor via the product table at the bottom of the page.
- In the Title search field next to a hotspot row, type a product name or SKU
- Select the correct result from the dropdown
- The price auto-fills from Shopify
- Set the Required Qty — how many of this part the assembly needs (defaults to 1)
- Repeat for every hotspot
- Click Save when all hotspots are assigned
See Creating a Diagram for a full walkthrough of the editor and product table.
Linking to variants
Section titled “Linking to variants”If you sell a part in multiple sizes, materials, or configurations, link the hotspot to the specific variant rather than the parent product. This ensures the correct SKU, price, and stock level is displayed.
Example: a bolt sold in M6 and M8 — if the diagram calls for an M8, link to the M8 variant so customers add the right one to cart.
Stock status badges
Section titled “Stock status badges”Stock status is determined automatically from Shopify inventory:
| Badge | Condition |
|---|---|
| In stock (green) | Inventory quantity > 0 |
| Ships in 2–4 days (yellow) | Product tagged with a lead time, or fulfilled from a supplier location |
| Out of stock (red) | Inventory quantity = 0 and “Continue selling when out of stock” is off |
Badge text and colors can be customized per store in Page Styling.
Unlinking a hotspot
Section titled “Unlinking a hotspot”To remove the product link from a hotspot without deleting the hotspot itself, click the delete icon in the product table row for that hotspot. The pin stays on the diagram as a visual placeholder until you assign a new product.
Frequently asked questions
Section titled “Frequently asked questions”Can I link multiple hotspots to the same product? Yes. This is useful for parts that appear more than once in an assembly (e.g. a bolt used in several locations). Duplicate the hotspot and both will point to the same product — set the Required Qty on each to reflect usage.
What happens if I delete a product from Shopify that’s linked to a hotspot? The hotspot row in the parts table shows a “Product unavailable” message. Link it to another product or delete the hotspot.
Can I link to external products or non-Shopify URLs? Not at this time. All linked items must be products in your Shopify store.