Tema
Page Builder
O Page Builder e um editor visual onde voce projeta as paginas da sua loja. Ele funciona como um canvas de arrastar e soltar — voce adiciona blocos de conteudo (chamados de secoes), personaliza a aparencia da barra de navegacao e as cores do tema, e visualiza uma previa ao vivo do resultado antes de publicar.
Toda loja comeca com uma pagina Home. Voce tambem pode criar paginas personalizadas (ex.: Sobre Nos, Contato, Promocoes) que recebem sua propria URL na vitrine.
Gerenciando paginas
Abra Pages na barra lateral do admin para ver todas as paginas da sua loja. A pagina Home e sempre listada primeiro.
| Coluna | Descricao |
|---|---|
| Name | O titulo da pagina exibido no admin |
| Slug | O caminho da URL na sua loja (ex.: /about) |
| Status | Active (visivel na loja) ou Inactive |
| Created At | Data em que a pagina foi criada |
Nesta tela voce pode:
- Criar uma pagina — clique em New Page no canto superior direito. Isso abre o builder com uma pagina em branco.
- Editar uma pagina — clique no nome da pagina ou escolha Edit no menu de acoes. Isso abre o builder com aquela pagina carregada.
- Ativar / Desativar — alterne a visibilidade pelo menu de acoes ou use as caixas de selecao em massa.
- Excluir — remova uma pagina pelo menu de acoes ou em massa.
Importante: A pagina Home nao pode ser excluida ou renomeada nesta tela. Seus metadados sao gerenciados nas configuracoes da loja.
Abrindo o builder
Quando voce clica em New Page ou Edit, o Page Builder abre em layout de tela cheia:
O builder tem tres areas principais:
| Area | Descricao |
|---|---|
| Barra lateral primaria | Uma barra estreita de icones na extrema esquerda com quatro botoes de painel (de cima para baixo): Metadata, Sections, Navbar, Theme |
| Barra lateral secundaria | Os controles do painel ativo — onde voce edita conteudo, configuracoes ou estilos |
| Previa ao vivo | Um iframe mostrando sua pagina exatamente como os clientes a verao. Atualiza em tempo real conforme voce faz alteracoes |
A barra superior contem:
| Controle | Descricao |
|---|---|
| Back | Retorna a lista de paginas (avisa se houver alteracoes nao salvas) |
| Seletor de pagina | Dropdown para alternar entre paginas sem sair do builder |
| Alternador de viewport | Alterne entre previsualizacao Desktop, Tablet e Mobile |
| Discard | Reverte todas as alteracoes nao salvas instantaneamente |
| Save | Abre um dialogo de confirmacao e salva tudo no banco de dados |
Metadados da pagina
Clique no icone de documento (primeiro icone na barra lateral primaria) para abrir o painel de metadados. Para paginas novas, este painel abre automaticamente.
| Campo | Descricao |
|---|---|
| Name | O titulo da pagina (obrigatorio). Ao criar uma nova pagina, alterar o nome gera automaticamente um slug |
| Slug | O caminho da URL para a pagina (obrigatorio). Apenas letras minusculas, numeros e hifens sao permitidos |
| Description | Uma descricao opcional para fins de SEO. Voce tambem pode usar o botao AI Generate se as integracoes de IA estiverem habilitadas |
| Published | Alterne para tornar a pagina visivel na loja |
Dica: A previa do slug abaixo do campo mostra o caminho completo da URL (ex.:
/about-us). Depois que voce edita o slug manualmente, ele para de ser gerado automaticamente a partir do nome.
Para a pagina Home, o painel de metadados exibe um aviso somente leitura — o nome e a descricao da pagina Home sao gerenciados nas configuracoes gerais da loja.
Trabalhando com secoes
Clique no icone de camadas (segundo icone na barra lateral primaria) para abrir o painel de secoes. E aqui que voce adiciona e organiza blocos de conteudo.
Cada secao na lista exibe seu icone de tipo e rotulo. Voce pode:
- Adicionar uma secao — clique em Add Section e escolha no menu dropdown
- Reordenar — arraste secoes para cima ou para baixo usando a alca de arrasto a esquerda
- Expandir / Recolher — clique no nome de uma secao para revelar suas configuracoes
- Alternar visibilidade — use o switch para mostrar ou ocultar uma secao sem exclui-la
- Remover — clique no icone de lixeira (requer confirmacao)
Seis tipos de secao estao disponiveis:
| Tipo | Ideal para |
|---|---|
| Slideshow | Banners hero, promocoes, conteudo em destaque |
| Product List | Exibir produtos especificos |
| Collection | Destacar uma colecao de produtos |
| Image with Text | Storytelling, mensagens da marca, destaques |
| Text | Anuncios, descricoes, politicas |
| Space | Espaco visual entre secoes |
Personalizando a navbar
Clique no icone de painel superior (terceiro icone na barra lateral primaria) para abrir o painel de personalizacao da navbar.
Importante: Alteracoes na navbar se aplicam globalmente a todas as paginas, nao apenas a pagina que voce esta editando no momento.
| Configuracao | Descricao |
|---|---|
| Show Logo | Exibir ou ocultar o logo da loja na barra de navegacao |
| Show Store Name | Exibir ou ocultar o nome da loja ao lado do logo |
| Logo Size | Escolha entre sm, md, lg, xl ou 2xl |
| Text Style | Defina o tamanho da fonte, negrito e italico do nome da loja |
| Position | Alinhe o logo e o nome da loja a esquerda, centro ou direita |
Personalizando o tema
Clique no icone de paleta (quarto icone na barra lateral primaria) para abrir o painel de personalizacao do tema.
Importante: Alteracoes no tema se aplicam globalmente a todas as paginas, nao apenas a pagina que voce esta editando no momento.
Alternadores de modo:
| Configuracao | Descricao |
|---|---|
| Light Mode | Habilitar ou desabilitar o esquema de cores claro |
| Dark Mode | Habilitar ou desabilitar o esquema de cores escuro |
Pelo menos um modo deve permanecer habilitado o tempo todo.
Campos de cor (10 por modo):
| Cor | O que controla |
|---|---|
| Primary Color | Botoes, links e elementos de destaque |
| Secondary Color | Elementos secundarios da interface |
| Tertiary Color | Cor de destaque adicional |
| Background Color | Fundo da pagina |
| Menu Bar Color | Fundo da barra de navegacao |
| Menu Bar Text Color | Texto da barra de navegacao |
| Input Background | Campos de entrada de formularios |
| Text Color | Texto principal do corpo |
| Banner Background | Fundo da barra de banner promocional |
| Banner Text Color | Texto da barra de banner promocional |
Fonte:
| Configuracao | Descricao |
|---|---|
| Font Family | Escolha uma fonte global entre as fontes de sistema e Google Fonts disponiveis |
Salvando e publicando
Quando estiver satisfeito com suas alteracoes, clique em Save no canto superior direito. Um dialogo de confirmacao aparece:
- Se a pagina estiver publicada (ativa), o dialogo confirma que voce esta publicando as alteracoes ao vivo.
- Se a pagina for um rascunho (inativa), o dialogo confirma que voce esta salvando sem tornar a pagina publica.
O processo de salvamento faz upload de todas as imagens em espera, cria a pagina (se for nova) e salva secoes, configuracoes da navbar, configuracoes do tema e metadados da pagina de uma so vez.
Clique em Discard a qualquer momento para reverter todas as alteracoes nao salvas para o ultimo estado salvo.
Como as paginas aparecem na loja
Pagina Home
A pagina Home e a primeira coisa que os visitantes veem. Ela renderiza todas as secoes ativas na ordem que voce definiu no builder.
Paginas personalizadas
Paginas personalizadas sao acessiveis pela URL do seu slug (ex.: sualoja.com/about). Elas renderizam da mesma forma que a pagina Home — cada secao ativa aparece em ordem.
Apenas paginas ativas com o toggle Published habilitado sao visiveis na loja. Paginas inativas retornam um erro 404.
Paginas personalizadas tambem aparecem no menu de navegacao mobile e no rodape da loja, facilitando que os clientes as encontrem.