User Experience at the Core: How We Designed the Passepartout Configurator for Shopware 6

Technical Documentation for the Passepartout Configurator

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

What we implemented:

1. Responsive Design
   The configurator was designed to work perfectly on all devices – whether a desktop, tablet, or smartphone. Regardless of the device used, the configurator automatically adjusts to the screen size and provides an optimal view.
2. Updatable Integration
   We 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.
3. Fast Loading Times
   The 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.
4. Efficient Image Processing
   Uploaded images are automatically optimized to reduce server load and ensure the configuration runs without delays. This greatly improves the overall user experience.
5. Seamless Integration into the Shopware Webshop
   The 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.
6. Units in cm and mm
   All 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.

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.

SCOPE OF FUNCTIONS

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).

1. Measurements

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.

1.1. Manual Entry of Measurements

A) By entering values, the user is given the option to adjust the dimensions of the Passepartout according to their requirements:

B) The following fields are available:

• Outer dimensions in CM
• Cutout in CM
• Cutout position / margin dimensions in CM
• Cutout position

Note on “Cutout Position”:
This option offers four positions:

• Centered: centers the cutout in the middle
• Free positioning: active when the user freely defines the position of the cutout
• Optical center
• Golden ratio: positions the cutout at 2/3 of the Passepartout area

C) Changes to the values in “Cutout (Beveled) BxH (cm)” or “Outer dimensions BxH (cm)” lead to corresponding adjustments in the dimensions of “Cutout position / margin dimensions (cm)”.

D) Each of these options is equipped with a question mark symbol, which provides the user with helpful tips for each option during navigation.

E) Depending on the entered values, a dynamic adjustment of the Passepartout surface occurs. This allows the user to visualize the distances to the edge and the cutouts in real-time:

F) The distances are illustrated to the user through visual arrows. These arrows can be disabled by clicking the “Hide Markings” button.

G) The base price of the Passepartout depends on the selected material. Therefore, the final price only changes if a different material or option is selected. This means that changes to the measurements do not affect the price.

1.2. Adjusting the Cutout by Dragging

A) The user can change both the position and the size of the cutout by dragging the cutout area with the cursor. This automatically adjusts the distances to the edges:

B) The updated measurements should be dynamically transferred to the fields “Outer dimensions in CM,” “Cutout position / margin dimensions in CM,” and “Cutout position in CM.” The “Cutout position” field will also be updated accordingly.

2. Upload/Remove Image

A) This feature allows the user to upload a custom image to illustrate the Passepartout. The image can also be removed:

B) Since the uploaded image is neither transferred to the shopping cart nor stored on the server, the image will be automatically optimized as a thumbnail upon upload. This optimized image is for illustration purposes only.
C) Any changes or adjustments to the measurements will cause the preview image to adjust and update accordingly.

Admin Area:

• The admin has the option to enable or disable these options.

3. Options

   The Passepartout configurator offers a variety of options, each of which affects the final price. A detailed description of these options is provided below.

3.1. Add Decoration
A) When selecting the “Add Decoration” option, additional finishing options will appear.

B) It is possible to select multiple score cuts and define the color individually for each of these cuts according to the selected cut.

The selected options affect the final price and are visually represented in the Passepartout designer:

C) A warning message will be displayed if the cutout is very close to the edge:

Admin Area:
The administrator has the option to set the surcharge for decorations.
The administrator has the option to enable or disable the “Decorations” option.

3.2. Add Backboard

A) The user is given the option to select a backboard for the Passepartout.

B) After selection, the user is presented with additional options that are dependent on each other.

C) All of these options should be associated with an additional charge. The price in the shopping cart changes dynamically.

Admin Area:
The administrator has the option to set the surcharge for each option individually.
The administrator has the option to enable or disable the “Backboard” option.

3.3. Select Glass

A) The user is given the option to select the glass for the Passepartout.

B) The glass options are associated with an additional charge.

Admin Area:
The administrator has the option to set the surcharge for each option individually.
The administrator has the option to enable or disable the “Glass” option.

3.4. Multiple Cutouts

The multiple cutout option allows the user to create several cutouts at the same time.

A) When this option is selected, the display in the Passepartout area is adjusted to show 12 cutouts. The administrator determines the number of cutouts.

B) For each cutout, individual measurements such as “Outer dimensions in CM,” “Cutout in CM,” “Cutout position / margin dimensions in CM,” and “Cutout position” can be specified.

