Settings globais

Arquivo: config/settings.schema.json. O validador exige esse caminho. Não coloque o arquivo na raiz do tema. Define o painel Tema no editor (sidebar). Ao instalar o tema, os defaults viram settingsData da loja.

Estrutura

{
  "groups": [
    {
      "name": "Cores",
      "settings": [
        {
          "id": "color_primary",
          "type": "color",
          "label": "Cor primária",
          "default": "#7c3aed"
        }
      ]
    }
  ],
  "defaults": {
    "color_primary": "#7c3aed"
  }
}

Tipos de campo

type	Uso
`color`	Cor hex
`select`	Lista de opções
`range`	Slider numérico (`min`, `max`, `step`, `unit`)
`text`	String curta
`textarea`	Texto longo
`image`	URL de imagem
`checkbox`	Boolean
`url`	Link
`header`	Separador visual (`content`)

Aplicação no runtime

O ThemeSettingsProvider lê settingsData do servidor e aplica CSS variables no escopo do canvas/preview (.cx-theme-scope / ThemePreviewScope), não no chrome do editor (topbar, sidebars, inspetor). Isso evita que a cor primária da loja pinte botões como Salvar e Publicar. A plataforma isola o tema; o CSS do seu tema também deve isolar — nunca use :root ou document.documentElement para tokens do tema. Guia completo: Escopo CSS — tema vs editor. Variáveis comuns:

Setting id	CSS var
`color_primary`	`--brand-primary`
`color_secondary`	`--accent-primary`
`color_text`	`--text-primary`
`color_background`	`--surface-app`

Usar globals dentro de sections

Para campos como “Cor de fundo = Usar global: Destaque”, veja Settings globais nas sections. Resumo:

Defina color_secondary (ou outro id) em config/settings.schema.json
Na section: "themeLink": "color_secondary" + default "@theme.color_secondary"
No JSX: const bg = useThemeSetting(backgroundColor, '#8758F0')

Onde seguir

Campo de produto — o editor guarda o id; Product é o objeto de get
Lista de coleções — ids de categoria; categories e collections são o mesmo cliente
Esquema de cores
Settings globais nas sections

Introdução

Temas

Seções

Guias

Exemplos

Storefront Components

Schema

CLI

Dados

SDK

Contratos

Marketplace

Settings globais

Settings globais

Estrutura

Tipos de campo

Aplicação no runtime

Usar globals dentro de sections

Onde seguir

​Settings globais

​Estrutura

​Tipos de campo

​Aplicação no runtime

​Usar globals dentro de sections

​Onde seguir

Settings globais

Estrutura

Tipos de campo

Aplicação no runtime

Usar globals dentro de sections

Onde seguir