Skip to main content

Editor Overview

The XB Product Options Editor is a powerful visual interface that allows you to create and manage product customization options for your Shopify store. The editor provides a hierarchical structure to organize your options and a live preview to see how they will appear to customers.

Interface Overview​

The editor is divided into two main sections:

Left Sidebar - Settings Editing Area​

The left sidebar contains the hierarchical structure for organizing your product options:

  • Add Area: Create new top-level option groups
  • Hierarchical Structure: Three levels from large to small:
    • Area → Group → Options
  • Navigation Icons: Menu and settings icons for easy access

Right Main Area - Preview and Configuration​

The right area shows:

  • Product Preview: Live preview of your product with customization areas
  • Product Information: Product title and price
  • Option Configuration: Detailed settings for selected options
  • Product Assignment: Choose which products will have these options

Creating Your First Option​

  1. Add an Area: Click "Add Area" to create a new top-level group
  2. Add a Group: Within the area, add groups to organize related options
  3. Add Options: Within groups, add specific option types (text, select, upload, etc.)
  4. Configure Settings: Set up the specific parameters for each option
  5. Assign Products: Choose which products will have these options
  6. Preview: Use the live preview to see how options appear to customers

Option Types​

The editor supports various option types: