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.
Results
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.