Oprawiamy – frame configurator
About project
Our collaboration with Oprawiamy focused entirely on developing an advanced frame and mirror configurator. Built in React as a web component and seamlessly integrated with the client’s IdoSell template (Composer), the module transforms a complex ordering process into an intuitive user journey. By prioritizing real-time preview and precise background calculations, we delivered a specialized tool that empowers customers to effortlessly create perfectly fitted, personalized frames—bringing the quality of in-store services into the digital experience.
Important functionalities
Live preview with image upload
The module provides a dynamic, real-time visualization of the configured frame. Users can upload their own photo or artwork, allowing them to instantly assess the final look and significantly increase purchase confidence.
Dynamic calculations based on system data
The configurator is powered by product data from the system. Changing the dimension type automatically triggers background recalculations, precisely adjusting sizes, pricing, and availability of all components—including passe-partout options.
Comprehensive summary
We implemented a detailed summary section that consolidates all selected elements—including the frame, passe-partout, front, and back components. This ensures full transparency just before seamlessly adding the finished, personalized set to the cart.
Scalable React architecture
Built with modern technologies as a web component, the module is highly flexible. Its well-thought-out architecture ensures the solution is ready for easy expansion with additional products based on the same frame configuration logic.
Service type
In the first step, users select the type of service they want to configure. At the current stage of the implementation, two options are available: a custom-sized frame and a framed mirror. In the future, the configurator will be expanded to include additional frame-based products.
Service type
In the first step, users select the type of service they want to configure. At the current stage of the implementation, two options are available: a custom-sized frame and a framed mirror. In the future, the configurator will be expanded to include additional frame-based products.
Dimension type
The next step is defining the dimension type. To ensure maximum convenience, users are provided with 2 to 3 options (depending on the selected service). Each configuration is updated in real time, automatically recalculating the full product summary.
Dimension type
The next step is defining the dimension type. To ensure maximum convenience, users are provided with 2 to 3 options (depending on the selected service). Each configuration is updated in real time, automatically recalculating the full product summary.
Framed artwork
In the configurator, users can upload their own image to preview how it will look within the selected frame—allowing them to see a fully personalized product in real time. The choice of material the artwork is made from also influences subsequent steps, such as the selection of specific products in the frame front configuration stage.
Framed artwork
In the configurator, users can upload their own image to preview how it will look within the selected frame—allowing them to see a fully personalized product in real time. The choice of material the artwork is made from also influences subsequent steps, such as the selection of specific products in the frame front configuration stage.
Passe-partout
The next step is configuring the passe-partout, available in one of three options. The available colors are sourced directly from the store’s configuration.
Passe-partout
The next step is configuring the passe-partout, available in one of three options. The available colors are sourced directly from the store’s configuration.
Glass/backing selection
The next steps involve selecting the glass (front) and the backing (rear) for the configured frame. Both elements are fully configurable, and the availability of each option depends on the existence of a corresponding product in the system. Individual options are displayed based on conditions related to the artwork material and its dimensions.
Glass/backing selection
The next steps involve selecting the glass (front) and the backing (rear) for the configured frame. Both elements are fully configurable, and the availability of each option depends on the existence of a corresponding product in the system. Individual options are displayed based on conditions related to the artwork material and its dimensions.
Summary
The final step is a summary that includes all components that together make up the finished framed product. Users can adjust the quantity of the configured product before adding it to the cart. When the product is added to the cart, a PDF document is automatically generated containing the frame specification, which serves as the basis for manufacturing the final product ready for shipment.
Summary
The final step is a summary that includes all components that together make up the finished framed product. Users can adjust the quantity of the configured product before adding it to the cart. When the product is added to the cart, a PDF document is automatically generated containing the frame specification, which serves as the basis for manufacturing the final product ready for shipment.
Thanks for watching!
www.webjaksklep.eu
- Tryb wyświetlania sekcji z projektami:
- Modyfikuj portfolio:
- Generuj:
- .png