Uploading Diagram Images

The quality of your diagram image has a direct impact on how easy it is for customers to identify the part they need. This guide covers where to find good images and how to prepare them before uploading.

Supported formats

Format	Notes
PNG	Best for line-art and diagrams with transparent backgrounds
JPG / JPEG	Good for photographic diagrams; avoid heavy compression
WEBP	Smaller file size, excellent quality — recommended if available
SVG	Vector format; scales perfectly at any zoom level

Recommended resolution: 1200px × 900px or larger. The diagram panel in your store fills the full left column, so a larger source image means sharper results when customers zoom in.

Where to find diagram images

Manufacturer service manuals OEM service manuals typically include high-quality exploded-view drawings for every assembly. Check the manufacturer’s dealer portal, a subscription service like Helm Inc. or Haynes Pro, or the physical workshop manual for your model.

Manufacturer parts portals Many manufacturers (Yamaha, Honda, Polaris, BMW, Kawasaki, etc.) publish online parts fiche or electronic parts catalogs (EPCs) with zoomable exploded views. You can usually screenshot or export these at high resolution.

Parts supplier sites Sites like BikeBandit, Rocky Mountain ATV/MC, and Partzilla often display manufacturer diagrams alongside parts tables. These images are typically already optimized for web viewing.

Your own photography For custom or proprietary assemblies, a clean overhead photo of the disassembled parts laid out on a white surface works well. Use consistent lighting and a neutral background.

Preparing your image before upload

Clean up the background A white or very light background makes it easy for customers to see the part numbers and callout lines. If the source image has a colored or cluttered background, remove it in an image editor.

Check that part numbers are visible PartsDiagram Pro uses its own numbered hotspot pins, so your source image doesn’t need to have callout numbers — but if it does, that’s fine. What matters is that each part can be visually distinguished.

Crop to the assembly Remove wide margins or unrelated content. The diagram panel crops and scales the image automatically, so the tighter your crop, the more of the panel is filled with actual diagram.

File size Try to keep uploads under 5 MB. Very large files slow down the editor. You can compress PNG files with tools like Squoosh or TinyPNG without visible quality loss.

Uploading in the editor

1. Open your diagram in the PartsDiagram Pro editor
2. Click Upload image (or drag and drop your file onto the canvas)
3. The image appears immediately — you can start placing hotspots right away
4. To replace an image later, click the image thumbnail in the top-left of the editor and choose Replace image

Replacing an image does not remove any existing hotspots — their positions are preserved relative to the canvas, so you may need to fine-tune their placement after a swap.

Multiple images (sub-assemblies)

If a single machine has many assemblies (engine, chassis, electrical, etc.), create a separate diagram for each assembly. This keeps each diagram focused and the parts table manageable. You can link all the diagrams together from a parent page using standard Shopify content blocks or navigation links.