What do I need before creating a Konfig?

You need the parent product, the spare parts as Shopify products, and a clear diagram image or drawing that shows the parts.

How long does it take to set up a Konfig?

A simple Konfig with a clear diagram and a handful of parts can be set up in under an hour. Larger catalogues take longer, especially if product data needs cleaning first.

What is the most common setup mistake?

Rushing the diagram. A blurry, crowded, or poorly spaced image makes the whole page harder to use, no matter how good the product data is.

Should I clean up my Shopify products before creating a Konfig?

Yes. Product titles, images, prices, and stock should be accurate before you link them. The Konfig displays whatever your Shopify products show.

Can I edit a Konfig after publishing it?

Yes. You can add or remove parts, move hotspots, replace the diagram image, or adjust settings at any time without rebuilding the page.

How do I create a parts diagram in Shopify?

Create the parts as Shopify products, then use Konfigr to create a Konfig for the parent product. Upload the diagram, link the parts, place hotspots, and display it through the app block.

Can I use an exploded view on Shopify?

Yes. Konfigr lets you upload exploded views and place clickable hotspots over the part positions. Customers can then click the diagram to find matching products.

How many parts should be in one diagram?

Use as many as the customer can comfortably understand. If a diagram becomes crowded or hard to use, split the product into multiple Konfigs or separate assemblies.

Do I need code to add a parts diagram to Shopify?

No. Konfigr uses a Shopify app block, so you can add the diagram viewer through the theme editor on Online Store 2.0 themes.

Creating a Shopify Parts Diagram from Scratch

Start with the parts you already sell

Before you create a parts diagram, make sure the actual parts exist as Shopify products.

Konfigr does not replace Shopify’s product system. It uses it. Your part names, images, prices, stock, SKUs, and variants should live in Shopify first.

That is the right way to build it. Shopify remains the source for product information. Konfigr gives those products visual context.

If your store already has the spare parts loaded, you are not starting again. You are organising them around the parent product they belong to.

Choose the parent product

A Konfig is created for a parent product.

That parent product might be a pump model, power tool, appliance, gate motor, machine, furniture kit, or any other product with associated parts.

Think about how the customer starts. They usually know the product they own before they know the part they need. That parent product should be their entry point.

If you sell parts for ten pump models, you would usually create one Konfig per model. If one model has too many parts or several distinct assemblies, you may split it into more than one Konfig to keep the page usable.

Prepare a clear diagram image

You need an image customers can understand.

An exploded view is ideal for many mechanical products. A schematic, assembly drawing, labelled photo, or simplified illustration can also work if it clearly shows the parts.

The diagram does not need to be beautiful. It needs to be useful. Customers should be able to see the parts, understand the spacing, and click the right area without fighting the image.

If the diagram is very detailed, Konfigr’s zoom and pan feature helps customers inspect it more closely. Still, do not cram too much into one image if it makes the page hard to use.

Create the Konfig

Inside Konfigr, you create a Konfig for the parent product.

This is the working space where you add the diagram, attach the parts, place hotspots, and control the parts page setup.

The Konfig is not a separate store outside Shopify. It is a way to connect your Shopify product data to a visual page.

Upload the diagram image first. Then start adding the parts that belong to that parent product.

Add the parts

You can add parts manually by searching for existing Shopify products and selecting them.

For larger catalogues, CSV import is usually faster. You can export products from Shopify, add the relevant marker information, and import the list into Konfigr to speed up setup.

The important point is that you are linking products, not duplicating them. If you update a product’s price, stock, or image in Shopify, the Konfig displays the current product information.

If a product has variants, choose the specific variant that belongs in the Konfig where needed. That avoids making the customer choose from variants that are not relevant to the diagram position.

Place the hotspots

Once the parts are in the Konfig, place hotspots on the diagram.

Each hotspot marks a part position. The customer clicks it to find the matching item in the parts list.

Konfigr’s hotspot editor queues markers in order, so you can work through the diagram sequentially. For a clear exploded view, this makes setup much faster than trying to build a custom page by hand.

Keep hotspots clear and easy to tap. A marker that is perfect on desktop may be too small on mobile, so Konfigr includes responsive hotspot size settings for desktop, tablet, and mobile.

Handle special part situations

Real parts catalogues are not always one marker to one product.

Sometimes one hotspot position needs multiple options, such as OEM and aftermarket versions of the same part. Konfigr can show multiple products for one hotspot.

Sometimes the same part appears in more than one place on the diagram. Konfigr can place multiple hotspot positions for the same Shopify product, so each appearance is clear without duplicating the product.

Sometimes one Shopify product has several variants. Variant pinning lets you show the specific variant relevant to that diagram position.

Add the app block to your theme

After the Konfig is ready, you need to display it on the storefront.

Konfigr works through a Shopify app block in Online Store 2.0 themes. You add the block in the theme editor, choose your layout settings, and place it where it belongs on the product page.

You can use a stacked layout or a side-by-side layout. Side-by-side often works well for complex diagrams on desktop. Stacked is simpler and naturally suits mobile. On mobile, the layout stacks so the customer can use the page comfortably on a smaller screen.

Test before publishing

Do not publish a Konfig without testing it like a customer.

Open the product page. Click each hotspot. Check that the right part highlights in the list. Click items in the parts list and confirm the diagram responds clearly. Check product names, images, price, stock, SKU, and add-to-cart behaviour.

Test on mobile as well as desktop. Spare parts are often ordered from workshops, job sites, garages, and counters. If a hotspot is hard to tap on a phone, adjust the mobile marker size.

Think about visibility

Some merchants want child parts visible in normal collections and store search. Others prefer those parts to be found through the parent Konfig page.

Konfigr supports optional auto-unlisting, but it is off by default and merchant-controlled. Do not turn it on just because the option exists.

Use it when it helps keep the store clean. Avoid it when a part is commonly searched for directly or sold as a standalone product.

Publish when the page answers the buying question

A good parts diagram page answers the customer’s basic question: “Which part do I need, and can I buy it?”

If the diagram is clear, the hotspots are accurate, the products are linked properly, and the parts list shows the information customers need, the page is ready.

You do not need custom development. You do not need a separate parts database. You need a clear parent product, a useful diagram, and accurate Shopify products connected in the right places.

That is the foundation of a working Shopify parts diagram.

Explore these related guides for more detailed information: