Designer bag configurator

Create a perfect 3D presentation for your designers bags and fashion accessories.
Open the interactive demo

What is a designer bag configurator?

A designer's bag configurator is a versatile digital tool that serves both internal processes and sales purposes. It lets designers, manufacturers, and sales teams to tailor and visualize the bag according to required materials or fastenings. Internally, it simplifies the design and production processes, promoting collaboration, prototype generation, and decision-making among team members. Externally, it acts as a robust sales tool, enabling buyers to customize and visualize their ideal designer bag before purchasing it. By offering a smooth and interactive experience, the configurator boosts efficiency, shortens production times, and heightens customer engagement and satisfaction.

Concept development

The goal of this designer bag configurator is to showcase the product variations and detailed information that is visually complimentary to the product display. That means there was an emphasis on using creative graphic executions for the Floating UI and the way it functions.

Floating UI needs to:

  • Trigger the visibility of the main floating UIs, including product descriptions, material switcher, and augmented reality.
  • Allow selection from four different materials on pins.

How to make a bag configurator

Setting up the model

The designer bag was modeled in 3D Studio Max and imported into Vectary Studio, where it was broken into multiple pieces, textured, and baked. The still life environment was modeled from scratch in Studio.

Lighting setup

Lighting is crucial in this project due to shadow casting. One main rectangular light illuminates the designer bag, while a directional light casts shadows from a plant at a specific angle on the backdrop. This setup is dynamic.

Materials & baking

The scene elements creating the still life environment feature a pastel color palette, allowing the main object to stand out. All objects were baked to enhance realism. The designer bag is available in four different color variants, each a copy of one material with modified color, helping to keep the file size small. Various leather textures can be found in the Studio Material library among other material categories.

Tip: Keep the backdrop size small and use it in combination with fading to use a smaller resolution for baked textures.

Floating UI

A small floating UI triggers the visibility of three other floating UIs. They share similar settings, with the position set to the right and height set to fill, achieving a layout similar to e-commerce sites. The description FUI consists only of text elements aligned in different containers. The FUI with images, which act as triggers for the material switcher, is divided into containers by a 2x2 grid. The FUI with Augmented Reality includes a QR code with text that triggers AR.


By default, only the FUI with the menu, watermark, and logo are visible, while the others are hidden. Clicking different buttons in the menu toggles the visibility of the selected FUIs.

Here is what is used:

  • Setting a trigger as a click on the button labeled "description" will toggle the visibility of the hidden Floating UI with a description.
  • To close the menu, the trigger is set on clicking the X icon in the corner, that hides the floating menu with the description and shows the FUI menu again.
  • To unhide the FUI with the image gallery, set the click on the image as the trigger to change the bag's materials with the Material interaction.
  • Set up that clicking the button in the menu will unhide a different FUI, and the camera will switch to a secondary camera using the Cameras interaction.
  • This lets the bag stay visible at all times. When the trigger is set to close the FUI it should also be changed to primary camera.

Learn more about Vectary configurators

The benefits of having a bag configurator

Streamlined processes

The configurator enhances design workflows within the organization, promoting collaboration between designers, manufacturers, and other involved parties. Teams get an exact visual reference during the prototype development or when sourcing materials, colors, and clasps. By streamlining the process, it reduces lead times and errors, ensuring the final product meets quality standards and customer expectations.

Customer engagement

The configurator enhances customer engagement and satisfaction. It lets shoppers personalize and visualize their bag. They can select from various options such as bag style, material, color, hardware, and embellishments, that reflect their individual style and preferences. The real-time visualization of their custom design helps buyers make confident purchase decisions and fosters a stronger connection with the brand.

Improved brand perception

When using the configurator in a retail setting, brands are also bringing in the added value innovation, technology advancement and future trends. In addition, 3D configurators and AR, when designed correctly can only enhance the premium quality perception associated with the brand. The added value of customization and AR view creates an extended product experience and memorable brand perception.

Discover Vectary Business solutions for fashion brands

Get a quick guided product tour. Your questions - answered.
Book a demo