Info
Content

Editor de Cores e Fontes - Para Modelo Novo do painel administrativo - Signashop

 

Este tutorial se refere ao Modelo Novo do layout. Para acessar o tutorial do Modelo Antigo, Clique aqui. 

Com este editor altere o cabeçalho de sua loja, edite as cores, crie o rodapé, altere as cores do rodapé, mensagens de alerta e entre outras funções. Tudo em um só lugar.

 

Para configurar em sua loja siga os passos abaixo:

  1. CMS >> Conteúdo & Layout > Gerenciar Temas

 

Geral { Configurações }

  1. Na guia Geral { Configurações } em Utilizar cores personalizadas? deixe como "sim" para que possa configurar as cores da sua loja. Deixando como "não", a loja volta às cores padrão do tema.
  2. No campo Nome do Tema informe um nome para o seu tema, podendo haver mais de um configurado.
  3. Em Fontes do Google marque sim para utilizar as fonts do google
  4. Configure as Fontes conforme desejar.
  5. Em Menu no campo Profundidade do Menu indique a quantidade de subcategorias que o menu poderá ter.
  6. No campo Exibir a categoria principal no submenu com essa função ativa irá listar uma subcategoria para exibição de todos os produtos vinculados a ela.

 

 

Geral { Cores }

  1. Em Cor de fundo altere a cor da área principal da loja
  2. Imagem de Fundo escolha uma imagem de fundo da loja
  3. Títulos altera a cor para todos os títulos do cabeçalho
  4. Ícones altera a cor de todos os ícones da loja
  5. Formulários - Borda altera a cor da borda de todos os formulários
  6. Formulários - Label altera a cor da label de todos os formulários
  7. Listagem - Nome do produto Hover cor do texto quando o ponteiro do mouse está sobreposto a ele
  8. Listagem - Nome do produto altera a cor do nome do produto
  9. Subtítulos altera a cor do de todos os subtítulos
  10. Texto altera a cor de todos os textos
  11. Links Hover altera cor do texto do link quando o ponteiro do mouse está sobreposto a ele
  12. Links altera a cor de todos os links

 

  

Cabeçalho { Configurações }

01. Em Exibir botão logar? deixe como "Sim". 

02. Em Escolha o modelo selecione o modelo desejado clicando sobre ele.

03. Em Exibir boas-vindas mantenha habilitado para exibir a mensagem de boas-vindas no cabeçalho da sua loja

04. E em Mensagem escreva a mensagem de boas vindas que quiser exibir no cabeçalho.

05. Em Exibir Menu do topo personalizado, alterando para sim irá exibir uma opção logo abaixo para adicionar links ao topo do menu:

 

  • No campo Links clique em Adicionar Link
  • No campo Texto informe o texto a exibir no menu. Obs: neste campo você pode trabalhar também com a Font Awesome
  • Em Descrição informe a descrição
  • Em Url configure a url de destino para o menu
  • Em Direção você escolhe o posicionamento do menu no topo, podendo ser a esquerda ou direta
  • Em Abrir em nova aba selecione sim para abrir em uma nova aba ou não para se manter na atual

06. Na guia Logotipo em Envie seu logo * clique em Escolher arquivo e selecione a sua logotipo

07. Na guia Ícone favicon clique em Escolher arquivo e selecione uma imagem para visualizar pelo navegador. Obs: tamanho recomendado 16x16

08. Em Logo dos e-mails selecione o logo quer será exibido nos e-mails transacionais

09. Na guia Selos de benefícios altere para sim para criar selos de benefícios

  • Após alterar para sim irá habilitar o campo Benefícios logo abaixo
  • Escolha um ícone e no campo Texto e informe a descrição do selo

 

 

