How to Push Shopify Plus Further: 3D Configuration & Made-to-Order

Founded in 1954 by Ernesto Colnago, Colnago represents the pinnacle of Italian craftsmanship and innovation in the world of road bicycles. With over six decades of success in professional cycling, Colnago is synonymous with unmatched quality, performance, and style. Chosen by champions and loved by enthusiasts, Colnago continues to redefine the standards of high-end bicycles, offering an unparalleled riding experience.

Shopify Plus is a powerful and flexible platform for creating advanced e-commerce experiences. However, it's not always easy to see how it really fits complex projects with advanced requirements.

With the project we did for Colnago, the cycling ace, we pushed the boundaries of Shopify Plus.

In this article, we'll dive into how we built a Made-To-Order experience with a custom order flow, integrated a 3D configurator, and used a headless architecture with Shopify Hydrogen and Oxygen.

The main challenge of the project was to give Colnago customers an advanced customization experience for their Made-To-Order bikes. The goal was to let users personalize every detail of their bike, see it in real-time through a high-quality 3D render, and provide a customized ordering process allowing them to pre-purchase the bike by paying a deposit.

This ambitious project required a solution that ensured flexibility, high performance, and seamless integration with Shopify Plus.

We have adopted a headless architecture with Hydrogen and Oxygen, separating the frontend from the backend. This approach offers numerous advantages, including greater development flexibility and a more responsive and personalized user experience.

For this configurator project, we chose to follow the simplest solutions (always keep Occam's razor in your pocket): Shopify, the Hydrogen storefront, and a third-party provided 3D rendering engine, without the use of custom apps or 3rd party apps.

The separate frontend layer allowed us to implement business and presentation logic with maximum flexibility and without strict constraints, staying within the perimeter of technologies managed by Shopify.

A few years ago, implementing a headless architecture required relying on external components from third-party providers (frameworks, runtimes, etc.), with all the associated limitations. Today, however, Shopify allows the use of solutions offered directly by the platform, which are an integral part of the Plus contract. But what exactly are these solutions?

Hydrogen is defined as a storefront toolkit for building React-based e-commerce frontends, created and optimized for Shopify. It is implemented using the Remix framework, a project recently acquired by Shopify (Learn More)

Oxygen, on the other hand, is the hosting environment for Hydrogen, optimized for applications developed with this framework. This environment offers high performance, scalability, and security. (For the bold tech enthusiasts: Learn more)

The use of this technology stack has allowed us to stay entirely within the products offered and maintained by Shopify, while retaining the flexibility needed to implement next-generation storefronts.

The configurator is the heart of Colnago's Made-To-Order experience.

This app lets users pick and customize every part of the bike, from frame selection to details like colors, graphics, and components. The configurator was built with three main components:

The entire order flow has been designed to efficiently handle customizations. Once the configuration is completed, all specifications are saved and transferred to the cart and checkout process. This ensures that every detail is maintained and accurately displayed until the order is finalized, providing a seamless and consistent shopping experience.

The unique aspect is that the order flow has been designed not to represent the actual purchase of the product, but to reserve the product by paying a deposit on the total price, an approach very similar to that used in the next-generation automotive sector.

To provide a realistic visualization of the customized bicycles, we collaborated with an agency specialized in 3D rendering. The 3D rendering engine seamlessly integrates the models of the configured bicycles, delivering high-resolution images that showcase every detail of the customizations in real time. This feature is crucial for allowing customers to see exactly how their bicycle will look, enhancing interaction and reducing uncertainty during the purchasing process.

Each time the configuration parameters are modified on the frontend, the new values are sent to the rendering engine to update the bicycle preview.

The Colnago configurator case demonstrates how it is possible to redefine the limits of Shopify Plus to create increasingly advanced and personalized e-commerce experiences. Thanks to the headless architecture with Hydrogen and Oxygen, it is possible to realize ambitious projects that meet the specific needs of customers. Shopify Plus, with its flexibility and power, is a viable choice for those who want to innovate and offer unique, high-quality shopping experiences.

Try the configuration experience here: C68 Configurator

Contact us for more info at [email protected]