# Adding Droppable Areas and Drop Zones to a Scene

For an interactive preview, click through below

{% embed url="<https://app.tango.us/app/workflow/Create-Droppable-Area-and-Drop-Zone-7373d6cdb7a44899ad4ec2f3a343f5b3>" %}

Otherwise, follow along here:

## [Create Droppable Area and Drop Zone](https://app.tango.us/app/workflow/7373d6cd-b7a4-4899-ad4e-c2f3a343f5b3?utm_source=magicCopy\&utm_medium=magicCopy\&utm_campaign=workflow%20export%20links)

For advanced 2D usage, such as configuration or creating a planogram, we need to have an element that can handle adding sub-objects or components into it. Enter the Droppable Area. The Droppable Area typically represents an assembly that would have suboptions that need to be selected, but it can also represent a shelf for retail, or warehouse storage racks for inventory management.&#x20;

#### 1. Start on a screen with the 2D Admin Component

#### 2. Click on Droppable Area Templates

![Click on Droppable Area Templates](https://images.tango.us/public/screenshot_8f4cbd44-2da1-4050-a5c6-82c16909d08e.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.1377\&fp-y=0.5807\&fp-z=1.8959\&w=1200\&ar=3416%3A1958)

#### 3. Click on Add Droppable Area Template

![Click on Add Droppable Area Template](https://images.tango.us/public/screenshot_70352652-fc5d-4960-a569-bbe99c15c2c6.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.1376\&fp-y=0.7033\&fp-z=2.3481\&w=1200\&ar=3416%3A1958)

#### 4. Add a name to the Droppable Area

![Add a name to the Droppable Area](https://images.tango.us/public/screenshot_b6bff617-4c25-46e8-abaf-9ed0d7e28698.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.1765\&fp-y=0.2564\&fp-z=2.1339\&w=1200\&ar=3416%3A1958)

#### 5. Look over other options provided for the Droppable area

![Look over other options provided for the Droppable area](https://images.tango.us/public/screenshot_3f35c405-a14e-4b70-b5b1-4df3688c15cd.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.5000\&fp-y=0.5000\&fp-z=1.0000\&w=1200\&ar=3416%3A1958)

#### 6. Paste the URL to your image

![Paste the URL to your image](https://images.tango.us/public/screenshot_b9852bf0-7d25-42ec-991f-02c5110c0921.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.2679\&fp-y=0.3493\&fp-z=1.5354\&w=1200\&ar=3416%3A1958)

#### 7. If needed, Click on Drop Zones

![If needed, Click on Drop Zones](https://images.tango.us/public/screenshot_a92cb53e-f77e-48b4-bd3d-e2eb23669e08.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.2228\&fp-y=0.5863\&fp-z=1.6971\&w=1200\&ar=3416%3A1958)

#### 8. Click on Add new Drop Zone

![Click on Add new Drop Zone](https://images.tango.us/public/screenshot_79d297c7-2ce1-467d-821b-4aa819d33aa0.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.4054\&fp-y=0.5802\&fp-z=2.5630\&w=1200\&ar=3416%3A1958)

#### 9. Drag highlighted element

![Drag highlighted element](https://images.tango.us/public/screenshot_544ace5d-b03c-4c1c-8b50-9b6ee1d3e895.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.8782\&fp-y=1.5322\&fp-z=1.0000\&w=1200\&ar=3416%3A1958)

#### 10. Review all options for the added Drop Zone once Added

![Review all options for the added Drop Zone once Added](https://images.tango.us/public/screenshot_51ff7a5e-9f83-48b9-8575-4dce608ff21e.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.8782\&fp-y=1.5322\&fp-z=1.0000\&w=1200\&ar=3416%3A1958)

#### 11. Adjust the look and feel of the Drop Zone by changing the color or opacity

![Adjust the look and feel of the Drop Zone by changing the color or opacity](https://images.tango.us/public/screenshot_a8151c7b-5d8c-4bfb-ba5a-06b2ff47b12b.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.3645\&fp-y=0.4752\&fp-z=2.5515\&w=1200\&ar=3416%3A1958)

#### 12. If Required, Toggle Require a dropped item in this zone to "Active"

![If Required, Toggle Require a dropped item in this zone to "Active"](https://images.tango.us/public/screenshot_56c334ea-b257-4b47-954f-5d89e16d07e0.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.3182\&fp-y=0.4949\&fp-z=3.3220\&w=1200\&ar=3416%3A1958)

#### 13. You can Search and associate this Drop Zone to a Record in Salesforce!

Let's link this with a CPQ Product Feature

![You can Search and associate this Drop Zone to a Record in Salesforce!](https://images.tango.us/public/screenshot_6141c2d3-0ed8-4d70-a09a-9cd9cf894495.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.3776\&fp-y=0.4683\&fp-z=2.3908\&w=1200\&ar=3416%3A1958)

#### 14. Make the selection of the Record Type

![Make the selection of the Record Type](https://images.tango.us/public/screenshot_dc4c7023-a623-4694-b3bf-816521ff168c.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.3870\&fp-y=0.5051\&fp-z=2.6021\&w=1200\&ar=3416%3A1958)

#### 15. Search for the record you want to link this to by it's name

![Search for the record you want to link this to by it's name](https://images.tango.us/public/screenshot_a2e02b9b-a37f-47bc-aff0-3b8390d7bfd1.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.3776\&fp-y=0.4683\&fp-z=2.3908\&w=1200\&ar=3416%3A1958)

#### 16. Scroll and Click on the option that you are looking for

![Scroll and Click on the option that you are looking for](https://images.tango.us/public/screenshot_46be04a5-6bfe-43e6-8ac0-f740ef396683.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.3753\&fp-y=0.6164\&fp-z=2.3975\&w=1200\&ar=3416%3A1958)

#### 17. Click on Update Droppable Area to update that Droppable Area to your Scene Settings

![Click on Update Droppable Area to update that Droppable Area to your Scene Settings](https://images.tango.us/public/screenshot_16586d1a-30e6-44fb-8a3e-254f27d31af3.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.8609\&fp-y=0.8585\&fp-z=4.0000\&w=1200\&ar=3416%3A1958)

#### 18. Click on Save to Save the Scene Settings

![Click on Save to Save the Scene Settings](https://images.tango.us/public/screenshot_2dbb974e-c494-4552-a0f4-b7c6f4f478ad.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.2283\&fp-y=0.9106\&fp-z=2.9684\&w=1200\&ar=3416%3A1958)

***