3D Visual Product Configurator Accelerator

Accelerate your product configurator development. This boilerplate enables visual shopping experiences with complex products. Powered by Crystallize and and wrapped in the , this open source gives you a foundational immersive shopping experience. You can check out the boilerplate live in our running .

The foundation for any product configurator is what we call the product universe. The product universe is the combination of products and their relationships and dependencies. An example is a bicycle product related to configuration products like saddles and grips. The saddle and grips depend on color, so you can only configure a bike with matching grips and saddle.

In addition to the rules that define which products go together and require each other, you want to get the pricing right. With a composable product relation, you determine a unit price or even a consumption-based pricing.

To create a more immersive product experience, a 3D model has been added to visualize the products. Here, you can rotate, zoom, and explore the product you are configuring.

This accelerator includes 3D visualization, enabling shoppers to visualize and explore the products. CharpstAR powers 3D visualization.

in Crystallize are used to showcase all the products a particular configuration is composed of. When merchandising your products in images, you can place them in a specific location. This allows a visual overview to discover all products and components simply by hovering or clicking on an area in an image. 

We use this on the landing page of this boilerplate. Here, we have taken screenshots of different configurations and added hotspots for the other composed products. We also use this to generate a link to the specific configuration.

Adding showcases on images is a native feature of the asset organizer in Crystallize. This is especially powerful in the context where we want to market different configurations of the same product.

The basket and checkout are handled by the . The Shop API manages the persistence of the cart and price calculations for you. The cart is managed on the edge to give you a fast performance from any location.

There are multiple ways to install the boilerplate. One is to . Another and better way to do it is via the . To install the boilerplate via the CLI, run the following command: 

npx @crystallize/cli-next@latest install ~/my-projects/my-product-configurator

The CLI gives you the option to bootstrap your tenant with all the data the product configurator store has.

To deploy locally, you can invoke npm to start it up. Once the development server is running, you can browse to .

npm run dev

There you go. As we already said, we’re in the business of . You now have everything you need to deliver immersive visual shopping for your complex products.

, tailor-made to your use case, or, why not, and get the unmatched level of support from our team to help you get going.