Arquitetura do tema

Resumo

O Flex Brand Editor segue a arquitetura section-based da Nuvemshop (referência: tema Ipanema):

• JSON templates (theme/templates/pages/*.json) definem a composição de cada página
• Sections (theme/sections/*.tpl) renderizam unidades full-width com {% schema %}
• Blocks (theme/blocks/*.tpl) são componentes dentro de sections
• Snippets (theme/snippets/*.tpl) são partials sem schema (carrinho, frete, variantes…)
• Layout (theme/layouts/layout.tpl) envolve tudo com header/footer via {% layout_template %}

Documentação técnica completa no repositório: docs/ai/architecture.md.

Fluxo de render

theme/templates/pages/<page>.json
  → theme/sections/<type>.tpl
    → theme/blocks/<type>.tpl
      → theme/snippets/...
theme/layouts/layout.tpl (header + main + footer)

Onde customizar

| Objetivo | Onde | |---|---| | Nova section reutilizável | theme/sections/ + preset em JSON template | | Novo bloco genérico | theme/blocks/ com "tags": ["general"] | | Lógica de carrinho/variantes | theme/snippets/ + theme/static/js/store.js | | Cores/tipografia globais | theme/config/settings_schema.json + theme/layouts/resources/style-tokens.tpl |

Contratos — não quebrar

• data-store em nós canônicos (produto, carrinho, conta)
• {{ block | block_attributes }} em todo block
• {{ component('nubesdk-slot', { type: ... }) }} nos anchors documentados

Ver lista completa em docs/ai/architecture.md § Contratos invariantes.