Advanced Styling

Overview

The Advanced Styling tab provides a Live JSON Editor for direct configuration editing. Changes apply instantly to the Live Preview.

Edit the complete JSON configuration that controls all aspects of your options form directly.

For Advanced Users

This editor is for users comfortable with JSON syntax. For most styling needs, use the visual editors in Templates, Colors, and Borders & Shapes tabs.

What's Included

The Configuration JSON contains all customization settings:

• Colors - All color values
• Fonts - Font family settings
• Spacing - Border widths and option spacing
• Radius - Corner radius values
• Shadows - Shadow effects
• Swatch Size - Color swatch dimensions

When to Use

Use JSON Editor for:

• Copying configuration between stores
• Bulk changes across multiple settings
• Exporting your exact configuration

Use Visual Editors for:

• New to customization
• Incremental adjustments
• Visual color/style previews

JSON Structure

Colors

"colors": {
  "background": "#ffffff",
  "text": "#000000cf",
  "button": "#000000cf",
  "buttonText": "#ffffff",
  "border": "#e0e0e0",
  "inputBackground": "#ffffff",
  "inputText": "#000000",
  "inputPlaceholder": "#64748b",
  "inputBorder": "#e0e0e0",
  "secondaryButtonBackground": "#ffffff",
  "secondaryButtonText": "#000000cf",
  "secondaryButtonBorder": "#000000",
  "variantBorder": "#e0e0e0",
  "shadow": "#000000"
}

Fonts

"fonts": {
  "body": "Inter, -apple-system, BlinkMacSystemFont, sans-serif",
  "heading": "Inter, -apple-system, BlinkMacSystemFont, sans-serif"
}

Spacing

"spacing": {
  "borderWidth": "0px",
  "primaryButtonBorderWidth": "0px",
  "secondaryButtonBorderWidth": "1px",
  "variantButtonBorderWidth": "1px",
  "optionSpacing": "8px"
}

Radius

"radius": {
  "input": "0px",
  "button": "14px",
  "card": "4px",
  "variantPill": "14px",
  "general": "100px"
}

Shadows

"shadows": {
  "button": "none",
  "input": "none"
}

Swatch Size

"swatchSize": "16px"

How to Use

1. Navigate to Customization > Advanced Styling tab
2. Edit JSON directly in the editor
3. Changes apply instantly to Live Preview
4. Click Save to apply or Discard to cancel

Editing tips:

• Use valid hex codes for colors (#ffffff)
• Include units for sizes (8px, 14px)
• Shadow values: "none", "subtle", "medium", or "strong"
• Syntax errors will prevent saving

Common Use Cases

Copy between stores: Select all (Cmd/Ctrl + A), copy, paste in another store, save

Backup configuration: Copy JSON to a text file for safekeeping

Bulk changes: Find and replace values (e.g., change all #000000 to #1a2942)

JSON Syntax

Key rules:

• Use double quotes for strings: "background": "#ffffff"
• Add commas between items (but not after the last one)
• Proper nesting with brackets {}

Troubleshooting

Changes not applying: Check for syntax errors (red underlines), ensure proper quotes/commas, click Save

Syntax errors: Fix missing commas, quotes, or brackets. Use an online JSON validator if needed

Broken styles: Verify hex codes are valid, sizes include units (px), shadow values are correct