Varcroft and Bianco

3D React app and headless Shopify implementation

Summary

Client: Varcroft and Bianco

Canada-based Varcroft and Bianco is a carpentry and interior design studio that creates wood furniture made to last for generations.

Scope and challenges
- Created a configure, price, and quote solution
- Designed a functional, pleasing user interface
- Integrated eCommerce functionalities
Solutions and results
- Built a React-based product configurator that allows visitors to get a quote immediately
- Implemented headless Shopify to provide eCommerce capabilities
- UX/UI design in Figma

3D React application and headless commerce implementation

Our team worked with Varcroft and Bianco, a Canadian carpentry and interior design firm, to build a configure, price, and quote (CPQ) solution that allows visitors to build drawers, add inserts, and change colors as they see fit to create the furniture they need.

By creating a product configurator, Varcroft and Bianco streamlined their order process and reduced the number of unsatisfied customers. Plus, by implementing a headless Shopify checkout, they can receive orders on the fly without needing sales reps.

We created a modern product configurator app using React

Modern solutions
Product configurator solution
Before implementing our product configurator, Varcroft and Bianco's customers had to go through a cumbersome quote process with multiple steps without seeing mockups or renderings of the final product. This React app allows visitors to create and order their drawers in real time.
API integration
Powered with Shopify
Users can design their own drawer insert in the web app and order it directly with Shopify, which has been integrated into the app through Shopify's API.

A next-generation web application for an interior design studio

Building and deploying a React app required careful planning and execution. Here's how we did it:

1. Design the UI in Figma
Before we started, we designed and prototyped a user interface in Figma to get a better idea of how everything would look.
2. Develop the application using React
Now that we had a functioning prototype, we started working on the application code using React. React provides an excellent foundation for creating modular, highly customizable, and efficient page layouts.
3. Implement Shopify API
Shopify's API allows a developer to improve upon and extend the existing features built into the platform, like flexible checkout options. This gave Varcroft and Bianco more control over how customers interact with their product configurator and their overall shopping experience.
4. QA and deployment on Netlify
Netlify is a global, production-ready environment from the start. This allows us to skip all the traditional server setups and get straight to building. Using Netlify we were able to launch Varcroft and Bianco's app in minutes without needing extra configuration.