Case studies

An Advanced Product Customizer For BigCommerce

Time to read: 5 min

HotDogCollars, a store running BigCommerce and selling dog collars, wanted to add CuddleClones as a complementary product for its customers. A CuddleClone is a stuffed animal clone of a pet.

It can be ordered as a gift, as a rememberance and includes over 10 different physical characterists of the dog such as body position, ears, and eye color.

What does success look like for this app?

That is the question we asked in order to figure out what the client ultimately wanted. The answer was simple: success would be getting the CuddleClone options and ordering process to work with the BigCommerce platform. Keeping the customers on site was important in order to keep conversions high and not redirect to a third-party website.

The challenge

BigCommerce has a rich product options package. It has support for dropdowns, color swatches and radio buttons. However, this project needed something more advanced to show all the possible selections to a customer in a more dynamic and visually pleasing way.

As an example, for the eyes we chose to show a live preview of the color that was chosen. We also had different images for each different characteristic of the clone. For the body position we had images for sitting, standing or lying. Same for the ear positions.

Having pictures for each option made it a lot easier for customers to visualize the CuddleClone during the customization process.

Our approach

After mapping all of the different characteristics of the CuddleClone it became clear that plain JavaScript or jQuery would not work. There would simply be too many options to track and display accurately.

Ultimately we decided to use React for the entire app served by a custom product template in BigCommerce.

We built a custom React component for dropdowns and re-used it throughout the app. Likewise, we had to build a custom component for the eye color preview using HTML and CSS to create the eye shape.

For the backend, the app used a combination of product custom fields and product options. This allowed us to pass all of the different characteristics of the CuddleClone to the cart which would then show up in the order data.


Using React allowed us to build a prototype in two weeks from the initial meeting. After feedback and QA cycles the app was online 4 weeks later allowing customers to customize and purchase their very own CuddleClone directly from a BigCommerce product page.

The client was extremely pleased with the quick turnaround time, and also the seamless integration between the app and the BigCommerce platform.

Click here to view a live demo of the app