What is a 'konfig' in the Konfigr app?

A 'konfig' is an interactive parts diagram linked to a specific parent Shopify product. It includes a diagram image, numbered hotspot markers, and a list of items, each linked to one or more Shopify products.

Do I need coding skills to add the parts diagram to Dawn theme?

No, Konfigr integrates as a Shopify app block. This means you can add and configure it directly within the Dawn theme editor without touching any code.

How does Konfigr handle child products (individual parts)?

When a konfig is published, Konfigr automatically unlists the linked child products from search, collections, and recommendations. They are then only discoverable through the interactive diagram.

Can I customize the appearance of the parts diagram viewer?

Yes, you can customize the layout (stacked/side-by-side), column ratio, show/hide stock status, enable zoom/pan, and even add custom CSS directly within the Dawn theme editor settings for the Konfigr app block.

Does Konfigr work with Shopify's native cart for Dawn theme?

Yes, Konfigr offers full cart integration with Dawn. When a customer adds a part from the diagram, it goes directly into their Shopify cart and triggers the theme's native cart drawer.

What kind of diagrams can I upload to Konfigr?

You can upload any relevant diagram image, such as exploded views, assembly diagrams, or schematics, to create your interactive parts viewer.

How do I add a product configurator to Shopify?

You can add a product configurator to Shopify using apps like Konfigr, which specifically turns parts diagrams into interactive shopping experiences by linking components to existing products.

What is a Shopify app block?

A Shopify app block is a reusable content module that apps can provide, allowing merchants to add app functionality directly to their theme templates using the theme editor, without needing to modify code.

How do I display spare parts on my Shopify store?

To display spare parts effectively on your Shopify store, consider using an app like Konfigr that allows you to create interactive parts diagrams, where customers can visually identify and purchase components directly from an exploded view or schematic.

What are the best themes for selling parts on Shopify?

Themes like Dawn, which are modern and support app blocks, are excellent for selling parts on Shopify as they allow seamless integration of specialized apps like Konfigr for interactive parts diagrams and enhanced customer experience.

Can customers see live stock levels for parts in a diagram?

Yes, with Konfigr, the parts diagram viewer displays live product data, including current price and stock status, directly from your existing Shopify products.

How to Set Up the Shopify Parts Diagram Viewer on Your Dawn Theme

Introduction

For Shopify store owners selling products with replaceable components, helping customers find the right part can be a challenge. Long parts lists are confusing, and visual identification is often the easiest solution. The Konfigr app transforms complex parts diagrams into interactive shopping experiences directly on your product pages.

If your store uses Shopify's popular Dawn theme, integrating a parts diagram viewer like Konfigr is straightforward, thanks to its app block architecture. This guide will walk you through setting up the Shopify parts diagram viewer on your Dawn theme, ensuring your customers can easily identify and purchase the exact components they need.

Why Use a Parts Diagram Viewer on Dawn Theme?

The Dawn theme is known for its modern design, flexibility, and robust support for Shopify's latest features, including app blocks. This makes it an ideal foundation for integrating specialized functionalities like Konfigr's interactive parts diagrams. Adding a parts diagram viewer offers significant benefits:

Visual Clarity: Customers can see an exploded view or assembly diagram of a product, making it easy to pinpoint the specific part they need. This eliminates guesswork and reduces the chance of ordering incorrect items.
Reduced Support Queries: By providing a clear, interactive way to identify parts, you're likely to receive fewer "which part do I need?" questions, freeing up your support team.
Enhanced Shopping Experience: A modern, visual tool elevates your store's professionalism and makes the purchasing process smoother for your customers.
Seamless Integration with Dawn: Konfigr is designed to work as a Shopify app block, meaning it integrates cleanly with themes like Dawn without requiring any complex coding.
Live Product Data: Konfigr links directly to your existing Shopify products, always displaying live prices, stock levels, and SKUs, ensuring accuracy for your customers.

Before You Begin: Essential Prerequisites

To successfully set up the Shopify Konfigr viewer on your Dawn theme, ensure you have the following in place:

