# Image and Color Dropdown

The **Image Dropdown** and **Color Dropdown** elements allow you to present color and image options in a dropdown format, providing a visual representation of the available choices for your customers. This can improve the user experience by making it easier to select color or image options directly from a dropdown menu.

<figure><img src="/files/3zygETBcggPANniO4VbN" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/eYvQSshrC6Tb2IYFa2ep" alt=""><figcaption></figcaption></figure>

## General for Both elements:&#x20;

1. **Label**:
   * Set a label for the element that will appear next to or above the dropdown, guiding customers on what to select (e.g., "Select your color" or "Choose an image").
2. **Name**:
   * Define a unique name for the field that helps identify it in your store's backend.
3. **Required Field**:
   * Mark the field as required, meaning customers will need to select an option before they can proceed with the purchase.
4. **Hidden Field**:
   * Optionally hide the element from the storefront, but keep it available for other purposes like custom scripts or hidden data tracking.
5. **Allow Multiple Selection**:
   * Enable customers to select more than one option at once from the dropdown (for both Color and Image dropdowns). This is useful for multi-option selections like multiple colors or images.
6. **Conditional Logic**:
   * Set conditions for when this dropdown element should appear based on previous selections. For example, only show color options when a customer selects a specific product variant.
7. **Search Suggestion:**&#x20;

<figure><img src="/files/QMqRstDCJk500DdnCALS" alt=""><figcaption></figcaption></figure>

8. **Not allow deselect:** By default, many color selectors may offer a "None" or "Clear" option. To prevent deselecting, ensure this option is removed or hidden in the dropdown.
9. **Out of stock options:** In the **Image** and **Color Dropdown** elements, you can control how out-of-stock options are displayed to the customer. This feature helps improve the user experience by visually indicating which options are unavailable.

   \
   The out of stock option can be **Show/ Hidden/ Blur/ Strike through.**&#x20;

<figure><img src="/files/TYlr61jASk9aASKPze5O" alt=""><figcaption></figcaption></figure>

## Specific Features for Image and Color Dropdown&#x20;

* **Color Dropdown**:
  * Color preview: Similar to the [**Color Picker**](/options/option-elements/input-type-options/color-picker.md) element, the **Color Dropdown** allows you to display a color preview for each option in the dropdown. When a customer selects a color option, the preview will show them a small color sample to help them visualize their choice.
* **Image Dropdown**:
  * Image display outside dropdown: By showing images outside the dropdown, it’s easier for customers to visualize their options, which could lead to higher conversion rates.

<figure><img src="/files/SPI8r6ypXdNLzNJqOhLl" alt=""><figcaption></figcaption></figure>

Both of these dropdown types help you to enhance the visual appeal of your product selection process, providing customers with an intuitive and interactive way to choose options.

📧 **Need Help?**\
If you run into any issues while setting up your option set, feel free to reach out to us at **Chat** or email **<contact@globosoftware.net>**.

We’re always here and happy to help — with sincerity and care!


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.globo.io/options/selection-option-type/image-and-color-dropdown.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.