# Dropdown

When you add option sets to a configurator, in standard subscriptions, the platform offers 9 types of option sets. One of them is the "Dropdown" button, everyone knows how a dropdown button works, when you click on the button a scrolling list of options (variants) is displayed and users can select the desired one.

**Add dropdown button**

The way to add an option set is the same for all types, in other words, in the "Create Options" tab you have a drop-down button on the top right of the screen where you can add option sets. Find and select "Dropdown" and click the "**Add block**" blue button to add to your configurator.

<figure><img src="https://272360655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnWstJiDljIGTKDHKp9JL%2Fuploads%2FXPC6UQpHj4wsOWTcjkDN%2FScreenshot%202024-11-18%20at%2010.24.56.png?alt=media&#x26;token=d566e879-a4bb-4fd7-aaae-041aa007e63c" alt=""><figcaption><p>Add a dropdown option set</p></figcaption></figure>

Before being added to your block list, the platform will prompt you to first define your new dropdown button. We need to provide a Title and add Variants to create a 'Dropdown'.

<figure><img src="https://272360655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnWstJiDljIGTKDHKp9JL%2Fuploads%2FYOpPLYPZl4rWi7W1BxDU%2FScreenshot%202024-10-22%20at%2014.35.35.png?alt=media&#x26;token=cf0a9c0f-2308-456e-91c2-e98af879d876" alt=""><figcaption><p>Dropdown edit page</p></figcaption></figure>

When you click the blue "Add Variant" button in the bottom right of the screen, a pop-up window will open where you can create the first variant in the drop-down set of options.

<figure><img src="https://272360655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnWstJiDljIGTKDHKp9JL%2Fuploads%2FDv6bUhL7Lfa0RJRd9mit%2FScreenshot%202024-10-22%20at%2014.43.57.png?alt=media&#x26;token=2ac5021b-b158-4535-bd7c-ff115505372f" alt=""><figcaption><p>Edit Variant Popup Window</p></figcaption></figure>

There are 5 parameters where you can define a variant:&#x20;

* **Title** - name your variant inside the dropdown button
* **Variant Name** - this name will not be visible in the configurator, it will be used only for internal purposes
* **Select 3D Model** - choose one 3d model you want to use in this variant (*for example a 3d bike*)

<figure><img src="https://272360655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnWstJiDljIGTKDHKp9JL%2Fuploads%2FonPHjxHBiJ2F4pRSzJvc%2FScreenshot%202024-10-22%20at%2014.55.37.png?alt=media&#x26;token=f884d5b3-a8c8-440c-9eca-4c8a681a6ff4" alt=""><figcaption><p>Select 3D Model</p></figcaption></figure>

* **Select 3D Parts** - choose the 3d parts you want to be affected by this variant (*for example frame part of a bike*)

<figure><img src="https://272360655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnWstJiDljIGTKDHKp9JL%2Fuploads%2FJNJDm7uyfS1x47KvbDJI%2FScreenshot%202024-10-22%20at%2014.57.29.png?alt=media&#x26;token=70e7e954-9628-46f4-9bd0-572e8882f886" alt=""><figcaption><p>Select 3D Part</p></figcaption></figure>

* **Select Material** - choose a material that the configurator will apply once the variant is selected (*for example yellow color for frame*)

<figure><img src="https://272360655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnWstJiDljIGTKDHKp9JL%2Fuploads%2FoCe0qCfF7ES8YU48uECa%2FScreenshot%202024-10-22%20at%2015.00.18.png?alt=media&#x26;token=a0248619-4bb5-4ff4-9f1e-4378ddefb200" alt=""><figcaption><p>Select Material</p></figcaption></figure>

{% hint style="info" %}
**Please note that not all parameters are mandatory, for example depending on the variant type you can skip the Material or not. In the example above we are creating a color variant, so we need a material (color) for this dropdown.**
{% endhint %}

Once you click '**Save**' the first variant will be visible inside the Dropdown option set:

<figure><img src="https://272360655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnWstJiDljIGTKDHKp9JL%2Fuploads%2FOypRHZIwIKW95izEX0WS%2FScreenshot%202024-10-22%20at%2015.38.52.png?alt=media&#x26;token=212f66e4-2752-4fe4-8d6d-4802bbb10d89" alt=""><figcaption><p>Dropdown variant</p></figcaption></figure>

Repeat the process and add as many variants as you need (*for example add another variant named ‘Red’*). After clicking the '**Save**' button it will create the dropdown button.&#x20;

<figure><img src="https://272360655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnWstJiDljIGTKDHKp9JL%2Fuploads%2FImPAtA0aHw4Rh7t9npBf%2FScreenshot%202024-11-18%20at%2010.24.01.png?alt=media&#x26;token=4bc3ba3f-07de-4072-87b3-2a10b9d7b4e1" alt=""><figcaption><p>Dropdown block</p></figcaption></figure>

Once the new drop-down option set is added, it will be found last in the block list as shown in the above image. You can drag and drop anywhere in the list and reflect in your configurator. The dropdown button can be found anywhere along the option bar including outside a section. Now click the ‘**Preview**’ button and see how it looks on your configurator.

<figure><img src="https://272360655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnWstJiDljIGTKDHKp9JL%2Fuploads%2FKg3x8bEak4Wuh3YcZx27%2FScreenshot%202024-10-22%20at%2015.46.25.png?alt=media&#x26;token=8c56c995-93fc-4866-80c0-fe0f60856de3" alt=""><figcaption><p>Dropdown in Preview mode</p></figcaption></figure>
