- O MageHome monta a página inicial da sua loja por seções: banner principal, banners secundários, vitrines de produtos, abas de produtos, blocos de texto, barra de newsletter e outras.
- Você adiciona, ordena e configura cada seção numa tela só, e vê como a página fica numa pré-visualização ao lado, antes de qualquer cliente ver.
- Nada muda na loja enquanto você monta. O cliente só vê o resultado quando você clica em Publicar.
- Na mesma tela você também ajusta as cores da loja.
- Disponível para lojas Magento 1 com o tema starter2.
Passo a Passo por Escrito
1. Acesse o MageHome
No painel, acesse Páginas → MageHome.
A tela tem duas partes:
- À esquerda, a lista de seções da sua página inicial, de cima para baixo, na mesma ordem em que aparecem na loja. No topo da lista há duas abas: Seções e Cores.
- À direita, a Pré-visualização da Home, que mostra como a página vai ficar.
No alto da tela, você escolhe entre Tela dividida (lista e pré-visualização lado a lado) e Lista inteira (todas as colunas da lista, com a pré-visualização embaixo).
Se aparecer a mensagem "O MageHome está DESATIVADO", tudo bem: você pode montar e conferir a página à vontade. O cliente continua vendo a página inicial de sempre até o MageHome ser ativado (passo 11).
Se o painel voltar para a tela inicial com a mensagem "O MageHome só funciona com o tema starter2", a sua loja usa outro tema. Fale com o suporte.
Resultado esperado: você vê a lista de seções e, ao lado, a pré-visualização da sua página inicial.
2. Entenda a lista de seções
Cada linha da lista é uma seção da página inicial.
| Coluna | O que mostra |
|---|---|
| ☰ (alça) | Segure e arraste para mudar a seção de lugar |
| Ativa | ✔ verde = a seção aparece na loja. ✘ vermelho = escondida. Clique para trocar |
| Seção | O nome da seção. Embaixo, entre aspas, o título que o cliente vê |
| Tipo | O tipo da seção (banner, carrossel etc.) |
| Conteúdo | Um resumo: qual grupo de banners, qual categoria, quais abas |
| Período | Quando a seção aparece. Em vermelho = está ativa, mas fora do período hoje |
| Ações | Editar e Duplicar |
Ao lado do nome, alguns selos mostram o que ainda não foi para a loja:
- não publicada: seção nova, que o cliente ainda não vê;
- alterada: você mudou algo, e a loja ainda mostra a versão anterior;
- movida: você mudou só o lugar da seção.
Algumas colunas ficam escondidas na Tela dividida, para caber a pré-visualização. Para ver todas, escolha Lista inteira.
Resultado esperado: você reconhece cada seção da sua página inicial na lista.
3. Adicione uma seção
- Clique em Adicionar Seção.
- Escolha o tipo de seção:
| Tipo | Para que serve |
|---|---|
| Banner Principal (slideshow) | Banners grandes, de largura total, que passam sozinhos. Normalmente é a primeira seção da página |
| Banners Secundários | Uma faixa com vários banners lado a lado |
| Mosaico de Banners | Duas colunas de banners, com uma ou mais imagens em cada |
| Banner de Rodapé | Faixa no fim da página, para selos e formas de pagamento. Pode empilhar as imagens ou passar uma por vez |
| Carrossel de Produtos | Produtos de uma categoria, passando para o lado |
| Abas de Produtos | Várias categorias em abas (ex.: Mais vendidos, Ofertas), cada uma com o seu carrossel |
| Grid de Produtos | Produtos de uma categoria em grade fixa, sem passar para o lado |
| Bloco Estático (CMS) | Qualquer bloco de Páginas → Blocos Estáticos: textos, tabelas, imagens |
| Barra de Newsletter | Faixa para o cliente se cadastrar e receber novidades |
| Template Personalizado | Avançado. Para trazer à página um recurso de outro módulo. Use com o suporte |
- Preencha os campos gerais:
| Campo | O que fazer |
|---|---|
| Nome da seção | Um nome para você achar a seção na lista. O cliente não vê. Obrigatório |
| Título exibido na loja | O título que o cliente vê acima da seção, como Em Destaque ou Mais Vendidos. Deixe vazio para não ter título |
| Posição na página | Topo: ocupa a largura toda da tela (use no banner principal). Conteúdo: fica na largura da coluna central |
| Ativa | Sim para a seção aparecer |
| Carregar a imagem com prioridade | Marque Sim só na primeira seção que aparece ao abrir a página (normalmente o banner principal). A imagem dela carrega antes das outras e a loja fica mais rápida. Não muda a seção de lugar |
| Ordem | Pode deixar vazio: a seção nova vai para o fim, e você arrasta depois |
| Lojas | (Só aparece se você tem mais de uma loja.) Em quais lojas a seção aparece |
- Preencha os campos do bloco Configuração, que mudam conforme o tipo (passos 4 a 6).
- Clique em Salvar Seção, ou em Salvar e Continuar Editando para continuar na mesma tela.
O tipo da seção não muda depois de criada. Se escolheu o tipo errado, crie outra seção e exclua ou desative esta.
Resultado esperado: a mensagem "Seção salva." aparece, e a seção entra na lista com o selo não publicada.
4. Configure uma seção de banners
As imagens dos banners continuam sendo cadastradas em Páginas → Gerenciar Banners. No MageHome você escolhe quais delas aparecem em cada seção.
| Campo | O que fazer |
|---|---|
| Slider de banners | O grupo de banners usado pela seção. Abaixo do campo aparece quantas imagens ativas ele tem, e o link Gerenciar as imagens deste slider |
| Máximo de imagens | Quantas imagens do grupo entram na seção |
| Escolher banners (opcional) | Deixe vazio para mostrar todas as imagens ativas do grupo. Ou clique em Adicionar banner e escolha uma a uma: aí só elas aparecem, na ordem da lista (arraste para reordenar) |
| Proporção desktop / mobile | O formato da imagem, em largura por altura (ex.: 2000x550). Vazio = usa o formato padrão do tema. Mostrado ao lado do campo |
| Passar as imagens sozinho, Tempo em cada imagem, Duração da transição | Só no Banner Principal e no Banner de Rodapé em modo Carrossel. Tempo em cada imagem é quanto tempo cada banner fica na tela (7000 = 7 segundos) |
| Banners por linha | Só nos Banners Secundários. Automático divide a linha pela quantidade de banners |
| Modo de exibição | Só no Banner de Rodapé. Empilhado (um embaixo do outro) ou Carrossel (um por vez) |
Se o campo Slider de banners mostrar "Nenhuma imagem ativa — esta faixa não vai aparecer na loja.", cadastre ou ative imagens nesse grupo em Páginas → Gerenciar Banners.
Com banners escolhidos em Escolher banners, uma imagem nova cadastrada no grupo não entra sozinha na seção. Adicione-a na lista.
Resultado esperado: a pré-visualização mostra a seção com as imagens que você escolheu.
5. Configure uma seção de produtos
Carrossel de Produtos e Grid de Produtos:
| Campo | O que fazer |
|---|---|
| Categoria | De onde vêm os produtos. A lista mostra quantos produtos cada categoria tem |
| Máximo de produtos | Quantos produtos aparecem. Quanto menos, mais rápida fica a página |
| Itens por linha | Quantos produtos cabem lado a lado no computador, no tablet e no celular. No celular, 1 é o recomendado |
| Colunas | Só no Grid. Quantos produtos por linha |
| Autoplay, Exibir setas, Exibir avaliações (estrelas) e os demais | Como o carrossel se comporta |
Abas de Produtos:
- No campo Abas, clique em Adicionar aba.
- Em cada linha, preencha o Nome da aba (ex.: Mais vendidos) e o ID da categoria. O ID é o número que aparece ao lado do nome da categoria em Catálogo → Gerenciar Categorias.
- Arraste as linhas para mudar a ordem das abas. Desmarque Ativa para esconder uma aba sem apagá-la.
Os campos de produto deixados em -- Padrão global -- usam o valor geral da loja, mostrado ao lado do campo como (padrão global hoje: …). Só mude o que quiser diferente nesta seção.
Na aba, confira bem o ID da categoria. Um número errado deixa a aba vazia na loja.
Resultado esperado: a pré-visualização mostra os produtos da categoria escolhida.
6. Use blocos de texto e a barra de newsletter
- Bloco Estático (CMS): escolha o bloco no campo Bloco estático. O conteúdo do bloco é editado em Páginas → Blocos Estáticos.
- Barra de Newsletter: não tem campos. Basta adicionar a seção e colocá-la no lugar desejado.
Para colocar um título acima de uma vitrine, não precisa criar um bloco estático: use o campo Título exibido na loja da própria seção.
Resultado esperado: o bloco ou a barra aparece na pré-visualização, no lugar escolhido.
7. Organize as seções
- Mudar de lugar: na lista, segure a alça ☰ e arraste a linha. A pré-visualização muda na hora.
- Esconder sem apagar: clique no ✔ verde da coluna Ativa.
- Copiar: em Ações, clique em Duplicar. A cópia nasce desativada, logo abaixo da original.
- Excluir: abra a seção e clique em Excluir Seção. Para várias de uma vez, marque as caixas da lista e use as ações Excluir, Ativar ou Desativar.
- Programar (agendar): abra a seção e, no bloco Agendamento e Avançado, preencha Exibir a partir de e Exibir até. A seção entra e sai da loja sozinha nessas datas. Ótimo para campanhas como Black Friday.
Uma seção excluída continua aparecendo na loja até você publicar. A tela avisa com o nome dela. Depois de publicar, ela não pode ser recuperada.
Resultado esperado: a lista e a pré-visualização mostram as seções na ordem que você quer.
8. Confira na pré-visualização
Na barra da Pré-visualização da Home:
- Visualização de loja: escolha a loja, se tiver mais de uma.
- Largura da prévia: veja como fica no Desktop, no Tablet e no Celular.
- Atualizar: monta a página de novo.
- Ampliar / Reduzir: aumenta a área da pré-visualização.
Quando você está editando uma seção, a pré-visualização mostra o que está preenchido na tela, mesmo antes de salvar:
- Só esta seção: mostra só a seção que você está editando e se atualiza sozinha enquanto você preenche.
- Home inteira: mostra a seção no meio das outras. Clique em Atualizar para ver as mudanças.
A pré-visualização mostra também as seções programadas para outras datas, para você conferir a campanha antes. Os links dentro dela ficam desativados. Chat e scripts de marketing não aparecem nela, mas continuam funcionando na loja.
Resultado esperado: a pré-visualização mostra a página inicial como você quer que o cliente veja.
9. Ajuste as cores da loja (opcional)
- No topo da lista, clique na aba Cores.
- Abra o grupo que quer mudar: Cabeçalho, Menu, Fundos das páginas, Botões e preços, Selos dos produtos, Abas da home, Barra de newsletter, Links e destaques, Rodapé ou Carrinho e checkout.
- Confira se a caixa Usar as cores abaixo do grupo está marcada.
- Clique na cor e escolha a nova. A pré-visualização muda na hora.
Etiquetas que podem aparecer nos campos:
- fora da prévia: a cor vale em outra página (produto, carrinho, checkout). Clique na etiqueta para ver onde ela aparece.
- sem efeito neste tema: o tema não usa essa cor.
- anulado por outra configuração: outra opção da loja esconde esse elemento.
Para desfazer, use Voltar à cor que está na loja no campo, ou Descartar todas no topo da aba.
As cores mudam a loja inteira (cabeçalho, rodapé, carrinho), não só a página inicial. São as mesmas cores de Sistema → Configuração → Tema Mageshop → Cores do Tema.
Resultado esperado: a pré-visualização mostra as cores novas, e o botão Publicar conta as alterações.
10. Publique
- No topo da tela, clique em Publicar (N). O número mostra quantas alterações estão esperando.
- Confirme.
O botão leva tudo o que está guardado de uma vez: seções novas, alteradas, movidas e excluídas, e as cores. Quando não há nada novo, ele mostra Tudo publicado.
Resultado esperado: aparece a mensagem "Home publicada: X seção(ões) no ar.", os selos somem da lista e o botão passa a mostrar Tudo publicado. Clique em Ir para a Home para ver a loja como o cliente vê.
Se a mensagem pedir "Atualize o cache para as mudanças aparecerem na loja", atualize o cache: Sistema → Cache → Marcar Todos → Ações: Atualizar → Enviar.
11. Ative o MageHome na loja (só na primeira vez)
Faça este passo uma vez, depois de montar e publicar a página pela primeira vez.
- Acesse Sistema → Configuração. No menu da esquerda, em Tema Mageshop, clique em MageHome.
- No bloco Ativação, em Ativar o MageHome, selecione Sim.
- Deixe Desconsiderar o XML da página CMS da home em Sim.
- Clique em Salvar Config.
- Atualize o cache: Sistema → Cache → Marcar Todos → Ações: Atualizar → Enviar.
Antes de ativar, confira com calma todas as seções na pré-visualização. Lojas novas já vêm com seções de exemplo, que podem apontar para banners, categorias e blocos que não são os da sua loja.
Para voltar à página inicial antiga, selecione Não em Ativar o MageHome e atualize o cache. Suas seções continuam guardadas.
Resultado esperado: a mensagem "A configuração foi salva" aparece e, depois de atualizar o cache, a página inicial da loja mostra as seções do MageHome.
Pronto! Dessa forma você monta e publica a página inicial da sua loja virtual Magento 1 com o MageHome.
Validação e Testes
Depois de publicar, faça os testes abaixo numa janela anônima do navegador (assim você vê a loja como um cliente novo).
Teste 1 — As seções aparecem na ordem certa
Ação: abra a página inicial da loja.
Resultado esperado: as seções aparecem na mesma ordem da lista, com os títulos que você definiu.
Teste 2 — A página funciona no celular
Ação: abra a página inicial no celular.
Resultado esperado: os banners mostram a versão de celular, os carrosséis passam com o dedo e a barra de newsletter aparece uma vez só.
Teste 3 — As abas carregam os produtos
Ação: numa seção de Abas de Produtos, clique na segunda aba.
Resultado esperado: os produtos da categoria daquela aba aparecem em seguida.
Teste 4 — O agendamento funciona (se usou)
Ação: confira a coluna Período da seção agendada.
Resultado esperado: fora do período, a data aparece em vermelho e a seção não está na loja. Dentro do período, ela aparece sozinha.
Observações Importantes
-
Salvar não é publicar: salvar, excluir, arrastar e ativar/desativar mudam só o que você vê no MageHome. O cliente só vê depois de Publicar.
-
Sem desfazer: depois de publicar, não há como voltar à versão anterior pelo painel. Use Duplicar para guardar uma cópia desativada antes de mudanças grandes.
-
Só a página inicial: o MageHome monta apenas a página inicial. As outras páginas da loja não mudam.
-
Uma imagem com prioridade: marque Carregar a imagem com prioridade só na primeira seção da página. Marcar em várias deixa a loja mais lenta.
-
Banners que não aparecem: se uma seção de banners sumir da loja, confira se o grupo tem imagens ativas e se há aviso amarelo no topo da tela do MageHome. Ele indica quando uma opção das Configurações do Tema impede a seção de funcionar.
-
Mais de uma pessoa: o botão Publicar leva as alterações de todos que estão mexendo no MageHome. Combine com a equipe antes de publicar.
-
Seção com problema: se uma seção não conseguir ser exibida, ela some sozinha e o resto da página continua normal. Fale com o suporte se uma seção configurada não aparecer.
Referências e Relacionados
- Limpeza de cache da loja: algumas mudanças só aparecem depois de atualizar o cache. Aprenda a atualizar o cache da sua loja
- Banners: como cadastrar as imagens que as seções de banner usam. Gerenciamento e edição de banners
- Blocos estáticos: como criar e editar os blocos usados na seção Bloco Estático (CMS).
- Categorias: como criar categorias e vincular os produtos que aparecem nas vitrines. Como criar Categorias e Subcategorias
- Cores do tema: o que cada cor muda na loja.
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