Konfigr App Installed: You must have the Konfigr app installed on your Shopify store.
Parent Product Ready: Identify the Shopify product that your interactive diagram (known as a "konfig") will be attached to. This is the product whose page will display the diagram viewer. Konfigr automatically sets its price to $0 to prevent direct purchase.
Child Products Created: Ensure all the individual spare parts or components you want to feature in your diagram are already set up as distinct products in your Shopify catalog. These are your "child products." Konfigr will automatically unlist these from search and collections when published.
Diagram Image Prepared: Have your diagram image (e.g., exploded view, schematic, assembly drawing) ready. Konfigr supports common image formats and uploads them securely to Shopify's CDN.

Step-by-Step Guide: Setting Up the Konfigr Viewer on Dawn

Step 1: Install Konfigr and Create Your First Konfig

If you haven't already, install the Konfigr app from the Shopify App Store. Once installed, navigate to the Konfigr app in your Shopify admin. The first step is to create your interactive diagram, or "konfig."

Add a New Konfig: From the Konfigr dashboard, click "Create new Konfig."
Select Parent Product: Choose the existing Shopify product that this diagram will represent. This is the main product (e.g., "XYZ Pool Pump") for which you're showing replaceable parts.
Upload Diagram Image: Upload your prepared diagram image. This will be the visual foundation of your interactive viewer.
Place Hotspots and Link Products: Use the Konfigr editor to drag and drop numbered "hotspot" markers onto your diagram. For each marker (an "item"), link it to one or more of your existing Shopify "child products" (e.g., "Impeller for XYZ Pump"). You can also add custom labels like "OEM Original" or "Aftermarket."
Save as Draft: For now, save your konfig as a draft. This ensures it won't be visible to customers until you've fully integrated it with your theme.

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

For Konfigr to display correctly, the parent product's page needs to use a specific Shopify product template. Konfigr automatically creates a product.konfig template suffix for this purpose.

Navigate to Products: In your Shopify admin, go to Products.
Edit Parent Product: Find and click on the "parent product" you linked your konfig to in Step 1.
Change Theme Template: On the product edit page, scroll down to the "Online store" section on the right sidebar. Under "Theme template," select the product.konfig template (or similar, depending on your Konfigr setup).
Save Changes: Click "Save" to apply the template change to your parent product.

This step tells Shopify to render the Konfigr viewer on this specific product page. Without this, the app block will not appear.

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

The beauty of modern Shopify themes like Dawn is their reliance on app blocks for seamless integration. You'll add Konfigr's viewer directly within the theme editor.

Open Theme Customizer: In your Shopify admin, go to Online Store > Themes. Find your active Dawn theme and click Customize.
Navigate to Product Page: In the theme editor preview, use the dropdown at the top centre to select Products > Default product (or specifically navigate to your parent product if you have multiple product templates).
Add Section or Block: On the left sidebar, you'll see your product page sections. Find the section where you want to display the parts diagram viewer. This is typically below the main product details, or you might create a new custom section.
Add App Block: Click "Add block" within a suitable section (e.g., "Product information" or a custom liquid section). Scroll down the list of available blocks until you see Apps. Select the Konfigr Viewer block.
Position the Block: Drag and drop the newly added Konfigr Viewer block to your desired position on the product page. For optimal visibility, many merchants place it prominently below the product title or description.
Save Your Changes: Click Save in the top right corner of the theme editor.

Now, the Konfigr Viewer app block is present on your Dawn theme's product template. The next step is to configure its display.

Step 4: Configure the Konfigr Viewer in the Theme Editor

Once the app block is added, you can customise its appearance and behaviour directly within the Dawn theme editor. This is where you fine-tune how your Shopify parts diagram looks to customers.

Select Konfigr Block: In the theme editor's left sidebar, click on the Konfigr Viewer block you just added.
Adjust Layout and Styling: The settings sidebar will now show Konfigr's customisation options. These typically include:
- Layout: Choose between a "Stacked" layout (diagram above parts list) or "Side-by-side" (diagram next to parts list).
- Desktop Column Ratio: If using side-by-side, adjust the width distribution between the diagram and the parts list (e.g., 50/50, 60/40).
- Show Stock Status: Toggle whether to display the current stock level for each part.
- Enable Zoom & Pan: Allow customers to zoom into the diagram image for closer inspection and pan across it.
- Show SKU: Decide if the SKU for each part should be visible in the parts list.
- Custom CSS (Optional): For advanced users, Konfigr allows you to add custom CSS directly within the theme editor settings to match your brand's specific styling perfectly.
Preview Changes: As you adjust settings, the live preview on the right will update instantly, showing you exactly how your Shopify app block parts diagram will look.
Save Your Customisations: Once satisfied, click Save.

