Introduction

Creating an interactive parts diagram on your Shopify store with Konfigr can revolutionise how customers find and purchase components. Instead of navigating confusing lists, they can visually identify the exact part they need, reducing errors and support calls. However, like any powerful tool, setting up your Konfigr parts diagram, or "konfig," sometimes encounters unexpected hurdles.

This troubleshooting guide is designed for Shopify store owners who are using Konfigr. We'll walk through common setup issues related to your Shopify parts diagram draft publish process, konfig visibility, product linking, and overall functionality. For each problem, we'll identify the likely cause and provide actionable solutions to get your interactive parts pages working smoothly.

Understanding the Konfigr Lifecycle

Before diving into specific issues, it's helpful to understand the basic lifecycle of a konfig. This process involves several stages, each with its own settings and implications for your Shopify parts page lifecycle:

  • Drafting: You create a new konfig, upload a diagram, place hotspots, and link to child products. At this stage, the konfig is only visible within the Konfigr app and in your theme editor preview.
  • Publishing: You make the konfig live on your storefront. Konfigr automatically manages associated settings, like unlisting child products and zeroing out the parent product's price.
  • Managing Settings: Throughout its life, you can adjust various konfig settings Shopify offers, such as display options, layout, and custom CSS.
  • Decommissioning: When a konfig is no longer needed, you can remove it. Konfigr handles the cleanup, including setting the parent product to draft and optionally creating a Shopify 301 redirect parts page.

Understanding these stages helps pinpoint where a problem might be occurring.

Common Konfig Setup Issues and Their Fixes

Problem: Konfig Not Visible on Your Storefront

You've built a beautiful interactive parts diagram, but when you visit the parent product page on your live store, it's nowhere to be found. This is one of the most common initial setup issues.

Cause

  • Konfig Not Published: The most frequent reason is that the konfig is still in draft status and has not been explicitly published. Draft konfigs are only visible in the Shopify theme editor preview.
  • App Block Not Enabled/Added: The Konfigr app block, which renders the interactive diagram, might not be added to your parent product template or enabled within your Shopify theme editor.
  • Incorrect Parent Product Template: The parent product might not be assigned the correct template suffix (e.g., product.konfig) that includes the Konfigr app block.
  • Theme Caching: Sometimes, changes take a moment to reflect due to theme or browser caching.

Solution

Follow these steps to ensure your konfig is visible:

  1. Publish the Konfig: Navigate to the Konfigr app, find your konfig, and ensure its status is "Published." If it's "Draft," click to publish it.
  2. Verify App Block Placement:
    • Go to your Shopify Admin, then Online Store > Themes.
    • Click Customize on your active theme.
    • In the theme editor, navigate to the parent product page for your konfig.
    • Ensure the product template is set to one that includes the Konfigr app block (often product.konfig or your default product template with the block added).
    • In the left sidebar, under "Product information," look for "Apps" or "App blocks." Make sure the Konfigr Viewer block is present and enabled. Drag it to your desired position.
  3. Clear Caches: After making changes, clear your browser cache and, if applicable, any caching plugins you might be using on Shopify.
  4. Assign Correct Template: On your Shopify product page for the parent product, under "Theme template," select the appropriate template (e.g., product.konfig) if you've created a custom one for konfigs. Konfigr includes a step-by-step onboarding checklist that guides you through this.

Example

You've finished building the exploded diagram for your "Deluxe Pool Pump." You need to go into the Konfigr app, locate the "Deluxe Pool Pump" konfig, and click the "Publish" button. Then, in the Shopify theme editor, navigate to the Deluxe Pool Pump product page and drag the Konfigr Viewer app block into the main content area, saving your changes.

Problem: Parts (Child Products) Appearing in Search or Collections

One of Konfigr's key benefits is automatically unlisting child products (the individual parts) from your general store search and collections, preventing clutter. If these parts are still showing up, it defeats this purpose.

Cause

  • Konfig Not Published: Konfigr performs the unlisting action only when a konfig is published. If it's still in draft mode, child products remain listed.
  • Manual Relisting:1 Child products might have been manually relisted in Shopify after the konfig was published, overriding Konfigr's settings.
  • Indexing Delays: Sometimes, search engines like Google or Shopify's internal search can take a little time to re-index after changes.

Solution

