What is an interactive parts diagram on Shopify?

An interactive parts diagram on Shopify is a visual tool that allows customers to click on specific components within a diagram (like an exploded view) to view details, pricing, and stock for the corresponding replacement parts, then add them to their cart.

How does Konfigr simplify parts diagram setup?

Konfigr simplifies setup by providing an intuitive interface to upload diagrams, drag-and-drop numbered hotspots, link these hotspots to existing Shopify products, and publish the interactive viewer as an app block on any product page, all without coding.

Can I use any image as a parts diagram?

Yes, Konfigr allows you to upload any clear diagram image, such as exploded views, assembly diagrams, or schematics, as long as it's in a standard image format like JPG or PNG.

What happens to the linked 'child' products after publishing a konfig?

When a konfig is published, Konfigr automatically unlists the linked 'child' products (individual parts) from general search results, collections, and recommendations, making them primarily discoverable through the interactive diagram.

Does Konfigr integrate with my existing Shopify products?

Absolutely. Konfigr links directly to your existing Shopify products, using their live prices, stock levels, and variants. You don't need to create duplicate entries or manage a separate inventory system.

Is coding required to add the interactive diagram to my product page?

No coding is required. Konfigr installs as a Shopify theme app block, which you can easily add and position on any product page using the standard Shopify theme editor.

What is an exploded view diagram in e-commerce?

An exploded view diagram in e-commerce visually separates components of an assembly, allowing customers to easily identify individual parts and often click on them to purchase replacements.

How do I create a spare parts catalog online?

You can create an online spare parts catalog by organizing your parts as individual products in your e-commerce platform and enhancing discoverability with interactive diagrams that visually link components to those products.

What are the benefits of visual product configuration?

Visual product configuration benefits include improved customer clarity, reduced ordering errors, decreased support inquiries, and a more engaging shopping experience that leads to higher conversion rates.

Can I hide individual parts from my main product catalog?

Yes, with tools like Konfigr, individual parts (child products) linked to an interactive diagram can be automatically unlisted from your main product catalog, making them discoverable only through the diagram itself.

What is the best way to sell replacement parts online?

The best way to sell replacement parts online is often through an interactive visual system, such as a clickable parts diagram, combined with clear product listings and efficient search functions, to help customers quickly identify and purchase the correct components.

Setting Up Your Shopify Store for Interactive Parts Diagrams in Under 15 Minutes

Introduction

For many small businesses selling products with replaceable components, helping customers find the right part can be a challenge. Imagine your customers trying to identify a specific screw, gasket, or motor part from a long, confusing list. This often leads to frustration, incorrect orders, and endless support calls asking, "Which part do I need?" This is where an interactive parts diagram for Shopify can revolutionise your customer experience.

An interactive parts diagram, often an exploded view product page, allows customers to visually identify components directly on a diagram. They simply click on a numbered part, and the corresponding product details—including live price and stock—appear instantly. This guide will show you how to set up your first interactive parts diagram on your Shopify store using Konfigr in under 15 minutes, transforming your parts catalogue Shopify setup into a seamless, visual shopping journey.

Why Interactive Parts Diagrams Are a Game-Changer for Shopify

Moving from static lists to dynamic, clickable diagrams offers significant advantages for both you and your customers. It's about clarity, convenience, and efficiency.

Reduce "Which Part Do I Need?" Support Calls

Customers often struggle to match a part name to a physical component. By providing a visual context, an interactive diagram answers their questions proactively. For example, a pool equipment supplier can display an exploded view of a pump; customers simply click the impeller or seal kit they need, rather than calling to describe it. This dramatically cuts down on time-consuming support inquiries.

Make Your Parts Catalogue Visual and Shoppable

Traditional text-based parts lists can be overwhelming. An interactive diagram app for Shopify like Konfigr turns this into an intuitive browsing experience. Customers see the actual diagram of the product they own, click the part, and instantly see the linked Shopify product with its live pricing and stock status. This visual approach leads to more confident purchases and fewer "wrong part" returns.

Works Seamlessly with Your Existing Shopify Products

You don't need to rebuild your product catalogue. Konfigr links directly to the products already in your Shopify store. This means your existing prices, stock levels, and variants remain the single source of truth. Konfigr simply makes these products discoverable in a much more engaging way.

Introducing Konfigr: Your Solution for Shopify Parts Diagrams

Konfigr is a powerful Shopify interactive diagram app designed to turn any diagram—exploded views, assembly diagrams, or schematics—into a dynamic shopping experience. It's built for businesses that sell products with replaceable components, helping customers quickly identify and purchase individual parts without guesswork. With Konfigr, you can upload a diagram, place numbered hotspots on components, link those hotspots to your Shopify products, and publish an interactive viewer directly on your product pages.

Preparing for Your First Konfig

Before diving into the setup, gather these essentials to make your process smooth and quick:

A Diagram Image: This could be an exploded view, assembly diagram, or schematic of your product. Ensure it's clear and high-resolution. JPG or PNG formats are ideal.
Existing Shopify Products: Make sure the individual parts you want to link are already set up as products in your Shopify store, complete with names, prices, and stock levels.
A "Parent" Shopify Product: This is the main product (e.g., "XYZ Pool Pump") on whose product page the interactive diagram will appear. If you don't have one, create a placeholder.

