Exploded-view drawings with hotspots and parts lists for Shopify
Bring exploded-view drawings into your Shopify store and sell straight from the hotspot on each part. Show drawings right on your products — or build a complete spare parts catalog.
Presenting spare parts, parts lists and assemblies in a clear structure is one of the central challenges of technical e‑commerce. For complex products such as machines, engines, gearboxes, agricultural machinery, cleaning equipment or household appliances, the standard product lists of Shopify often fall short.
Techparts for Shopify shows spare parts, assemblies, exploded-view drawings and parts lists clearly and traceably, right in the shop — with clickable hotspots that lead straight to the cart. Customers find the right part faster, wrong orders become rarer, and support has less to do.
The right part, faster
Fewer wrong orders
Less load on support
From searching to buying
A part found at once is a part sold
The drawing stays what it is. The hotspots on it become products — and searching turns into buying.
?
1Search
A spare part rarely has a name anyone searches for — and the results all look alike.
123456789104919312
2Find
On the exploded-view drawing, the customer simply points at the part they need.
7
3Hotspot click
One click on the hotspot shows the part's picture, price and stock.
1
4Cart
Choose the quantity, add to cart — straight from the drawing.
Which businesses is Techparts for Shopify made for?
Anyone selling spare parts, service parts, accessories or technical assemblies online — wherever an exploded-view drawing leads to the right part faster than any product list.
Which one fits comes down to one question: is a part sold on its own, or does it belong to an assembly and fit more than one model? The product route is already part of the free plan, for fifteen products.
Both routes can be combined: a drawing already attached to a product can also appear in the catalog, without creating it again.
The catalog
Categories at any depth
One dropdown per level leads to the assembly with its drawing and parts list. Every level has an address of its own that can be linked and shared.
Any depth, every level added without code
One drawing for several models, or copied and maintained separately
Move, copy, activate and delete assemblies in bulk
Drafts stay invisible in the shop until they are active
12345678910491931212345
The product route
The drawing sits on the product
The drawing is attached to an existing Shopify product and appears there as a block of its own in the theme. Already in the free plan, for fifteen products.
Image from the Shopify files or a new upload
Place hotspots by double-click and drag them with the mouse
One item per hotspot with its quantity — or several, with alternatives
Price and stock come from Shopify — nothing is maintained twice
4 drawings on one product
FrontRearHydraulicsElectrics1234
Multiple sheets
One product, several drawings
Front, rear, hydraulics, electrics: each view becomes a sheet of its own on the same product, instead of cramming everything onto one overloaded drawing.
Each view a tab of its own, with its own hotspots
One click swaps drawing and parts list, the page stays put
The drawing appears as a block on the product page — in the existing theme, without a line of code and without a server of ours in between.
Numbered hotspots on the drawing
Every hotspot sits where the part sits. It grows with its label — a manufacturer number like 49193 fits as well as a 7. There are 37 shapes to choose from, including video, info and link points and the location pin.
Zoom, pan, full screen
Two fingers on the phone, the scroll wheel on the desktop, full screen on both. A double tap zooms in, and scanned sheets stay legible down to the smallest circlip.
Cart straight from the drawing
Pointing at a hotspot opens a card with picture, name, price, stock and a quantity picker. One click and the part is in the cart — the theme's cart updates at once, in Dawn as in Horizon.
OEM numbers where they belong
The manufacturer number comes from the hotspot, from the barcode or from a metafield on the product — decided once, for the whole shop. Searching works by the number printed on the old part.
Video and link on the hotspot
A hotspot can carry a video — YouTube, Vimeo or an MP4 file — and a link, say to the fitting instructions. The video opens in a window over the drawing, so the customer stays in their assembly. YouTube loads only on click and without advertising cookies.
Four views, switchable in the shop
Split, list below, drawing wide or list only. On a phone, the list on its own is what someone who already knows the part actually wants.
Several sheets, switched at the top
If a product carries more than one drawing, a tab bar sits above it. One click swaps drawing and parts list together — without reloading the page. On a phone it becomes a dropdown, so twelve sheets do not push the drawing off the screen.
Built for the phone, not just adapted
Parts get looked up at the machine, not at a desk. One finger pans, two zoom — and the page underneath keeps scrolling when it should. Checked in eight themes, from Dawn to Horizon.
The view can be switched in the shop — which one the drawing opens with is a setting
Managing the catalog
Manual entry or import
Manual entry
A few drawings need no import run: upload the image, place hotspots by double-click, assign the items. The products themselves are added in Shopify as usual — by hand or with the app's CSV import.
PDF parser
Open the manufacturer catalog, frame the drawing, frame the parts list. The parser reads position numbers and SKUs, matches them to the products and creates the assembly. Parts lists spanning several pages are merged — and the PDF never leaves the computer it is opened on.
XML import
A manufacturer's catalog ZIP becomes items, categories and assemblies in one run; missing items can be created in Shopify. Measured on a Kymco catalog: 5,881 items, 1,174 assemblies, 40,910 positions.
CSV import for products
Create and update items from a CSV, with column mapping and defaults for vendor, tags and sales channels — and the images with them, matched by file name. The image data never passes through a server of ours.
Backup and migration
One branch or the whole parts catalog as a file, with images as a ZIP — for backup or for moving to another Shopify shop. A second run creates nothing twice.
PDFXMLCSV123456789104919312
Easy to maintain, reliable in operation
Assign or copy a drawing
Assign when two models should stay identical for good; copy when they will drift apart. A copy shares the image and duplicates only the hotspots — it takes no extra space in the Shopify files.
Replace an item everywhere
A part number is discontinued. Enter old and new, review where it is used, leave out individual drawings — and every affected hotspot is rewritten in one run. Optionally, the new item is only added alongside.
Move and copy in bulk
Tick categories and attach them elsewhere in the structure — or copy them into the next model. Drafts stay drafts: a copy should not appear in the shop unasked.
Find what is missing
The dashboard counts hotspots without an item and drawings without an image, and every number leads to the list it describes.
Search across the whole catalog
Above the catalog sits a search box that finds names, SKUs, OEM and position numbers — across the whole catalog, not just the open assembly. Leading zeros make no difference: 341005 also finds 00341005.
The catalog is delivered, not queried
Publishing writes finished files into the Shopify files, and the shop reads only those. No query of ours happens in the customer's path — and a catalog with tens of thousands of assemblies loads as fast as one with ten.
Help built into the app
A menu item of its own, “Help”, guides through the setup in seven steps and helps when something goes wrong, with films for the main steps. Support is one email away — shop, plan and build are attached already.
The catalog stays in the shop itself
Everything lives as metaobjects in the shop itself — not with us. After uninstalling, the data stays where it is; even a move to another app would leave it standing.
123456789
PDF parser
1
Frame
Open the manufacturer catalog as a PDF and mark the drawing and parts list of each assembly with a frame.
2
Read
Position numbers and SKUs are read and matched to the products, by SKU, barcode or OEM metafield. Parts lists spanning several pages are merged.
3
Import
The assembly is created at the chosen place in the catalog, with its drawing and hotspots in place. The PDF never leaves the computer it is opened on.
ZIPXMLXMLXML123456789104919312
XML import
1
Upload
Upload the manufacturer's catalog as a ZIP, one XML file per model plus images. It is read in the browser. Supported manufacturer formats on request.
2
Match items
The SKUs are looked up in the shop. Missing items can be created in Shopify by the import.
3
Build the catalog
Manufacturers, models and assemblies are created in one run, with drawings and hotspots in place. A second run updates instead of duplicating.
Theme editor → Techparts
118 settings, and not one line of code
How drawing and catalog look is decided in the theme editor — view, colors, shape and size of the hotspots, what the parts list shows, which view the drawing opens with. Nothing is written into the theme files.
parts-diagram44BEHAVIOUR2400FULLSCREENrightPARTS LIST
The drawing: 44 settings
Everything the customer sees on the drawing: view, hotspots, product card, parts list, sheet tabs, full screen, type and button. Applies equally on the product page and in the catalog.
The way to the drawing: columns, spacing and colors of the tiles, the catalog search, the dropdown per level and how the catalog reflows on a phone.
The catalog can look different in each placement
Each placement of the block carries its own settings. So the catalog can look different on a second page template than on the catalog page, without either dragging the other along.
The drawing can overrule the theme
Shape, color and size of the hotspots can be set per drawing and even per hotspot, and then beat the theme setting. A tightly labeled sheet needs smaller hotspots than a sparse one — deciding that once for the whole shop would be wrong on every second drawing.
Leave the field empty and the level above applies. That is the default.
Where the data lives
Everything stays in the shop itself — no third-party server in the customer's path and no connection to us.
In the shop itself, not with us
Drawings, hotspots and catalog live as metaobjects in the shop. We keep no database of our own for catalog data — and no server of ours stands in the customer's path.
Nothing between customer and shop
In the shop the theme fetches the catalog from the Shopify files and the product data from Shopify itself — no app proxy, no storefront token, no query to us.
Techparts runs on its own
Because everything lives in the shop, selling needs no connection to us. Moving back to a smaller plan loses nothing: the catalog is parked, not deleted, and an upgrade brings it back in full.
Three languages, included
Admin and shop speak German, English and Spanish. Measured in eight themes — Dawn, Horizon, Refresh, Pitch, Spotlight, Heritage, Maranello and Enterprise.
Plans
CORE is free, with no time limit. PRO and MAX are billed monthly through Shopify and can be cancelled at any time. Moving back to a smaller plan deletes nothing — the catalog is parked and an upgrade brings it back.
Billed by Shopify with the rest of the shop. CORE counts products with a drawing — drawings, hotspots and items have no limit.
Questions that come up
Does it work with my theme?
Yes. Techparts is a theme app extension: the drawing is placed on the product page as a block in the theme editor, the parts catalog on a page template of its own. Both go through Shopify's own interface, without a line of code.
Measured in eight themes — Dawn, Horizon, Refresh, Pitch, Spotlight, Heritage, Maranello and Enterprise. The last three are purchased themes and do not come from Shopify's own family. No theme files are written — so switching themes leaves nothing behind to clean up.
Where exactly do the drawing and the catalog appear?
The drawing goes onto the product page as a block and appears on every product that carries one — on the others it stays invisible. It is moved in the theme editor like any other block.
The parts catalog belongs on a **page template of its own**, not on the default page template: that one is also used by the legal notice, the about page and the shipping terms, and the catalog would appear on all of them.
Inside the catalog, navigation runs through the address: every level has one of its own that can be linked and shared. A second placement of the block carries its own settings — the catalog may look different on a landing page than on the catalog page.
How long does importing a manufacturer catalog take?
That depends on how many items have to be created. Measured on a real manufacturer catalog: 460 items in four and a half minutes, then 36 assemblies in just over a minute — 621 of 621 hotspots linked to their item.
The run works in rounds with a progress bar. What has been created stays; a second run creates nothing twice.
What if the PDF parser does not read my catalogs cleanly?
Manufacturer catalogs are built very differently. If the PDF parser does not read a drawing or parts list cleanly, an email to dev@sineos.de with a sample page is all it takes — we will then create a matching template.
My manufacturer supplies a different XML format. Will that work too?
An email to dev@sineos.de with a sample file is all it takes — where possible, we will then create a matching import template.
My drawings are prepared externally. Can I use them?
Yes. Drawing and parts list are still framed in the PDF — the frame says which section the image shows — and the finished image goes alongside. The hotspots then come from the text layer of the PDF and are read rather than recognized.
“Download this section” hands over exactly the sheet the parser would otherwise have used, so image and frame cannot drift apart.
What happens if I move back to a smaller plan?
Nothing is deleted. Drawings on products keep working. Parts catalog, catalog search, imports and backup and migration pause; the drawings show round hotspots, only the main item and no video or link buttons.
A valid key brings everything back, exactly as it was.
Can the same drawing hang in several places?
Yes, and for model years that barely differ it is the normal case. In the category via “Assign diagrams”, on the product via “Attach to another product” — then all of them point to the same drawing, and a correction applies everywhere at once.
Copying is the other way: the copy has its own hotspots and can be changed without touching the original.
Can the catalog be moved to another shop, say from a test shop to the live shop?
Yes, with MAX. “Backup and migration” saves one branch or the whole parts catalog as a file, optionally with products and images as a ZIP. In the target shop, the file is imported again at a chosen place.
That way the catalog can be built calmly in a test shop and then moved to the live shop — or to a completely different Shopify shop. A second run creates nothing twice.
Is an account needed?
No. The app is installed from the Shopify App Store and runs. PRO and MAX are booked in Shopify and billed with the rest of the shop — no second account, no key, no connection to us.
Look, click, add to cart
The live demo is a real Shopify shop with products with drawings and a parts catalog. Open a drawing, point at a hotspot, add the part to the cart — exactly as it will look in the shop.