Skip to main content

​
Preview Contract

Preview é a visualização do tema com o rascunho (draft) ou valores padrão antes ou durante a edição.

​
Onde o lojista vê o preview

​
Ao editar um setting

Quando o lojista altera um campo no inspector:
Implemente sections como funções React que leem settings — não guarde cache manual que pode ficar desatualizado.

​
Props no preview

No canvas e na aba Preview fiel, a section recebe as mesmas props documentadas em Section Contract:
  • settings
  • data (quando declarado)
  • isEditing / onSettingsChange (quando edição inline está ativa)

​
Salvar e pré-visualizar

O canvas lê o estado aberto no editor. A ação Pré-visualizar chama o salvamento silencioso da página antes de abrir a aba. Se esse salvamento falha, a aba não abre. Se a página salva e os estilos do tema não, a aba abre com o aviso de que os estilos podem estar desatualizados. Uma URL de rascunho aberta por fora desse botão lê o que já está no servidor. Alteração só no canvas, sem salvar e sem clicar em Pré-visualizar, não entra nessa URL. Este comportamento foi lido em TopBar.jsx (handlePreview). Não foi clicado no editor.

​
Depois de mudar o código do tema

O preview ao vivo não substitui rebuild após mudança no código fonte.

​
Edição inline (opcional)

Se o tema usa @corvex/runtime (InlineText, SectionChrome):
  • O lojista pode editar texto direto no canvas quando isEditing === true
  • O campo precisa existir em schema.settings (text, textarea, richtext)
Sem isso, a edição ocorre só no inspector.

​
Blocks no preview

Sections com blocks.json permitem adicionar e reordenar blocks no Editor. Na aba Preview fiel, os blocks renderizam conforme a instância salva (blocks + block_order).

​
O que evitar

  • Depender de postMessage entre iframe e tema — não é contrato público.
  • Aplicar classes ou CSS --editor no storefront publicado ou na aba Preview fiel.
  • Assumir que o preview é idêntico à loja publicada — rascunho ≠ publicado.

​
Veja também