C) By selecting “Free position” in “Cutout position,” the user is allowed to position each cutout freely as desired. The measurements can also be set individually for each cutout.

D) For each cutout, the decoration can be specified.

E) For each cutout, a custom image can be uploaded as a preview.

F) To make the management of individual cutouts easier, a table with input fields should be displayed. The row in this table becomes active once a specific cutout is selected.

G) Selecting the “Multiple Cutouts” option affects the price.

Admin Area:

The administrator has the option to set the surcharge for multiple cutouts.
The administrator has the option to define the number of cutouts.
The administrator has the option to enable or disable the “Glass” option.

3.5. Material

“Material” is an essential option, as the base price is based on the material selected by the user.

A) The user is provided with the option to filter the desired material by categories.

B) The user is provided with the option to search for the desired material by material name using the search field.

D) The user is provided with the option to find the desired material using filter options.

E) The color of the passepartout is updated according to the selected material option.

F) The price is updated based on the selected material.

Admin Area:
The administrator has the option to set the surcharge for each material.
The administrator has the option to define the filter options.
The administrator has the option to define the categories.
The administrator has the option to enable or disable the “Material” option.

3.6. Frames
Under “Frames,” the user can select the appropriate frame.

A) The user is provided with the option to filter the appropriate frame by categories.

B) The user is provided with the option to find the appropriate frame by searching for the frame name in the search field.

C) Once the frame is selected, it must be displayed in the passepartout area.

D) A separate surcharge applies for each frame.

Admin area:
The administrator has the option to set the surcharge for each frame.
The administrator has the option to define the categories.
The administrator has the option to enable or disable the “Frame” option.

3.7. Shape

The shape option allows the user to customize the corners of the passepartout.

A) Five different shapes are offered:
Rectangle
Round/Oval
Sunken round
Rounded
Gothic window

B) Depending on the selected shape, the corner shape will be adjusted accordingly in the passepartout area:

Admin area:
The administrator has the ability to set the surcharge for each shape.
The administrator has the ability to enable or disable each shape individually.

Note: The administrator has no option to create custom shapes.

4. Shopping Cart

A) The shopping cart is capable of dynamically updating the price.

B) The shopping cart also displays a tiered pricing table and calculates the price based on the specified quantity.

C) The shopping cart also shows a list of the options selected by the user.

5. Checkout / Order Confirmation / Order

When the user adds the item to the cart and proceeds to checkout, all parameters are transmitted in the checkout area, the order confirmation, and when placing the order.

Passepartout Configurator for Shopware: The Perfect Solution for Your Online Platform

At WebiProg, we have successfully developed a Passepartout Configurator for Shopware, allowing your customers to easily and quickly design passepartouts and picture frames online. Whether you need a frame configurator or a picture frame configurator, our solution provides everything you need for custom designing passepartouts or frames.

How the WebiProg Passepartout Configurator Works

Our online passepartout designer is intuitive and user-friendly. Customers can customize the size, color, and shape of the passepartout to their liking and add it directly to the cart. The passepartout generator is perfectly optimized for Shopware 6 and can be seamlessly integrated into your existing shop.

The passepartout planner helps your customers create the perfect design for their pictures by letting them try out different materials and options. With the passepartout editor, they can adjust their design in real-time and immediately see how their passepartout will look in the final product. We provide an efficient and fast solution that makes shopping more enjoyable for your customers.

Benefits of the WebiProg Passepartout Configurator:

• User-friendly: The simple interface allows your customers to use the online passepartout configurator effortlessly.
• Custom Design: Customers can design their passepartout or frame exactly to their preferences.
• Real-time Preview: The passepartout planner shows an immediate preview of the design, so customers can be sure they are choosing the right product.
• Seamless Shopware 6 Integration: Our passepartout configurator is directly integrated into your existing Shopware 6 platform, making installation and usage very straightforward.

Get Your Own Passepartout Configurator

Would you like to benefit from this user-friendly and efficient solution as well? Get your own online passepartout designer and expand your offering with a passepartout generator that allows your customers to design in a completely new way. With our frame configurator and picture frame configurator, you can offer a wider selection and increase customer satisfaction.

WebiProg helps you enrich your Shopware store with a powerful passepartout configurator, giving your customers the opportunity to design their picture frames exactly to their liking—quickly, easily, and conveniently online.

Contact us today to learn more about how you can create the perfect passepartout configurator for your shop.