Skip to main content

Area Settings

Areas are the top-level organizational units in the XB Product Options Editor. They help you group related customization options together and define the positioning and dimensions of the customization area on your products.

Area Configuration Interface​

  • Back Arrow: Return to the main editor interface
  • Area Name: Shows "Untitled Area" (editable in the Name field below)

Basic Settings​

Name​

  • Purpose: Set the display name for this area
  • Default Value: "Untitled Area"
  • Usage: Choose a descriptive name that represents the group of options
  • Examples: "Personalization", "Customization", "Add-ons", "Design Options"

Positioning Settings​

Measure​

The Measure section defines where the customization area will be positioned on the product:

X Axis​
  • Purpose: Horizontal position of the customization area
  • Unit: Pixels (px)
  • Default Value: 250px
  • Usage:
    • 0px = Left edge of the product
    • Higher values = Move right
    • Use product preview to fine-tune positioning
Y Axis​
  • Purpose: Vertical position of the customization area
  • Unit: Pixels (px)
  • Default Value: 0px
  • Usage:
    • 0px = Top edge of the product
    • Higher values = Move down
    • Adjust based on product design and layout

Size Settings​

Dimensions​

The Dimensions section defines the size of the customization area:

Width​
  • Purpose: Horizontal size of the customization area
  • Unit: Pixels (px)
  • Default Value: 300px
  • Usage:
    • Determines how wide the customization area will be
    • Consider product size and design requirements
    • Ensure adequate space for customer customizations
Height​
  • Purpose: Vertical size of the customization area
  • Unit: Pixels (px)
  • Default Value: 300px
  • Usage:
    • Determines how tall the customization area will be
    • Should accommodate the type of customizations planned
    • Consider text length, image sizes, and design elements

Working with Multiple Areas​

Creating Multiple Areas​

  • Different Purposes: Create separate areas for different customization types
  • Product Sections: Use areas for different parts of the same product
  • Customer Segments: Create areas for different customer groups

Area Organization​

  • Logical Grouping: Group related customization options
  • Clear Separation: Ensure areas don't overlap or conflict
  • Priority Order: Set appropriate display order

Area Management​

  • Renaming: Click on area names to edit them
  • Deleting: Remove unused areas to reduce complexity
  • Duplicating: Copy areas for similar products