There’s a hard way to build a product configurator: this involves hiring expensive developers, managing the project, communicating back-and-forth, spending weeks of your time…

Then, there’s an easy way to build a product configurator (the no-code approach).

This guide outlines how to build a product configurator the easy way. We’re using our no-code platform, so you don’t need to be a developer or know coding to get the job done.

Follow along, and you’ll have a working product configurator ready to embed into your website by the end.

Build Your Own Product Configurator (Step-by-Step)

We’re going to use Convert_ to build your own product configurator. If (like me) you don’t know a line of code from a line of Coca-Cola, never worry.

You don’t need technical skills to create a product configurator with Convert_. It’s a no-code, drag-and-drop builder (the easy way).

Let’s go through each step to get your product configurator up and running.

Step 1: Login to Convert_

If you don’t have a Convert_ account yet, sign up for your free account (no credit card needed). Your account is free forever and gives you access to all premium features, letting you try everything out first.

You continue to get all access until your product configurator reaches 100 visits per month.

Once you login, you arrive on your account dashboard. This is where all of your calculators, etc. live.

We don’t have anything here yet, as you can see from the image below.

Step 2: Create a New Calculator

• Select the “new calculator” option (highlighted with the red arrow in the image above) to start creating a product configurator for your website.

This takes you to a screen to create a new calculator form. You have two options:

1. Start from scratch

2. Choose a template

Before you start building your product configurator, you can also watch our onboarding demo if you want.

Choosing a template is the easiest way to get started. So, let’s select option 2 and get started with a template that we can customise.

You can change colors, fonts, etc. to match your brand. And customizing the product configurator lets you input your products and pricing structure.

Step 3: Pick a Template

Now, we land on the next page with a range of templates to choose from. On the left side, you’ll see a list of categories where you can filter your options.

Select “Product Configuration” to get the appropriate templates to choose from.

Pick the best template to suit your needs. I’m going with the “Chair Visual Product Configurator” for this guide.

You can “Preview” each template before making a selection. Once you’ve decided:

• Click the “Use Template” button to continue.

Step 4: Customize Your Product Configurator

This brings us directly into the builder. Here, you can customize the product configurator template to suit your needs.

The “Navigator” section of the builder is on the right side. This shows you each element used in the tool and helps you navigate to separate sections of the builder more easily.

The navigator displays each element icon in this product configurator.

For instance, I’ve highlighted “multiple choice elements” in the image below that let us know this container displays multiple choice options.

When you want to edit an element, you have 2 options:

1. Click on the element from the navigator

2. Click on the element from the main builder

I clicked on the first element from the main builder, which is an image element. From here, you can edit the element content and style (for instance, change the image to match your brand).

Within the builder, you can edit any elements you want. Simply change the images or text to match your company style.

Some stylings you might want to change are:

• Font

• Size

• Color

• Weight

• Alignment

To the right of the “Edit Element” and “Element Style” tabs, you’ll see the “Calculator Style” tab. You may want to change the overall styling of your product configurator, including:

• Appearance - Set background colors, primary colors, etc.

• Heading typography - Set font, color, etc. for your separate headings (H1, H2, etc.)

The “Calculator Style” tab also lets you change the styling for labels, buttons, input fields, and more.

Say you want to change the color of your configurator. Simply go to your “Calculator Style” tab and scroll down to “Appearance” to customize your color scheme.

Personally, I wouldn’t go with that color scheme, but each to their own.

Editing product configurator elements

In this configurator, we’ve got a “Button Group” element for the chair base material with 2 options:

• Wood

• Steel

You can add more options if you want or change this completely to suit your product.

• Click on the element you want to change (i.e. “Button Group: Base Material”)

• In “Edit Element,” scroll down to “Button Group Settings”

• Find “Options” and edit the labels/add new ones

• Enter a corresponding value

I added plastic and gold, which now show on the configurator as extra button options.

IMPORTANT: The “Value” will be used in your formulas, so keep track of them within each element (we’ll cover formulas later).

After this “Button Group,” we have 3 multiple choice elements:

• Wood base color

• Steel base color

• Shell color

You can edit these elements how you like or add more multiple choice options from the “Add Element” tab. I’ll quickly edit the first multiple choice element (“Multiple Choice: Wood Base Color”).

• Click on the element I want to change (“Multiple Choice: Wood Base Color”)

• In “Edit Element,” scroll down to “Multiple Choice Settings”

• Find “Options” and edit the labels/add new ones

• Enter a corresponding value

Of course, you can customize these multiple choice elements to suit your products and add more if needed.

Editing layered images

Your layered images are a crucial part of your product configurator. These give users a visual representation of the different available options and are linked to formulas (more on those in the next section).

Editing layered images is pretty much the same as editing other elements.

• Click on the element you want to change (“Layered Images: Steel”)