Cabeçalho { Cores }

  1. Na guia Cores da faixa superior são as cores da primeira faixa superior
  2. Em Texto altere a cor dos textos desta faixa
  3. Ícones escolha a cor desejada para os ícones da faixa
  4. em Links altera a cor dos links na faixa
  5. em Links hover altera cor do link quando o ponteiro do mouse está sobreposto a ele
  6. Borda altera a cor da borda
  7. Em Tipo de Borda temos 4 tipos para a escolha, selecione um
  • Sem borda
  • Sólida
  • Pontilhada
  • Tracejada

 

  • Em Espessura da borda defina o tamanho da espessura (ex: 2px)
  • No campo Cor de fundo defina uma cor para o fundo da faixa superior
  • Na guia Cores do cabeçalho  no campo Texto altera a cor do texto do cabeçalho
  • Links altera a cor dos links para o cabeçalho
  • Links hover altera a cor dos links quando o ponteiro do mouse está sobreposto a ele
  • No campo Títulos altera a cor de todos os títulos do cabeçalho
  • Cor de Fundo altera a cor de fundo do cabeçalho
  • Na guia Cores do Menu  no campo Links e texto informe a cor para todos os links e textos do menu
  • hover de links altera a cor do texto quando o ponteiro do mouse está sobreposto a ele no menu
  • em Links submenus altera a cor dos links para os submenus
  • em Cor de fundo altera a cor de fundo do menu
  • no campo Cor de fundo hover altera a cor de fundo do item do menu quando o ponteiro do mouse está sobreposto a ele
  • Borda altera a cor da borda do menu
  • Em Tipo de Borda temos 4 tipos para a escolha, selecione um

 

  • Sem borda
  • Sólida
  • Pontilhada
  • Tracejada

 

  • Em Espessura da borda defina o tamanho da espessura (ex: 2px)

 

 

 

Categorias { Configurações }

  1. Configurações de Categorias
  2. Em Usar menu de Subcategorias ao ativar este recurso ele exibe uma navegação da categoria ativa, com todas as suas respectivas subcategorias
  3. Agrupar filtros o menu de filtros exibe uma lista atributos compatíveis com os produtos listados, através dele seu cliente consegue chegar mais facilmente ao produto desejado. Ao optar por agrupar os atributos, você terá maior flexibilidade para diagramar a forma como o filtro é exibido ao seu cliente.
  4. Em Repetir o menu completo de categorias abaixo dos filtros ao ativar o recurso exibe uma navegação completa das categorias da loja.
  5. No campo Ativar reordenação dos produtos esgotados ativando esta opção, os produtos esgotados na sua loja serão colocados no fim da lista, quando houver paginação na categoria, eles aparecerão nas últimas páginas

 

Rodapé { Configurações }

  1. Modelo de Rodapé selecione o modelo

  2. Newsletter ativa o bloco de newsletter no rodapé da loja

  • Em Ícone você pode adicionar o ícone de sua preferência, para isso acesse o site Font Awesome, selecione o ícone desejado e copie o trecho entre as tags <i> </i> e adicione ao campo Ícone.  
  • Título informe o título que irá aparecer no bloco
  • Mensagem será exibida uma mensagem abaixo do títuloEm Url confi

 

  • Na guia Sessões são as colunas exibidas no rodapé da loja, de 1 à 5.
  • Links permite criar links para o rodapé da sua loja.
  • ATENÇÃO: Apenas é possível distribuir os links entre as colunas 1 e 4, a coluna 5 está reservada para outras informações de contato.

 

  • No campo Links clique em Adicionar Link
  • No campo Texto informe o texto a exibir no menu. Obs: neste campo você pode trabalhar também com a Font Awesome
  • Em Descrição informe a descrição
  • Em Url configure a url de destino para o menu
  • Coluna selecione a coluna onde será exibido o link
  • Em Abrir em nova aba selecione sim para abrir em uma nova aba ou não para se manter na atual
  • Na coluna 5 o conteúdo é específico para as informações da empresa, contato e plugin do facebook por exemplo. Caso não queira adicionar nenhum conteúdo personalizado, o padrão configurado em Sistema > Configuração > Geral > Geral > Informações Sobre a Loja, será aplicado. 

 

  • Na guia Ícones de pagamento escolha os métodos de pagamento aceitos em sua loja.
  • Em Métodos de pagamento selecione as bandeiras (segure pressionado CTRL para selecionar múltiplas bandeiras)
  • Na guia Ícones de entrega escolha os métodos de entrega aceitos em sua loja.
  • Em Métodos de entrega seleciona os meios de entrega (segure pressionado CTRL para selecionar múltiplas bandeiras)
  • Na guia Selos de segurança você deve inserir o script fornecido pela empresa do selo contratado. 

 

 

 

