> For the complete documentation index, see [llms.txt](https://docs.globo.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.globo.io/options/selection-option-type/image-and-color-dropdown.md).

# 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/Z7iullf6CU1JPwgnELNZ" alt=""><figcaption></figcaption></figure>

<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@globo.io**](mailto:contact@globo.io)**.**

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