Skip to main content

How to organize options using Area → Group → Options structure?

XB Product Options uses a 3-level hierarchical structure to organize options logically and manage them efficiently:

Hierarchical Structure​

Area (Level 1)
├── Group (Level 2)
│   ├── Option (Level 3)
│   ├── Option (Level 3)
│   └── Option (Level 3)
├── Group (Level 2)
│   ├── Option (Level 3)
│   └── Option (Level 3)
└── Group (Level 2)
    └── Option (Level 3)

1. Area (Top Level) 🏢​

Purpose: Group related options into a large area

Examples:

  • Personalization: All personalization options
  • Customization: Product customization options
  • Add-ons: Additional services
  • Design Options: Design-related options

Area Configuration:

  • Name: Clear descriptive name
  • Position: X, Y coordinates on product
  • Size: Width, Height of customization area

2. Group (Middle Level) 📁​

Purpose: Group options of the same type within an Area

Examples within "Personalization" Area:

  • Text Options: Name, message, notes
  • Color Options: Text color, background color
  • Font Options: Font style, size

Group Configuration:

  • Label: Display name for customers
  • Summary: Brief description
  • Style: Display style (Default, Black Bar, With Line)
  • Positioning: Position and size

3. Options (Bottom Level) ⚙️​

Purpose: Specific options that customers will interact with

Examples within "Text Options" Group:

  • Name Input: Enter name
  • Message Input: Enter message
  • Special Instructions: Special notes

Option Configuration:

  • Type: Text, Select, Upload, etc.
  • Required: Whether mandatory
  • Pricing: Additional costs
  • Validation: Validation rules

Real Example: Custom T-shirt Product​

Area: "Customization"​

Purpose: All t-shirt customization options

Group 1: "Personal Details"​

  • Option 1: Name Input (Text)
  • Option 2: Number Input (Text)
  • Option 3: Team Name (Text)

Group 2: "Design Options"​

  • Option 1: Logo Upload (Upload)
  • Option 2: Background Color (Select)
  • Option 3: Text Color (Select)

Group 3: "Size & Style"​

  • Option 1: Size Selection (Select)
  • Option 2: Style Preference (Select)
  • Option 3: Fitting Notes (Text)

Benefits of Hierarchical Structure​

✅ Clear Organization​

  • Easy to find and manage options
  • Logical categorization by function
  • Avoid confusion when configuring

✅ Better Customer Experience​

  • Display options in groups
  • Easy to understand and navigate
  • Reduce cognitive load

✅ Efficient Management​

  • Can hide/show entire groups
  • Easy to duplicate structure
  • Reusable for other products

How to Create Effective Structure​

1. Start with Area​

  • Identify main purpose
  • Choose descriptive name
  • Configure appropriate position

2. Create Logical Groups​

  • Group by function
  • Not too many groups (3-5 groups/area)
  • Choose clear names

3. Add Specific Options​

  • Each option has clear purpose
  • Not too many options/group (5-8 options)
  • Configure Required appropriately

Structure Design Tips​

🎯 "General to Specific" Principle​

Area: Customization
├── Group: Personal Info
│   ├── Name
│   └── Message
├── Group: Design
│   ├── Color
│   └── Style
└── Group: Size
    ├── Size
    └── Fit

🎯 "Customer Journey" Principle​

Area: Order Process
├── Group: 1. Personalization
├── Group: 2. Customization
├── Group: 3. Review
└── Group: 4. Add-ons

🎯 "Importance Level" Principle​

Area: Product Options
├── Group: Required (mandatory)
├── Group: Recommended (suggested)
└── Group: Optional (optional)

Handling Complex Structures​

Multiple Areas for Different Products:​

  • Area 1: "T-Shirt Customization"
  • Area 2: "Mug Personalization"
  • Area 3: "Phone Case Design"

Nested Groups (if needed):​

  • Use sub-groups to organize options
  • Don't exceed 2 levels of groups

Templates for Structure:​

  • Create templates for similar products
  • Reuse designed structures

Do you need detailed guidance on creating structure for any specific product type?