---
title: How to build a product configurator in Unreal Engine for VR, desktop and mobile
product: Advanced Framework Pro
version: 2.0
engine: Unreal Engine 5.8
updated: 2026-11-01
canonical: https://docs.human-codeable.com/workflows/build-product-configurator.html
---

# How to build a product configurator in Unreal Engine for VR, desktop and mobile

Advanced Framework Pro gives a product configurator its whole interaction and UI layer: pointing and touching parts, switching variants, labels and info panels, and a menu with settings, running as one project on a headset, a PC and a phone. You build the product and its options; the framework supplies the player, the input and the interface. This page says which modules do what, so you can judge the fit before you start.

## At a glance

```
Product actor
├─ part meshes × n, each with BPC_Interaction_Select        → On Select switches a state
├─ BPC_State_Name "Trim", BPC_State_Color "Paint", BPC_State_Boolean "Roof"
├─ BPC_Visibility on optional parts                          show / hide with transition
└─ BPC_Label_Simple per named part
Option panel: WBP_Base widget bound to the states, opened with FL_PawnUI › Pawn UI Add Element
              at DA_PawnUIPosition_Near
Specs:        AFS_UI_InfoPanels library, or a world-space page on an AFM_Panel plate
Level:        PDA_Level with the three pawns.   Shared session: BPC_Replication_Actor on the product
```

## The shape of a configurator

A configurator is a product in the middle, a set of options around it, and a way to point at both. In the framework that is:

| Need | Plugin | What you use |
|---|---|---|
| Point at or touch a part on any platform | `AFS_UX_Select` | `BPC_Interaction_Select` on each part, one **On Select** event |
| Hover feedback | `AFS_Core_Highlight` | **Highlight Class** on the interaction, three styles |
| Variants as data: colour, material, trim level | `AFM_State` | `BPC_State_Name`, `BPC_State_Color`, `BPC_State_Boolean` on the product; UI binds to them generically |
| Show and hide optional parts with a transition | `AFM_Visibility` | the visibility component with fade and sound |
| Name the parts | `AFS_UI_Labels` | `BPC_Label_Simple` per part, arrow or leader line |
| Specs and prices next to the product | `AFS_UI_InfoPanels`, `AFM_Panel` | info panels on the HUD; 3D backing plates for world-space pages |
| The option panel itself | `AFS_UI`, `AFS_UI_Pawn` | your page from the design system, placed in front of the player with pawn UI |
| Walk around a large product | `AFS_UX_Teleporter`, `AFS_UX_Locomotion` | teleport areas and comfort options |
| Hands-free kiosks and accessibility | `AFS_UX_Gaze` | dwell selection, no controller needed |
| Several showrooms or products | `AFS_Core_Loading` | one `PDA_Level` per scene, a lobby that switches between them |
| Trade-show screen | `AFM_Spectator` | a smooth follow or fixed camera for the big display |
| Sales call with a customer in VR | `AFM_Replication` | replicated interactions and UI, the host presents |

## How it fits together

1. Build the product as an actor. Each selectable part gets a `BPC_Interaction_Select`; each option that has a value gets a state component. Bind a part's **On Select** to switch the state it owns.
2. Build the option panel from the UI design system. Its widgets bind to the state components through the shared listener contract, so the panel never references the product class directly and works for any product that carries the same states.
3. Place the panel with pawn UI at the near distance, and put the product's specs on an info panel or a 3D panel beside it.
4. Describe the scene in a `PDA_Level` with the three pawns, and test it on desktop, in VR and on the mobile preview. Nothing in steps 1 to 3 is platform-specific.
5. For a shared session, add `BPC_Replication_Actor` to the product and let the host drive.

## What the framework does not do

It has no variant or pricing database, no turntable or exploded-view logic and no order flow. Those are the project's own work, or the planned Configurator & Showcase Extension.

## Where to look

`Map_Examples_Select`, `Map_Examples_States` and `Map_Examples_Visibility` show the three mechanisms above on their own; the showroom lobby shows the level flow.