Build a Clickable Parts Diagram With a Plain HTML Image Map

No app, no plugin: browsers have supported clickable image regions for decades. Here is how to use that for a parts diagram, and exactly where it falls short.

Published 2026-10-19

Before parts diagram apps existed, there was already a way to make part of an image clickable: a pair of HTML elements called map and area, part of the HTML standard since the earliest days of the web. If you have one exploded-view drawing to make shoppable and you do not mind touching theme code, this is the fastest route and it costs nothing.

This guide walks through the two elements, gives a working code example built around a sample pump drawing, and covers the practical limits, like what happens when the image is resized and why pasting raw HTML into a Shopify product description usually does not work the way you would expect.

The Two Elements: map and area

An image gets linked to a map by name, using the image's usemap attribute. The map itself is a separate element containing one area tag per clickable region. Each area has a shape (circle, rect, or poly), a set of coordinates in pixels, a destination URL, and alt text for anyone using a screen reader.

Coordinates are always measured against the image's original pixel dimensions, not however large or small it ends up being displayed on the page. That single fact explains most of what goes wrong when people try this for the first time.

A Working Example

Here is a complete, working example for a drawing of a pump with three callouts. Replace the coordinates and URLs with your own.

<img src="/exploded-view-pump.jpg" usemap="#pump-parts" alt="Exploded view of the PX-200 pump" width="640" height="480">
<map name="pump-parts">
  <area shape="circle" coords="180,92,14" href="/products/px-200-impeller" alt="Item 12: impeller">
  <area shape="circle" coords="244,140,14" href="/products/px-200-seal-plate" alt="Item 13: seal plate">
  <area shape="circle" coords="310,205,14" href="/products/px-200-base-gasket" alt="Item 14: base gasket">
</map>

Each area's href points straight at the matching product page, so a click takes the shopper directly there rather than showing a preview card first. If you want a hover preview with price and stock, you would need to add that yourself with extra CSS and JavaScript; it is not part of the image map standard.

Finding the Coordinates

The practical way to find circle or rectangle coordinates is to open the drawing in any image editor that shows a pixel position as you hover the cursor, note the center point and radius of each part you want clickable, then transcribe those numbers into area tags. A few free online image map generators let you click directly on a picture and generate the HTML for you, which is faster than doing it by hand for a diagram with more than a handful of parts.

Because coordinates are pixel-based and fixed to the image's native size, the map breaks the moment the image is displayed at a different size than it was measured at, including on a responsive theme where the image shrinks on mobile. The common workaround is to fix the image's display width with CSS rather than letting it scale, which keeps the map accurate but gives up a responsive layout for that one image.

Getting It Onto a Shopify Product Page

Shopify's built-in rich text editor, the one you use to write a normal product description, strips out tags like map and area when you save, because it only keeps a safe subset of HTML meant for formatted text. Pasting the code from this guide into that editor will not work.

The practical route on an Online Store 2.0 theme is a custom Liquid section or a custom HTML block, added through the theme editor and placed on the product template. That keeps your raw HTML intact and under theme-editor control, but it does mean working in theme code rather than a normal product field, which is the main reason a dedicated app exists for merchants who would rather not.

What It Cannot Do

No preview of price or stock before the shopper clicks through
No visual indicator for an out-of-stock part; it just links to a page that happens to show it is sold out
No record of which part shoppers actually click
Breaks on a resized or responsive image unless you fix its display width
You maintain every coordinate by hand, and redo the whole thing for each new model's drawing

Keeping It Accessible

Every area tag needs alt text that describes the part, not just a number, since that is what a screen reader announces and what shows if the image itself fails to load. "Item 14" tells a sighted shopper counting holes in a diagram nothing useful either; "item 14, base gasket" does.

Image maps are keyboard accessible by default in every modern browser: pressing Tab moves focus between area regions in the order they appear in the HTML, and Enter activates whichever one has focus. That is one thing you get for free that a custom-built clickable overlay would have to reimplement from scratch.

Testing Before You Publish

Preview the product page at the same width your image actually renders at in the live theme, not just in the theme editor's preview pane, since padding and layout differences between the two can shift where the image sits even when its pixel dimensions stay the same. Click every area once, on both desktop and a phone, before you consider the diagram done.

If a click lands on the wrong part, the coordinates are off, not the HTML. Recheck the center point and radius against the image file you actually uploaded, since re-exporting or re-compressing an image at a different size is a common way for an image map that worked yesterday to stop lining up today.

When This Is the Right Choice

An image map earns its keep when you have one or a few diagrams, you are comfortable in theme code, and you want this done for free with no ongoing cost. Past a handful of models, or once you want shoppers to see price and stock before they click, the time spent maintaining coordinates by hand tends to outweigh what you saved by not using an app.

For a side-by-side look at the alternatives, including apps that place hotspots for you and apps that read the manual automatically, see our guide on adding a clickable parts diagram to a Shopify product page below. Once you are linking diagram numbers to real Shopify products at any scale, our guide on matching parts diagram numbers to SKUs is worth reading too.