How to Add a Clickable Parts Diagram to a Shopify Product Page
A plain comparison of the ways to put a clickable exploded-view diagram on a product page, from a free HTML trick to apps that place the hotspots for you.
Published 2026-10-19
A service manual's exploded-view page is already most of a parts catalog. It has a drawing of the assembly and a numbered list of every part in it. The only thing missing is a way for a shopper to turn item 14 on the drawing into a product in their cart, instead of squinting at the picture, counting gaskets, and emailing you to ask which one they need.
There are three ways to make that connection on a Shopify product page: build it yourself with a browser feature called an image map, use an app where you draw every hotspot by hand, or use an app that reads the parts list printed in the manual and places most of the hotspots for you. This guide compares all three plainly, with no app names, so you can pick based on how many diagrams you have and how much time you want to spend placing hotspots.
What a Clickable Parts Diagram Actually Needs
Three things make a diagram clickable in the way that actually helps a shopper: an image of the drawing, a defined region on that image for each part number, and a real product behind each region with a price and a stock status. Leave any one of those out and you have a picture, not a parts finder.
A common near-miss is an image with a numbered caption list typed out below it. It looks complete, but the shopper still has to match a number on the picture to a line in the list by eye, which is the exact step a clickable diagram is supposed to remove.
Why Bother at All
A static exploded-view image still forces the shopper to do translation work: find the number on the drawing, find the same number in a parts table, guess at a search term, and hope the product they land on is the one in their hands. Every one of those steps is a chance to give up, order the wrong part, or email you to ask.
A clickable diagram removes that translation work. The shopper clicks the part they can see, sees its price and whether it is in stock, and adds it to the cart from the same screen. The diagram does not need to be clever to do this; it just needs the three ingredients from the section above.
Option One: a Plain HTML Image Map
Every browser has supported clickable regions on a single image since the 1990s, through two HTML elements called map and area. You draw a circle or a polygon over each part, point it at a URL, and the browser handles the clicking. No app, no subscription.
The tradeoff is that you place every region by hand, by pixel coordinate, and the map does not show price or stock on hover unless you build that yourself with extra code. It also breaks if the image is resized responsively, because the coordinates are tied to the image's original pixel dimensions.
This is the right starting point if you have one or two flagship diagrams and you are comfortable editing theme code. We cover the full method, with a working code example, in a separate guide below.
Option Two: Apps That Make You Place Every Hotspot by Hand
The second category is apps built specifically for parts diagrams, where you upload the image, then click to drop a hotspot on each part, type in its item number, and pick the matching product from your catalog. Repeat for every callout on the page, typically 10 to 80 per model.
These give you full control over hotspot shape and position, and they work with any image, including hand-drawn or non-standard diagrams that do not follow a strict numbering convention. The cost is time: placing 60 hotspots on a dense diagram, then doing it again for the next model you add, adds up fast once you carry more than a handful of models.
Option Three: Apps That Read the Manual for You
The third category reads the drawing and the parts table next to it, the same way you would, and places most of the hotspots automatically. You upload the PDF, scan, or photo; the app finds the item numbers and matches them to your Shopify catalog by part number, and you review the result before publishing.
DiagramCart works this way. On real manuals it finds about 91 to 97 percent of the item numbers on a drawing it has never seen before, and the merchant places whatever it missed with one click, which is still far less work than placing all of them by hand.
DiagramCart is a Shopify app, COMING SOON TO THE SHOPIFY APP STORE. The free plan covers 3 diagrams, and paid plans start at $19 a month, billed through Shopify.
Which Option Fits Your Store
A single diagram, or a handful you rarely touch, is well served by a plain image map: it costs nothing and you set it up once. A catalog of dozens of models with numbering already printed in the manual is where automatic detection earns its keep, because the time saved compounds with every model you add. Hand-placed hotspots make sense when the source material does not have clean printed numbering at all, so there is nothing for an automatic reader to find.
Whichever route you take, the diagram is only as good as the page you start from and the catalog it links to. The two guides below cover both of those steps.