Maximizing Functionality, UX, and Performance: Klapster’s Photorealistic 3D Configurator

Adding functionality and scalability to the Klapster site with Shopware 6

Back in 2020, Lukas Wagner, Bastian Amberg, and Katja Becker were working at the interior design firm raumvonwert in Frankfurt am Main, Germany. Tired of shared apartment living, the trio struck on an innovative idea: a staircase that can fold up against the wall when not in use. This concept led to the development of Klapster, a modular, fully customizable folding staircase suitable for a range of applications.

While groundbreaking, Klapster products require a high level of customization and in-depth consultations. The Klapster team realized that their current website did not provide customers with quick and easy solutions.

Klapster needed to:

• Replace time-consuming individual consultations and manual quotations.

• Make the site efficient, modern, and accessible for international customers.

• Integrate a photorealistic 3D staircase configurator.

• Provide multilingual support and region-specific payment and shipping methods.

The powerful tools, flexibility, and scalability of Shopware allowed Klapster to enhance its website’s functionality and vastly improve the user experience.

The challenge

The first challenge that Klapster had to overcome was integrating the new webshop with existing business management software. Critical data such as orders, inventory, and customer information had to be kept updated, consistent, and accurate across systems.

With Shopware, Klapster could automate manual processes such as:

• Retrieving orders and customer data

• Importing backorders and stock levels

• Managing images, tracking numbers, categories, and articles

The Klapster team was dedicating a significant amount of time and effort to providing personalized consultations and advice.

Shopware enabled the team to automate key processes such as:

• Handling information requests

• Scheduling consultations

• Sending tailored product recommendations

Customers needed the freedom to develop their own design concepts independently. To better support customer decision-making, the new site had to include:

• An integrated 3D staircase configurator with high-quality visuals

• Clear, accessible installation explanations

• Detailed sketches with accurate staircase measurements

The solution

The most important feature of the new site was the addition of a photorealistic 3D staircase configurator built using Vue.js technology. Shopware’s API-first and headless approach made connecting the configurator to the online shop easy and fast.

Klapster was also able to:

• Simplify content management with Shopware 6 Shopping Experiences

• Add over 40 custom-developed CMS blocks

• Incorporate a customized FAQ plugin

• Provide multi-lingual support

• Offer region-specific payment and shipping methods via Mollie

• Cohesively integrate Xentral ERP and Klaviyo

• Automate key processes by connecting Klaviyo and cal.com

With Shopware 6 behind it, the Klapster site can handle complex configuration processes and high traffic loads with ease.

“Shopware was the clear choice for Klapster because it combines a flexible headless architecture with powerful B2C and B2B capabilities. Its seamless integration with our 3D configurator, Xentral, and Klaviyo let us automate manual workflows, deliver photorealistic configuration in real time, and scale internationally with a regional checkout.” – Tobias Nottebohm, Raumvonwert GmbH

Built together, designed for users

Long before development began, collaboration was already in motion. The teams at raumvonwert, Schaltwerk, and Leon Vogler came together early, exchanging ideas with a clear goal in mind: building a configurator and shop experience that truly works for users.

One key decision was made upfront. The new configurator would be developed in Vue – and the Shopware shop would follow a headless approach with a Vue frontend. This created the foundation for a seamless connection between configurator and commerce, without compromises in usability or performance.

That spirit of collaboration carried through the entire project. Weekly touchpoints connected experts across UX, development, testing, and project management. Advice, feedback, and decisions flowed continuously from the very first concept to final implementation.

The result was only possible because everyone worked as one team. Schaltwerk, responsible for the technical backbone and shop frontend, and Leon Vogler, as configurator developer, were able to collaborate closely – keeping the user at the center of every decision and every line of code.

The results:

Klapster is now better positioned to present itself as a trustworthy, innovative, and design-driven lifestyle brand.

The partnership between Klapster and Shopware is a true display of creativity and technology. It perfectly demonstrates how an innovative brand can leverage technological excellence to deliver enhanced experiences to its customers.

“Looking ahead, we plan to expand our composable stack with additional configurator features, deepen personalization through Klaviyo-driven journeys and introduce Augmented Reality features." – Tobias Nottebohm, Raumvonwert GmbH