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:

São aceitos os formatos JPEG, JPG, PNG e GIF.
Caso queira manter uma imagem com uma qualidade melhor, recomendamos o formato PNG, porém caso procure uma performance melhor, com uma imagem mais leve e que facilite o carregamento, utilize imagens no formato JPG.

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

Nesta documentação, irei ensinar a você como criar uma página na plataforma Mageshop em Magento 1.

Passo a passo em vídeo:


Passo a Passo em Texto:

Abaixo estarei explicando passo a passo como realizar a criação.

Informações da página

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

Após clicado em Páginas > Clique em Criar Página

Informações da Página

Os campos que você terá que preencher são:

Titulo da Página: Nome para a página. 

URL: É ​​o endereço da sua página, portanto, é obrigatório que neste campo não utilizar acentuação, caracteres especiais e espaçamentos, caso precise utilize hífen ( - ) para fazer a separação.

Status: Habilitado.

Conteúdo

Próxima etapa é Conteúdo, onde estaremos inserindo o que será exibido na página.

Título do Cabeçalho: Nome para o título, que vai ser exibido no topo da página.
Campo em branco a baixo: Inserir todas as informações que vai ser exibido à página.

Botão Show /Hide Editor: Ele permite você adicionar conteúdos em HTML, podendo usar os recursos, negrito, itálico, Underline, escolhendo o tamanho da fonte…  

Visual

Próxima etapa estar gerenciando o Visual de sua página.

Leiaute: Pode estar inserindo a quantidade de colunas.
Atualização de Leiaute por XML: Ela permite adicionar, remover ou modificar elementos do layout usando instruções em XML, alterando a estrutura da página de forma dinâmica.

Visual Personalizado de: Início do visual personalizado.
Visual Personalizado Para: Fim do prazo de visual personalizado.
Tema Personalizado: Pode estar selecionando o tema desejado.
Leiaute Personalizado: Pode estar inserindo a quantidade de colunas.
Leiaute Personalizado por XML: Ela permite adicionar, remover ou modificar elementos do layout usando instruções em XML, alterando a estrutura da página de forma dinâmica.

Meta Tags da Página

Próxima etapa estar inserindo Meta Tags.

Palavras-chave: São as palavras-chave que você gostaria de indexar. Separe cada palavra-chave com vírgula.
Descrição: Neste campo você preencherá a descrição da página que aparecerá no buscador do Google quando esse link for exibido, o tamanho ideal é de 140 caracteres.

 

Após isso, SALVE e ATUALIZE O CACHE (clique aqui caso não saiba atualizar o cache)

Está pronta criação da página!

Caso não tenha visto Como vincular Páginas na Home, clique AQUI e veja passo a passo como estar vinculando.

Caso não tenha visto Como vincular Páginas no Rodapé, clique AQUI e veja passo a passo como estar vinculando.

Nessa documentação vimos como você pode estar criando uma página em sua loja virtual Magento 1 Mageshop.

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

Nesta documentação, irei ensinar a você como gerenciar a página institucional na plataforma Mageshop em Magento 1.

Passo a passo em vídeo:

Passo a passo em texto:

Abaixo estarei explicando passo a passo como realizar as alterações.

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

Após clicado em Páginas, nessa tela é onde exibe as páginas de sua loja.

Vamos estar selecionando a página Institucional para fazer a alteração.

Informações da Página

Podemos ver alguns campos para serem preenchidos.

Titulo da Página: Nome para a página. (Podemos estar inserindo uma frase para chamar a atenção, por exemplo, "Desde 1998 fazendo história")

URL: Nome da URL dessa página.
Status: Habilitado/Desabilitado.

Caso queira alterar a URL entrar em contato com nosso time de suporte.

Conteúdo

Próxima etapa é Conteúdo, onde estaremos inserindo o que será exibido na página.

Título do Cabeçalho: Nome para o título, que vai ser exibido no topo da página.
Campo em branco a baixo: Inserir todas as informações que vai ser exibido à página.

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

Visão da loja:

Visual

Próxima etapa estar gerenciando o Visual de sua página.

Leiaute: Pode estar inserindo a quantidade de colunas.
Atualização de Leiaute por XML: Ela permite adicionar, remover ou modificar elementos do layout usando instruções em XML, alterando a estrutura da página de forma dinâmica.

Visual Personalizado de: Início do visual personalizado.
Visual Personalizado Para: Fim do prazo de visual personalizado.
Tema Personalizado: Pode estar selecionando o tema desejado.
Leiaute Personalizado: Pode estar inserindo a quantidade de colunas.
Leiaute Personalizado por XML: Ela permite adicionar, remover ou modificar elementos do layout usando instruções em XML, alterando a estrutura da página de forma dinâmica.

Meta Tags da Página

Próxima etapa estar inserindo Meta Tags.

Palavras-chave: São as palavras-chave que você gostaria de indexar. Separe cada palavra-chave com vírgula.
Descrição: Neste campo você preencherá a descrição da página que aparecerá no buscador do Google quando esse link for exibido, o tamanho ideal é de 140 caracteres.

Clicar ao canto superior direito no botão Salvar.

Está pronto gerenciamento da página Institucional!

Para estar aprendendo Como criar uma Nova Pagina clique AQUI!

Caso não tenha visto Como vincular Páginas no Rodapé, clique AQUI!

Caso não tenha visto Como vincular Páginas no Menu da Home, clique AQUI!


Nessa documentação vimos como você pode estar gerenciando a página institucional em sua loja virtual Magento 1 Mageshop.

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.

 

 

 

Páginas

Como inserir uma Página no Menu da Home - Magento 1

Nesta documentação, irei ensinar a você como inserir uma página criada na home de sua loja, na plataforma Mageshop em Magento 1.

Passo a passo em vídeo:

Passo a Passo Escrito:

Primeiramente acessar a Plataforma > CMS > Blocos Estáticos > Menu Principal Lado Direito (depois)

Após acessado, vamos ser redirecionados para outra tela, onde vai ser exibido o campo conteúdo.

No campo conteúdo, podemos observar alguns códigos HTML. Eles são responsáveis por fazer a inserção das páginas dentro da home, então para inserirmos mais uma página vamos seguir os seguintes passos.

Antes de iniciar as alterações, copie esse código HTML e cole no Bloco de Notas, para caso deseje descartar as alterações realizadas, possa voltar como estava.

Copiar o código HTML, e inserir a baixo, como no exemplo a baixo:

No exemplo a baixo, você pode estar copiando esse código, e alterando o redirecionamento (URLDAPAGINA) e o título apresentado (NOME DA PÁGINA), e em seguida estar colando a baixo dos códigos já inseridos.

<li class="level0 nav-1 institucional direita"><a href="{{config path="web/secure/base_url"}}URLDAPAGINA" class="level0"><div class="textoMenu"><div class="centerTextoMenu">NOME DA PÁGINA</div></div></a></li>

Próxima etapa, alterar o campo de redirecionamento, nesse caso o campo URL que inserimos foi "teste"(Esta página foi criada com essa URL), logo à direita temos o campo titulo, onde podemos estar inserindo um título que vai ser exibido na home. Veja o exemplo a baixo:

Após seguir esses passos vamos estar salvando.

Dica: Após esse processo, atualize o cache do Magento e recarregue seu navegador.

Acessando a loja, no Menu da Home, podemos ver que foi inserido a nossa página "Teste"

Caso não tenha visto Como Criar uma Página, clique AQUI e veja passo a passo como estar criando.

Caso não tenha visto Como vincular Páginas no Rodapé, clique AQUI e veja passo a passo como estar criando.

Nessa documentação vimos como você pode estar inserindo suas página na Home em sua loja virtual Magento 1 Mageshop.

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.

Páginas

Como Inserir uma Página no Rodapé da Loja - Magento 1

