> For the complete documentation index, see [llms.txt](https://guide.swiftxr.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://guide.swiftxr.io/how-to/how-to-use-the-product-configurator-feature-on-swiftxr.md).

# How to use the Product Configurator Feature on SwiftXR

Learn how to use the Product Configurator feature on SwiftXR

Imagine being able to change the colour of your 3D Model depending on how you want it to appear. For example, you are an ecommerce store owner selling dresses in different colors, and you want to showcase your dresses in various colours and styles, that’s what the product configurator helps you achieve with ease.&#x20;

And here’s how the SwiftXR Product Configurator helps you do it.&#x20;

#### Step 1: Create a Project&#x20;

First, create a project and get into the SwiftXR editor > select components > 3D > Product Configurator and insert your 3D Model.<br>

<img src="https://564713456-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKNcXDcNRYHUBsVw12Dii%2Fuploads%2FuuwMa9OpLHXJOpr5y9uQ%2Funknown.png?alt=media&amp;token=2ab64960-807a-4aaf-bac8-81305e98a84d" alt="" height="245" width="624">

#### Step 2: Add Section

Go to the Properties tab > Product Configurator. Then click “Add section”<br>

<img src="https://564713456-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKNcXDcNRYHUBsVw12Dii%2Fuploads%2FJTQEygyjOZSW5inr1fYc%2Funknown.png?alt=media&amp;token=86e56762-9dbf-4b3c-9da3-d3571b8e9161" alt="" height="351" width="624">

<img src="https://564713456-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKNcXDcNRYHUBsVw12Dii%2Fuploads%2FVedhwvNBZJha74geL9M3%2Funknown.png?alt=media&amp;token=c999f186-a87f-4fe1-8879-afe4b66c656c" alt="" height="351" width="624">

Next, select one of the parts of the 3D model to work on and begin to work on its appearance.<br>

<img src="https://564713456-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKNcXDcNRYHUBsVw12Dii%2Fuploads%2FMXgQFKRAYLdWhWHczRdZ%2Funknown.png?alt=media&amp;token=aefb5f05-e566-49d1-a79f-2d621ad83646" alt="" height="351" width="624">

#### Step 3: Add appearance option&#x20;

After selecting the part of the model you want to work on, you can then click “add appearance option” to begin to edit.&#x20;

<img src="https://564713456-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKNcXDcNRYHUBsVw12Dii%2Fuploads%2FiLQwNg7EF0RbVOTPGBHI%2Funknown.png?alt=media&amp;token=4c2a191e-7802-4bc6-ad90-7aa1c9f02d73" alt="" height="260" width="624">

<img src="https://564713456-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKNcXDcNRYHUBsVw12Dii%2Fuploads%2FetsZoIyvxIPBkrNAeJTz%2Funknown.png?alt=media&amp;token=17318251-2114-4026-90f2-a96589f13d7e" alt="" height="256" width="624">

You  can also increase or decrease the roughness of the appearance to customize it to your taste.&#x20;

<img src="https://564713456-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKNcXDcNRYHUBsVw12Dii%2Fuploads%2FjIBKP9dyod1DF8GS2ytP%2Funknown.png?alt=media&amp;token=e5db9629-eaf9-4783-9c74-e923854c3708" alt="" height="351" width="624">

If it’s good to go, then you preview and publish.<br>

<img src="https://564713456-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKNcXDcNRYHUBsVw12Dii%2Fuploads%2FPGqzUvmqXgQD0xLdGkMu%2Funknown.png?alt=media&amp;token=5ee980f6-4b93-463e-b1df-e1a1a0289316" alt="" height="327" width="624">

\ <br>
