With the product configurator developed by Webbhuset, we can shorten the process by giving customers the ability to directly see prices and quantities without needing to contact us first. This streamlines and simplifies the process for our customers, especially new customers wanting to order simpler products, such as a printed box.
With the product configurator developed by Webbhuset, we can shorten the process by giving customers the ability to directly see prices and quantities without needing to contact us first. This streamlines and simplifies the process for our customers, especially new customers wanting to order simpler products, such as a printed box.
Product configurator with 3D visualization for aPak
aPak is a Swedish family-owned company that specializes in innovative and sustainable packaging solutions. With over 100 years of experience in the industry, they offer a wide range of packaging products and customized solutions for various industries. In May 2022, Webbhuset launched aPak's new e‑commerce resulting in a dynamic and scalable solution built with the Magento platform. For aPak, it was important to create a future-proof e‑commerce solution that enables further development of the solution when the need arises.
Shortened and streamlined purchase process
In 2024, the possibility of easily configuring products directly on the website, especially boxes, began to be explored. The project resulted in Webbhuset building a scalable product configurator with 3D visualization, tailored for aPak's range.
“The purpose of the product configurator was to provide our inside salespeople with a tool to quickly derive pricing and preview costs while allowing customers to use the tool for their needs,” says Peter Borgelöv, Marketing Manager at aPak.
In aPak's purchasing process, aPak usually communicates with the customer to see what the needs are. The offer is created by aPak choosing the supplier with the best solution for the customer's requirements, and then aPak gets back with a quote.
“With the product configurator, we can shorten the process by giving customers the ability to directly see prices and quantities without needing to contact us first. This streamlines and simplifies the process for our customers, especially new customers wanting to order simpler products, such as a printed box,” says Peter.
Playful configurator with 3D visualization
With the help of the product configurator, the customer can create a customized box by adjusting dimensions with different controls. The customer can also choose the color of the box, upload their logo, and adjust the size and placement of the logo. General symbols, such as markings for hazardous or fragile goods, can also be added as an optional addition. However, a 3D rendering of the configured box was not included in the project's original goals for the MVP (Minimum Viable Product).
“Initially, we concluded that a 3D rendering in the configurator is a 'nice to have' rather than a necessity. The hope was to create an attractive 3D visualization of the box, and the result turned out really well – it provides a more playful and visually appealing experience for the customer,” explains Peter.
The box is rendered in 3D in the product configurator.
Pricing structure with a focus on sustainability
Depending on the chosen dimensions of the box and any additional options selected, the customer can choose from different order quantities/pricing structures. The prices are entirely dynamic and have been calculated using a mathematical formula that takes the box's volume and the truck's capacity into account. For aPak, quality and efficiency are crucial, but the company also places great emphasis on eco-friendliness and helping its customers reduce their environmental impact. Therefore, from a sustainability perspective, it has been important that these order quantities fill a truck.
By using pricing structures, truck capacity is maximized and half-full trucks are avoided. This aligns with aPak's commitment to sustainability.
Choice of 3D tools
During the feasibility study phase, the technology to be used for 3D visualization was examined, with various solutions, tools, and frameworks available. There are, for example, plug-and-play solutions with licensing fees, but for aPak's configurator, a customized solution built from the ground up with the popular open-source library Three.js was chosen.
“A product configurator can be built at different levels of complexity. A simpler version lets the customer upload an image without preview, while a more advanced version includes a 2D visualization of the product. The most advanced step is to offer a preview with a 3D visualization,” says Peter.
In the tape configurator, you can choose from several different PMS colors.
The product configurator can be configured for both boxes and tape rolls. In the same tool, the customer can upload their logo, adjust size and placement, and customize the product to their needs. The difference between the tape and box configurators is that the tape rolls offer a selection of PMS colors and the tape rolls currently render as 2D images.
Collaboration and further development
“I am very pleased with the outcome of the configurator and think the collaboration has worked very well. The goal was to create a user-friendly configurator that is easy to navigate but also a bit playful and fun to use,” says Peter.
On aPak's e‑commerce site, under the Boxes category, the configurator is now live as Design Your Own Box. In the future, there is the potential to further develop functionality, for example, with new 3D models for tape rolls or printed bags.
Try the box configurator yourself on aPak's website.
Do you want to know more?
Fill in the form and we will contact you shortly.
