Keystone Documentation

Appearance

Types Settings ​

Types settings let you build one or more named style presets — templates — for a specific option type, then choose which template each option on your storefront uses.

Overview ​

Every option always renders with your Global styles, unless it's assigned a per-type template that overrides some of those values. Four option types currently support their own templates:

Each of these types can have any number of templates. For example, you could create a "Swatch Color" template for color swatches and a separate "Swatch Image" template for image swatches, then assign each swatch option to the one that fits.

Global styles (the default) ​

Every type starts with an implicit Global styles template. It isn't something you create — it just means "no override, render with the Global config as-is." It's always the first card in the template gallery and can't be renamed, edited, or deleted.

How to Manage Templates ​

  1. Open the Style Settings modal (see Customization Overview for how)
  2. Click Types in the left rail
  3. Click Accordion, Swatches, Tabs, or File Upload
  4. The template gallery opens, showing a live mini-preview of each existing template plus the Global styles card

Step 2: Create a Template ​

  1. Click New Template
  2. Enter a name (e.g. "Rounded Swatches") and confirm
  3. A new template is created as a snapshot of your current Global styles — nothing looks different yet
  4. The type's editor opens automatically so you can start changing settings

Templates are self-contained

Once created, a template keeps its own settings even if you later change your Global colors or borders. This keeps a finished template from shifting unexpectedly — if you want the template to pick up a Global change, edit that field in the template directly.

Step 3: Edit the Template ​

Use the group navigation on the left of the type editor to jump between sections (e.g. for Tabs: Tab Bar Style, Container, Typography, Tab States, and so on — see the type-specific pages for the full list). Every change updates the Live Preview immediately.

Control what the preview shows

Click Manage preview above the Live Preview to swap the sample data for your own test values or a real option — see Sandbox & Live Preview.

Step 4: Assign the Template to an Option ​

  1. Open an Option Set and edit an option of that type
  2. Expand Style settings
  3. Pick a template card (or Global styles) — each card shows a live mini-preview
  4. Click Save in the option set's save bar

Managing Existing Templates ​

From the template gallery, each card has:

ActionWhat it does
DuplicateCreates a copy with a new name — useful for making a variant of an existing look
RenameChanges the display name only; the template's internal ID (used for CSS scoping) never changes
DeletePermanently removes the template

Deleting a template

Deleting a template doesn't touch the options that use it — they silently fall back to Global styles. The option's Style settings panel shows a banner so you can reassign it to a different template.

Next Steps ​