Start from the customer’s side

When you build a parts page, it is easy to think like the store owner.

You know the product. You know the part names. You know which SKU belongs to which model. You know the difference between two seals that look almost identical.

Your customer may not.

A good Konfigr page is built around what the customer sees and does. They should be able to land on the page, find the part visually, check the details, and add it to cart without asking you to interpret the catalogue for them.

They land on the parent product page

The customer usually starts with the product they own.

That might be a pool pump, appliance, gate motor, power tool, machine, or furniture kit. They know the model. They know something is broken. They are trying to find the correct part.

Instead of sending them into a generic collection of spare parts, the Konfig gives them a model-specific page.

This matters because it narrows the decision. The customer is not looking at every part you sell. They are looking at the parts for the product in front of them.

They see the diagram

The diagram gives the customer visual context.

It might be an exploded view, assembly drawing, schematic, or clear product image. The customer can look at the shape and position of each part instead of trying to search by name.

If the diagram is detailed, zoom and pan help them inspect it more closely. On mobile, they can use touch gestures to move around the image where supported by the viewer.

The diagram should answer the first question: “Where is the part I need?”

They click a hotspot

Each hotspot marks a part position.

When the customer clicks a hotspot, the connected item appears in the parts list. This removes the step where they have to match a diagram number to a separate PDF table or search result.

The diagram and list work together. The customer clicks the part they recognise, and the page shows them the product attached to that position.

That is the core storefront interaction.

They check the parts list

The parts list is where the customer confirms the item.

Depending on your settings and product data, the list can show the product name, image, price, stock status, SKU, and add-to-cart button.

For retail customers, the image and price may matter most. For trade buyers, the SKU and stock status may be just as important. For technical products, the ability to link through to the full product page can also help.

Konfigr reads product information directly from Shopify, so the list uses your current Shopify product data.

They can move from list back to diagram

The interaction should not only work one way.

A customer may start by clicking the diagram. Another customer may scan the parts list first, then use the diagram to confirm the position.

Konfigr supports that relationship between diagram and list. The point is to keep both views connected so the customer does not have to cross-reference separate resources.

When this is set up well, the page feels obvious. The customer sees the part, sees the matching product, and understands the connection.

They add the part to cart

Once the customer has found the right item, they should be able to act.

Konfigr allows individual add-to-cart actions from the parts list. Customers do not have to buy a bundle if they only need one part.

If they need several parts from the same diagram, they can add each one. This is common for repair jobs where someone needs a seal, gasket, screw set, and cover in the same order.

The cart behaviour follows the Shopify theme. Some themes open a cart drawer. Some add silently. Some send the customer to the cart page. Konfigr does not modify checkout.

They can use it on mobile

Parts pages need to work on phones.

A customer might be standing next to a machine, checking a model plate, or comparing the diagram to a broken part on a bench. A trade buyer might be ordering from a job site.

Konfigr layouts are responsive. A side-by-side desktop layout becomes stacked on mobile so the diagram and parts list remain usable on a narrow screen.

Hotspot size matters here. Konfigr includes separate hotspot sizing for desktop, tablet, and mobile, so you can make markers easier to tap on smaller devices.

They see stock where you choose to show it

Availability matters for spare parts.

If a customer needs a part to finish a repair, they want to know whether it is available before they order. If a trade buyer is organising a job, stock visibility can change the decision.

Konfigr can show stock status in the parts list. Because the product data comes from Shopify, the page reflects the current product information.

That helps reduce follow-up questions like “Do you have this in stock?”

The page should feel like one experience

A poor spare parts process makes the customer jump between a PDF, product collection, search bar, support inbox, and cart.

A good Konfigr page keeps the experience together.

The customer sees the model. They inspect the diagram. They click the part. They confirm the product. They add it to cart.

That is the walkthrough. Simple, visual, and built around how customers actually identify parts.

Related Articles

Continue your learning with these related resources: