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

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:

Banner Principal Desktop - 2000 x 550 pixels

Banner Principal Mobile - 800 x 550 pixels

Banner Sub3 - 569 x 150 pixels

Banner Mosaico - Grande 800 x 800 pixels e pequenos 800 x 390 pixels cada um

Banner Rodapé - 1400 x 300 pixels

Primeiramente no seu painel administrativo do Magento 1, procure pelo menu Banners e em seguida acesse a opção Manage Banners:

Ao acessar este menu, você irá se deparar com algumas opções de banner já criados na sua loja:

banners-modulo.gif

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

Nome do Banner no Admin

 

Banner Slider Mobile

Nome do Banner no Admin

Banners Sub3

Visão Desktop

Visão Mobile

logo abaixo do Principal e acima do Confira as Novidades

Nome do Banner no Admin

 

Banner Mosaico

Visão Desktop

Visão Mobile

mosaicomobile2.gif

Nome do Banner no Admin

Banner Rodapé

Visão Desktop

Visão Mobile

Nome do Banner no Admin

Como editar as Imagens

Selecione o banner que deseja editar, com base nas informações passadas acima, somente clicando em cima mesmo da linha do banner no admin. Usarei o exemplo do Banner Slider 2 Desktop.

Ao abrir o bloco você terá os campos como mostrados na imagem acima, para editar as informações.

Titulo do Banner: Este campo é o título que você verá na listagem de banners no Gerenciamento, serve apenas para conseguir localizar mais facilmente.

Tipo do Banner: Este campo, você verá qual é a configuração de exibição do banner, se ele será um Principal, um Mosaico, etc. É útil você saber, pois caso queira cadastrar mais banners posteriormente, precisa saber a qual grupo de configuração atrelar a ele.

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

Ao acessar o menu Banners > Manage Banners, você terá a opção Add Slide. Clique nela para criar um novo slide de 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

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:

Banner Principal

Banner Sub3

Banner Mosaico

Banner Rodapé

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:

Banner Principal - 2000 x 550 píxeis

Banner Sub3 - 569 x 150 píxeis

Banner Mosaico - Grande 800 x 800 píxeis e pequenos 800 x 390 píxeis cada um

Banner Rodapé - 1400 x 300 píxeis

 

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.

 

Banners

Banner Principal - Magento 1

Tamanho

Banner Principal - 2000 x 550 pixels

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 

  1. <li><a href="#"><img src="{{media url="wysiwyg/banners/principal-3.jpg"}}" alt="" /></a></li> 
  2. <li><a href="#"><img src="{{media url="wysiwyg/banners/principal-3.jpg"}}" alt="" /></a></li>
  3. <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>

banner-principal.gif

Refaça esse mesmo processo com outros dois banners principal

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.

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="#">

principal.gif

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.

 

 

Banners

Banners promocionais - Magento 1

Dicas:

Tamanho para banner Sub3 

Banner Sub3 - 569 x 150 pixels

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>

bannersub3.gif

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="#">

links.gif

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.

Banners

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 

bannemosaico.gif

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.

 

 

Banners

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

 

banner-rodap´´e.gif

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.

Banners

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

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

verm.png

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:

agfhf.png

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

apresenta.png

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.

Páginas

Como editar pagina Sobre nós (institucional) - Magento 1

Em seu painel Magento Mageshop, acesse: CMS > Páginas 

Institucional  > Conteúdo > Show / Hide Editor 

 

 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 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

Software editor de imagem

Compressor de imagens Caesium

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 

comprimindo.gif

 

 

Software editor de imagem

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.

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

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

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.

Clique aqui para gerar a cor


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.

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

 

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.

Barra Menu: aqui é alterado a cor do menu exibido em dispositivos moveis.

.skip-nav .label (Mobile): altera no mobile, a cor do texto que aparece no menu.

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

Na aba de Tags, podemos alterar as cores das tags atreladas aos produtos

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 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

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.