To ensure child products are hidden:

  1. Publish the Konfig: Confirm the konfig is in "Published" status within the Konfigr app. Konfigr will automatically update the child products' visibility settings upon publishing.
  2. Check Child Product Status:
    • Go to your Shopify Admin and navigate to Products.
    • Search for one of the child products linked in your konfig.
    • Ensure its "Sales channels" are set appropriately, typically unchecking "Online Store" for the purpose of hiding them from general navigation but keeping them accessible via the konfig. Konfigr handles this automatically on publish.
  3. Wait for Re-indexing: If you've just published, give Shopify's search a few minutes to re-index. If external search engines are still showing them, you might need to request a re-crawl via Google Search Console or similar tools.

Example

You've created a konfig for a "Bicycle Gear Assembly." You notice that "Gear Cog #3" is still appearing in your main "Bike Parts" collection. The fix is to ensure your "Bicycle Gear Assembly" konfig is set to "Published" in the Konfigr app. Konfigr will then unlist "Gear Cog #3" and other child products from collections and search.

Problem: Parent Product Price Not Zeroed Out

Konfigr automatically sets the parent product's price to $0 when a konfig is published, preventing customers from accidentally purchasing the entire assembly instead of individual parts. If the parent product still has a price, it indicates an issue.

Cause

  • Konfig Not Published: Similar to child product unlisting, the parent product's price is updated only when the konfig transitions from draft to published.
  • Manual Price Override: The parent product's price may have been manually reset in Shopify after Konfigr adjusted it, or there's another app conflicting.

Solution

To ensure the parent product's price is $0:

  1. Publish the Konfig: Verify the konfig is in "Published" status in the Konfigr app. Konfigr will attempt to set the parent product's price to $0.
  2. Review Parent Product:
    • Go to your Shopify Admin, then Products.
    • Find your parent product.
    • Check the "Pricing" section. If the price is not $0, manually set it to $0.
    • If the issue persists, review other installed apps that might modify product pricing.
  3. Use a Specific Parent Product Template: For greater control, ensure your parent product is assigned a specific template (e.g., product.konfig) that only displays the Konfigr viewer, preventing direct purchase buttons from showing, even if the price briefly flickers.

Example

You've created a konfig for a "Coffee Machine Group Head." The original product "Coffee Machine Group Head" had a price of $150. After publishing the konfig, you check the product page and it still shows $150. You need to ensure the konfig is published. If it is, go to the Shopify product page for "Coffee Machine Group Head" and manually set its price to $0, then save.

Problem: Hotspots Not Linking Correctly or Displaying Wrong Product Data

Customers click on a numbered hotspot on your diagram, but nothing happens, or the wrong part information appears in the list. This breaks the interactive experience.

Cause

  • Missing Hotspot Configuration: The hotspot marker might be placed on the diagram but not actually linked to an "item" (a numbered position) in the Konfigr editor.
  • Incorrect Product Linkage: The item might be linked to the wrong Shopify product, or the product details were not correctly saved.
  • Product Status Issues: The linked Shopify product itself might be set to "Draft," out of stock, or deleted, so Konfigr cannot fetch live data.
  • Marker Mismatch: The marker number on the diagram (e.g., "1") doesn't correspond to the correct item in the parts list.

Solution

Thoroughly review your konfig's internal setup:

  1. Re-check Hotspot-Item Linkage:
    • In the Konfigr app, open your konfig for editing.
    • Go to the "Diagram" tab and ensure each placed hotspot has a corresponding "Item" listed in the "Items" tab.
    • Click on each item in the "Items" tab and verify that the correct Shopify product(s) are selected.
  2. Verify Linked Product Status:
    • Go to your Shopify Admin, then Products.
    • Search for each product linked to your konfig's items.
    • Confirm they are "Active" and have available inventory if you display stock status.
  3. Save All Changes: Ensure you've saved all changes within the Konfigr app after placing hotspots and linking products.
  4. Match Marker Numbers: Double-check that the numerical or alphanumeric label of your hotspot on the diagram matches the "Marker" value for the associated item in your parts list. For instance, if the diagram hotspot shows "2A," the item's marker should also be "2A."

Example

You have an exploded view of a "Chainsaw Engine." You click hotspot "5" on the diagram, but the parts list highlights "Spark Plug" instead of "Air Filter." You need to go into the Konfigr editor for the "Chainsaw Engine" konfig, navigate to the "Items" tab, find the item for "Air Filter," and verify it's linked to marker "5" and the correct Shopify product. If it's incorrect, adjust the marker or the linked product.

