{"id":8989,"date":"2025-05-31T12:13:32","date_gmt":"2025-05-31T10:13:32","guid":{"rendered":"https:\/\/www.webiprog.de\/?p=8989"},"modified":"2025-08-03T18:37:13","modified_gmt":"2025-08-03T16:37:13","slug":"user-experience-at-the-core-how-we-designed-the-passepartout-configurator-for-shopware-6","status":"publish","type":"post","link":"https:\/\/www.webiprog.de\/en\/user-experience-at-the-core-how-we-designed-the-passepartout-configurator-for-shopware-6\/","title":{"rendered":"User Experience at the Core: How We Designed the Passepartout Configurator for Shopware 6"},"content":{"rendered":"

Technical Documentation for the Passepartout Configurator<\/h2>\n

We have successfully developed a Passepartout configurator for Shopware 6<\/a>, offering all the necessary features to ensure an optimal user experience. We focused heavily on usability and seamless integration into the existing shop.<\/p>\n

Learn more about how to create a passepartout configurator<\/a><\/strong><\/p>\n

What we implemented:<\/p>\n

    \n
  1. Responsive Design<\/a>
    \nThe configurator was designed to work perfectly on all devices \u2013 whether a desktop, tablet, or smartphone. Regardless of the device used, the configurator automatically adjusts to the screen size and provides an optimal view.<\/li>\n
  2. Updatable Integration<\/a>
    \nWe programmed the configurator as a plugin, allowing it to be easily integrated into the existing Shopware 6 system. This ensures that future Shopware updates will not cause any issues, and the configurator will always run smoothly.<\/li>\n
  3. Fast Loading Times<\/a>
    \nThe loading speed of the configurator has been optimized to ensure users don’t experience long wait times. We made sure to write clean and efficient JavaScript code to ensure fast loading times.<\/li>\n
  4. Efficient Image Processing
    \nUploaded images are automatically optimized to reduce server load and ensure the configuration runs without delays. This greatly improves the overall user experience.<\/li>\n
  5. Seamless Integration into the Shopware Webshop<\/a>
    \nThe configurator was integrated into the shop system in such a way that it is easily accessible and perfectly embedded in the shop’s top menu. Users can find the configurator without issues and start designing their Passepartouts right away.<\/li>\n
  6. Units in cm and mm
    \nAll measurements in the configurator are displayed in centimeters (cm) and millimeters (mm). The calculations and the representation of the measurements are precise to meet the requirements for custom Passepartout designs.<\/li>\n<\/ol>\n

    With these features, we have developed a Passepartout configurator that is both technically up-to-date and provides a user-friendly and efficient solution for customers.<\/p>\n

    \n\n
    \n\n \n

    Would you like more information?<\/h2>\n \n Contact us now<\/a>\n \n <\/div>\n\n<\/div>\n\n\n

     <\/p>\n

    SCOPE OF FUNCTIONS<\/strong><\/h2>\n

    Below is a comprehensive description of the scope of functions. This configurator now offers numerous additional options such as frames, glass, materials, etc., with a special focus on user-friendliness in the mobile view (for smartphones).<\/p>\n

    \"User<\/p>\n

      \n
    1. \n

      Measurements<\/strong><\/h3>\n<\/li>\n<\/ol>\n

      When the configurator is accessed, the end user is presented with a user-friendly interface that includes precise measurement details. These measurements can be altered by the user either manually by entering values into the corresponding input fields or interactively in the preview area by dragging and adjusting. This allows for flexible and intuitive customization of the configuration according to the user’s individual needs and preferences.<\/p>\n

      1.1. Manual Entry of Measurements<\/strong><\/h4>\n

      A) By entering values, the user is given the option to adjust the dimensions of the Passepartout according to their requirements:<\/p>\n

      \"User<\/p>\n

      B) The following fields are available:<\/p>\n