Nesta documentação, irei ensinar a você como inserir uma página criada no rodapé de sua loja, na plataforma Mageshop em Magento 1.

Passo a passo em vídeo:

Passo a Passo Escrito:

Primeiramente acessar a Plataforma > CMS > Blocos Estáticos > Menu Rodapé Links Editáveis

Após acessado, vamos ser redirecionados para outra tela, onde vai ser exibido o campo conteúdo.

No campo conteúdo, podemos observar alguns códigos HTML. Eles são responsáveis por fazer a inserção das páginas dentro do rodapé, então para inserirmos mais uma página vamos seguir os seguintes passos.

Antes de iniciar as alterações, vamos fazer um Backup, copie esse código HTML e cole no Bloco de Notas, para caso deseje descartar as alterações realizadas, possa voltar como estava.

Copiar o código HTML, e inserir a baixo, como no exemplo a baixo:

No exemplo a baixo, você pode estar copiando, e alterando o redirecionamento (URLDAPAGINA) e o título apresentado (NOME DA PÁGINA), e em seguida estar colando a baixo dos códigos já inseridos.

<li class="first"><a href="{{store url=""}}URLDAPAGINA" >NOME DA PÁGINA</a></li>

Próxima etapa, alterar o campo de redirecionamento, nesse caso o campo URL que inserimos foi "teste"(Esta página foi criada com essa URL), logo à direita temos o campo titulo, onde podemos estar inserindo um título que vai ser exibido no rodapé. Veja o exemplo a baixo:

Após seguir esses passos vamos estar salvando.

Dica: Após esse processo, atualize o cache do Magento e recarregue seu navegador.

Acessando a loja no Rodapé, podemos ver que foi inserido a nossa página "Teste"

Caso não tenha visto Como Criar uma Página, clique AQUI e veja passo a passo como estar criando.

Caso não tenha visto Como vincular Páginas no Menu da Home, clique AQUI e veja passo a passo como estar vinculando.

Nessa documentação vimos como você pode estar inserindo suas página no Rodapé em sua loja virtual Magento 1 Mageshop.

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.

Vá em CMS > Blocos Estáticos

image_11wzp7i.png

Logo após aparacerá esta tela:

image_1wkiywg.png

Vamos em "magemenu secoes" como exemplo

Atenção: Nunca use o botão Show / Hide Editor em blocos estáticos, ele altera toda linguagem em  HTML original

image_1c7ihe9.png


Para alterar algum texto que você queira bastar achar <span>texto de exemplo</span>. como na imagem abaixo:

image_cguyyh.png

Para colar alguma imagem basta encontrar onde está escrito: <img src= "{{media url="wysiwyg/...
Ali dentro você coloca sua imagem. Mas como faz isso? Muito simples!
Vamos ao final de todas essas linhas e vamos dar dois "enter" para dar um espaço entre as linhas e a imagem que vamos colocar, como na imagem a baixo:

image_vsngq9.png

Logo depois vamos em Inserir Imagem > Procurar Arquivos

image_1swomx8.png

É muito importante já ter a imagem salva no seu computador! Procure a imagem que você queira, clique sobre ela e vá em 'Abrir', logo depois vá no botão laranja escrito 'Enviar Arquivos'

image_npah8x.png


Agora que já temos a imagem que vamos utilizar dentro do magento, basta clicar sobre ela e logo após ir em 'Insserir Arquivos'

image_fdegcn.png

Perceba que a URL da imagem foi no espaço em branco que deixamos lá no final da página, agora nós vamos copiar essa URL. Toda ela? Não, apenas a parte que comça com 'wysiwyg/' e que termina com .png assim vamos ter a imagem que quermos bem certinha!

image_10r2qkq.png

Agora vamos colocar ela no lugar certo, veja no pequeno vídeo a seguir:

Agora volte lá onde você colocou a URL inicialmente, agora você pode apagar ele. E então teremos aquele espaço em branco novamente.
image_5ohfv5.png

Não esqueça de clicar em Salvar

Não esqueça de atualizar o CACHE

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.