Development of Passepartout Configurator for Shopware 6
Art&More: Everything Framed with the Passepartout Configurator
Art & More Bilder und Leisten GmbH planned the introduction of a new, modern passepartout configurator for their Shopware 6 store. The goal was to develop a powerful desktop version that provides all features according to the technical specifications. At the same time, an optimized mobile version was to be created with a deliberately reduced feature set to ensure high user-friendliness and smooth performance on mobile devices.
Company profile
Art & More Bilder und Leisten GmbH offers a wide range of custom-made passepartouts, wooden and aluminum picture frames, picture glass, and professional picture hanging systems, along with matching accessories such as hangers, wall hooks, and clamping rails.
Art & More places great emphasis on quality, functionality, and individuality to provide every picture with the perfect frame and optimal protection.
Requirements & Objectives of the Passepartout Configurator
- Responsive design
The configurator must function smoothly on all common devices and automatically adapt to different screen sizes. - Update-friendly integration
The configurator should be developed as a plugin to ensure the Shopware system can be updated without any compatibility issues. - Fast loading times
The configurator should display quickly when accessed, minimizing user waiting time. This requires clean and optimized JavaScript code. - Efficient image processing
Uploaded images should be automatically optimized to reduce server load and ensure smooth operation of the configurator. - Seamless shop integration
The configurator must be easily accessible and blend harmoniously into the shop’s top menu so that customers can find and use it intuitively. - Units of measurement in cm and mm
All calculations within the configurator are based on centimeters (cm) and millimeters (mm), ensuring all dimensions are displayed precisely and consistently. - Dynamic shopping cart
In the shopping cart, all prices and surcharges are calculated and displayed in real time, giving the customer a continuous overview of current costs. - VXML generation
After order completion, the passepartout configurator should automatically generate a VXML file following the predefined sample format.
From Idea to Shopware Plugin: Professional Development of the Passepartout Configurator
As an experienced Shopware agency specializing in the development of individual Shopware configurators and custom product configurators, we created a modern, intuitively operated passepartout configurator that offers an optimal user experience on desktops, smartphones, and tablets alike. The Shopware 6 configurator allows customers to design their passepartouts according to their preferences, receive instant real-time price updates, and view a high-resolution, precise preview of their chosen configuration. This not only enhances the conversion rate but also strengthens the overall usability of the Shopware 6 online shop.
The passepartout configurator developed specifically for Art&More integrates fully and seamlessly into the existing Shopware system. By automatically generating all relevant order data in VXML format, it ensures efficient, stable, and error-free data exchange between the online shop, production, and merchandise management. This deep integration guarantees maximum process reliability and significantly reduces administrative effort.
Thanks to well-thought-out user guidance, dynamic price calculation, intelligent validation logic, and optimized, high-performance image processing, the configurator delivers an outstanding user experience. This makes it a genuine competitive advantage in e-commerce. The combination of intuitive usability, high speed, and absolute precision not only supports product personalization but also sustainably increases customer satisfaction and delivers measurable results in the Shopware 6 webshop.
Manual Input of Dimensions
With our passepartout configurator, users can precisely adjust the dimensions of their passepartout according to their individual requirements. The input is made via intuitively designed fields for outer dimensions, cut-out size, and cut-out position, including four positioning options: centered, free, optical center, and golden ratio.
All adjustments are displayed dynamically in real time on the passepartout preview, including visualized border distances that can be hidden if desired. Helpful tips within the configurator guide users through each setting.
The price remains consistent and depends solely on the selected material, meaning that changes in size do not affect the overall cost.
Easily Adjust the Cut-Out via Drag & Drop
Users can adjust the size and position of the cut-out directly by dragging it with the mouse, while the distances to the edges are automatically updated. All changes are dynamically reflected in the corresponding dimension values, ensuring the preview and measurements remain perfectly synchronized at all times.
Select a Custom Backing Board
Users can choose a backing board for their passepartout and then access dependent additional options. All options include an extra charge, which is dynamically updated in the shopping cart.
Individually Design Multiple Cut-Outs
With the multiple cut-outs option, users can create several cut-outs at once and individually position each one, complete with custom dimensions, decorations, and preview images. A convenient table makes managing the individual cut-outs easy, while price calculations are automatically adjusted in real time.
Result of Our Work: Passepartout Configurator as a Shopware Plugin
As a Shopware agency, we developed a fully customized passepartout configurator as a plugin for Shopware 6 that completely meets the requirements of Art & More Bilder und Leisten GmbH. The configurator features an intuitive user interface that works flawlessly on both desktop and mobile devices. Users can configure passepartouts to size, adjust the cut-out’s dimensions and position via drag & drop, create multiple cut-outs simultaneously, and even customize backing boards and decorative options.
All inputs are dynamically displayed in real time within the preview — including border distances, measurements, and automatic price calculations that update according to the selected options. In addition, the integrated VXML file generation enables order data to be transferred efficiently and seamlessly into existing systems.
The result is a powerful, user-friendly tool that not only provides customers with a flexible and convenient shopping experience but also optimizes internal ordering processes and ensures smooth interoperability between the shop and connected systems.
