- Em Conteúdo (CMS) você gerencia as páginas, os blocos estáticos e as configurações visuais do frontend da sua loja virtual.
- O Page Builder permite montar o layout das páginas de forma visual, arrastando elementos como textos, imagens, vídeos, abas e carrosséis de produtos.
- Os blocos estáticos permitem criar um conteúdo uma única vez e reutilizá-lo em várias páginas — editou o bloco, atualiza em todos os lugares onde ele aparece.
- Disponível na plataforma Magento 2.
Passo a Passo por Escrito
1. Acesse as configurações visuais do frontend
No painel administrativo, acesse Conteúdo → Design → Configuração. Aqui ficam as configurações visuais da loja, organizadas por escopo (nível).
Os escopos funcionam em camadas, do mais amplo ao mais específico:
- Global — vale para toda a instalação.
- Website — principal nível de configuração; vale para um site inteiro.
- Visão de loja (store view) — nível mais específico; vale para uma visão de loja individual.
No nível de visão de loja você encontra configurações como Favicon, Título da Página (o texto que aparece na aba do navegador), Prefixo e Sufixo do título, Meta Description e Meta Keywords.
O Prefixo e o Sufixo são adicionados automaticamente em todos os títulos das abas. Por exemplo, um prefixo Brasil 99 faz com que todos os títulos comecem por esse texto.
Resultado esperado: A tela de configuração de Design será exibida, com as seções organizadas por escopo e os campos disponíveis para edição.
2. Inclusão de scripts e CSS em todas as páginas (global)
Ainda em Conteúdo → Design → Configuração, edite o escopo desejado. Nas seções de Cabeçalho e Rodapé você consegue incluir scripts, estilos (CSS) e tags que serão carregados em todas as páginas da loja.
No Cabeçalho você também gerencia a logo da loja. No Rodapé é possível inserir scripts e tags que serão carregados dentro do body da página.
Use esta opção quando o script ou estilo precisa valer para a loja inteira.
Tudo que for incluído aqui é carregado em todas as páginas. Para conteúdo que só deve aparecer em uma página específica, prefira incluir diretamente na página (passo 3) ou via widget de bloco (passo 8), evitando conflitos e carregamento desnecessário.
Resultado esperado: Os scripts e estilos informados passam a ser carregados em todas as páginas da loja após salvar e limpar o cache.
3. Crie ou edite uma página
Acesse Conteúdo → Páginas. Para editar uma página existente, clique nela na listagem. Para criar uma nova, clique em Adicionar Nova Página.
Na área de conteúdo da página você terá o Page Builder, onde monta o layout visualmente.
Resultado esperado: A página abre com a área do Page Builder pronta para edição.
4. Monte o layout com o Page Builder
Dentro do Page Builder, o conteúdo é organizado em linhas (rows). Adicione uma linha e, dentro dela, defina como o conteúdo será exibido.
Ao selecionar uma linha ou elemento, você consegue ajustar a parametrização: alinhamento (esquerda, centro), margens e espaçamentos (padding). Esses ajustes ficam disponíveis na própria edição do elemento.
Os elementos disponíveis incluem, entre outros: HTML Code, Texto, Títulos (H1, H2, H3), Botão, Imagem, Vídeo, Colunas, Abas (Tabs), Divisória e Carrossel de Produtos.
A Divisória é útil para separar visualmente dois blocos de conteúdo dentro da mesma página.
Resultado esperado: A linha é adicionada e os elementos escolhidos aparecem montados na pré-visualização da página.
5. Inclua um HTML Code
Para inserir HTML personalizado, adicione o elemento HTML Code à linha. Clique na engrenagem do elemento para abrir as opções e inserir o código HTML desejado.
O conteúdo do HTML Code é carregado junto com a página, respeitando os estilos (CSS) definidos.
Dentro do conteúdo você pode usar variáveis disponíveis na plataforma — por exemplo, o nome da loja configurado — para que o texto seja preenchido automaticamente.
Resultado esperado: O HTML personalizado é exibido na posição em que o elemento foi inserido na página.
6. Adicione um carrossel de produtos
Adicione o elemento Carrossel de Produtos à linha. Em seguida, defina de onde os produtos virão e como serão exibidos:
- Escolha o estilo de exibição: grade (grid) ou carrossel.
- Defina quais produtos aparecerão — por categoria, por código (SKU) de produto, ou por uma condição (por exemplo, todos os produtos de uma determinada cor).
- Ajuste o estilo, alinhamento e margens conforme desejar.
Resultado esperado: O carrossel é exibido na página com os produtos que atendem aos critérios definidos.
7. Adicione um vídeo
Adicione o elemento Vídeo à linha e informe a URL pública do vídeo (por exemplo, do YouTube).
Como alternativa, você pode embedar o vídeo usando o elemento HTML Code (passo 5), colando o código de incorporação fornecido pela plataforma de vídeo. É uma forma simples e direta de inserir o vídeo na página.
Resultado esperado: O vídeo é exibido na posição escolhida e pode ser reproduzido na página publicada.
8. Carregue scripts e CSS apenas em locais específicos (via widget de bloco)
Quando um script ou CSS deve valer somente para a categoria, a página de produto ou o carrinho — e não para a loja inteira — não inclua no Design global (passo 2). Em vez disso, crie um bloco estático com o conteúdo e chame-o via widget apenas nesses locais.
- Acesse Conteúdo → Blocos e crie um bloco estático contendo o script ou o CSS (use o elemento HTML Code dentro do bloco).
- Acesse Conteúdo → Widgets e crie um novo widget que exibe esse bloco.
- Na configuração do widget, em Layout Updates, selecione o local onde o bloco deve aparecer — por exemplo, páginas de categoria, páginas de produto ou carrinho.
Dessa forma, o script é carregado apenas nos locais escolhidos.
Scripts carregados globalmente em todas as páginas aumentam o tempo de carregamento e elevam o risco de conflito com outros recursos da loja. Carregar via widget apenas onde é necessário minimiza problemas futuros e reduz o carregamento de scripts desnecessários.
Resultado esperado: O script ou CSS passa a ser carregado somente nas páginas selecionadas no widget, sem afetar os demais locais da loja.
9. Use blocos estáticos para conteúdo reutilizável
Acesse Conteúdo → Blocos para gerenciar blocos estáticos. Um bloco estático é ideal quando o mesmo conteúdo aparece em mais de uma página.
A vantagem: você chama o mesmo bloco em todas as páginas que precisar. Quando for necessário editar, basta alterar o bloco uma única vez, e a mudança reflete em todos os lugares onde ele é exibido.
Se o conteúdo aparece em uma única página, você pode montá-lo diretamente nela (passo 4). O bloco estático compensa quando há reuso em várias páginas.
Resultado esperado: O bloco estático fica disponível para ser chamado em páginas ou via widget, e qualquer edição nele se reflete em todos os locais onde é usado.
10. Salve e reaproveite a estrutura como template
Depois de montar uma estrutura no Page Builder, você pode salvá-la como template para reutilizar em outras páginas.
Ao criar uma nova página, use a opção Aplicar Template (Apply Template): a estrutura salva aparecerá listada e, ao aplicá-la, a página carrega o layout pronto.
Resultado esperado: A estrutura salva aparece na lista de templates e pode ser aplicada a novas páginas com a montagem já pronta.
Validação e Testes
Após concluir a configuração, execute os testes abaixo para confirmar o funcionamento correto.
Teste 1 — Página publicada exibe o conteúdo montado
Ação: salve a página, limpe o cache da loja e acesse a URL da página no frontend.
Resultado esperado: A página é exibida com todos os elementos montados no Page Builder (textos, imagens, carrossel, etc.), na ordem e no estilo definidos.
Teste 2 — Bloco estático reflete edições em todas as páginas
Ação: edite o conteúdo de um bloco estático que está sendo chamado em mais de uma página. Salve e limpe o cache.
Resultado esperado: A alteração aparece em todas as páginas onde o bloco é exibido, sem necessidade de editar página por página.
Teste 3 — Script via widget carrega apenas no local correto
Ação: configure o widget para exibir o bloco apenas nas páginas de produto. Acesse uma página de produto e, em seguida, a home e uma página de categoria.
Resultado esperado: O script é carregado somente nas páginas de produto. Na home e na categoria, ele não é carregado.
Se não funcionar, verifique:
- Se o cache da loja foi limpo após salvar as alterações.
- Se o widget está apontando para o bloco correto e para o local (Layout Update) desejado.
- Se a página ou o bloco estão com o status Ativado.
- Se o conteúdo HTML inserido não contém erros de sintaxe que possam quebrar a renderização.
Pronto! Dessa forma realizamos a configuração de Conteúdo (CMS) e Page Builder em sua loja virtual Magento 2.
Observações Importantes
- Escopos de configuração: as configurações visuais respeitam a hierarquia Global → Website → Visão de loja. Uma configuração feita em um nível mais específico (visão de loja) prevalece sobre o nível mais amplo (global).
- Global vs. específico: scripts e CSS incluídos no Design global carregam em todas as páginas. Para conteúdo restrito a um tipo de página (categoria, produto, carrinho), prefira o widget de bloco — isso reduz carregamento desnecessário e o risco de conflitos.
- Reuso de blocos: o bloco estático é a melhor opção quando o mesmo conteúdo aparece em várias páginas; a edição é centralizada em um único lugar.
- Templates do Page Builder: uma estrutura salva como template fica disponível para qualquer página nova, agilizando a montagem de layouts padronizados.
- Limpeza de cache: alterações em páginas, blocos, widgets e configurações de Design normalmente só aparecem no frontend após a limpeza do cache da loja.
Referências e Relacionados
- Configuração de cache da loja: após qualquer alteração em páginas, blocos ou widgets, é necessário limpar o cache para que as mudanças apareçam no frontend. [https://ajuda.mageshop.com.br/docs/configuracoes/cache-e-indices/como-atualizar-o-cache-do-magento]
Caso tenha ficado alguma dúvida entre em contato com nosso time de suporte através do chat online dentro da sua loja virtual ou através do e-mail web@tryideas.com.br