What is a 'konfig' in the Konfigr app?

A 'konfig' is Konfigr's term for an interactive parts diagram linked to a parent Shopify product. It includes the diagram image, clickable hotspot markers, and links to individual Shopify products (parts).

Can I use Konfigr with any Shopify theme, including Horizon?

Yes, Konfigr is designed to work with any Shopify theme using its app block installation. Full cart integration, including opening the cart drawer, is optimized for themes like Horizon, Dawn, and Hyper.

Do I need to edit theme code to add the Konfigr viewer?

No, Konfigr uses Shopify's app block system, allowing you to add and customize the viewer directly within the theme editor without writing or modifying any code.

What happens to the price of the parent product when I create a konfig?

Konfigr automatically sets the parent product's price to $0 to prevent customers from accidentally purchasing the full assembly instead of individual parts.

Are the individual parts (child products) visible in my regular store collections and search?

No, when a konfig is published, Konfigr automatically unlists the linked child products from search, collections, and recommendations to keep your storefront clean. They are only discoverable through the interactive diagram.

How do I create an interactive parts catalog for my Shopify store?

You can create an interactive parts catalog by using an app like Konfigr. It allows you to upload diagrams, place clickable hotspots, and link them to your existing Shopify products, then display it on product pages via an app block.

What are the benefits of using parts diagrams in e-commerce?

Parts diagrams improve customer experience by providing visual context, reduce 'which part do I need?' support calls, minimize wrong orders and returns, and can increase sales by making complex parts identification straightforward.

How does Shopify's app block system work for custom content?

Shopify's app block system allows app developers to create custom content sections that merchants can drag and drop into their theme's layout using the theme editor, without needing to modify theme code directly.

Can I hide specific parts from regular product listings on Shopify?

Yes, with Konfigr, when you publish an interactive parts diagram (konfig), the individual component products (child products) are automatically unlisted from search, collections, and recommendations, making them accessible only through the diagram.

Horizon Theme: Adding an Interactive Parts Catalogue to Your Shopify Store

Introduction

For Shopify store owners selling products with replaceable components, helping customers find the right part can be a significant challenge. Traditional text-based parts lists are often confusing, leading to frequent support calls and incorrect orders. Imagine a solution where customers can simply click on a part in an exploded diagram, see its details, and add it directly to their cart. This is precisely what Konfigr offers, and integrating it seamlessly with modern Shopify themes like Horizon is straightforward.

This guide will walk you through the practical steps of adding an interactive parts diagram viewer to your Shopify store using the Konfigr app and your Horizon theme. You'll learn how to set up the app block, customise its display, and ensure a smooth, intuitive experience for your customers without needing any coding expertise.

The Challenge of Selling Spare Parts Online

Selling spare parts online often presents unique hurdles. Customers frequently struggle to identify the exact component they need, leading to frustration and increased operational costs for your business. Common issues include:

Incorrect Part Identification: Customers guess, leading to wrong orders and costly returns.
High Support Volume: "Which part do I need?" questions flood your customer service channels.
Poor User Experience: Navigating long, generic parts lists is cumbersome and time-consuming.
Lost Sales: Frustrated customers abandon their purchase when finding the right part becomes too difficult.

An interactive parts catalogue directly addresses these pain points by providing visual clarity and a streamlined purchasing path.

Why an Interactive Parts Catalogue is Essential

Implementing an interactive parts catalogue with Konfigr turns your complex parts inventory into an intuitive, visual shopping experience. Instead of static lists, customers interact with dynamic diagrams, making identification effortless.

Visual Clarity: Customers see parts in context, reducing guesswork and errors.
Reduced Support: Visual identification answers common questions proactively, freeing up your support team.
Enhanced Customer Experience: A modern, interactive interface makes shopping for parts easy and enjoyable.
Increased Sales: Clear identification leads to confident purchases and fewer abandoned carts.
Streamlined Operations: Fewer returns due to incorrect parts save time and money.

Konfigr and the Horizon Theme: A Perfect Match

The Horizon theme, like its popular counterpart Dawn, is designed for flexibility and performance. Konfigr is built to integrate seamlessly with these modern Shopify themes using app blocks, which means you can add the interactive parts diagram viewer to your product pages without touching any theme code. This makes the process accessible even for those without technical development skills.

Konfigr’s app block installation works universally across any Shopify theme, but its full cart integration capabilities, including opening the cart drawer, are optimised for themes like Horizon, Dawn, and Hyper. This ensures that when a customer adds a part to their cart from your interactive diagram, the experience is smooth and consistent with your theme's design.

Setting Up Your Interactive Parts Catalogue with Horizon Theme: A Step-by-Step Guide

This tutorial will guide you through the process of adding a Konfigr interactive parts catalogue to a product page in your Shopify store using the Horizon theme. We'll cover everything from creating your first konfig to publishing it on your storefront.

Prerequisite: Install the Konfigr App

Before you begin, ensure you have installed the Konfigr app from the Shopify App Store. Once installed, Konfigr will appear in your Shopify admin under "Apps."

Step 1: Create Your First Konfig in Konfigr

A "konfig" is Konfigr's term for an interactive parts diagram linked to a parent Shopify product. This is where you upload your diagram, add clickable hotspots, and link them to your existing Shopify products.