Problem: Konfig Viewer Layout or Styling Issues

The interactive diagram is visible, and parts link correctly, but the layout looks off, or the colours don't match your brand. Konfigr offers flexibility, but sometimes settings can conflict.

Cause

  • App Block Settings: Incorrect desktop column ratio, layout (stacked vs. side-by-side), or other display settings within the theme editor's app block configuration.
  • Theme Conflicts: Your Shopify theme's CSS might be overriding Konfigr's default styles.
  • Custom CSS Errors: If you've used Konfigr's custom CSS feature, there might be errors in your code.

Solution

Address layout and styling problems by checking these areas:

  1. Adjust App Block Settings:
    • Go to your Shopify Admin, then Online Store > Themes > Customize.
    • Navigate to your parent product page with the konfig.
    • Select the Konfigr Viewer app block in the left sidebar.
    • Experiment with the layout options (stacked/side-by-side) and adjust the "Desktop column ratio" to find the best fit for your theme.
    • Check other display konfig settings Shopify offers, such as showing/hiding stock status, SKU, or enabling/disabling zoom and pan.
  2. Review Theme Styles: If basic settings don't fix it, your theme might have conflicting CSS. For advanced users, use browser developer tools to inspect the Konfigr viewer's elements and identify conflicting styles.
  3. Check Custom CSS: If you've added custom CSS in Konfigr's settings, carefully review it for typos or syntax errors. Try temporarily removing it to see if the issue resolves. Konfigr allows custom CSS overrides per installation for tailored branding.

Example

Your "Industrial Valve Assembly" konfig shows the diagram and parts list stacked vertically, but you want them side-by-side. In the Shopify theme editor, on the "Industrial Valve Assembly" product page, click on the Konfigr Viewer app block. In the settings panel, change the "Layout" option from "Stacked" to "Side-by-side" and save. You can also adjust the "Desktop column ratio" to give more space to the diagram if needed.

Problem: Decommissioned Konfig Still Accessible or Redirect Not Working

You've decided to remove an old konfig using the decommission shopify product page feature, but customers can still find the page, or the 301 redirect isn't working as expected.

Cause

  • 301 Redirect Not Configured: When decommissioning, you need to explicitly choose a redirect option (e.g., to homepage, a collection, or none). If "none" was selected or the redirect wasn't successfully created, the old URL might still be active.
  • Parent Product Not Drafted: Konfigr automatically sets the parent product to "Draft" upon decommissioning. If this failed or was manually overridden, the product page might remain live without the konfig viewer.
  • Caching: Browser or external caching might still serve the old page.

Solution

Ensure a clean removal and proper redirection:

  1. Re-decommission with Redirect:
    • Go back into the Konfigr app and attempt to decommission the konfig again.
    • When prompted, carefully select the desired Shopify 301 redirect parts option (e.g., redirect to homepage or a specific collection).
    • Verify the redirect is created in Shopify Admin under Online Store > Navigation > URL Redirects.
  2. Verify Parent Product Status:
    • Go to your Shopify Admin, then Products.
    • Find the former parent product.
    • Ensure its status is set to "Draft." If not, manually change it and save.
  3. Clear Caches: Clear your browser cache and any CDN or Shopify caching mechanisms that might be holding onto the old page.

Example

You decommissioned the konfig for an "Old Model Bicycle Brake." You expected the old product page URL to redirect to your "Bicycle Parts" collection, but it's showing a 404 error. You need to re-decommission the konfig in Konfigr, making sure to select "Redirect to a specific collection" and choose your "Bicycle Parts" collection. Then, verify that a 301 redirect entry for the old URL to the collection URL exists in your Shopify URL Redirects.

Problem: Draft Konfig Not Visible in Theme Editor Preview

You're actively working on a new konfig in Konfigr, saving it as a draft, but when you go to your Shopify theme editor to preview how it looks, you can't see the diagram.

Cause

  • Previewing the Wrong Product: You might be previewing a different product page in the theme editor, not the specific parent product assigned to your draft konfig.
  • Konfigr App Block Not Enabled in Preview: Even for drafts, the Konfigr app block must be added and enabled on the parent product's template within the theme editor for it to render.
  • Theme Editor Glitch: Occasionally, the Shopify theme editor itself might need a refresh.

