DocumentaçãoCommerceIntrodução

Marca da loja

Last update: Sun Jul 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Tópicos:

Criado para:

  • Iniciante
  • Intermediário
  • Administrador
  • Líder
  • Usuário

Uma das primeiras coisas que você deseja fazer é alterar o logotipo no cabeçalho e carregar um favicon para o navegador. Em seguida, você deve adicionar a mensagem de boas-vindas e atualizar o aviso de direitos autorais no rodapé. Essas tarefas são alguns elementos de design simples que você pode realizar imediatamente. Enquanto sua loja está em desenvolvimento, você pode ativar o aviso de demonstração da loja e removê-lo quando estiver pronto para iniciar.

Elementos de marca da loja

Carregar seu logotipo

O tamanho e a localização do logotipo no cabeçalho são determinados pelo tema da loja. Seu logotipo pode ser salvo como um tipo de arquivo GIF, PNG ou JPG (JPEG) e carregado a partir do administrador da loja.

Logotipo no Cabeçalho

A imagem do logotipo reside no seguinte local no servidor. Qualquer arquivo de imagem com o nome logo.svg é usado como o logotipo de tema padrão.

Caminho completo - app/design/frontend/[vendor]/[theme]/web/images/logo.svg

Caminho relativo - images/logo.svg

Se você não souber o tamanho do logotipo ou de outras imagens usadas no tema, abra a página em um navegador, clique com o botão direito do mouse na imagem e inspecione o elemento.

NOTE
Além do logotipo no cabeçalho, seu logotipo também aparece em modelos de email e em faturas de PDF e outros documentos de vendas. Os logotipos usados para modelos de email e faturas têm requisitos de tamanho diferentes e devem ser carregados separadamente.

Formatos de arquivo de logotipo suportados:

Formato de arquivo
Descrição
PNG
(Portable Network Graphics) Essa alternativa mais recente para o formato GIF suporta até 16 milhões de cores (24 bits). O formato de compactação sem perdas produz uma imagem bitmap de alta qualidade com texto nítido, mas um tamanho de arquivo maior do que alguns formatos. O formato PNG é compatível com camadas transparentes e foi projetado para visualização e transmissão online.
GIF
(Graphics Interchange Format) Um formato de bitmap antigo e amplamente compatível que é limitado a 256 cores (8 bits). O formato GIF suporta animações simples e camadas transparentes.
JPG (JPEG)
(Joint Photographic Expert Group) Um formato de bitmap compactado usado pela maioria das câmeras digitais. A compactação com perdas causa alguma perda de dados, que às vezes é perceptível como pontos embaçados no texto.

  1. Na barra lateral Admin, vá para Content > Design>Configuration.

    Página Configuração de Design {width="700"}

  2. Localize a exibição de armazenamento que você deseja configurar e clique em Edit na coluna Action.

  3. Expandir Seletor de expansão a seção Header.

    Configurações de cabeçalho {width="600"}

  4. Para carregar um novo logotipo, clique em Upload e escolha o arquivo no seu sistema.

  5. Insira o Logo Image Width e Logo Image Height em pixels.

  6. Para Logo Image Alt, insira o texto que você deseja que apareça quando alguém passar o mouse sobre a imagem.

  7. Quando terminar, clique em Save Configuration.

Adicionar um favicon

Favicon é a abreviação de ícone favorito e se refere ao pequeno ícone na guia de cada página do navegador. Dependendo do navegador, o favicon também aparece na barra de endereços, antes do URL.

Um favicon geralmente tem 16 x 16 pixels ou 32 x 32 pixels de tamanho. Commerce aceita os tipos de arquivos ICO, PNG, APNG, GIF e JPG (JPEG), embora nem todos os navegadores sejam compatíveis com esses formatos. O formato de arquivo mais amplamente suportado para usar em um favicon é ICO. Você pode usar outros tipos de arquivo de imagem, mas o formato pode não ser compatível com todos os navegadores. Há muitas ferramentas gratuitas disponíveis on-line que você pode usar para gerar uma imagem ICO ou converter uma imagem para esse formato.

Favicon na guia do navegador

Commerce oferece suporte aos seguintes formatos de arquivo como favicon:

Formato de arquivo
Descrição
ICO
Este formato de arquivo de imagem foi projetado para imagens de ícones de computadores de pequeno porte. Usado principalmente no sistema operacional Microsoft® Windows, o formato ICO pode conter imagens de até 256 x 256 pixels e 16 milhões de cores (24 bits) com 8 bits de transparência.
PNG
(Portable Network Graphics) Essa alternativa mais recente para o formato GIF suporta até 16 milhões de cores (24 bits). O formato de compactação sem perdas produz uma imagem bitmap de alta qualidade com texto nítido, mas um tamanho de arquivo maior do que alguns formatos. O formato PNG é compatível com camadas transparentes e foi projetado para visualização e transmissão online.
APNG
(Animated Portable Network Graphics) Um formato de arquivo semelhante ao PNG que suporta animação simples.
GIF
(Graphics Interchange Format) Um formato de bitmap antigo e amplamente compatível que é limitado a 256 cores (8 bits). O formato GIF suporta animações simples e camadas transparentes.
JPG (JPEG)
(Joint Photographic Expert Group) Um formato de bitmap compactado usado pela maioria das câmeras digitais. A compactação com perdas causa alguma perda de dados, que às vezes é perceptível como pontos embaçados no texto.

