Shopware Product Configurator is a modern and user-friendly solution for large and small production sites of all kinds: from metal and furniture production to printing, interior design solutions and much more. Customer orientation, individualization and user-friendliness have been leading the way for decades. Attracting and retaining customers is as much a part of the business as keeping them satisfied and thus coming back to the company to post their experiences and recommend it to others.
The idea of a personalized product has been around for a long time and has been very successful. This approach makes the customer a kind of partner through a clear and convenient process of co-design. This greatly increases the likelihood that the customer will become a repeat customer. In addition, one-off production saves a significant amount of resources and reduces the need to store finished and unfinished products.
Another indirect advantage of this Shopware product configurator is the possibility to get statistics about products semi-automatically. Which model is ordered most often? What is the minimum or average order value? These and many other questions help to create an efficient and in-demand business, while reducing the cost of product promotion or services, which are not of interest to the end customer.
Why is the Product Configurator needed at all? It manages the order specification for each individual order.
What does the Shopware Product Configurator:
- personalizes each order;
- helps you quickly evaluate the order;
- speeds up the transfer of personalized products to production and avoids unnecessary communication. A salesperson clarifies the details and can pass the order directly to production;
- increases order accuracy, minimizes the human factor in the intermediate steps;
- offers a personalized approach and works directly with the potential customer;
Four included economic benefits:
- The ability to cancel orders that cannot be implemented for technical reasons. Even the most experienced manager can make a mistake in the selection of parameters and approve an unrealizable order;
- the Shopware configurator offers all options in one place. The account manager no longer needs to know all the designs and possible variants by heart;
- saves time and nerves. Working out the details with the customer is a long and often stressful phase for both parties. When working with Shopware Product Configurator, the customer can, as long as he wants and when it suits him, design the goods he will eventually receive. He can make changes without causing any harm, creating the “ideal product” for himself without taking up the time of a salesperson;
- when using the Shopware configurator on the website, many people may be present, while in a face-to-face meeting, only 1 consultant may be available for each customer. Thus, the other potential customers may not even get to the sales floor, which is due to a simple lack of staff.
Task specifics
At the request of our client, WebiProg GmbH has developed an product configurator for wall coverings, which offers a wide range of functions and options, as well as a number of modifiable parameters.
One of the main requirements of the client was to adapt the software solution to the existing shop and generate an extremely user-friendly and accurate tool for creating individual orders.
The common requirements were:
- Compatibility with all end devices;
- the Shopware Designer should be implemented as a plugin and not block the ability to update the online shop;
- fastest possible speed in processing requests to reduce user waiting time. This could be ensured only by clean and optimized JavaScript code;
- immediate optimization of the images loaded into the library;
- minimal server load when using the Shopware product configurator;
- seamless integration of the software product into an existing system as a linkable section.
Creating a configurator plugin is an interesting challenge for any programmer, because programming a technical innovation on a website is always special. Specific parameters require a customized solution, because much of the work is done from scratch. At the same time, there is already a working store system and the new solution must not affect its functionality in any way, i.e. it must be as flexible, updatable and adaptable as possible.
Features and functions
Selecting an image or subject
We have tried to make this section as user-friendly as possible. It is possible to get lost in the huge number of appealing and attractive images. The catalog is constantly being added to and if there is no well thought-out organization for the images, there is a risk that, due to a quasi chaos, it will cause a negative reaction in the customer, because he will not immediately find what he needs.
For this purpose, the possibility was created to catalog the designs by themes and categories, which are immediately visible to the user in the corresponding section. From the presentation of the images in the gallery, it is immediately possible to see what format the design is.
Depending on the characteristics of the room for which the decorative wall panels are tuned, you can choose the orientation of the future panels. Vertical panels are most often used in bathrooms or as part of the partition of large rooms.
Horizontal panels are more suitable for kitchens and living rooms. Within the selected orientation in the configurator Shopware we have provided the possibility to use standard dimensions or enter dimensions manually, depending on individual customer requirements.
There is a possibility of using one, two, three or more panels to divide and segment the entire wall surface into equal parts. If necessary, the width of the panels can be adjusted manually, within the defined standard image parameters. All changes can be seen immediately, without the need to constantly save the figures and refresh the page. This is very advantageous.
The customer can also choose not to use the entire image at the beginning of the partitioning process, but, for example, the part of the image that best fits the ideas of his design idea. They do not have to worry and calculate the adaptability of the motif themselves. Cropping the motif is all about keeping the parameters technically possible and correct. When formatting the motif, the cropped area is darkened. In this way, the client sees both the result and the remaining parts of the image to make the most accurate decision.
Management
The kitchen and shower backsplash product configurator was developed to simplify the product ordering process not only for the customer, but also for the processors who put the Shopware personalized product into production. For this purpose, as recommended by the customer, we have developed a simple and fast control panel. In order to work comfortably, all the necessary functions are gathered in one place of an optimized interface:
- Gallery management;
- Choice of the surcharge;
- Choice of the image format;
- Gallery activation and deactivation;
- Work with individual image parameters;
order of motifs and even more; - All options as for the images are also available for the groups “Materials” and “Additional services”;
- Adding the number of panels and the resulting markup;
- Determining the minimum size of the image section;
- Activating/deactivating, adding and deleting elements.
Service
One of the factors that influence the total cost of an order is the possibility to choose the number and positioning of sockets on the panels. Vertical or horizontal positioning and the number of required openings are pre-planned in the configurator to get a professional cut of the fittings and ensure quick installation of the panels, without the need for additional preparations for the installation of sockets.
When the buyer is convinced of his plans, he can use the layout provided in the configurator to make his own calculations and order the openings for the internal terminal boxes. This allows you to save money and get an idea of the final appearance of the product at a glance.
The user can also choose to have all required measurements performed by an expert.
Shopping cart
Once the last changes have been made, the customer will see a simple and clear shopping cart containing the delivery price, the surcharge, the dimensions and quantity of all selected plates, the name of the motif, the material and the additional services (if selected from the menu). After confirmation, the order is forwarded to the clerk for processing.
Challenges and solutions
The development of a software product is not only a creative and technical process. Developers are often confronted with problems that at first glance appear to be impossible to implement.
The holistic approach and high professionalism of our team made it possible to find optimal solutions for each of the following listed problems in the shortest possible time.
Problem solution 1. Image size
For large format prints, the highest possible image resolution is crucial. But such images can have up to 450 MB or even more. Therefore, as a store owner, you need powerful computers for downloading. But even in this case, the download time is too long. This fact excludes a part of users who find it convenient to add images from their cell phones or tablets.
The solution was to allow the editor to create a thumbnail after uploading a high-quality image. The user works with this data in the configurator when composing the layout of his future order. Changes to the “compressed” images are saved, and after the order is confirmed, they are uploaded to the powerful server and matched with and transferred to the identical large image. The final file is individual for each plate, and the clerk can download it and send the order for printing.
Problem solution 2: Sections
It is difficult to get around the problem of empty fields on the format when printing. There are 5mm white margins left on every page, a problem that is difficult to solve even with cropping.
We decided to increase the printing area of the final image by 5 mm on all sides. At the joints where there are several plates, it would also not have been possible to cut out the extra pieces, otherwise the joint would not have been perfect when aligning the plates. Therefore, the image is stretched towards the sides where the overlap is not provided and the joining area is compensated by cutting out a part of the image from the next plate so that the visual integrity of the image is not affected and the edges of the joint are not visible.
Problem solution 3. Selected part of the image.
The user should be able to select not only the whole image in the gallery, but for example only the part of the image that best fits the interior design.
To make this possible, we considered the Croppie and Cropper.js plugins as the most suitable for the task. The choice remained with Cropper.js, as it met the customer requirements in terms of pure Java Script and did not require any dependency connection.
After the final stage of the product configuration, it is important for the client to have a preview of the result, which will be used later in the administration section of the website. For this purpose, the Html2canvas plugin was used. It makes it very easy to capture a specific area of the selected image.
Problem solution 4. The final view without reloading the page.
The final image depends on many parameters and the potential buyer should be able to see the changes made and the result immediately, without having to refresh the page every time after an adjustment. To implement the necessary interactive behavior, we chose the js framework vue as the best of the existing options for this Shopware article configurator.
Result
The final product not only met all of the customer’s requirements, but in some respects exceeded their expectations.
Our team has had a unique and interesting experience and reached a new level of excellence. Such “challenges” help us to constantly explore existing and new opportunities, implement customer ideas, develop and constantly raise our level.
One thought on “Shopware design configurator for wall coverings”
Already got some questions from customers about my new website. Have recommended Alex and his people with a clear conscience.