Rodapé { Cores }

  1. Em Cores da newsletter no campo texto altera a cor do texto informado
  2. No campo ícone altera a cor do ícone ao lado
  3. Botão texto altera a cor do texto no botão
  4. Botão - texto hover altera a cor do texto quando o ponteiro do mouse está sobreposto a ele
  5. Botão - Cor de fundo altera a cor de fundo do botão
  6. Botão - Cor de fundo hover altera a cor de fundo quando o ponteiro do mouse está sobreposto a ele
  7. Em borda altera a cor de borda do bloco
  8. Em Tipo de Borda temos 4 tipos para a escolha, selecione um
  • Sem borda
  • Sólida
  • Pontilhada
  • Tracejada

 

  • Em Espessura da borda defina o tamanho da espessura (ex: 2px)
  • Em Cor de fundo altera a cor de fundo do bloco todo
  • Na guia Cores do rodapé no campo texto altera a cor dos textos no rodapé
  • em Links altera a cor dos links no rodapé
  • em Links hover altera cor do link no rodapé quando o ponteiro do mouse está sobreposto a ele
  • Títulos altera a cor de todos os títulos do rodapé
  • Cor de fundo altera a cor de fundo para o rodapé

 

 

Botões { Cores }

  1. Na guia Cores dos botões você pode alterar a cor de todos os botões da loja
  2. Botões de ação da listagem - texto altera a cor do do texto dos botões na listagem dos produtos
  3. Botões de ação da listagem - texto hover altera a cor do texto do elemento quando o ponteiro do mouse está sobreposto a ele.
  4. Botões de ação da listagem - Cor de fundo altera a cor de fundo dos botões da listagem dos produtos
  5. Botões de ação da listagem - Cor de fundo hover altera a cor de fundo do elemento quando o ponteiro do mouse está sobreposto a ele
  6. Botões em geral - texto altera a cor de texto dos botões em geral
  7. Botões em geral - texto hover altera a cor de texto do elemento quando o ponteiro do mouse está sobreposto a ele
  8. Botões em geral - Cor de fundo altera a cor de fundo dos botões em geral
  9. Botões em geral - Cor de fundo hover altera a cor de fundo do elemento quando o ponteiro do mouse está sobreposto a ele
  10. Botões de ação (página do produto/carrinho/checkout) - Texto altera a cor de texto dos botões no checkout
  11. Botões de ação (página do produto/carrinho/checkout) - Texto hover altera a cor de texto do elemento quando o ponteiro do mouse está sobreposto a ele no checkout
  12. Botões de ação (página do produto/carrinho/checkout) - Cor de fundo altera a cor de fundo do texto nos botões do checkout
  13. Botões de ação (página do produto/carrinho/checkout) - Cor de fundo hover altera a cor de fundo do elemento quando o ponteiro do mouse está sobreposto a ele no checkout

 

 

Preços { Cores }

  1. Na guia Cores em geral altera as cores do preço inicial, preço final, label de preço inicial e label de preço final

 

 

Mensagens de alerta { Cores }

  1. Nesta guia de Cores em geral para as mensagens você pode alterar a cor de todas as mensagens de alerta que são exibidas em sua loja, mensagem de sucesso, erro e mensagens de aviso podendo alterar a cor de texto, borda e cor de fundo   

 

 

Editor Avançado { CSS }

  1. Habilite o campo CSS Personalizado para aplicar a sua personalização de layout através do CSS

 

 

Editor Avançado { HTML }

  1. Habilite o campo HTML Personalizado para aplicar a sua personalização de layout através do HTML

  2.

 

 

Salve todas as alterações.

OBS:  Para que as alterações sejam aplicadas, após clicar em salvar, é necessária a limpeza de Cache e Índices. Para ver como fazer, Clique aqui.

 

 

 

Back to top