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
  1. Option Elements
  2. Input Type options

Color Picker

PreviousFile Upload ElementNextSwitch button element

Last updated 2 months ago

The Color Picker element enables customers to select a custom color using an interactive color panel. It's ideal for customizable products where the color of the item or text is important.

🔧 Basic Settings

  • Label / Name: Customize the label to guide users.

  • Required Field: Make the color selection mandatory if needed.

  • Default Value: Set a default color (via hex code) to be pre-selected when the page loads.

💡 Advanced Settings

  • Color Preview Function: This feature allows the selected color from the Color Picker to be linked to elements such as a Text Box, Text Area, Heading, or Paragraph, enabling a real-time preview.

    🎨 Example: When a customer chooses a color and types into a text field, or views static content like a heading or paragraph, the text will dynamically reflect the selected color. This enhances interactivity and lets customers better visualize personalized options.

For other setting of Help text position/ HTML class /Column width, You can set up the same as other elements

📧 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!