# 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="https://3294420404-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyKpeSoGW2SR7i4BJqoeq%2Fuploads%2F1eHgCdI9nB7l2UKHMbZp%2Fimage.png?alt=media&#x26;token=56cc81f3-0ea3-4a37-bb3a-795795b6229b" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3294420404-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyKpeSoGW2SR7i4BJqoeq%2Fuploads%2F7cmRmFcJw4MRNwoXQvNA%2Fimage.png?alt=media&#x26;token=f661c7a9-a899-4495-beef-3c4a02daf611" 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="https://3294420404-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyKpeSoGW2SR7i4BJqoeq%2Fuploads%2FwwB5H286zzy5Fm7HhuRk%2Fimage.png?alt=media&#x26;token=46ccb548-2f53-4f5c-aed0-4dffb2972ae5" 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="https://3294420404-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyKpeSoGW2SR7i4BJqoeq%2Fuploads%2FiIb69ESr9t8B5mOWuaf0%2Fimage.png?alt=media&#x26;token=cddfa183-a2ab-4b8b-8fff-69239e7a8570" alt=""><figcaption></figcaption></figure>

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

* **Color Dropdown**:
  * Color preview: Similar to the [**Color Picker**](https://docs.globo.io/options/option-elements/input-type-options/color-picker) 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="https://3294420404-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyKpeSoGW2SR7i4BJqoeq%2Fuploads%2FgC2ubf5tCYgbN7k4tjFr%2Fimage.png?alt=media&#x26;token=071dcf74-8470-4a22-b894-8fe492c14615" 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!