Conceitos

O que é loja, tema, página, template, seção, bloco e schema na Corvex.

Esta página explica a Corvex para quem ainda não desenvolveu um tema. Os nomes técnicos ficam iguais aos contratos. O passo a passo de instalação está no Quickstart.

Temas usam React (JSX) com schema.json e o Theme SDK.

Loja e tema

A loja é o site do lojista: produtos, coleções, carrinho e páginas. O tema é o pacote de código que define a aparência e o que o lojista pode editar.

O desenvolvedor entrega o tema. O lojista monta o conteúdo no editor visual. A plataforma renderiza o preview e a loja publicada.

---

Página, template, seção e bloco

Imagine a página inicial. Ela pode ter um banner, uma vitrine de produtos e uma área de perguntas. Cada uma dessas áreas é uma seção. Dentro do banner, um título, um texto e um botão podem ser blocos, se a seção declarar que aceita esses blocos.

Nome	O que é	Onde fica no tema
Página	Uma tela da loja, com as seções que o lojista deixou	Persistida pela plataforma (rascunho e publicação)
Template	O ponto de partida de um tipo de página	templates/index.json, product.json, collection.json, cart.json, search.json
Seção	Uma região da página, com interface e campos editáveis	sections/{id}/section.jsx + schema.json
Bloco	Um item repetível dentro de uma seção	blocks/{id}/block.jsx + schema.json
Snippet	Um componente React reutilizado por várias seções	snippets/{id}/snippet.jsx, importado como @corvex/snippets/{id}

O template JSON não é a página ao vivo. Ele define o conteúdo padrão na instalação. Depois disso, o que o lojista muda no editor fica salvo na loja. Veja Defaults do tema.

---

Schema

O schema.json descreve o painel do editor: nome do campo, tipo e valor inicial. O JSX lê esses valores em settings, nunca como props soltas na raiz.

export default function HeroSection({ settings }) {
  return (
    <section>
      <h1>{settings.title}</h1>
      <p>{settings.description}</p>
    </section>
  );
}

O campo title só aparece no editor se existir um setting com o mesmo id no schema. Tipos estáveis e regras: Schema.

---

Como a informação chega na página

Há três origens. Não misture as três.

1. Código do tema — JSX, CSS e schemas. Muda quando você roda corvex build e envia o tema.
2. Defaults do tema — JSON de templates e grupos (cabeçalho e rodapé). Vira o conteúdo inicial da loja.
3. Conteúdo do lojista — ordem das seções, textos, imagens e blocos salvos no editor.

Dados da loja (produto da página, lista de produtos, carrinho) vêm do Theme SDK (@corvex/theme-sdk), por exemplo usePage e useCorvexCart. No tema, use esses hooks. Não chame APIs administrativas nem rotas HTTP da plataforma. Contrato: Dados da vitrine · SDK.

---

Editor e publicação

O editor mostra o tema e o painel gerado pelos schemas. O lojista altera textos, imagens, ordem de seções e blocos. Publicar no editor coloca esse conteúdo na loja que o visitante vê.

corvex publish envia o código do tema para o catálogo. Não substitui a publicação de conteúdo do lojista. A diferença está em Publicação.

---

Próximo passo

Quickstart

Criar, validar e abrir o primeiro tema

Estrutura de pastas

O que cada arquivo faz

Theme SDK

Hooks e dados no JSX

Contrato da seção

O que é obrigatório no código