Skip to content

Your First Diagram

A complete walkthrough — from blank slate to a live, clickable diagram on your storefront. Allow ~5 minutes if your products and a diagram image are already prepared.

What you need

  • One diagram image — a flat illustration or photo showing the parts you want to make clickable. PNG or JPG, ideally at least 1200 px wide.
  • The Shopify products or variants each part should link to. They must already exist in your catalog (the app does not create products).

1. Create the diagram

  1. In the embedded admin, click Diagrams → New diagram.
  2. Give it a name (this is internal — shoppers never see it).
  3. Drop in your diagram image. Wait for the upload to confirm.

Image guidelines

  • Background: solid white or transparent works best.
  • Resolution: aim for ~1.5–2× the largest size you'll display.
  • Layout: leave breathing room around parts so hotspots don't crowd labels.

2. Draw hotspots

In the editor, switch to Draw mode and click-and-drag a rectangle (or click to drop a point) over each part you want to make interactive.

Each hotspot needs:

  • A label (optional but recommended — shown to shoppers when hovering and inside the popup header).
  • A mapped product — pick a Shopify product, then optionally a specific variant.

You can edit hotspot positions, resize them, or remove them at any time.

3. Assign the diagram to a product

A diagram becomes visible on the storefront only when it's assigned to the product whose product page should display it.

  1. Open Assignments in the sidebar.
  2. Click Add assignment and pick the target product.
  3. Choose the diagram from the list.
  4. Save.

You can assign the same diagram to multiple products.

4. Add the block to your theme

The first time you set up Parts Diagram on a theme:

  1. Open Online Store → Themes → Customize.
  2. Switch the top selector to a Product template.
  3. In the section list, click Add block under the product information section, then choose Parts Diagram under "Apps".
  4. Drag the block to where you want it (most stores place it directly below the product gallery).
  5. Click Save.

Full theme-editor walkthrough →

5. Verify on the storefront

Open the live product page in a regular browser tab. You should see:

  • The diagram image rendered with a side panel of clickable parts.
  • Hovering a hotspot highlights both the image area and the matching side-panel row.
  • Clicking a hotspot opens a popup with the part's price, stock, and variant picker (if applicable), plus an inline Add to cart button.

If anything is missing, jump to Troubleshooting.

Next steps