Global Fields

Overview

Global Fields provide a centralised way to define reusable field configurations at the theme level, ensuring consistency across all sections and components while reducing maintenance overhead.

Reasons for

1. Standardised Select Lists

• Animation presets: Define available animation types once, use everywhere

• Color schemes: Centrally managed color palette options

• Spacing options: Consistent padding/margin presets

• Icon sets: Curated icon libraries

2. Consistency

• Ensures all sections use the same options

• Single source of truth for design system values

• Reduces human error in option entry

3. Maintenance

• Update options in one place, reflected everywhere

• Add/remove options without editing individual sections

• Rename or change options globally

Alongside global snippets, this makes it trivial to update these globals

Theme Settings Structure

New Tab: "Global Fields"

Located in theme settings alongside existing tabs (Styling, Head, Scripts, etc.)

List View

Display all defined global fields with:

• Field name

• Actions (Edit, Copy, Reorder, Delete)

Field Creation/Editing

Mirror the section editor builder experience:

Field Properties:

• Field ID (slug): Unique identifier (e.g. animation_preset, spacing_size)

• Field Label: Human-readable name (e.g. "Animation Preset", "Spacing Size")

• Field Type:

  • Select

  • Multi-select

  • Radio buttons

  • Checkbox group

  • Future: Number ranges

• Helper: Optional help text explaining the field's purpose

• Default Value: Optional default selection

Options Configuration (for choice-based fields):

• Option Value: Value of option (e.g., fade_in, slide_up)

• Option Label: Display text (e.g., "Fade In", "Slide Up")

Consuming Global Fields

When building a section, users need a way to add global fields alongside regular fields. We'll add a second button in the section editor called "Add from Globals" that sits next to the existing "Add Field" button.

Clicking this button opens a modal or popover showing all available global fields defined in the theme settings. Each field displays its name, type, number of options if available, and helper so users can pick the right one.

Once a global field is added to a section, it needs to be visually distinct from regular fields. We'll use a light green (?) background color, a light green border, and a globe icon to make it immediately obvious that this field is managed elsewhere.

The key difference is that users can't edit global fields directly in the section editor, they can only view and reference them. If they need to change the options or settings, they'll click a "View Definition" link that takes them to Theme Settings (in a modal?) where the global field is actually defined. In the section editor, they can only reorder the field or remove it from that section.

This keeps global fields as a true single source of truth,  all editing happens in one place (Theme Settings), while sections simply reference and use them.