Keystone Documentation

Appearance

Advanced Styling ​

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

Not currently available

The Advanced Styling / JSON editor is not currently exposed in the Style Settings modal — it's built but hidden while the feature is being finished. This page documents it for when it's re-enabled; check with your app admin if you don't see an Advanced item under the Global group.

Overview ​

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

For Advanced Users

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

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 ​

json
"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 ​

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

Spacing ​

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

Radius ​

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

Shadows ​

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

Swatch Size ​

json
"swatchSize": "16px"

How to Use ​

  1. Open Settings in the app navigation, then click Customize on the Customization card
  2. In the Style Settings modal, click Advanced under the Global group in the left rail
  3. Edit JSON directly in the editor
  4. Changes apply instantly to Live Preview
  5. 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 ​

Valid JSON Required

Invalid JSON will prevent saving.

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