• In “Edit Element,” scroll down to “Layered Image Settings”

• See “Images” and replace/add your product images

• Enter a corresponding formula

The number of images you upload should match the product options available. For instance, there are 10 different chair combinations available in this example:

• 2 x steel base colors (chromed + coated dark)

• 5 x shell colors (white, black, grey, ice grey, mustard)

So, this product configurator has 10 layered images to cover all of the possible combinations.

As you may have already noticed, there is a “Visibility Equation” (or corresponding formula) beside each image…

Let’s talk formulas

As we’ve selected a template to get started, the formulas are already pre-set. Technically, you could keep the configurator layout the same and only change the labels and images to match your products.

But it’s unlikely the template is going to match your needs perfectly. So, you’ll want to add more elements and multiple choice options, etc., which means you’ll need to add/update formulas.

You may have noticed reference tags attached to each element. These are vital for formulas.

Our formulas are very similar to those in Excel or Google Sheets. You can use input values from questions or output values you've created via variables.

You can use functions like:

• IF

• AND

• OR

• 390

If you’re familiar with Excel, you’ll be used to these functions already.

I won’t go super deep on formulas here. But let’s touch on a couple of examples from this configurator and identify where you might need to adapt your formulas.

Here are the reference tags for this configurator:

QA - Base material

• Wood (value 1)

• Steel (value 2)

QB - Wood base color

• Honey tone-ash (value 1)

• Black maple (value 2)

QC - Steel base color

• Chromed (value 1)

• Chromed (value 2)

QD - Shell color

• White (value 1)

• Black (value 2)

• Grey (value 3)

• Ice grey (value 4)

• Mustard (value 5)

Remember earlier when I noted the importance of the “Value?” They come into play here.

I’m going to look at 2 formulas:

1. A “Visibility Equation” corresponding to a wooden chair option

2. The pricing formula (which includes a discount)

1. A “Visibility Equation” corresponding to a wooden chair option

This is the formula we’ll touch on first:

IF(AND(QA=1; QB=1;QD=1);1;0)

It’s the formula corresponding to the first wood layered image.

This means the product configurator must display the corresponding image if:

• QA (base material) = 1 (wood) AND QB (wood base color) = 1 (honey tone-ash) AND QD (shell color) = 1 (white)

So, a user lands on your configurator and selects a wood base chair in honey tone-ash with a white shell. They instantly see how that combination looks on their screen.

The formula just changes slightly for every available option. Here, you may have noticed that QC (steel base color) was missing.

This ensures that the steel base color option is invisible when someone selects a wood base. But the formulas for the steel base follow the exact same pattern (except QA = 2 and QC replaces QB).

2. The pricing formula (which includes a discount)

The pricing varies depending on the base material selected in the configurator.

• Wood base = $40

• Steel base = $60

You also may have noticed a discount in the quantity element (reference tag QI).

• Order more than 80 chairs and receive a 15% bulk discount

As you can see from the image above, we already have two separate elements for the wooden base chair ($40) and the steel base chair ($60). Each one is a formula element and already has formulas set up.

Let’s look at the formula element for the wooden base chair.

Editing a formula element is similar to changing any other element.

• Click on the element you want to change (“Formula: Total Price”)

• In “Edit Element,” scroll down to “Formula Settings”

• See “Formula” which shows the discount formula

• Expand the formula builder to edit

I’m going to expand the formula builder so we can dig a little deeper into the pricing and discount.

As the image below shows, this brings us straight to the “Total Price” tab within the formula builder. Here, we see the discount formula applied to the total price:

• IF(QI>80, VB*QI*0.85, VB*QI)

The discount applies if someone orders more than 80 chairs. You can see that this formula is an “IF” function.

Let’s break it down:

IF(QI>80, VB*QI*0.85, VB*QI)

• QI is the quantity

• VB is the variable (wood chair price = 40)

• 0.85 is the value for the 15% discount

Say I’m buying 81 wood base chairs. The configurator automatically makes this calculation:

• 40 x 81 x 0.85 = 2,754

So, the 81 chairs cost $2,754 with the 15% discount (without a discount the cost is $3,240).

You must apply the discount value as a decimal number leading with zero in the formula.

• 15% discount = 0.85

• 25% discount = 0.75

• 50% discount = 0.5, etc.

If the quantity is less than 80, the formula reverts to its normal calculation:

• VB*QI

• Variable x quantity

• 40 (wood chair price) x 10 (quantity) = 400

In this formula builder, there are 5 tabs:

• Total price (Show/Hide Logic)

• Steel chairs

• Wood chairs

• Total price (Show/Hide Logic)

• Total price

There are also two more columns:

• Questions

• Variables

I’ve selected the first tab here. This formula is related to QA (base material) which is the first question on the configurator. You can see this from the “Questions” column.