Etapa 1: criar um favicon

  1. Usando o editor de imagens de sua escolha, crie uma imagem gráfica do seu logotipo 16 x 16 ou 32 x 32.

  2. (Opcional) Use uma das ferramentas online disponíveis para converter o arquivo para o formato .ico e salve-o no computador.

Etapa 2: Fazer upload do favicon para sua loja

  1. Na barra lateral Admin, vá para Content > Design>Configuration.

  2. Na grade, localize o modo de exibição de armazenamento que você deseja configurar e clique em Edit na coluna Action.

  3. Em Other Settings, expanda Seletor de expansão a seção HTML Head.

    Configurações do Cabeçalho de HTML {width="600"}

  4. Para remover o favicon atual, clique no ícone Excluir ( Lixeira ) no canto inferior esquerdo da imagem.

  5. Clique em Upload e abra o arquivo favicon preparado.

    Favicon carregado {width="400"}

  6. Quando terminar, clique em Save Configuration.

Etapa 3: atualizar o cache

  1. Quando solicitado a atualizar o cache, clique no link Cache Management na mensagem na parte superior do espaço de trabalho.

  2. Na lista, marque a caixa de seleção Page Cache marcada como Invalidated.

  3. Defina Actions como Refresh e clique em Submit.

  4. Para exibir o novo favicon, retorne à loja e atualize o navegador.

Alterar a mensagem de boas-vindas

A mensagem de boas-vindas no cabeçalho é expandida para incluir o nome do cliente que está conectado. Antes de iniciar a loja, altere o texto padrão Bem-vindo para cada exibição de loja.

Mensagem de boas-vindas

  1. Na barra lateral Admin, vá para Content > Design>Configuration.

  2. Na grade, localize o modo de exibição de armazenamento que você deseja configurar e clique em Edit na coluna Action.

  3. Em Other Settings, expanda Seletor de expansão a seção Header.

  4. Para Welcome Text, insira o texto da mensagem de boas-vindas que você deseja que apareça no cabeçalho do armazenamento.

    Configurações de cabeçalho {width="600"}

  5. Quando terminar, clique em Save Configuration.

  6. Quando solicitado a atualizar o Cache de Página, clique no link Cache Management na parte superior do espaço de trabalho e siga as instruções para atualizar o cache.

A loja exibe um aviso de copyright no rodapé de cada página. Como prática recomendada, o aviso de copyright deve incluir o ano atual e identificar sua empresa como o proprietário legal do conteúdo no site.

Exemplo de aviso de direitos autorais

O código de caractere © é usado para inserir o símbolo de copyright, conforme mostrado nos exemplos a seguir:

  • Exemplo de formato longo

    Copyright © 2013-present Luma, Inc. All rights reserved.

  • Exemplo de formato curto

    © 2021 Luma, Inc. All rights reserved.

Para atualizar o aviso de direitos autorais:

  1. Na barra lateral Admin, vá para Content > Design>Configuration.

  2. Na grade, localize o modo de exibição de armazenamento que você deseja configurar e clique em Edit na coluna Action.

  3. Em Outras Configurações, expanda Seletor de expansão a seção Footer.

    Configurações de design do rodapé {width="600"}

  4. Para Copyright, insira o aviso de direitos autorais que você deseja exibir no rodapé de cada página.

    Use o código de caractere © para inserir um símbolo de copyright.

  5. Quando terminar, clique em Save Configuration.

Definir o aviso de demonstração da loja

Se sua loja estiver online, mas ainda em construção, você pode exibir um aviso de demonstração da loja na parte superior da página para que as pessoas saibam que a loja ainda não está aberta para negócios. Quando estiver pronto para ativar, basta remover a mensagem. É semelhante a virar o sinal pendurado na janela de Fechado para Aberto. O formato do aviso de demonstração é determinado pelo tema da sua loja.

Aviso de demonstração da vitrine

  1. Na barra lateral Admin, vá para Content > Design>Configuration.

  2. Na grade, localize o modo de exibição de armazenamento que você deseja configurar e clique em Edit na coluna Action.

  3. Em Other Settings, expanda Seletor de expansão a seção HTML Head.

    Cabeçalho do HTML {width="600"}

  4. Role para baixo até a parte inferior e defina o Display Demo Store Notice de acordo com sua preferência.

  5. Quando terminar, clique em Save Configuration.

  6. Se for solicitado que você atualize o cache, clique em Cache Management na mensagem do sistema e siga as instruções para atualizar o cache.

recommendation-more-help
31746fd0-1ead-45b5-9192-1aaf582c5f66