Esta página

Design da loja

Neste procedimento iremos alterar o tema que sua loja virtual Magento irá usar, bem como o favicon e as logos para a loja virtual e envio de email.

Selecionando o tema

  1. Faça login no seu painel administrativo do Magento;

  2. Na barra de navegação esquerda, acesse Conteúdo > Design > Configuração;

  3. Selecione a Visão de loja na lista lojas e clique em Alterar;

design-1

  1. Na seção Tema Pré-definido, informe o tema na caixa de listagem Tema Aplicado;

design-2

  1. Na seção Cabeçalho HTML, informe o favicon;

design-3

  1. Clique em Salvar e continuar.

Olhe na barra de título do navegador. Sua marca aparece no início da seção.

Alterando a logo da loja

Por razões de segurança o Magento retirou o suporte a uploads de arquivos com extensão .svg através do painel administrativo da loja.

As imagens no formato .svg têm melhor nitidez e ficam perfeitas quando visualizadas em diferentes dispositivos, seja desktop, tablet ou mobile. Dê preferência a imagens .svg para a logo da sua loja.

  1. Na seção Cabeçalho, faça upload da logo da loja se a extensão for diferente de .svg;

  2. Se a extensão for .svg, mude o nome para logo.svg e faça upload no servidor, na pasta [Magento]/pub/static/frontend/[Company]/[theme]/[language]/. O Magento irá reconhecê-la automaticamente.

Alterando o favicon da loja

Em todos os templates que disponibilizamos são inseridas as seguintes entradas no head para que o navegador exiba o Favicon mais apropriado aos diferentes navegadores e dispositivos.

Chave Valor
apple-touch-icon icons/apple-touch-icon.png
icon icons/favicon-32x32.png
icon icons/favicon-16x16.png
mask-icon icons/safari-pinned-tab.svg
manifest icons/site.webmanifest
msapplication-TileColor #da532c
theme-color #FFF

Vamos gerar o Favicon para todas os browsers e plataformas usando o RealFaviconGenerator.

  1. Acesse o site RealFaviconGenerator;

  2. Clique no botão Select your Favicon image;

  3. Informe uma imagem para gerar o Favicon, dê preferência para a extensão .svg;

  4. Será apresentada uma tela de resultados para diferentes navegadores e plataformas. Rola a página e clique no botão Generate your Favicons and HTML code;

  5. Aguarde gerar as imagens, faça downloads dos arquivos clicando no botão Favicon package;

  6. Extraia os arquivos, faça upload obdecendo os caminhos da tabela:

Arquivo Caminho
favicon.ico [Magento]/pub/static/frontend/[Company]/[theme]/[language]/
Outros [Magento]/pub/static/frontend/[Company]/[theme]/[language]/icons

Inclusive os arquivos browserconfig.xml e site.webmanifest.

Será necessário fazer upload dos arquivos sempre que o template tiver sua versão incrementada ao ser atualizado.