The viewer should match your store

A parts diagram is a practical tool, but it still sits inside your brand.

If the colours, buttons, cards, and typography feel out of place, the page can look patched together. Customers may not think about the styling directly, but they notice when a section feels disconnected from the rest of the store.

Konfigr gives you control over the viewer so it can sit naturally inside your Shopify theme.

The aim is not to decorate the diagram. The aim is to make the parts page clear, readable, and consistent with the store around it.

Start with layout before colour

Before changing colours and fonts, choose the right structure.

Konfigr supports stacked and side-by-side layouts. Stacked is simple and works well for smaller diagrams or shorter parts lists. Side-by-side works well when customers need the diagram and parts list visible together on desktop.

You can also adjust the desktop column ratio. If the diagram carries most of the identification work, give it more room. If the parts list contains longer product names or detailed cards, make sure it has enough space too.

A beautiful colour scheme will not fix a cramped layout.

Set the core colours

Once the layout feels right, set the colours that affect usability first.

Hotspot colour matters because customers need to see where to click. Marker text colour matters because the numbers need to be readable. Highlight colour matters because customers need to understand which part is selected.

Start there.

Choose hotspot and highlight colours that work against your diagram image. A brand colour might look good on buttons but disappear on a detailed exploded view. Test colours on the actual diagram, not just in isolation.

Make the parts list easy to scan

The parts list is where customers confirm what they are buying.

Card backgrounds, borders, shadows, and alternating row colours can all help separate items. Used badly, they add noise. Used well, they make the list easier to read.

Keep the design calm. Spare parts pages often contain many similar items, so customers need to scan without losing their place.

If your store has a clean minimal theme, match that. If your theme uses stronger card styling, bring the parts list closer to that look.

Use typography to create order

Typography is not only about font choice.

Product title weight, price weight, button size, and spacing all affect how quickly the customer reads the list.

The product name should be clear. The price should be easy to find without shouting. Buttons should be obvious without overwhelming the card.

If everything is bold, nothing is clear. Use weight and size to show hierarchy.

Match buttons to your theme

Add-to-cart buttons should feel familiar.

If your Shopify theme uses rounded buttons, match that shape. If your buttons are square, keep the parts list consistent. Use the same kind of button colour and text treatment customers see elsewhere in the store.

Konfigr includes controls for button colour, text, size, and radius, so you can bring the parts list closer to your theme’s buying experience.

This helps the customer understand that adding a part from the list is a normal Shopify buying action.

Set global defaults first

Most stores should start with global app block settings.

Set the layout, colours, typography, card styling, and button appearance once, then use that as the default across your Konfigs.

This keeps the store consistent and saves time. You do not want every parts page to become a one-off design job.

Once the defaults are right, only override settings where a specific product needs a different treatment.

Use per-Konfig overrides when the product needs it

Some products need different settings.

A very detailed machine diagram may need larger hotspots. A simple product may work better stacked. A parts-heavy page may need product images hidden to keep the list shorter. Another page may need images shown because the parts look similar.

Konfigr supports selected per-Konfig overrides for settings that matter at the product level.

Use them deliberately. The global style should still carry the store. Overrides should solve specific usability problems.

Use custom CSS for edge cases

Konfigr includes a custom CSS override field for cases where settings do not cover the exact adjustment you need.

This is useful for small theme-specific refinements. Maybe a theme has unusual spacing. Maybe a heading needs to sit differently. Maybe you want a small brand-specific detail that is outside the normal controls.

Custom CSS should be the last step, not the first.

Use the built-in settings first. Add CSS only when there is a clear reason.

Customisation should make the page clearer

Every styling choice should help the customer use the page.

Can they see the markers? Can they read the list? Can they tell which part is selected? Can they find the add-to-cart button? Does the viewer feel like part of your store?

If yes, the customisation is doing its job.

If the styling draws attention away from the parts, simplify it.

A good parts diagram does not need to be loud. It needs to be clear.

Related Articles

Continue your learning with these related resources: