Criar pelo editor

Use esta jornada quando o componente será criado ou alterado pela interface do Template Maker.

1. Abra a criação

No cabeçalho do Template Maker, clique em Criar novo componente. O modal de criação abre com os campos necessários para cadastrar o componente.

2. Escolha o tipo

Escolha o local em que o componente será usado antes de criar seus arquivos. O tipo não pode ser alterado depois que o componente existir.

Para componentes independentes, prefira home_sections, pages_components, product_components ou tag_components. Leia Tipos de seção. Para partes compartilhadas da loja, consulte o guia específico: header, footer, product block, botões ou ícones.

3. Preencha os detalhes

Campo	Uso
Nome interno	Identificador em snake_case. Não pode mudar após a criação.
Título	Nome mostrado no catálogo para o lojista.
Descrição	Texto de ajuda para identificar o componente.
Thumb	URL de miniatura opcional.
Subtipo	Agrupamento opcional no catálogo.
Ativo	Define se o componente pode ser escolhido novamente.

O nome interno é o identificador técnico permanente do componente - é ele que a API, o Build Kit e as configurações publicadas da loja usam para referenciá-lo. Uma vez criado, não pode mudar: alterar quebraria referências já ativas. Escolha um nome descritivo e estável antes de criar. Use apenas letras minúsculas, números e _. Exemplos válidos: banner_home, faq_produto. Não use espaços, hífens, maiúsculas ou extensões de arquivo.

4. Defina o schema

Para os tipos que têm schema, comece pelo schema mínimo e declare os campos editáveis dentro de settings, content, settings_mobile ou content_mobile.

{
  "title": "Meu componente",
  "description": "",
  "component_config": {
    "settings": {},
    "content": {}
  }
}

buttons e icons não têm aba de schema. Ao usar API ou Build Kit, envie para eles o schema técnico mínimo indicado em Schema. Veja também listas, imagens, mobile, valores iniciais e conteúdo externo no mesmo guia.

5. Escreva os arquivos

Ative Liquid, SCSS e JavaScript apenas quando o tipo permitir e o componente precisar deles. Cada tipo de arquivo ativo precisa de um arquivo principal; auxiliares são opcionais e são chamados pelo principal.

Leia Arquivos e subarquivos e o guia do tipo escolhido. Alguns tipos têm nomes e arquivos obrigatórios adicionais.

6. Salve, selecione e publique

1. Salve o componente no editor.
2. Abra a área compatível com o tipo e selecione o componente pelo título.
3. Preencha conteúdo, configurações e personalizações mobile quando existirem.
4. Confira a prévia em desktop e mobile.
5. Publique a loja.

Salvar persiste o componente no catálogo da loja - ele fica disponível para escolha - mas não o insere em nenhuma página. A página é montada separadamente, pela seleção de componentes em cada área. Por isso salvar e publicar são etapas distintas: um componente pode existir no catálogo sem estar em uso, e pode estar em uso sem ter sido republicado ainda.

Atenção ao salvar um componente com auxiliares

Ao salvar pelo editor, a lista de arquivos do componente é substituída integralmente pela versão atual. Se você criou um arquivo auxiliar pela API ou pelo Build Kit e abriu o componente no editor sem esse auxiliar visível, salvar o remove.

Antes de editar pelo editor um componente que tem auxiliares criados por outra jornada, confirme que todos os arquivos estão presentes e com o conteúdo correto no editor. A mesma regra vale para quaisquer arquivos que devem continuar existindo. Um componente inativo pode continuar sendo editado, mas não pode ser uma nova escolha até ser reativado. Se ele já estiver usado, reative-o ou remova todas as referências antes de publicar.

Se o componente não salvar ou não aparecer como esperado, consulte Troubleshooting.