Skip to main content

How to customize interface and option positioning?

Interface customization allows you to adjust the position, size, and display style of options to fit your product design and customer experience.

Customizable Elements​

1. Positioning 📍​

Purpose: Place options in appropriate positions on products

Parameters:

  • X Axis: Horizontal position (left to right)
  • Y Axis: Vertical position (top to bottom)
  • Z-Index: Display order (layers)

Setup:

  1. Select Area/Group to customize
  2. Go to "Positioning" section
  3. Adjust X, Y coordinates
  4. Preview to check

2. Sizing 📏​

Purpose: Adjust option area size

Parameters:

  • Width: Width (pixels)
  • Height: Height (pixels)
  • Max Width: Maximum width
  • Max Height: Maximum height

Setup:

  1. Select Area/Group to customize
  2. Go to "Dimensions" section
  3. Enter width and height
  4. Test on different screen sizes

3. Display Styles 🎨​

Purpose: Choose display style that fits design

Available Styles:

  • Style 1 (Default): Default, clear style
  • Style 2 (Black Bar): Black bar with white text
  • Style 3 (With Line): With horizontal line

Setup:

  1. Select Group to customize
  2. Click "Change Style"
  3. Choose appropriate style
  4. Preview immediately

4. Rotation 🔄​

Purpose: Rotate options for creative layouts

Setup:

  1. Select Group to rotate
  2. Go to "Angle" section
  3. Enter rotation angle (degrees)
  4. Preview to check

Customization by Level​

Area Level (Level 1)​

Customize main customization area:

  • Position of customization area on product
  • Size of customization area
  • Color and style of area

Example:

Area: "Personalization"
├── Position: X=250px, Y=100px
├── Size: Width=300px, Height=200px
└── Style: Purple dashed border

Group Level (Level 2)​

Customize option groups:

  • Position of group within area
  • Size of group
  • Group display style
  • Group rotation

Example:

Group: "Text Options"
├── Position: X=0px, Y=0px (within Area)
├── Size: Width=300px, Height=100px
├── Style: Black Bar
└── Angle: 0deg

Option Level (Level 3)​

Customize specific options:

  • Position of option within group
  • Size of option
  • Input field style
  • Color and font

Real Examples​

Example 1: T-shirt Product​

Area "Customization":

  • Position: X=200px, Y=150px (center of shirt)
  • Size: Width=400px, Height=300px
  • Style: Purple dashed border

Group "Personal Details":

  • Position: X=0px, Y=0px (within Area)
  • Size: Width=400px, Height=100px
  • Style: Default

Group "Design Options":

  • Position: X=0px, Y=120px (below Personal Details)
  • Size: Width=400px, Height=100px
  • Style: Black Bar

Group "Size & Style":

  • Position: X=0px, Y=240px (below Design Options)
  • Size: Width=400px, Height=60px
  • Style: With Line

Example 2: Ring Product​

Area "Engraving":

  • Position: X=100px, Y=50px (on ring)
  • Size: Width=200px, Height=150px
  • Style: Purple dashed border

Group "Text Options":

  • Position: X=0px, Y=0px
  • Size: Width=200px, Height=80px
  • Style: Default

Group "Font Options":

  • Position: X=0px, Y=90px
  • Size: Width=200px, Height=60px
  • Style: Black Bar

Example 3: Poster Product​

Area "Design":

  • Position: X=50px, Y=100px (left corner)
  • Size: Width=500px, Height=400px
  • Style: Purple dashed border

Group "Upload Options":

  • Position: X=0px, Y=0px
  • Size: Width=500px, Height=200px
  • Style: Default

Group "Text Overlay":

  • Position: X=0px, Y=220px
  • Size: Width=500px, Height=180px
  • Style: Black Bar

Responsive Design​

Desktop (1200px+)​

  • Large customization area
  • Multiple options displayed simultaneously
  • Complex layout

Tablet (768px - 1199px)​

  • Medium customization area
  • Options displayed in columns
  • Simpler layout

Mobile (< 768px)​

  • Small customization area
  • Options displayed in rows
  • Minimal layout

Design Tips​

✅ Visual Hierarchy Principle​

  • Important options in prominent positions
  • Use size to differentiate
  • Use color to emphasize

✅ User Flow Principle​

  • Options in logical order
  • Easy navigation
  • Don't confuse customers

✅ Consistency Principle​

  • Same style for similar options
  • Same position for same type of options
  • Same size for same level

Advanced Customization​

Custom CSS​

  • Add custom CSS
  • Override default styles
  • Create special effects

JavaScript Integration​

  • Dynamic interactions
  • Custom validation
  • Animation effects

Theme Integration​

  • Integrate with Shopify theme
  • Use theme colors
  • Theme fonts

Special Cases​

Products with Multiple Images:​

  • Customize position for each image
  • Use conditional logic
  • Preview on all images

Products with Video:​

  • Customize position not covering video
  • Use transparent overlay
  • Interact with video player

3D Products:​

  • Customize position on 3D model
  • Use 3D coordinates
  • Preview with 3D model

Testing & Optimization​

Cross-browser Testing​

  • Test on Chrome, Firefox, Safari
  • Check display on different browsers
  • Fix compatibility issues

Device Testing​

  • Test on desktop, tablet, mobile
  • Check responsive design
  • Optimize for each device

User Testing​

  • Test with real users
  • Collect feedback
  • Improve based on feedback

Best Practices​

🏆 Mobile First Principle​

  • Design for mobile first
  • Scale up for desktop
  • Ensure mobile usability

🏆 Accessibility Principle​

  • Appropriate contrast ratio
  • Readable font size
  • Keyboard navigation

🏆 Performance Principle​

  • Optimize size
  • Minimize reflow
  • Use efficient CSS

Common Issues​

❌ Options not displaying in correct position​

  • Check coordinates
  • Check z-index
  • Check parent container

❌ Options being hidden​

  • Check z-index
  • Check overflow
  • Check positioning

❌ Responsive not working​

  • Check media queries
  • Check viewport
  • Test on different devices

Do you need guidance on customizing interface for any specific product type?