The formula is quite simple:

• IF(QA=1,1,0)

Translation: QA=1 is either true (1) or false (0).

In this case, I have the wooden base chosen on the configurator, so QA=1 is true. That’s why you see the number “1” showing at the bottom right of that section (see image above).

You may also notice this from the above image: in the questions column all the numbers are “1” except for the quantity which is “5,” because I selected “5” in the quantity section of the configurator, automatically updating the formula calculation and the corresponding price ($200).

Beside the “Questions” column we have the “Variables” column.

• VA (steel chairs) = 60: A steel chair costs $60

• VB (wood chairs) = 40: A wood chair costs $40

The variable values are vital for our calculations. If we access the “Steel Chairs” tab you can see the value.

You can change the value at the top left of this tab to match your pricing for products. Editing the name of variables or adding new ones is simple (just make sure your formula matches any new variable).

For instance, just copy an existing formula and change the “VA” or “VB” to correspond with the new variable “VC,” etc.

The “Wood Chairs” tab is exactly the same as the above image, except the variable value is 40.

Once we access the next “Total price (Show/Hide Logic)” tab, you’ll see that the value is 0. That’s because I have the wooden base selected for question one.

Answering if QA=2 is either true (1) or false (0). In this case, it’s false and “0” is displayed.

Changing the base material to steel on the configurator would change this value to “1” instead of “0.” The value beside “base material” on the “questions” column would show “2” as well.

This ensures the configurator makes the correct pricing calculation. We can see this in the “Total Price” tab.

From the image above, you can see the formula: IF(QI>80, VB*QI*0.85, VB*QI)

The formula uses VB (wood chairs) because I have wood selected as the base material on the configurator. I also have the quantity set to 5, so the configurator automatically makes the following calculation:

• 40 x 5 = 200

I understand that formulas might feel overwhelming for some (they did for me as well). But they’re easy to use once you grasp the basics.

For those already familiar with Excel formulas, setting this up will be simple.

Buy now button

The final element in this product configurator is the “Buy Now Button” at the bottom. Users can buy and pay directly from the tool.

You can edit this element like the others by clicking on the “Edit Element" tab.

Here, you have the option to add different actions when users click the button. This one has:

• Send submission email

• Add checkout with Stripe (payments)

The first action lets you input your email details to get notified when someone completes the configurator. The second action lets you connect a Stripe to the configurator to take payments directly on the tool.

• Simply click on each action within the “Edit Element” tab to set this up

Step 5: Preview Your Product Configurator

When you’re happy with your configurator, go through it in preview mode.

• Simply click on the “Preview” tab to check how it looks and works

The preview mode lets you switch between device views:

• Desktop

• Tablet

• Mobile

I spend a bit of time in preview mode putting the configurator through its paces. Check all the different combinations and make sure the correct images show for each.

Step 6: Test Your Configurator

In preview mode, I always run through different pricing combinations to thoroughly test the formulas and calculations. Everything is working perfectly with this template, so I don’t need to change anything.

If you’re making a lot of changes and adding new formulas, always test your configurator. This makes it easier to pinpoint any potential issues.

Step 7: Publish Your Configurator

After testing your product configurator and ensuring it works, it’s time to publish. This step is super easy:

• Click the “Publish” button on the top right of the builder

• A message reminds you the calculator isn’t live

• Click “Publish”

Once you hit publish, your configurator is ready to embed into your website.

Step 8: Embed Configurator into Your Website

Embedding your product configurator into your website is also simple. No matter what website platform you use, embedding is straightforward and fast.

From the builder:

• Click on the “Share” tab at the top

The next page gives you the option to either publish the calculator as a standalone landing page or embed it into your website. We want to choose the second option.

• Click the “Embed” tab

This brings you to the Embed Page where you get instructions for embedding your configurator into your website.

Scroll down to select your website platform. We include embedding instructions for 15 platforms:

The embed instructions are simple to follow. You can embed your product configurator into your website in a minute or two.

If your website platform isn’t on the list, don’t worry. You can still embed your configurator into your website.

• Select “Other” from the bottom of the dropdown menu

• Copy the snippet of HTML code

• Paste it where you want the calculator to load

Getting your configurator live on your website is that simple.

How Convert_ Helps

Convert_ is a powerful no-code platform that helps you build and customize calculators, product configurators, surveys, quizzes, and more.

We make creating sales and marketing tools straightforward and offer other advantages:

• Most powerful calculations

• Embeds into any website

• Excellent integrations

• Highly customizable

• Easy to use

• Free plan

Our software does all the heavy lifting for you. Benefit from a user-friendly, drag-and-drop builder for creating powerful content - without coding skills.

As you've seen, getting started is easy. Sign up for a free forever plan, choose a template, and follow these steps to customize it to suit your needs.