Step 5: Preview and Publish Your Konfig

You've installed the app, created your konfig, assigned the template, and added the app block. Now it's time to make it live.

Review Your Draft: Go back to the Konfigr app in your Shopify admin. Ensure your konfig is still in "Draft" status. This allows you to preview it safely.
Preview on Storefront: In your Shopify admin, navigate to the parent product's page. You should now see the Konfigr viewer on the page, showing your diagram and parts list. Interact with it to ensure everything is working as expected (hotspots, product links, add to cart buttons).
Publish Konfig: Once you're happy with the setup and appearance, go back to the Konfigr app. Find your konfig and change its status from "Draft" to "Published." This will make it visible to all your storefront customers. Konfigr also automatically unlists your child products from collections and search, keeping your storefront clean.

Step 6: Integrate with Your Cart (Dawn Specific)

One of Konfigr's strengths is its deep integration with modern themes like Dawn. When a customer adds a part to their cart via the diagram viewer, it leverages Dawn's native cart functionality.

Add to Cart Button: Each part in the Konfigr viewer has an "Add to Cart" button. Clicking this button will add the selected part directly to the customer's Shopify cart.
Cart Drawer Integration: For Dawn (and Horizon, Hyper) themes, Konfigr automatically triggers the theme's native cart drawer to slide out, showing the newly added item. This provides immediate feedback to the customer and a seamless shopping experience without leaving the product page.

This full cart integration on the Dawn theme means your customers experience a smooth, consistent flow from identifying a part to adding it to their purchase.

Best Practices for Your Shopify Parts Diagram

To maximise the effectiveness of your interactive parts diagram viewer on your Shopify store, consider these best practices:

High-Quality Diagrams: Use clear, high-resolution diagram images. Blurry or low-quality images can make part identification difficult and frustrate customers.
Logical Numbering: Ensure your hotspot markers and corresponding part numbers in the list are clear and follow a logical sequence.
Descriptive Labels: While the diagram provides visual context, use concise, descriptive names for each linked child product. For example, instead of just "Part 123," use "Impeller Assembly (Part 123)."
Mobile Responsiveness: Test your konfig viewer on various devices (desktop, tablet, mobile) to ensure it's fully responsive and easy to use for all customers. Konfigr is designed to be mobile-friendly, but a quick check is always good.
Offer Options: If applicable, use Konfigr's feature to link multiple child products to a single hotspot position (e.g., an OEM original part and an aftermarket alternative) with distinct labels.

Troubleshooting Common Issues

While Konfigr is designed for easy setup, you might encounter minor issues. Here are a few common ones and their solutions:

Viewer Not Appearing: Double-check that you've assigned the product.konfig template to your parent product (Step 2) and that the Konfigr Viewer app block is added to your theme (Step 3). Also, ensure the konfig is "Published" in the Konfigr app.
Parts Not Adding to Cart: Verify that the child products linked to your hotspots are active in Shopify and have inventory. Konfigr relies on live Shopify product data.
Styling Discrepancies: If the viewer's appearance doesn't quite match your theme, use Konfigr's built-in customisation options in the theme editor (Step 4). For advanced changes, utilise the custom CSS field.

Continue your learning with these related resources:

Conclusion

Setting up the Shopify parts diagram viewer (Konfigr) on your Dawn theme is a powerful way to transform how customers identify and purchase replacement parts. By following this step-by-step guide, you can seamlessly integrate an interactive, visual shopping experience into your store.

The combination of Dawn's modern app block architecture and Konfigr's specialised functionality means you can provide crystal-clear part identification, reduce support inquiries, and boost customer confidence, all without needing any coding expertise. Start enhancing your Shopify parts catalog today and make finding the right part easier than ever.