BigCommerce Custom Product Configurator: Without Purchasing Extensions

According to research by the business advisory firm Deloitte, 36% of consumers say they are interested in personalised products or services and three product categories where customers have already made the most personalised purchases are holidays (25% of customers), clothing (19%) and furniture (18%).

Some brands use custom product configurator also known as product customizer to enhance their website’s user experience, but for some, it is a necessity as their products depend upon combinations of different elements that require personalization and can only be achieved using custom product configurators. Whichever way you see it, Product configurators are the need of the hour for E-retailers.

It can open a whole new spectra of options for customers as they can create a number of versions of a product through these customizations. This also increase customer engagement on your website, where he can submit and order a product as per his preferences. This additionally helps in gaining returning visitors to your website and increase brand loyalty.

For example, Nike offers a range of shoes where each shoe is provided in different combinations. A single pair of shoes can have multiple colors for the Base, Nike Swoosh, Shoelaces, and even the Insole.

Nike can either choose to list all these combinations as individual products, but setting up a product configurator that allows customers to create their own combination by choosing different attributes is without a doubt the smart way to achieve customer’s interest and deliver a personalized experience.

So, What Really Is a Product Configurator/Customizer?

While the above image of Nike’s product configurator gives a fair idea of what a product configurator really is, it can officially be termed as “a web application that allows customers to configure or customize a product the way they want”.

Some configurators may only provide limited options to choose from, for eg: color, size, shape, flavor, whereas some advanced ones can have highly complex logic running behind them to facilitate complex combinations, like placing your own image/s or text on the product (like a Phone case or t-shirt) and resizing or positioning it at a certain location.

Evaluating the growing demands of product configurators, there are various extensions already available for various CMS solutions like BigCommerce, Magento, Shopify, and others.

However, the thing with extensions is:

• Although they are easy to setup, on many occasions you end up paying for additional features that you might never need.
  
  
• Extensions with advanced features usually rely on lots of JavaScripts in their source code which might end up putting a lot of load on your web servers and slow down your website (in some instances may conflict with other code on the website).
  
  
• Extensions which are not regularly supported by the development team may end up as a bad investment over the course of time due to maintenance issues.

While we are not completely against using 3rd party extensions, we do recommend to avoid them wherever possible. For a functionality like a product configurator, which might require a complex code, it is always advised to avoid an extension if there is a default way to set it up using the features of the CMS only.

The Brihaspati Infotech, a leading Bigcommerce development company recently had an opportunity to set up a product configurator for one of our clients “without using any extension” and “only using default BigCommerce backend abilities”.

How did we do that? Let’s find out…

Bigcommerce Product Configurator: Was There Manual Coding Involved?

Manual coding for creating BigCommerce product Configurator was certainly involved, but only to set up the Front-end interface in order to configure the product data saved in the BigCommerce admin panel. But the fact that only a minimal part of the website front-end was customized and no heavy JavaScripts were utilized, meant two things:

1. The website remained light and no unnecessary load was added to the website’s speed.

2. The store admin did not have to manage a whole new section in the back-end for the Bigcommerce product configurator settings and everything was managed from the default product settings only.

Bigcommerce Product Configurator: Our Approach

A product configurator involves 5 things:

1. A base price for the product.

2. Multiple Attributes that can be applied to the product and price of each attribute.

3. Categorization of attributes.

4. The dependency of one attribute category on the other.

5. Showing the final output of the product being built in real-time.

As BigCommerce experts, we knew that the first 4 features can be achieved using the default BigCommerce admin functionality by configuring them in the right manner.

These features include:

1. BigCommerce Product Options

2. Product Option sets

3. Product Rules.

What Are Options, Option Sets, And Rules?

BigCommerce Product Options are just like product options in any other E-commerce CMS. These are Product attributes that hold a collection of different attribute values of your products.

So for example, if a T-shirt has color attribute values as Red, Green, and Blue, then the product option (or attribute) will be COLOR.

On the other hand, BigCommerce Product Option Sets are groups of options that a product may have, like COLOR, SIZE, FABRIC, etc. Each product may have different options and the combination of options may vary based on the product or product category as well. Hence, BigCommerce allows you to combine different Product options and assign it to a product or a product category.

This ability of the ecommerce platform to setup Options and group them as Option Sets provided us the required Skeleton to set up our Bigcommerce Product configurator without the need for any external plugin.

Utilizing Product Options and Option sets, we were able to achieve:

• Multiple Attributes that can be applied to the product and setting the price of each attribute.
• Categorization of attributes.

However, in order to set up the dependency of one attribute category on the other, we needed to set up Rules for Product Options.

Product Option Rules in BigCommerce are a way to create such dependencies in between product options using which we can implement certain actions to the base product.

By default, BigCommerce provides the following product option rules:

• Changing the price
• Adjusting the weight
• Make it unavailable for purchase
• Show a different image
• Stop processing rules

This ability to define multiple rules (or permutations and combinations) on top of multiple product categories was exactly what was required to breathe life into to the dynamic ability of our bigcommerce product configurator that allowed customers to configure their own product.

However, we were still far away from achieving the complete functionality. While the Back-end was all set, it’s time to use the backend data (product, attributes, prices, images) effectively on the Front-end. This is where custom coding was required.

What Was Custom Coded in our Bigcommerce Product Customizer?

As the back-end was set up just by utilizing the core Bigcommerce features – that also without any hard code customizations, all that was left was the front-end.

While the ability to set up multiple options under option sets and defining rules helped us achieve the hierarchical structure required for multiple attributes of the products, the current implementation was still running based on page load.

This meant that every time you select an attribute, the page would load once before you can select the next attribute. This defeated the effectiveness of the product configurator.

To achieve a more sophisticated and user-friendly experience:

• We created a custom product page template while making sure rest of the theme was not touched.
  
• We utilized HTML5, CSS3, AJAX, and JavaScript for setting up the user interface that avoided page reloads on multiple attribute selections.
  
• A separate template file for the product page which was linked to the original theme meant that it was easy to assign the product configurator to any product by simply setting up a copy of the custom product page template and setting up Options, Options sets, and Rules. This provided the ability to assign different attributes to different products while using the same user interface of the configurator.

The Final Output

The product configurator was built for a merchant who provided standing desks. As the desk had multiple components that could be customized, hence the custom product configurator was an instant hit with the store audience.

The product configurator allowed customers to configure different attributes like desktop material, frame color, top size and other attributes that combine together to come up with the actual price of the final product.

The Bicommerce product configurator was a huge success as we were approached by several businesses offering similar product customization services on their ecommerce stores.

As of July 2021, the app actively serves more than 30 global ecommerce stores in its vanilla as well as customized versions.

The Ecommerce experts at The Brihaspati Infotech have developed several ecommerce solutions in the past, tailored to the client’s business. The team has helped businesses across all the major ecommerce development platforms including Shopify, Magento, WooCommerce, Ecwid, and BigCommerce grow online with advanced solutions. Needless to say, we have successfully delivered product customizers on nearly all of them. You can read more about our product customization achievements here.

Conclusion

Choosing a 3rd party extensions to achieve specific requirements is an easy way to go and a vast majority of the clients prefer it as well. However, one must realize the repercussions there may be of having tons of extensions running behind your website. Especially the ones where you pay for a lot of features, simply to get only a handful one that you really need.

Under such circumstances, it is always wise to consult with a BigCommerce expert who can analyze your requirements and recommend what might be suitable for your storage needs and if it can be achieved without investing in 3rd party extensions.

Are you planning on implementing a feature using a paid extension? Get in touch with us to hire Bigcommerce developer today.