Konfigr belongs on the product page

Konfigr is built to show parts in the place customers expect to find them: on the product page.

The customer lands on the product or model they own. They see the diagram. They click the part. They check the parts list. That flow only works properly when the parts diagram is part of the storefront, not hidden in a separate page builder or external catalogue.

That is why Konfigr uses Shopify app blocks.

An app block lets you place the Konfigr viewer inside your Shopify theme through the theme editor. You do not need to edit Liquid templates, write JavaScript, or build a custom section from scratch.

Start with an Online Store 2.0 theme

Konfigr is designed for Shopify Online Store 2.0 themes.

That includes Shopify’s own themes like Dawn, along with modern third-party themes that support app blocks. The exact theme interface can vary slightly, but the basic process is the same: install the app, open the theme editor, add the app block, and configure how it appears.

The app block is the bridge between the Konfig you build in the admin and the page your customer sees on the storefront.

Add the block in the theme editor

Once Konfigr is installed, open Shopify’s theme editor and go to the product page template where the parts diagram should appear.

Add the Konfigr app block to the relevant part of the product page. For most stores, this is near the main product content, where customers can see the diagram and parts list without hunting for it.

You are not creating a separate page outside Shopify. You are adding the Konfigr viewer to the product page layout your theme already uses.

This keeps the page familiar for customers and easier for you to manage.

Choose where it should appear

Placement matters.

If the diagram is the main way customers identify parts, it should appear high enough on the page to be obvious. Do not bury it below unrelated product sections, long descriptions, reviews, or generic recommendations.

For a spare parts page, the diagram and parts list are often the main event. They should feel like part of the product page, not an afterthought.

If your parent product has useful introductory text, place that before the viewer. Keep it short. The customer is usually there to find a part, not read a full brochure.

Set the basic layout

Konfigr gives you layout control in the theme editor.

You can choose a stacked layout or a side-by-side layout. Stacked places the diagram and parts list one after the other. Side-by-side places them next to each other on larger screens.

For detailed diagrams or longer parts lists, side-by-side can work well on desktop because the customer can keep the diagram and list visible together. For simpler products, stacked can feel cleaner.

On mobile, the layout stacks so the page stays usable on a narrow screen.

Use the sticky header offset if needed

Many Shopify themes have sticky headers.

That can create a small issue when a customer clicks a hotspot or navigates within the page. The highlighted section may sit partly behind the header if the page scrolls to it.

Konfigr includes a sticky header offset setting for this reason.

If your theme has a sticky header, test the page after adding the block. Click markers, use the parts list, and see where the page lands. If the header covers important content, adjust the offset until the behaviour feels right.

Match the viewer to your theme

The Konfigr viewer should feel like it belongs in your store.

In the app block settings, you can adjust layout, spacing, colours, typography, buttons, marker colours, highlights, card styling, and other visual details.

You do not need to style everything at once. Start with the basics: layout, spacing, hotspot colour, button colour, and parts list readability.

Once the page is usable, refine the look.

Use custom CSS only when you need it

Most stores should be able to get the viewer looking right using the built-in settings.

For edge cases, Konfigr includes a custom CSS override field. This is useful when a specific theme has unusual spacing, typography, or layout behaviour that needs a small adjustment.

Use it carefully. The goal is not to fight the theme. The goal is to make the parts viewer sit cleanly inside it.

Dawn and Horizon do not need separate thinking

Shopify themes like Dawn and Horizon are different themes, but the Konfigr setup principle is the same.

You add the app block through the theme editor, place it on the product template, choose your layout, then test the storefront.

There may be small visual differences between themes. A button might inherit different styling. Spacing might feel tighter. A sticky header might need a different offset.

Those are theme presentation details, not a different setup method.

Test the page like a customer

After adding the block, open the product page on the storefront.

Do not only check that the block appears. Use it.

Click hotspots. Scroll the parts list. Try the page on desktop and mobile. Check the layout. Check whether the diagram is easy to see. Check whether the add-to-cart buttons sit naturally in the page.

If something looks slightly off, adjust the block settings before you publish widely.

The theme should support the parts experience, not distract from it

A good Konfigr theme setup is not complicated.

The product page should make the diagram easy to find, the parts list easy to scan, and the buying action easy to complete.

That is the job of the theme integration.

Add the block. Place it clearly. Choose the right layout. Match the styling. Test it properly.

Once that is done, the storefront can do what it needs to do: help customers find the right part from the product page they are already on.

Related Articles

Continue your learning with these related resources: