Magento 1 - Design, banners e páginas
Neste livro de documentação, abordaremos como você pode gerenciar o design da loja com páginas, blocos estáticos, alteração de banners, entre outros.
- Banners
- Edição de Banners (módulo) - Magento 1
- Banners página inicial (Blocos Estáticos) - Magento 1
- Banner Principal - Magento 1
- Banners promocionais - Magento 1
- Banner mosaico - Magento 1
- Banner de rodapé - Magento 1
- Como fazer um Banner no Canva
- Páginas
- Blocos Estáticos
- Software editor de imagem
- Magemenu e BarraTopo
- Como editar as cores do site - Magento 1
- Lojas de Exemplo para o Magento 1
Banners
Edição de Banners (módulo) - Magento 1
Passo a passo em vídeo:
Passo a passo Escrito:
Versões mais recentes do nosso Magento 1 contam com um novo módulo de edição de banners, onde é mais fácil realizar o gerenciamento deste conteúdo. Abaixo irei mostrar um passo a passo de como você poderá editar os banners com este novo módulo.
Antes de começarmos, irei repassar as medidas de cada banner:
Primeiramente no seu painel administrativo do Magento 1, procure pelo menu Banners e em seguida acesse a opção Manage Banners:
Como mostrado no GIF acima, estas são todas as opções de banners cadastradas por padrão em sua loja. Cada um possui seu nome para conseguir localizar corretamente em sua loja e editar.
Banner Slider Desktop
Banner Slider Mobile
Banners Sub3
Visão Desktop
Visão Mobile
logo abaixo do Principal e acima do Confira as Novidades
Banner Mosaico
Visão Desktop
Visão Mobile
Banner Rodapé
Visão Desktop
Visão Mobile
Como editar as Imagens
Ao abrir o bloco você terá os campos como mostrados na imagem acima, para editar as informações.
Link: Aqui você pode colocar um Link de Redirecionamento para quando o cliente que visita a sua loja clicar no banner, ele visite uma página em específico. Basta copiar o link da página que deseja direcionar o cliente e colar aqui.
Target: Aqui você define se o link que o cliente clicar na função anterior, irá abrir em uma Nova Guia no Navegador ou se irá abrir na mesma aba que ele já está navegando.
Ordem: Este campo é utilizado para configurações de banners que possuem mais imagens em exibição, como o Sub3 e o Slider Principal. Ordenando aqui a partir de 0, você consegue determinar qual é a imagem que irá exibir primeiro.
Status: Aqui você define se a imagem que está editando no momento estará ativa ou não.
Imagem: Este campo é destinado então de fato para a inserção da imagem que você quer alterar na exibição da loja. Ao clicar em Escolher Arquivo, abrirá o esquema de pastas de seu computador para conseguir escolher o arquivo desejado para realizar o Upload.
O campo Imagem possui algumas regras que precisam ser seguidas ao enviar imagens. Elas não podem conter acentuação e nem caracteres especiais como @#! ou /, se você realizar o upload das imagens com este caractere, ficará desta forma:
Quando acontecer isso de exibir o link da imagem ao invés da Thumbnail (ícone da imagem), renomeie o arquivo removendo os caracteres especiais e acentuação, caso contrário o erro irá persistir e não irá exibir a imagem na loja.
Como cadastrar mais banners
Cadastre as informações de Nome do Banner e escolha o tipo do qual você quer mais uma imagem para exibir com a opção Tipo do Banner
Após isso, basta seguir com os passos de cadastro que foram passados nos itens anteriores desta documentação
Depois que terminar de salvar, clique em Salvar ou Salvar e Continuar no topo a direita para aplicar as alterações e em seguida atualize o Cache da loja.
Se ainda assim tiver dúvidas sobre o funcionamento desse recurso, entre em contato com o nosso time de suporte no chat, ou através do e-mail web@tryideas.com.br.
Banners página inicial (Blocos Estáticos) - Magento 1
Vídeo explicativo:
Abaixo segue o passo a passo por escrito para quem preferir:
Em seu painel Mageshop, acesse: CMS > Blocos Estáticos
Os blocos que possuem banners são:
Você pode estar pesquisando na coluna de título a palavra Banner para encontrar os blocos estáticos que possuem a configuração de um Banner na loja, assim como mostra a imagem a seguir.
Tamanhos padrão para cada banner:
Dica 1: Copie o html do bloco estático e salve em um bloco de notas antes de realizar alterações, assim, se fizer algo que não gostou ou que gerou um erro no design, pode sempre voltar para a versão original do html que está salvo no bloco de notas.
Dica 2: Compacte as imagens para ter maior desempenho da loja virtual, e melhores notas nos testes de velocidade do Google. Recomendamos o Caesium para compactar as imagens, clique aqui para baixá-lo.
Se ainda assim tiver dúvidas sobre o funcionamento desse recurso, entre em contato com o nosso time de suporte no chat, ou através do e-mail web@tryideas.com.br.
Banner Principal - Magento 1
Tamanho
Em seu painel Magento mageshop, acesse: CMS > Blocos Estáticos > Banner Principal
Vamos encontrar então o Bloco Estático de nome "Banner Principal", podemos usar o campo da coluna de Titulo para pesquisar este bloco.
Dica: Copie o html do bloco estático e salve em um bloco de notas antes de realizar alterações, assim, se fizer algo que não gostou ou que gerou um erro no design, pode sempre voltar para a versão original do html que estará salvo no bloco de notas.
Deixe um espaço no campo para adicionar a imagem em formato html
Click no botão Insert Image
Procurar Arquivos > Marcando a Imagem > Abrir > Enviar Arquivos
Selecione o arquivo que deseja exibir no banner, abra esse arquivo em seguida clique em Enviar Arquivo. Vamos enviar esse arquivo para dentro da biblioteca do Magento
Marcando a Imagem > Inserir Arquivos
Cada linha em HTML, representa um banner no carrossel na home page da loja, segue em ordem, linha 1,2 e 3
- <li><a href="#"><img src="{{media url="wysiwyg/banners/principal-3.jpg"}}" alt="" /></a></li>
- <li><a href="#"><img src="{{media url="wysiwyg/banners/principal-3.jpg"}}" alt="" /></a></li>
- <li><a href="#"><img src="{{media url="wysiwyg/banners/principal-3.jpg"}}" alt="" /></a></li>
existe varias maneira para colar imagem em código
Vou mostrar dois exemplos de como pode adicionar as imagens
1. Copiar somente o caminho da imagem que está entre {{ }}
2. Copiar o código inteiro da imagem.
Cole entre <li><a href="#"> código HTML da imagem </a></li>
Refaça esse mesmo processo com outros dois banners principal
Adicionar links
Como expliquei acima, cada linha e representado um banner na loja, são 3 banners principal precisamos de 3 links para inserir em cada um deles.
Copie o link inteiro com https da categoria que gostaria de direciona após o cliente clicar em cima
Vamos colar o link, substituindo pelo # que fica entre " aspas duplas" em seu painel admin
<li><a href="cole seu link aqui">
<li><a href="#">
<li><a href="#">
Salve e atualize o cache
Banners promocionais - Magento 1
Dicas:
Dica 1: Copie o html do bloco estático e salve em um bloco de notas antes de realizar alterações, assim, se fizer algo que não gostou ou que gerou um erro no design, pode sempre voltar para a versão original do html que estará salvo no bloco de notas.
Dica 2: Compacte as imagens para ter maior desempenho da loja virtual, e melhores notas nos testes de velocidade do Google. Recomendamos o Caesium para compactar as imagens, clique aqui para baixá-lo.
Para Editar o banner Sub3
CMS > Blocos Estáticos > Banners Sub3
Deixe um espaço no texto que é aonde vamos adicionar a imagem e depois copiar
Click no Botão Insert Image > Procurar Arquivo
Precisamos enviar essas imagem para dentro da biblioteca do Magento, podemos selecionar uma de cada vez ou segundando SHIFT e marcando a imagem podendo enviar em massa, o recomendado e fazer upload uma de cada vez para que não ocorra problemas, como falha de carregamento ou o ficar lento.
Após abrir o arquivo, precisamos enviar para a biblioteca
Com os arquivos enviado, marque o arquivo e clique no botão Inserir Arquivo
Em vez de aparecer uma imagem no campo que deixamos espaço, vai mostrar um código html como <img src="{{ media url="caminho da imagem"}}" alt /> esse código é nossa imagem em formato html
Nosso código foi adicionado onde deixamos espaço, mas ainda não adicionamos o banner, precisamos copiar essa imagem em formato html e colar na linha do banner no campo localizado logo acima
Marque o código inteiro, copie ou recorte, cole substituindo o código em vermelho mostrado na imagem abaixo
Cada linha <li> é um banner mostrando na loja
<ul class="promos">
<li><a href="#"> <img src="{{media url="wysiwyg/banners/promo-01.jpg"}}" alt="" /></a></li> Banner 1 Esquerda
<li><a href="#"> <img src="{{media url="wysiwyg/banners/promo-02.jpg"}}" alt="" /></a></li> Banner 2 Central
<li><a href="#"> <img src="{{media url="wysiwyg/banners/promo-03.jpg"}}" alt="" /></a></li> Banner 3 Direita
</ul>
Após substituir o código da imagem, apague o que adicionamos no espaço
Adicionar links
Como expliquei acima, cada linha representa um banner na loja, como são 3 banners sub3 precisamos de 3 links para inserir
Precisamos copiar o link, substituindo pelo # que fica entre " aspas duplas" em seu painel admin
<li><a href=" no lugar do # aqui vai ser colado seu link">
<li><a href="#">
<li><a href="#">
Salve para gravar as alterações realizadas e atualize o cache
Se ainda assim tiver dúvidas sobre o funcionamento desse recurso, entre em contato com o nosso time de suporte no chat, ou através do e-mail web@tryideas.com.br.
Banner mosaico - Magento 1
Tamanhos banner mosaico
Grande (esquerda): 800x800px
Pequeno 1 (direita): 800x390px
Pequeno 2 (direita): 800x390px
Para editar o Banner Mosaico
Em seu painel magento mageshop, acesse: CMS > Blocos Estáticos > Banner Mosaico
Dica: Copie o html do bloco estático e salve em um bloco de notas antes de realizar alterações, assim, se fizer algo que não gostou ou que gerou um erro no design, pode sempre voltar para a versão original do html que estará salvo no bloco de notas.
Deixe um espaço no campo de conteúdo para adicionar a imagem em formato html
Clique no Botão Insert Image...
Vamos adicionar os arquivos dentro da biblioteca Magento
Procurar Arquivos > Marcando a Imagem > Abrir
Abrindo o arquivo tem que enviar para a biblioteca de arquivos, clique em Enviar Arquivos
Clique na Imagem > Inserir arquivo
Clicando em cima da imagem, aperte em Inserir Arquivo. vai aparecer em código da imagem HTML, onde deixamos espaço
Salve e atualize o cache
Se ainda assim tiver dúvidas sobre o funcionamento desse recurso, entre em contato com o nosso time de suporte no chat, ou através do e-mail web@tryideas.com.br.
Banner de rodapé - Magento 1
Para editar o banner rodapé:
Em seu painel Magento mageshop, acesse: CMS > Blocos Estáticos > Banner Rodapé
Tamanho banner rodapé 1400 x 300px
No campo de conteúdo, deixe um espaço para adicionar a imagem em formato html
Click no botão Insert Image
Procurar Arquivos > Marque o Arquivo > Abrir
Selecionando o arquivo, click em Enviar Arquivo para que esse arquivo fique armazenado na biblioteca do magento
Arquivo enviado. Selecione e click em Inserir Arquivo
A imagem será exibida em formato html ex: <img scr="{{ media url"sua imagem"}}" alt=""/>
copie o a imagem no formato html, cole substituindo o código marcado em vermelho como na imagem abaixo
Salve e atualize o cache
Se ainda assim tiver dúvidas sobre o funcionamento desse recurso, entre em contato com o nosso time de suporte no chat, ou através do e-mail web@tryideas.com.br.
Como fazer um Banner no Canva
Nessa documentação vamos explicar como você pode estar criando imagens para a sua loja online utilizando a ferramenta de edição chamado Canva.
O Canva é uma ferramenta incrível, que tem a possibilidade de utilizar totalmente grátis e ainda conseguir alcançar resultados incríveis. Nós da mageshop criamos lojas de exemplo na plataforma Magento 1.9 e em todas utilizamos a ferramenta de forma gratuita para chegar nos resultados.
Criando sua conta
Para iniciarmos, você precisa entrar no site oficial e realizar a criação da sua conta.
Primeiros passos
Depois de entrar em sua conta, você já está apto para poder iniciar a criação dos seus criativos. Nessa página você pode escolher alguns formatos para iniciar, escolhendo algum assunto em específico, ou criar o seu design no formato que desejar.
Caso queira criar banners para a sua loja, pode estar pegando as medidas dos banners nessa documentação.
Editar Templates prontos
No Canva uma ótima solução para você que não tem muito tempo ou até mesmo não tem muita criatividade para criar. Você pode estar escolhendo uma imagem pronta e depois estar alterando os textos e imagens, do jeito que quiser.
Use da sua criatividade e deixe a sua loja online com a cara da sua marca.
Você pode estar utilizando na aba "Design" e realizar uma busca com o tema que você quer.
Explore a ferramenta, procure vídeos explicativos e pratique!
Ou caso não tenha tempo, criatividade ou mesmo não quer criar seus banners, é interessante entrar em contato com empresas ou prestadores de serviço que realizam esse trabalho para você.
Qualquer dúvida sobre a nossa plataforma, sinta-se à vontade de entrar em contato conosco através do número (45) 98817-0144 ou clique aqui.
Páginas
Criando uma página - Magento 1
Passo a passo em vídeo:
Passo a Passo Escrito:
Informações da página
Acesse: CMS > PÁGINAS
Clique em CRIAR PÁGINA
Logo após, você abrirá esta página.
Os campos que você terá que preencher são:
Título da página: Insira aqui, o nome que você dará para sua página
URL : É o endereço da sua página, portanto, é obrigatório que neste campo você NÃO UTILIZE ESPAÇOS E ACENTOS, (SE FOR SEPARAR SEPARE POR HÍFEN)
ESTADO: HABILITADO
Conteúdo
Nesta página, você irá escrever ou colar o conteúdo que sua página abordará. Você pode usar o botão SHOW/HIDE EDITOR para formatar um texto, colorir, alterar fontes, tamanhos, inserir imagens entre outros.
As demais informações não serão solicitadas agora
Exibindo na sua loja virtual
Para que sua página seja vista na aba você terá que configurar os links na página:
CMS > BLOCOS ESTÁTICOS > MENU RODAPÉ LINKS EDITÁVEIS
Observe cada linha (em vermelho no print)essas são as páginas que já estão criadas em sua loja virtual
Você apenas fará mais uma página, copiando a de cima e colocando somente os dois nomes que faltam, para exemplificar veja no print abaixo como deve ser feito:
Selecione a linha de cima, copie e cole em baixo da outra e serão criadas duas linhas iguais (como mostra no print acima)
Nesses dois campos coloque, o nome da página que você criou
Então, você trocará o nome que estava escrito o nome da outra página pela qual você criou.
Na primeira parte é o nome da URL que você criou na aba Informações da página
Na segunda parte é o nome que você inseriu no Título da Página, também na parte da aba Informações da página
Assim, sua página será encontrada.
Após isso, SALVE e ATUALIZE O CACHE (clique aqui caso não saiba atualizar o cache)
Qualquer dúvida, entre em contato com o suporte em web@tryideas.com.br ou através do chat de suporte no horário de atendimento.
Como editar pagina Sobre nós (institucional) - Magento 1
Em seu painel Magento Mageshop, acesse: CMS > Páginas
Institucional > Conteúdo > Show / Hide Editor
- Botão Show /Hide Editor: Ele permite você adicionar conteúdos sem html, podendo usar os recursos, Negrito, Italic, Underline, escolhendo o tamanho da fonte...
Salve
Dica: Após esse processo, atualize o cache do Magento e recarregue seu navegador.
Se ainda assim tiver dúvidas sobre o funcionamento desse recurso, entre em contato com o nosso time de suporte no chat, ou através do e-mail web@tryideas.com.br.
Blocos Estáticos
Blocos Estaticos - Magento 1
No blocos estáticos, nele contém conteúdos editáveis como Banners, Paginas, WhatsApp ícone chat e Menu Rodapé Links Editáveis
Copie o html do bloco estático e salve em um bloco de notas antes de realizar alterações, assim, se fizer algo que não gostou ou que gerou um erro no design, pode sempre voltar para a versão original do html que está salvo no bloco de notas.
Atenção: Nunca use o botão Show / Hide Editor em blocos estáticos, ele altera toda linguagem em HTML original
Qualquer dúvida, estaremos no chat de suporte de segunda a sexta ( 8:00 a 12:00 horas) (13:30 a 18:00 horas ) ou por email web@tryideas.com.br
Software editor de imagem
Compressor de imagens Caesium
Link para download para Windows : https://www.fosshub.com/Caesium-Image-Compressor.html
Instale em seu desktop e execute.
Clique na pasta e localize o arquivo que gostaria de comprimir
Clique sobre o arquivo que subiu para o Caesuim
Escolha porcentagem da qualidade que deseja manter, e os pixel para comprimir
Clique em apply e escolha o local para salvar o arquivo novo, e click em comprimidor
Redimensionar imagens em massa com Fotosizer
Faça o download do software Fotosizer
Esse software serve para você redimensionar altura e largura da sua imagem facilmente, e em massa.
Faça o download no link: https://www.fotosizer.com/Download
Realize a instalação do programa em seu computador e após isso execute o mesmo. Você verá a tela abaixo, clique em continuar para acessar a versão gratuita, ou se tiver uma versão paga do mesmo pode inserir o código de ativação.
Clique em adicionar imagens
Neste passo a passo, utilizarei duas imagem para exemplo. Selecione as suas e clique em Abrir.
Para adicionar mais de uma ao mesmo tempo para edição, segure o botão Ctrl e selecione as imagens com o botão direito.
No Fotosizer, selecione a imagem que deseja editar.
Ajustar o tamanho
Nesta opção, orientaremos considerando que a sua imagem é muito grande, e que precisa ser redimensionada para um tamanho menor sem perder a proporção:
Utilize a opção AJUSTAR
Use a opção PERSONALIZADO para definir o tamanho final da sua imagem, insira no lado maior a dimensão que deseja.
(Para fotos de produtos na loja virtual recomendamos que o lado maior seja de 1200px). Você vera que ao preencher o lado maior, e der um Tab ou mudar de campo, a outra dimensão irá mudar sozinha pela proporção.
Certifique-se de que as opções abaixo estão assinaladas
- Não Ampliar se for menor:
- Manter proporção:
Procedimento para salvar
Para salvar, abra a aba Destino
Na opção Pasta de destino, escolha a pasta de destino para as novas imagens que serão geradas.
Formatação de saída, você pode manter o mesmo, ou se procura maior performance recomendamos usar JPEG.
Nome do Arquivo: Criar cópias, assim todos os arquivos gerados terão um novo nome com copy ao fim, para não confundir com os originais.
Clique em INICIAR para que o procedimento aconteça, aguarde finalizar e abra a pasta de destino para avaliar as novas imagens.
Se ainda assim tiver dúvidas sobre o funcionamento desse recurso, entre em contato com o nosso time de suporte no chat, ou através do e-mail web@tryideas.com.br
Magemenu e BarraTopo
Como funciona o MageMenu e o BarraTopo - Magento 1 (Open Mage)
Nesta documentação veremos como você pode estar ativando e configurando o MageMenu da sua loja.
Segue o passo a passo em vídeo:
Segue o passo a passo escrito:
MageMenu
Para ativar o MageMenu, dentro do seu Painel de Controle.
Vá em Sistema > Configurações
No painel da esquerda, vamos abrir o menu Tema Mageshop > MageMenu > Configurações, ao abrir a aba podemos estar ativando este menu trocando a opção Exibir MageMenu para Habilitar.
Desativando o menu antigo
Caso você queira, pode estar desativando o menu atual, mantendo a exibição apenas de um menu, sendo ele o MageMenu, para estar apresentando suas categorias.
Para fazer isso, ainda dentro de Tema Mageshop > MageMenu, vamos para a aba Configurações Adicionais, ao abir a aba, podemos colocar como "Sim" o campo Ocultar o Menu Principal.
Editando o MageMenu
Para a edição de seu MageMenu temos uma documentação mostrando passo a passo como editar: Clique aqui para aprender!
Caso encontre dificuldades em realizar a edição do MageMenu, nós da Mageshop podemos estar lhe ajudando a realizar esta alteração. Você pode estar nos chamando e pedindo que realizemos esta edição, entre em contato com o nosso time de suporte no chat, ou através do e-mail web@tryideas.com.br.
Personalizando o tema do MageMenu
Continuando em Tema Mageshop > MageMenu, podemos aqui estar realizando algumas alterações do tema deste menu além de outras configurações.
Na aba Botão Departamentos podemos modificar o botão que exibe todas as nossas categorias, alterando seu nome no campo "Nome Menu Departamentos", e até ocultando sua exibição pelo campo "Ocultar o Botão Departamentos?".
Em Quantidade de Seções, como o nome sugere, podemos estar alterando a quantidade de seções que são exibidas no nosso menu, por padrão, o campo de Quantidade manterá a opção auto, porem você pode estar alterando essa quantidade de acordo com as suas necessidade, podendo exibir até 10 seções.
Indo para a aba Personalizar Cores, podemos estar alterando as cores do nosso MageMenu, lembrando que cada campo deve ser preenchido com o código hexadecimal da cor que você deseja, caso não saiba o código hexadecimal de determinada cor, clique no link abaixo e utilizando a ferramenta, selecione a cor e você tera este código
Clique aqui para gerar a cor !
Por fim, em Tonalidades dos Links, podemos mudar a cor dos links dentro do nosso MageMenu, alterando entre Claro e Escuro.
Após terminar a edição, Clique em Salvar no canto direito, em seguida atualize o Cache.
BarraTopo
Ainda dentro de Sistemas > Configuração > Temas Mageshop
Vamos para a aba BarraTopo > Configurações, podemos estar trocando a opção "Exibir BarraTopo?" para Habilitar.
Configurando o BarraTopo
Aqui podemos estar personalizando o BarraTopo, indo para a segunda aba, em Personalizar Cores, podemos alterar a cor do nosso BarraTopo, lembrando que esses campos devem ser preenchidos com o código hexadecimal da cor que você deseja, caso não saiba o código hexadecimal de determinada cor, clique no link abaixo e utilizando a ferramenta, selecione a cor e você tera este código.
Na próxima aba, em Tonalidade dos Links, podemos alterar a cor dos links do nosso BarraTopo, alterando entre Escuro e Claro.
Em Coluna Central, podemos desativar ou habilitar a coluna central da barra, alterando tanto no desktop (computador), quanto no mobile (celular).
E por fim podemos alterar algumas configurações do nosso BarraTopo para clientes que usam o celular na aba de Configurações Adicionais Mobile.
Após terminar a edição, Clique em Salvar no canto direito, em seguida atualize o Cache.
Se ainda assim tiver dúvidas sobre o funcionamento desse recurso, entre em contato com o nosso time de suporte no chat, ou através do e-mail web@tryideas.com.br.
Como editar as cores do site - Magento 1
Como personalizar as cores do seu site no Magento 1
Explicação em vídeo:
Salve e atualize o cache
Segue a explicação escrita
Vá em Sistema > Configurações > Tema Mageshop
Em Tema Mageshop você poderá encontrar todas as opções de personalização do tema do seu site, aqui você poderá alterar as cores da sua loja e até mesmo mudar a logo que está sendo exibida.
Magemenu
A primeira aba que podemos ver em relação a sua configuração, é o Magemenu, esta aba possui uma documentação separada que trata de sua configuração, da alteração de cores e outras opções, segue o link desta documentação.
Nesta documentação, abordaremos nesta aba apenas a configuração de exibição do Magemenu, dentro desta aba clique em configurações, e então altere "Exibir Magemenu?" para "Habilitar".
Você pode também estar desativando o antigo menu acessando na mesma aba de Magemenu, a aba de Configurações Adicionais e alterar "Ocultar o Menu Principal?" para Sim.
Salve e atualize o cache
Barratopo
Configurações
Na aba de Barratopo, iremos primeiramente passar pela opção que faz a ativação desta barra, vá para configurações e altere a opção "Exibir Barratopo?", ativando ou desativando o mesmo.
Personalizar Cores
Na próxima aba, em Personalizar Cores, podemos fazer a alteração das cores dessa barra, lembrando que aqui, deve ser utilizado o código Hexadecimal da cor que você deseja utilizar na loja, para saber qual é esse código, indicamos utilizar a própria ferramenta do google, onde nele você pode estar encontrando este código para então utiliza-lo nesses campos de personalização, segue o link desta ferramenta.
Tonalidades dos links e Coluna Central
Podemos também alterar a tonalidade dos links presentes no Barratopo, alterando entre claro e escuro na aba de "Tonalidades dos links", outra configuração interessante é a possibilidade de ativar ou desativar a coluna central da barra na aba "Coluna Central".
Configurações Adicionais Mobile
A ultima aba de configuração da Barratopo nos da a liberdade de personalizar como um usuário que esta utilizando dispositivos moveis pode ver esta barra, alterando o layout da mesma. Lembrando que são consideradas telas de dispositivos moveis aquelas que possuem menos que 770px.
Salve e atualize o cache
Configurações do Tema
Logo
Aqui teremos a possibilidade de alterar a cor do tema do site em geral, a primeira aba já nos traz a liberdade de alterar a logo de nosso site em diferentes pontos, basta apenas, no campo em que você deseja alterar, clicar em Escolher arquivo, e selecionar a imagem que preferir, lembrando que a imagem deve estar no formato PNG ou JPG.
Aqui temos 6 locais onde a logo da sua loja pode aparecer para o seu cliente.
Principal: é a logo que aparece no cabeçalho da sua loja.
Resize: esta logo fica no barra topo da sua loja, ela aparece para substituir o cabeçalho principal assim que não é possível mais vê-lo.
Rodapé: assim como o nome diz, ele aparece no rodapé do seu site.
Fechar Pedido: pode ser encontrada assim que um cliente vai finalizar um pedido.
ogimage: ela é exibida nas pesquisas do google.
Layout
Na próxima aba temos as configurações de Layout da sua loja, aqui você pode alterar a largura do topo, rodapé e caixa de conteúdo .
Header
Na aba header, temos então algumas configurações do tema do cabeçalho.
As configurações da barra topo nos permite, além de habilitar ou desabilita-lo, mudar a cor dos ícones e links presentes nesta barra. Logo a baixo, temos a escolha de alterar posição em que a logo é exibida no cabeçalho (Header). As outras duas configurações presentes nesta aba, fazem a alteração das cores dos ícones do cabeçalho, aqui identificado como Header, tanto no desktop e mobile.
Rodapé
Posteriormente, temos a aba de Rodapé, ela possui algumas configurações visuais que nós podemos fazer nesta parte do site.
Na sua loja, é possível alterar entre dois tipos de modelos de rodapé, sendo o Layout 1 o padrão utilizado, abaixo temos uma print mostrando este modelo como Newsletter habilitado.
A seguir temos uma print do Layout 2.
Lembrando que, a configuração Exibir Newsletter altera a exibição da mesma apenas na utilização do primeiro Layout, podemos também habilitar a Barra de Newsletter, ela fica em uma área um pouco superior ao rodapé, veja abaixo como ficaria.
Configurações Gerais
E por fim, temos a ultima aba das configurações do tema, em Configurações Gerais, podemos encontrar as demais configurações existentes sobre o tema da loja.
Posição Ícone Flutuante Whatsapp: Podemos alterar a posição do ícone do Whatsapp escolhendo entre Direita e Esquerda.
Catalogo / Produtos sem Avaliações: Exibe/Oculta as avaliações dos produtos que ainda não foram avaliados.
Busca Mobile Fixa: Habilita, como você pode ver abaixo, a barra de busca fixa em dispositivos moveis (mobile).
Topo Mobile Reduzido (logo na barra): Reduz o tamanho do topo em dispositivos moveis (mobile).
Salve e atualize o cache
Cores do Tema
Como o nome diz, aqui estaremos alterando as cores do tema da sua loja, aqui em todas as abas, para realizar a configuração das cores referentes a cada uma delas, teremos de habilitar a Personalização de Cores, feito isso, as configurações serão exibidas para que você possa explora-las e altera-las, lembrando novamente que todos os campos referentes a cores, devem ser preenchidas com o código Hexadecimal da cor de sua escolha, novamente temos o link da recomendação feita acima na documentação. Clique aqui.
Topo
A primeira aba que nós temos faz jus a configuração do Topo da nossa loja.
Topo site: faz a alteração da cor do cabeçalho da nossa loja.
Barra Topo (flutuante): altera a cor da barra topo.
Frase Bloco Promocional: altera a cor do texto do bloco promocional.
Minha conta: altera a cor do texto exibido no menu do usuário, abaixo temos uma print mostrando onde é alterado esta cor
Menu Principal
Na próxima aba, temos a configuração das cores do Menu Principal, lembrando que essas configurações não alteram as cores do Magemenu por ser um menu diferente.
Além da alteração da cor do próprio menu, podemos alterar a cor da borda no topo e em baixo (bottom) do menu, podemos também estar alterando a cor dos texto além de alterar a cor exibida quando o cliente passa o mouse pelos mesmos, as configurações referentes aos Submenus, no caso a alteração da cor da borda e dos links, altera os blocos de subcategorias que aparecem ao clicar em uma categoria no menu.
Background das Páginas
Em Background das Páginas, podemos modificar, como mostra a imagem acima, a cor do fundo do nosso site em diferentes lugares
Home: altera a cor o fundo da pagina inicial.
Detalhes do Produto: altera na pagina dos produtos.
Resultado de busca / Categoria: muda a cor do fundo nas categorias e quando uma pesquisa é efetuada.
Barra Descrição: é alterada a cor do fundo da área de descrição dos produtos.
Página Carrinho: altera na pagina do carrinho do cliente.
Página Checkout: altera o fundo na aba de Pagamento
Página Checkout - Sucesso: altera o fundo na aba de Compra Finalizada
Rodapé
Na próxima aba temos a alteração das cores no Rodapé da loja
Temos a possibilidade de alterar a cor do Rodapé, além da borda, títulos e links, além das cores da barra de selos (a ultima barra do site), e também alterar a cor da barra assinatura, exibida do Layout 1 do Rodapé.
Botões e Preço
Em Botões e Preço, é feita a alteração das cores de botões e textos de exibição de preço em toda loja.
Todas as configurações a seguir são campos que alteram a cor de algo referente a Botões e Preço
Comprar - Grid/List: botão de Ver Detalhes exibido ao passar o mouse sobre um produto
Comprar (Página de Detalhes): botão de comprar dentro da pagina de produto
Botão Minicart: botão de Finalizar Pedido
Login / Criar Conta: botões encontrados dentro da pagina de login
Entrar: botão de Entrar em Minha conta no menu
Cor preço: texto que exibe o texto dos produtos em toda loja
Cor preço boleto: texto exibido em produtos que não possuem um preço fixo, ou tenham um preço diferente, por exemplo, no boleto
Carrinho e Checkout
Então temos a aba de Carrinho e Checkout, nela podemos alterar as cores exibidas na pagina de carrinho, pagamento e finalização da compra
Cor BG Autenticação e Cor BG Etapas, podemos alterar a cor do cabeçalho da tabela de autenticação e de etapas na pagina de pagamento.
Itens no Carrinho - BG e Itens no Carrinho - Cor, altera a cor do numero e do ícone que fica em cima do símbolo do carrinho respectivamente.
Botões Secundários - Cor Background e Botões Secundários - Cor Texto fazem a alteração nos botões secundários nas paginas referentes a aba Carrinho e Checkout. Ex:
Cor Tabela Carrinho e Cor Borda Tabela Carrinho alteram a cor da tabela e da borda respectivamente na pagina de carrinho assim como mostra a imagem acima
Tags
Em todos os campos que possuem o segmento BG, ele altera a cor de fundo dessas tag, já aquelas que possuem Cor ao lado do nome alteram a cor do texto dessas tags.
Tabs Home
Seguindo para a aba Tabs Home, fazemos aqui a alteração das cores de algumas abas presentes na pagina inicial.
Acima temos as abas em que a configuração desses campos alteraram.
Cores Ativo: se refere a aba selecionada, no caso do exemplo acima, seria a aba Mais vendidos.
Cor Borda: é a borda das abas, na imagem acima, na aba Mais vendidos abaixo dela pode ser visualizado a borda.
Cor Link: alteraria a cor de todos os outros texto que não estão selecionados.
Cor Links Hover: se refere a cor exibida no texto da aba ao passar o mouse por cima delas.
Cor Borda Hover: se refere a cor exibida na borda da aba ao passar o mouse por cima delas.
Newsletter
Indo para a penúltima aba, em Newsletter, podemos alterar a cor da barra de newsletter
Os campos mostrados acima fazem referencia as cores da barra de Newsletter abaixo.
Outros
Na ultima aba, em Outros temos as configurações de cor de outros elementos da loja no geral
Links (a) e Links (a:hover) são as configurações dos outros links presentes no site, em que não possuem um campo especifico de alteração de cor, ou seja, aqueles links em que sua cor não podem ser alteradas pelos campos vistos em toda esta documentação. Nesses dois campos nós podemos mudar a cor do texto desses links (a) e a cor exibida ao passar o mouse por cima dos mesmos (a:hover).
Os campos de configuração de cor da Linha Destaques, se refere a aba Destaques presente na Home, podendo alterar o fundo (BG), títulos e textos.
Abaixo no campo Titulo Destaques Home e Outros nós podemos alterar a cor dos Títulos em destaque na home e outros títulos presentes em nossa loja.
Salve e atualize o cache
Se ainda assim tiver dúvidas sobre o funcionamento desse recurso, entre em contato com o nosso time de suporte no chat, ou através do e-mail web@tryideas.com.br.
Lojas de Exemplo para o Magento 1
Nós da equipe mageshop desenvolvemos lojas na plataforma Magento 1 com o Layout que nós disponibilizamos sem custo adicional. Nestas lojas nós personalizamos de diversas formas para demonstrar e dar ideia de como você pode estar montando a sua loja online.
Vestuário - vestuario.magehub.com.br
Suplementos - suplementos.magehub.com.br
Auto Peças - autopecas.magehub.com.br
Eletrônicos - eletronicos.magehub.com.br
Óticas - oticas.magehub.com.br
Jóias - joias.magehub.com.br
Móveis - moveis.magehub.com.br
Farmácia - farmacia.magehub.com.br
Infantil - infantil.magehub.com.br
Calçados - calcados.magehub.com.br
Espero que nossas lojas consigam dar uma ideia de como você vai construir a sua loja.
Qualquer coisa, sinta-se à vontade de entrar em contato conosco através do número (45) 98817-0144 ou clique aqui.