Globo Docs
Globo Product Options
Globo Product Options
  • Getting Started
  • Option Set configurations
    • 🛠️ How to Set Up Product Options
  • 🧩 Set Up Option Set Using Templates
  • Apply Option Sets to Products
  • Apply Option Sets to Specific Customers
  • Apply Option Sets to Countries
  • How to Delete an Option Set
  • Import & Export Option Sets
  • Option Elements
    • Set up Required filed
    • Hide Element Label
    • Change the Element Name Displayed in Cart and Checkout
    • Input Type options
      • Text and Textarea
      • Number and Phone field
      • Email Field Element
      • Hidden Field Element
      • File Upload Element
      • Color Picker
      • Switch button element
      • Range Slider
  • Selection Option Type
    • Dropdown and Select
    • Image and Color Dropdown
    • Radio Button and Checkbox
    • Button Element
    • Color Swatch and Image Swatch
    • Font Picker Element
    • Redirect Links Elements
  • Static Option Type
    • Heading element
    • Divider & Spacing
    • Pop Up Modal And Paragraph
    • HTML element
    • Size chart element
    • Tab Element
  • Add-on Feature
    • Advanced Add-on Function
    • Manage Add-On Products
  • How to Manage Option Stock via Add-On Products
  • Translate Option Values to Multiple Languages
  • App Setting
    • General Setting
    • Add-on Price Setting
    • Set Option Set Position On Product page
    • List of themes supporting Ajax Cart function
    • 🎨 Change Option Set’s Background Color
Powered by GitBook
On this page
  • General for Both elements:
  • Specific Features for Image and Color Dropdown
  1. Selection Option Type

Image and Color Dropdown

PreviousDropdown and SelectNextRadio Button and Checkbox

Last updated 2 months ago

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.

General for Both elements:

  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:

  1. 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.

  2. 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.

Specific Features for Image and Color Dropdown

  • 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.

Color Picker