Keystone Shopify Apps

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, Slider, Swatches, Tabs, File Upload, Date Range, and Time Picker.

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, Slider, Tabs, a Swatch type, File Upload, Date Range, or Time Picker)
  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

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).

Nine 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, Slider, 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 ​