Step-by-Step: Setting Up Your First Interactive Parts Diagram with Konfigr (Under 15 Minutes)

Let's walk through the process of creating your first "konfig" – an interactive parts diagram – in a few simple steps. You'll be surprised how quickly you can get this powerful feature live on your store.

Step 1: Install the Konfigr App

Navigate to the Shopify App Store and search for "Konfigr".
Click "Add app" and follow the on-screen prompts to install it into your Shopify store.
Once installed, Konfigr will appear in your Shopify admin under "Apps". Click on it to open the Konfigr dashboard.

Step 2: Create a New Konfig

From the Konfigr dashboard, click the "Create Konfig" button.
You'll be prompted to select a "Parent Product". This is the main Shopify product (e.g., a "Washing Machine Model X") that the diagram belongs to. The interactive diagram will be displayed on this product's page.
Search for and select your parent product. Konfigr will automatically create a new konfig draft linked to it.

Step 3: Upload Your Diagram Image

This is where you bring your visual content to life.

Within your new konfig's editor, you'll see an option to "Upload Diagram Image".
Click this and select your high-resolution exploded view, assembly diagram, or schematic image from your computer.
Konfigr will upload the image to Shopify's CDN, ensuring fast loading times for your customers.

Step 4: Add Hotspot Markers to Your Diagram

Now, let's make your diagram interactive.

Once your diagram image is uploaded, you'll see it displayed in the Konfigr editor.
On the left side, there's a panel to manage "Items" (individual parts). Click "Add Item".
A numbered marker (e.g., "1") will appear on your diagram. Drag and drop this marker to the correct position on the component it represents.
Repeat this for all the key parts you want to make clickable. You can add as many items and markers as needed.

Step 5: Link Products to Hotspots

This is where your existing Shopify products connect to your diagram.

For each item (marker) you've placed on the diagram, click on it in the left panel.
You'll see options to "Link Products". Click this.
Search for and select the corresponding Shopify product(s) that match the part under that marker. For instance, if marker "1" is a "Filter Basket", link your "Filter Basket - Model XYZ" product.
You can link multiple products to a single marker (e.g., an "OEM Original" part and an "Aftermarket" option). You can also add custom labels like "Genuine Part" or "Replacement".

Step 6: Configure Display Settings (Optional but Recommended)

Tailor how your interactive diagram appears to your customers.

Within the Konfigr editor, look for the "Settings" or "Display Options" tab.
Here, you can choose layout options (e.g., side-by-side or stacked), enable or disable zoom and pan functionality for the diagram, and decide whether to show or hide product SKUs or stock status.
These settings ensure the diagram integrates seamlessly with your store's aesthetic and provides the best user experience.

Step 7: Publish Your Konfig

Once you're happy with your setup, it's time to make it live.

In the Konfigr editor, change the "Status" from "Draft" to "Published".
Click "Save". Konfigr will automatically set the associated parent product's price to $0 (to prevent direct purchase of the 'whole item' from its product page) and unlist any linked child products from general search and collections, ensuring they are only discoverable via the diagram.

Step 8: Add the Konfigr App Block to Your Shopify Product Page

This final step connects your new interactive diagram to your storefront.

In your Shopify admin, go to "Online Store" > "Themes".
Click "Customise" on your current theme.
Navigate to the parent product page (the one you linked your konfig to) in the theme editor's preview pane.
On the left sidebar, under "Product information", click "Add block".
Select the "Konfigr Viewer" app block and add it to your product page layout. Drag it to your desired position (e.g., above the product description or below the images).
Click "Save" in the theme editor.

Congratulations! Your Shopify parts diagram is now live and interactive on your product page. Customers can now easily identify and purchase the parts they need with just a few clicks.

Tips for Success with Your Interactive Parts Diagrams

To maximise the impact of your new interactive parts diagrams, consider these best practices:

High-Quality Diagrams: Always use clear, high-resolution diagram images. Blurry or low-quality diagrams defeat the purpose of visual identification.
Accurate Hotspot Placement: Take care to place markers precisely on the components they represent. Misplaced markers can confuse customers.
Clear Product Linking: Double-check that each marker is linked to the correct Shopify product(s). Consider using descriptive custom labels for multiple options (e.g., "OEM Gasket," "Aftermarket Gasket").
Comprehensive Coverage: While you don't need to link every tiny screw, ensure all commonly replaced or critical components are interactive.
Test Thoroughly: Before publishing, preview your konfig and test all hotspots and product links to ensure they function as expected.

Conclusion

Setting up an interactive parts diagram on your Shopify store no longer requires complex coding or extensive development. With Konfigr, you can transform your static parts catalogue into a dynamic, user-friendly shopping experience in under 15 minutes. By embracing this visual approach, you empower your customers to confidently find and purchase the exact parts they need, reducing support costs, minimising errors, and ultimately boosting sales and customer satisfaction. It's a simple, effective way to modernise your parts catalogue Shopify setup and provide a superior online shopping journey for your niche customers.