Solution

To view your draft konfig:

  1. Select Correct Parent Product:
    • In the Shopify theme editor, use the product selector at the top of the page (usually a dropdown menu) to navigate to the exact parent product page associated with your draft konfig.
  2. Verify App Block Enabled:
    • Ensure the Konfigr Viewer app block is added and visible in the left sidebar under the "Product information" section of the theme editor for that parent product. If not, add and enable it.
  3. Refresh Theme Editor: Try saving your theme editor changes and refreshing the entire browser window.

Example

You're building a new konfig for a "Drone Propeller Assembly" and have it in draft mode. In the Shopify theme editor, you open a random product page and don't see the draft konfig. The solution is to use the product selector at the top of the theme editor to specifically navigate to the "Drone Propeller Assembly" product page. Once there, ensure the Konfigr app block is added and enabled in the sidebar.

Problem: Cannot Add Parts to Cart or Cart Drawer Not Opening

Customers can see your interactive diagram and select parts, but when they click "Add to Cart," nothing happens, or the cart drawer (if your theme has one) fails to appear.

Cause

  • Theme Incompatibility with Cart Drawer: Konfigr provides full cart integration, including opening the cart drawer, for specific themes (Dawn, Horizon, and Hyper). If you're using a different theme, the "Add to Cart" functionality will still work, but the cart drawer may not automatically open.
  • Product Variant Selection: If a linked child product has required variants (e.g., "Colour," "Size"), and these aren't explicitly selectable or pre-selected, adding to cart might fail.
  • General Shopify Cart Issues: Less common, but sometimes general issues with your Shopify store's cart functionality or other conflicting apps can interfere.

Solution

Address cart integration issues:

  1. Understand Cart Drawer Compatibility:
    • If your theme is not Dawn, Horizon, or Hyper, the "Add to Cart" action will still add the item to the cart, but the cart drawer may not automatically slide open. The customer would need to navigate to the cart page manually. This is expected behaviour for other themes.
  2. Check Product Variant Settings:
    • For any child product with variants, ensure that the variant options are clearly defined and that Konfigr is set up to display them if necessary.
    • If a product has only one variant, ensure it's selected by default or that Konfigr correctly passes it.
  3. Test with a Simple Product: Link a very simple child product (no variants, always in stock) to a konfig item and test the "Add to Cart" button. This helps isolate if the issue is specific to a complex product or a broader cart integration problem.
  4. Review Other Apps: Temporarily disable other apps that modify cart or checkout behaviour to rule out conflicts.

Example

You've got a konfig for a "Garden Hose Nozzle." When customers click "Add to Cart" for the "Spray Head," it adds to the cart, but your custom theme's mini-cart doesn't pop up. If your theme is not Dawn, Horizon, or Hyper, this is expected. The item is in the cart, and the customer can proceed to checkout by clicking their cart icon. If the item *isn't* adding to the cart at all, check if "Spray Head" has any unselected variants that are preventing the add-to-cart action.

Best Practices for a Smooth Konfigr Setup

Preventing issues is always better than fixing them. Here are some best practices:

  • Test Thoroughly: Always test your konfigs in draft mode using the theme editor preview before publishing.
  • One Parent Product Per Konfig: Each konfig is designed to attach to a single parent product. Avoid trying to link one konfig to multiple parent products.
  • Keep Child Products Separate: Ensure your child products are distinct Shopify products. Konfigr links to your existing catalogue, it doesn't create new products.
  • Review Konfig Settings: Regularly check your konfig settings Shopify options for each konfig, ensuring they match your desired display behaviour.
  • Follow Onboarding Checklist: Konfigr provides a step-by-step onboarding checklist. Use it! It guides you through critical setup steps like adding the app block.

Conclusion

Konfigr is a powerful tool for transforming your spare parts sales, but a smooth setup is key to leveraging its full potential. By understanding the common issues outlined above and applying these practical fixes, you can troubleshoot your Shopify parts diagram draft publish process effectively.

Remember to always double-check your konfig's publish status, app block placement, product linkages, and the overall shopify parts page lifecycle. With these tips, you'll ensure your interactive parts diagrams provide a seamless and intuitive shopping experience for your customers, reducing support queries and boosting sales of those crucial components.