Image and Color Dropdown
Last updated
Last updated
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.
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").
Name:
Define a unique name for the field that helps identify it in your store's backend.
Required Field:
Mark the field as required, meaning customers will need to select an option before they can proceed with the purchase.
Hidden Field:
Optionally hide the element from the storefront, but keep it available for other purposes like custom scripts or hidden data tracking.
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.
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.
Search Suggestion:
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.
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.
Color Dropdown:
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.
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 [email protected].
We’re always here and happy to help — with sincerity and care!
Color preview: Similar to the 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.
