Skip to main content

Editor Interface

The XB Product Options Editor provides an intuitive interface for creating and managing product customization options. Understanding the interface layout will help you work more efficiently.

Main Layout​

Left Sidebar - Settings Editing Area​

The left sidebar is your control center for organizing and managing options:

Top Section​

  • Add Area: Button to create new top-level option groups
  • Navigation Icons:
    • Menu icon (three horizontal lines) for navigation
    • Settings icon (gear) for configuration

Hierarchical Structure​

The editor uses a three-level hierarchy:

  1. Area (Top Level)

    • Large organizational groups
    • Example: "Personalization", "Customization", "Add-ons"

  2. Group (Middle Level)

    • Sub-groups within areas
    • Example: "Text Options", "Image Options", "Color Options"

  3. Options (Bottom Level)

    • Individual option types
    • Example: "Name Input", "Color Picker", "File Upload"

Action Icons​

  • Plus Icon (+) on each area/group for adding new elements
  • Expand/Collapse Arrows to show/hide nested items

Right Main Area - Preview and Configuration​

The right area provides live preview and detailed configuration:

Top Bar​

  • Screen Info: "1400px, 88%" (resolution/zoom level)
  • Product Assignment: "Assign products" link and "Choose products" button

Product Preview Section​

  • Product Image: Large preview of the actual product
  • Customization Area: Dashed purple rectangle showing where customizations will appear
  • Product Information:
    • Product title (e.g., "White T-Shirt For Men")
    • Product price (e.g., "$999.99")

Configuration Section​

  • Group Settings: Configure the selected group
  • Option Settings: Detailed configuration for individual options
  • Live Preview: See changes in real-time

Working with the Hierarchy​

Creating Areas​

  1. Click "Add Area" in the left sidebar
  2. Give your area a descriptive name
  3. Areas help organize related groups of options

Creating Groups​

  1. Click the plus (+) icon next to an area
  2. Name your group appropriately
  3. Groups contain related options

Adding Options​

  1. Click the plus (+) icon next to a group
  2. Select the option type you want to add
  3. Configure the option settings

Product Assignment​

Assignment Options​

When you click "Choose products", you can select:

  • All: Apply options to all products
  • Specific products: Choose individual products
  • Specific collections: Apply to entire collections
  • Specific tags: Apply to products with certain tags

Assignment Benefits​

  • Targeted Customization: Only show relevant options
  • Better User Experience: Avoid overwhelming customers
  • Easier Management: Organize options by product type