Navigate to Konfigr: From your Shopify admin, go to Apps > Konfigr.
Create New Konfig: Click on "Create Konfig" or the "+" icon to start a new one.
Select Parent Product: Choose the Shopify product that represents the main assembly or machine for which you're providing parts. For example, if you're selling parts for a "XYZ Pump Model A," you'd select that product.
- Konfigr automatically sets the parent product's price to $0 to prevent accidental direct purchases.
Upload Diagram Image: Upload your exploded view, assembly diagram, or schematic. Konfigr stores these securely on Shopify's CDN.
Add Hotspots and Link Products:
- Drag and drop numbered hotspot markers onto your diagram.
- For each hotspot, link it to one or more existing Shopify products that correspond to that part position.
- You can add custom labels like "OEM Original" or "Aftermarket" for multiple product options at a single position.
Save Your Konfig: Once you've added your diagram and linked all relevant parts, save your konfig. It will be in "Draft" status initially.

Tip: Konfigr automatically unlists child products (the individual parts) from search, collections, and recommendations when the konfig is published. This keeps your main storefront clean while making parts discoverable only through the diagram.

Step 2: Assign the Konfig Product Template to Your Parent Product

For your interactive parts diagram to display correctly, the parent product needs to use a specific Shopify product template. Konfigr creates this template for you automatically.

Go to Shopify Products: In your Shopify admin, navigate to Products.
Find Your Parent Product: Locate and click on the parent product you assigned your konfig to in Step 1.
Change Product Template: Scroll down to the "Online store" section on the product page. Under "Theme template," select product.konfig from the dropdown menu.
Save Product: Click "Save" at the top right of the product page.

This tells your Horizon theme to use Konfigr's specific layout for this product, which includes a dedicated section for the interactive viewer.

Step 3: Add the Konfigr App Block to Your Horizon Theme

This is where you integrate the Konfigr viewer into your Horizon theme's product page layout using Shopify's theme editor.

Open Theme Editor: In your Shopify admin, go to Online Store > Themes. Find your Horizon theme and click "Customise."
Navigate to Product Page: In the theme editor, use the dropdown menu at the top to select "Products" and then "Default product" (or specifically select the parent product you linked your konfig to, e.g., "XYZ Pump Model A"). This ensures you're editing the correct product template.
Add Konfigr App Block: On the left sidebar, scroll down to the "Product information" section. Click "Add block" (it might be under "Theme blocks" or a similar section depending on your Horizon theme version).
Select Konfigr Viewer: A list of available blocks will appear. Scroll down and find "Konfigr Viewer." Click to add it.
Position the Block: Once added, drag the "Konfigr Viewer" block to your desired position on the product page. A common placement is below the product description or product media, or in a dedicated tab if your theme supports it. For Horizon, placing it within the main product information column is a good starting point.
Save Changes: Click "Save" at the top right of the theme editor.

Now, if your konfig is in "Draft" status, you should be able to see a preview of the interactive parts diagram on the selected product page within the theme editor.

Step 4: Customise Your Viewer Display

Konfigr provides extensive customisation options directly within the Shopify theme editor, allowing you to match the viewer's appearance to your Horizon theme's aesthetic.

Select Konfigr Viewer Block: In the theme editor, click on the "Konfigr Viewer" block you just added.
Adjust Settings: On the right-hand sidebar, you'll see various settings to control the viewer's appearance and behaviour:
- Layout: Choose between "Stacked" (diagram above parts list) or "Side-by-side" (diagram next to parts list) for desktop.
- Column Ratio: For side-by-side layout, adjust the width distribution between the diagram and the parts list.
- Display Options: Toggle visibility for stock status, SKU, and enable/disable diagram zoom and pan.
- Colours and Typography: Use your theme's default settings or override them for specific elements to match your brand.
- Custom CSS: For advanced users, there's an option to add custom CSS to fine-tune the styling.
Preview and Save: Preview your changes in the theme editor. Once satisfied, click "Save."

Step 5: Publish Your Konfig

Once you've created your konfig, assigned the template, and added the app block, the final step is to make your interactive parts catalogue live for your customers.

Return to Konfigr App: Go back to Apps > Konfigr in your Shopify admin.
Publish Konfig: Find the konfig you've been working on and change its status from "Draft" to "Published."
Confirm: Konfigr will automatically set the parent product to "Active" if it was in draft. Confirm the action.

Your interactive parts catalogue is now live on your Shopify store, enhancing the customer experience on your Horizon theme product pages!

Best Practices for Horizon Theme Integration

To ensure your interactive parts catalogue performs optimally and looks great on your Horizon theme, consider these best practices:

Clear Diagram Images: Use high-resolution, easy-to-read exploded diagrams. Clear visuals are key to accurate part identification.
Logical Hotspot Numbering: Ensure your hotspot markers correspond clearly to the parts list. Consistency helps customers navigate easily.
Responsive Design Check: Always test your konfig viewer on various devices (desktop, tablet, mobile) to ensure it's fully responsive and user-friendly, especially with the Horizon theme's adaptive layout.
Informative Product Titles: Make sure the titles of your child products (the individual parts) are descriptive and include relevant keywords for internal searching within the parts list.
Leverage Custom Labels: If you offer multiple versions of a part (e.g., OEM vs. Aftermarket), use Konfigr's custom labels to clarify options for customers.
Strategic Placement: Experiment with the Konfigr Viewer app block's position on your product page. Consider placing it prominently where customers would naturally look for part information.

Conclusion

Adding an interactive parts catalogue to your Shopify store with the Horizon theme using Konfigr is a powerful way to enhance customer experience, reduce support inquiries, and boost sales. By following these step-by-step instructions, you can transform your complex parts inventory into an intuitive, visual, and highly shoppable interface without any coding. Konfigr seamlessly integrates as an app block, allowing you to maintain your Horizon theme's clean design while providing invaluable functionality for customers seeking specific components. Empower your customers to find the exact parts they need, every time.