What is ConfiguraThor?
ConfiguraThor is a 3D product configurator for e-commerce. Its main function is to help online stores reduce product page sales loss caused by unclear customization options and messy product image galleries.
ConfiguraThor is a 3D product configurator that you purchase only once and own forever. No monthly fees, no recurring charges.
With ConfiguraThor, you personalize your customer experience, help your customers make the right choices, and improve your sales.
Table of Contents
Why Having a 3D Configurator for Your Customizable Products Will Be Important in 2026
We are entering the 3D era. Every e-commerce store is implementing 3D and augmented reality experiences and modern configurators for customizable products.
We are seeing new products like Apple Vision Pro, Meta Ray-Ban, and Spectacles smart glasses that will soon replace our smartphones.
Leading e-commerce stores right now are adapting and looking toward the future. They want to give customers a better experience, along with all the benefits these technologies bring to businesses.
In this guide, we’ll show you how to use ConfiguraThor to create a better customer experience in your e-commerce store and reduce your product page sales loss.
How ConfiguraThor Can Help You Reduce Your Product Page Sales Loss
The old way of customizing products on product pages was to show the product in different variations in the image gallery and make the customer select options on the right side, like buttons and drop-downs for color, size, or other personalization options.
The problem with this method is that customers do not get a real-time view of what they’re personalizing. The experience is very poor, and there is a 50% possibility that they will abandon your product page.
That’s where a product configurator can help you close this gap, increase your sales, and improve customer experience.
Now let’s see how to set up ConfiguraThor.
If you do not have ConfiguraThor yet, you can purchase it on this page: eyedex.co/configurathor
How ConfiguraThor Works
PlayCanvas Based
ConfiguraThor is a product configurator template based on the PlayCanvas engine. PlayCanvas is backed by Snap Inc., one of the biggest players in the 3D industry.
We chose PlayCanvas for this configurator because this engine was built specifically for the web to load faster, and because it was created to build 3D web experiences like 3D configurators for businesses.
Step 1: After you purchase ConfiguraThor, sign up on the PlayCanvas website at playcanvas.com.
Step 2: After you sign up for PlayCanvas, import the ConfiguraThor template by clicking on the “Import” button.
You will have everything set up, and you will not need to touch a single line of code.
Activate Your License Key
Step 1: After your purchase, go to your dashboard on eyedex.co and copy your license key.
Step 2: In the PlayCanvas editor, click the “Launch” button. A new tab will open.
Step 3: The app will ask for your license key. Paste the license key in the box and validate your key.
Step 4: Once validated, you can close this tab and come back to the PlayCanvas editor.
Import Your 3D Models
The next step is to import your 3D models. In this guide, we assume you already have your 3D models, materials, and images for the variations.
Step 1: Look at the bottom panel. You will see different folders.
Step 2: Click on the “Models” folder and import your 3D models inside this folder.
PlayCanvas will load your 3D model, and you will have your model ready.
Import Your Materials
After you import your 3D models, you need to import your materials.
If You Already Have Materials:
Step 1: Click on the “Materials” folder and import your materials.
If You Need to Create Materials:
Step 1: Go to the “Textures” folder and import all your textures for this product.
Step 2: Once you import your textures in the folder, go to the “Materials” folder.
Step 3: Right-click inside the folder and click “Add Material.”
Step 4: You will see the material settings on the right panel. Give a name to the material.
Step 5: Click the “Diffuse” drop-down, then drag and drop the texture you want from the Textures folder.
Step 6: Do this for all your materials. After you finish, you will have all your materials ready.
Import Your Image Options
The last preparation step is to upload the images for your variations (if you want).
Step 1: Go to the “UI” folder.
Step 2: From your computer, drag and drop your images into this folder.
Now the first part is done, and we have everything prepared to build our configurator.
Activate the Editor to Configure Your Product
Now we need to activate the editor.
Step 1: On the left panel, find an entity called “Editor” and select it.
Step 2: On the right panel, you will see that this entity is unchecked. Check the “Enabled” box.
Step 3: Launch the experience with the “Launch” button. A new window will open, and you will see the ConfiguraThor editor.
Step 1: Start Building – Give Your Product a Name
Now you will see the visual configuration editor.
Step 1: Click on the “Start Building” button.
Step 2: The editor will detect all your 3D models, materials, and images. If everything looks good, click on the “Start from the Actual Configuration” button.
Step 3: Give your product a name. This name will be shown as the product title in the configurator.
Step 4: After you give the product name, click “Continue to Configuration” at the bottom.
Step 2: Configure Your Product
Now you are in the configuration editor. You have three panels:
- Left Panel: You can find all your 3D models, materials, and images.
- Center Panel: You will set up the steps and group options.
- Right Panel: You will set up all the option variations.
Add a Step, Group Options, and Variations
Step 1: Add a step. Name this step as you like (for example, “Choose Your Style”).
Step 2: Add a group option and name this option as you want (for example, “Size,” “Color,” “Length,” “Height,” etc.).
Step 3: In the right panel, you will see the variations. By default, you will have only one empty variation.
Step 4: In this variation, you can set the name, duplicate it, or delete it.
Important: If a group has only one variation, this group will not be shown in the configurator. This is useful when you want to set up a default option of your product configuration that you don’t want your customers to change.
Set Up Variations
Step 1: Drag an image from the left panel to the thumbnail area of your variation.
Step 2: In the material area, drop only one material. All the 3D parts that you set up here will have that material.
Step 3: Set up which parts of your product you want to show or hide:
- Drag and drop the meshes (3D parts) you want to show into the “Show Meshes” area.
- Drag and drop the meshes you want to hide into the “Hide Meshes” area.
For example, for a sofa, you can show the right armrest or hide the right armrest.
Step 4: Once you finish setting up the first variation, you can duplicate it. You can even swap the meshes by dragging and dropping what was in “Show Meshes” to “Hide Meshes” and vice versa.
Or you can create a new variation from scratch.
Set Up Nested Parts
In the variation, there is a “Sub Option” area. In this area, you can drag and drop multiple group options from the center panel.
These sub-options will only be visible if this variation is clicked.
Set Up Visibility Conditions
Another thing you can do in the variations (and also for steps and group options) is to add visibility rules.
Step 1: Click on the eye icon and select your rules.
For example, you can decide to show a variation only if another variation was selected. You can do the same thing for steps and group options.
This gives you maximum flexibility for the personalization you want to offer your customers.
Preview the Configuration
Once you finish your first configuration, you can continue to set up all the steps, group options, and variations you need. Or you can preview in real-time what you are doing by clicking the “Preview” button in the right corner.
Step 3: Save the JSON or Export It
If everything works and looks good, you can come back to the editor and save and copy the draft to the clipboard or export the JSON.
You do not need to do both.
ConfiguraThor comes with a product JSON file ready to edit.
Import the JSON or Edit the Existing Product JSON File
Now that you have copied your JSON:
Step 1: Go back to your PlayCanvas editor tab (the tab you were on before entering the editor).
Step 2: In the bottom panel, find a folder named “Data” and click on it.
Step 3: Double-click on the file you find inside. It will open the editor.
Step 4: Paste your configuration with Cmd+V (Mac) or Ctrl+V (Windows).
Step 5: Save the file with Cmd+S (Mac) or Ctrl+S (Windows), or by going to “File” and clicking “Save.”
Step 6: Close this tab.
Now, before we launch and deploy your configuration, we need to deactivate the editor mode.
Step 7: Go to the left panel of PlayCanvas, click on the “Editor” entity, and in the right panel, uncheck the “Enabled” box.
Step 8: As a final step before building, test that everything works. Click the “Launch” button and test your configurator once again.
Build and Upload on Your Host
If everything looks good, you are ready to build and host on your own server.
Step 1: In the PlayCanvas editor, look at the very left panel. You will see an icon with an arrow in a box (see the image below).
Step 2: Click this icon.
Step 3: Click “Download ZIP” and then click “Download” again.
Step 4: Your build will be ready. Click “Download” one last time.
Step 5: Unzip the file and upload what’s inside to your own server.
You can use Cloudflare, Netlify, or a hosting service like Hostinger.
Once you upload it, you will have a link to your configurator.
Connect to Your E-Commerce
The last step is to connect your configurator to your e-commerce platform.
In the file you downloaded when you purchased ConfiguraThor, you will have two folders: one for WooCommerce and another for Shopify.
For WooCommerce:
Step 1: Upload the ZIP file as a new plugin.
For Shopify:
Step 1: Go to your Shopify backend dashboard. On the left panel, click “Online Store” and go to “Themes.”
Step 2: On your current theme, click on the three dots and then on “Edit Code.”
Step 3: From the ConfiguraThor folder, drag and drop the two Shopify files where the other files are:
- Drag the “configurator-bridge.js” file into the “Assets” folder.
- Drag the Liquid file into the “Blocks” folder.
Step 4: Close this tab and go to customize your product page.
Step 5: In your product page under the product info, click the plus icon to add a block. Search for “Configurator,” add it, and save.
Step 6: In the left panel of your Shopify backend, click on “Settings.”
Step 7: Go to “Metafields and Metaobjects,” then on the right click “Products.”
Step 8: Add the following definitions:
- First definition: Name it “Config File Name” as a single-line text.
- Second definition: Name it “Configurator Mappings” and select type JSON.
- Third definition: Name it “Configurator URL” and select type URL.
Important Notice:
Once you add the configurator as a block on your product page (both in WooCommerce and Shopify), all the options you have in the “Add to Cart” button will be automatically hidden. This is to avoid confusion for customers.
Configure Your Product Settings
Now in your product page backend, you will see new fields (both in WooCommerce and Shopify):
Config File Name Field:
Paste the name of your JSON file that you have in your configurator.
Configurator URL Field:
Insert the URL of the configurator where you hosted it.
Configurator Mappings Field:
You need to match your group options from Shopify or WooCommerce to the group option names from the JSON file.
You can simply ask ChatGPT to do it:
Step 1: Give ChatGPT all the options on your product.
Step 2: Ask ChatGPT to match them with the group options of your product JSON file. Simply paste all the JSON file into the ChatGPT chat.
Here is a prompt that you can use it:
Please, given my product options match the group option “parts” from this JSON. Here is an example: “{“ring1″:”Ring 1″,”ring2″:”Ring 2″}”
[Insert here your product options]
[Paste here your JSON file]
Step 3: Once you have the mappings, copy the mapping into the “Configurator Mappings” field.
Step 4: Save your product. You will now have your configurator live on your product pages.
You Are Ready to Sell
Now that you have implemented ConfiguraThor on your product page, you are ready to sell.
You will find a “Customize” button on your product page. When customers click this button, it will open the configurator for your product.
Customers will be able to configure your product. Even if they abandon your page or get distracted, they will always find the configuration they were working on when they return.
If you activated sharing in PlayCanvas, customers can also share their current configuration with a friend. ConfiguraThor will generate a shareable link with their actual configuration, which guarantees much more interactiveness and a better customer experience.
The ROI of ConfiguraThor
ConfiguraThor is a powerful tool that you pay for only once and own forever. Based on which plan you purchase, you can have ConfiguraThor on 10, 50, or unlimited products.
ConfiguraThor gives you a better return on investment compared to SaaS solutions, where you are obligated to pay monthly. Over the years, you will spend thousands of dollars.
This is even better compared to custom solutions where you have to spend between $15,000 and $200,000 per configurator.
ConfiguraThor guarantees personalization, and you can customize it for your brand and your customers.
Frequently Asked Questions (FAQ)
Why is ConfiguraThor better than a monthly SaaS tool?
Most configurator tools charge $200-500 per month forever. That’s $7,200-18,000 over 3 years. ConfiguraThor costs €1,200-2,000 once. You own it. No recurring fees bleeding your profits. Plus, you have full control over your data and hosting.
Is ConfiguraThor for technical people?
ConfiguraThor is designed for non-technical people. Our visual editor requires zero coding. Plus, you get step-by-step video tutorials and 12 months of premium support. If you can use Shopify or WordPress, you can use ConfiguraThor.
Does ConfiguraThor have support?
Your license and all features continue working forever. After 12 months, support becomes optional. You can subscribe only if you need it. Most users don’t need it because the system just works.
Does ConfiguraThor include hosting?
No, hosting is not included. This gives you full control over your data and performance. You can host on any standard web server. We provide complete documentation to make deployment simple.
How does ConfiguraThor work exactly?
ConfiguraThor is built on PlayCanvas, a powerful 3D engine. You import the template, customize it using our visual editor, then embed it on your website. Your customers interact with real-time 3D models to configure products exactly how they want them.
Can I use ConfiguraThor for multiple clients/websites?
The license is per business. If you’re an agency wanting to use ConfiguraThor for multiple clients, contact us for agency pricing. We have special packages for agencies and developers.
What if I need help with setup?
You get 12 months of premium support included. Email us anytime, and we’ll help with setup, troubleshooting, or customization questions. We typically respond within 24 hours (often much faster).
Can I resell or white-label ConfiguraThor?
No, reselling the template itself is prohibited. However, you can use it to build configurators for clients as part of your web development services. Contact us to discuss agency/developer licensing.
What’s PlayCanvas and why should I care?
PlayCanvas is an open-source 3D engine that powers ConfiguraThor. It’s lightning-fast, works on all devices, and handles complex 3D graphics smoothly. Translation: your customers get a seamless, professional experience on any device.
Do I need a license key to run ConfiguraThor?
Yes, a license key is necessary if you want to use ConfiguraThor on PlayCanvas.
