Keystone Documentation

Appearance

Customization Overview ​

The Customization editor is where you control how every option widget looks on your storefront — colors, borders, shadows, and rich per-type styling for Accordion, Checkbox, Radio, Swatches, Tabs, and File Upload.

Opening the Customization Editor ​

Customization lives in a single Style Settings modal (not a separate full page). You can open it two ways:

From Settings:

  1. Open Settings in the app navigation
  2. On the Customization card, click Customize
  3. The Style Settings modal opens

From an option you're editing:

  1. Open an Option Set and edit an option that supports styling (Accordion, Checkbox, Radio, Tabs, a Swatch type, or File Upload)
  2. Expand Style settings
  3. Click Style settings (if the type has no templates yet) or Edit styling (if templates already exist) — the modal opens, scoped to that option's type

How Customization Is Organized ​

The modal's left rail has two groups: Global and Types.

Global ​

Global settings are the foundation — every option on your storefront uses these values unless something more specific overrides them.

ItemWhat it controls
TemplatesReady-made design presets that replace your entire global config in one click
ColorsBackground, text, border, button, and input colors
Borders & ShapesBorder thickness, corner radius, swatch size, and shadow effects
Advanced StylingRaw JSON editing for the global config — not currently available in the app (see note on that page)

Types ​

Types settings let you build one or more named style presets — templates — for a specific option type, then assign each option to one of them (or leave it on Global styles to just inherit the foundation as-is).

Six option types currently support their own templates:

Read Types Settings first for how templates work before diving into a specific type.

How Global and Types Work Together ​

Every type-level setting that you haven't explicitly changed automatically falls back to the matching Global value — nothing ever renders unstyled. This means you can:

  • Style everything at once from Global (Colors, Borders & Shapes) — this covers every option on your storefront, including Accordion, Checkbox, Radio, Swatches, Tabs, and File Upload.
  • Then, only for the types where you want a different look, create a template under Types and tweak just what's different. Anything you don't touch in that template keeps following Global.

An option's template is captured as a snapshot at the moment you create it — later changes to your Global colors or borders won't bleed into an existing template. If you want a template to reflect a later Global change, update it directly.

Saving ​

Both Global and Types edits share the same contextual save bar at the bottom of the modal:

  • Save — applies your changes to the storefront immediately
  • Discard — reverts all unsaved changes

Next Steps ​