Customização de Interface - Página Inicial

Customização de Interface - Página Inicial
Sumário
1.
Logo ......................................................................................................................................................................4
1.1.
2.
3.
4.
5.
6.
7.
Inputs - formulários ..............................................................................................................................................4
2.1.
Busca .............................................................................................................................................................4
2.2.
Novidades .....................................................................................................................................................4
Fontes ...................................................................................................................................................................5
3.1.
Cores (color) .................................................................................................................................................5
3.2.
Tamanho (font-size)......................................................................................................................................5
3.3.
Tipo (font-family) ..........................................................................................................................................6
3.4.
Edição ...........................................................................................................................................................7
Meios de pagamento ............................................................................................................................................7
4.1.
Pagamentos a vista .......................................................................................................................................7
4.2.
Pagamentos a prazo .....................................................................................................................................7
4.3.
Edição ...........................................................................................................................................................7
Banners .................................................................................................................................................................7
5.1.
Banner Home ................................................................................................................................................8
5.2.
Banner Galeria ..............................................................................................................................................8
5.3.
Banner Vitrine ..............................................................................................................................................9
5.4.
Banner Lateral ..............................................................................................................................................9
5.5.
Banner Baixo.................................................................................................................................................9
5.6.
Banner Rodapé ...........................................................................................................................................10
5.7.
Edição .........................................................................................................................................................10
Menu categoria...................................................................................................................................................10
6.1.
Menu categoria fechado ............................................................................................................................10
6.2.
Menu categoria aberto...............................................................................................................................11
6.3.
Edição .........................................................................................................................................................11
Novidades (newsletter) ......................................................................................................................................12
7.1.
8.
Edição ...........................................................................................................................................................4
Edição .........................................................................................................................................................12
Atendimento online (chat) .................................................................................................................................13
9.
Produtos (foto, nome e preço) ...........................................................................................................................13
9.1.
Foto .............................................................................................................................................................14
9.2.
Nome do produto .......................................................................................................................................14
9.3.
Preço e parcelamento.................................................................................................................................15
10.
Botões .............................................................................................................................................................15
10.1.
Botões do tema.......................................................................................................................................15
10.2.
Botões da loja .........................................................................................................................................15
11.
Dados dinâmicos (tel., e-mail, outros)............................................................................................................16
12.
Redes sociais ...................................................................................................................................................16
12.1.
Facebook.................................................................................................................................................16
12.2.
Twitter ....................................................................................................................................................16
13.
Meu carrinho ..................................................................................................................................................17
14.
Selos ................................................................................................................................................................17
14.1.
Loja protegida .........................................................................................................................................17
14.2.
E-bit .........................................................................................................................................................17
15.
Extensões ........................................................................................................................................................17
16.
IDs e Classes ....................................................................................................................................................18
1. Logo
A logo da loja virtual será inserida apenas no cabeçalho da loja. Este elemento poderá ser configurado pelo painel
administrativo na guia Marca.
A logo poderá ser salva em jpg ou png.
Sua proporção máxima será de 250 pixels de largura e 74 pixels de altura.
1.1. Edição
Para edição deste item pode ser usada a guia EDITOR CSS e modificar a classe .logotipo.
2. Inputs - formulários
Os inputs utilizados nos temas usam a mesma dimensão em sua altura, criando uma padronização desta
informação. Sua utilização dentro dos temas serão para os campos de busca e cadastro de newsletter.
A fonte utilizada para este elemento também deve ser uma padrão dos sistemas operacionais (principalmente
para SO Windows), pois este item será considerado como um elemento dinâmico. Mais informações no tópico
Fontes.
A label dos inputs não poderá ser modificada.
2.1. Busca
A fonte utilizada e formato do input também podem ser alterados pelo Editor CSS utilizando a classe.caixa-busca
label. Há outra classe específica para o ícone .icon-busca.
2.2. Novidades
A fonte utilizada e formato do input também podem ser alterados pelo Editor CSS utilizando a classe.news-email.
3. Fontes
Todos os elementos que serão utilizados do banco de dados ou que haverá entrada de informações, tais como os
citados abaixo, deverão seguir utilizando como fonte padrão dos Sistemas Operacionais.
• formulários
• menus de categorias
• nome e preço dos produtos
• textos dos temas - login e cadastre-se
• carrinho de compras
• entre outros
Estes elementos não podem ser gerados como imagens, por isso a necessidade de mante-los como texto dentro
da criação do layout.
3.1. Cores (color)
Procure utilizar um padrão de cor para link e outro para textos, assim você conseguirá criar uma identidade padrão
que irá ajudar o seu usuário a identificar as ações dentro da loja virtual.
Para a configuração do layout personalizado será utilizado o padrão de cores RGB.
3.2. Tamanho (font-size)
Utilize em todas as fontes da loja fontes maiores do que 9 pixels. Fontes menores do que este tamanho irá
prejudicar a leitura de seu consumidor dos ítens oferecidos em sua loja. Não utilize tamanhos muito maiores, pois
é preciso ter uma coerência entre a arte desenvolvida e seu público alvo.
Ainda neste tópico, utilize fontes com valores inteiros como 10 ou 11 pixels. Não utilize fonte com valores
"quebrados" como 10,54 pixels ou 11,23 pixels.
3.3. Tipo (font-family)
As fontes devem seguir uma regra para que seja possível ser visualizada sem a instalação de fontes adicionais.
Neste caso pegamos como premissa o Sistema Operacional Windows.
Abaixo uma lista de fontes que podem ser usadas, tanto para SO Windows quanto para Mac.
Windows (Sans-serif):
Mac (Sans-serif):
• Verdana
• Helvetica
• Tahoma
• Geneva
• Arial
• Lucida Grande
• Trebuchet MS
• Arial
• Lucida Sans Unicode
• Verdana
• Franklin Gothic Medium
• Helvetica Neue
• Calibri
• Trebuchet MS
• Candara
• Gill Sans
• Gill Sans MT
• Futura
• Segoe UI
• Optima
Windows (Serif):
Mac (Serif):
• Georgia
• Times
• Times New Roman
• Georgia
• Palatino Linotype
• Times New Roman
• Book Antiqua
• Hoefler Text
• Garamond
• Baskerville
• Cambria
• Didot
• Constantia
• Big Caslon
• Goudy Old Style
• Palatino
• Baskerville Old Face
• Lucida Bright
• Bodoni MT
• Garamond
3.4. Edição
Para edição deste item pode ser usada a guia EDITOR CSS e modificar a classe body. Outras fontes e
elementos desejáveis podem ser verificados a classe inspecionando o elemento diretamente na loja virtual.
4. Meios de pagamento
Para a utilização do meio de pagamento deverá ser utilizada as bandeiras abaixo, no mesmo tamanho e formato.
Elas serão utilizadas através do sistema Tray, não sendo necessário gerar novas imagens debandeiras de
pagamento.
Ao habilitar ou desabilitar uma nova forma de pagamento, automaticamente ela irá ser inclusa no local das demais
bandeiras no rodapé da loja virtual.
* É importante que seja feito um planejamento da loja virtual com antecipação para que seja ilustrada as bandeiras
que serão utilizadas, pois caso seja inserida novas bandeiras, pode haver uma quebra de estrutura no local da
ilustração.
4.1. Pagamentos a vista
As bandeiras abaixo serão inseridas dentro do bloco de informação para pagamento a vista.
4.2. Pagamentos a prazo
As bandeiras abaixo serão inseridas dentro do bloco de informação para pagamento a prazo.
4.3. Edição
Para edição deste item pode ser usada a guia EDITOR CSS e modificar a classe .formas-pagamento.
5. Banners
A utilização dos banners seguirá um posicionamento padrão para os elementos. Abaixo segue a lista de banner
disponível e seu posicionamento dentro da loja virtual.
5.1. Banner Home
Utilizado em todas as páginas do sistema abaixo do cabeçalho.
5.2. Banner Galeria
Utilizado apenas na página inicial (dentro da vitrine) entre o cabeçalho e o banner home.
5.3. Banner Vitrine
Utilizado apenas na página inicial (dentro da vitrine) entre o banner galeria e a vitrine.
5.4. Banner Lateral
Utilizado na lateral da loja abaixo do cadastro de newsletter.
5.5. Banner Baixo
Utilizado em todas as páginas entre a vitrine e o rodapé.
5.6. Banner Rodapé
Utilizado em todas as páginas abaixo do rodapé.
5.7. Edição
A edição dos banners neste caso será feita através do painel administrativo. Caso queira inserir alguma cor de
fundo ou espaçamento no banner poderá inspecionar o elemento e editar a classe no EDITOR CSS dentro do
tema. Exemplo .header-banner.
6. Menu categoria
Há duas opções para o menu de categorias da loja virtual. Esta escolha será realizada de acordo com o tema
escolhido para configuração do layout.
6.1. Menu categoria fechado
Será exibida apenas as categorias principais da loja na lateral esquerda. Ao clicar no ícone representado como
uma seta para baixo será possível a visualização das demais subcategorias.
6.2. Menu categoria aberto
Serão exibidas as categorias principais e as subcategorias da loja na lateral esquerda já de forma aberta, sem a
necessidade de o usuário clicar em algum ícone para sua visualização.
6.3. Edição
Para edição deste item pode ser usada a guia EDITOR CSS e modificar a classe .menu-esquerdo h3. Outras
fontes e elementos desejáveis pode ser verificado a classe inspecionando o elemento diretamente na loja virtual.
7. Novidades (newsletter)
A opção de cadastro para o recebimento de newsletter será feita usando apenas o campo de e-mail para o
usuário. O input e botão permanecerão com o mesmo texto.
O modelo de cadastro e mensagem de confirmação seguirá o padrão da plataforma Tray.
7.1. Edição
Para edição deste item pode ser usada a guia EDITOR CSS e modificar a classe .news. Outras fontes e
elementos desejáveis pode ser verificado a classe inspecionando o elemento diretamente na loja virtual.
8. Atendimento online (chat)
O atendimento online será inserido acima do menu de categorias da loja ou de acordo com o script contratado e
inserido no painel administrativo.
É importante que este item seja feita sua versão Online e Offline das imagens.
* Será de responsabilidade do lojista cadastrar as imagens no sistema da empresa contratada para gerenciar o
serviço de atendimento online.
9. Produtos (foto, nome e preço)
A configuração passada neste item refere-se apenas a vitrine da loja virtual.
9.1. Foto
O padrão de imagem a ser exibida na vitrine da loja será de 180 x 180 pixels. Caso queira diminuir este tamanho o
mesmo poderá ser feito através do EDITOR CSS do tema usando a classe .vitrine-geral img.
Não será possível aumentar o tamanho da imagem, tendo em vista que esta é a maior imagem gerada para
utilização dentro da loja virtual. Após esta imagem somente será exibida a imagem original dentro da página do
produto.
9.2. Nome do produto
Será exibido o nome do produto logo abaixo de sua respectiva foto. Para a vitrine da loja haverá um limitador de
caracteres (até 100 caracteres) por produto.
A personalização da fonte do nome do produto também poderá ser feita dentro dos temas na guia EDITOR CSS
avançado utilizando a classe vitrine-nome.
9.3. Preço e parcelamento
As informações de parcelamento somente serão exibidas caso existir alguma forma de pagamento parcelado
disponível no painel administrativo e esta esteja habilitada para visualização.
Será possível a personalização da cor exibida nos valores (demais informações seguem padrão do sistema)
através da guia EDITOR CSS utilizando a classe .vitrine-parcela. Outras fontes e elementos desejáveis pode ser
verificado a classe inspecionando o elemento diretamente na loja virtual.
10.
Botões
Há dois tipos de botões dentro do layout da loja virtual. Botões do tema e botões da loja.
10.1. Botões do tema
Os botões do tema estão associados principalmente aos botões do layout personalizado. Nos temas podemos vêlos ao lado do input de busca com o nome de BUSCAR e abaixo do input de cadastro de newsletter com o nome
de CADASTRO.
Para mudar as cores dos botões basta entrar dentro da personalização do tema e escolher uma das sugestões
pré formatadas ou pode ir na guia EDITOR CSS e modificar a classe .busca-botao e .news-botao.
O texto (nome) dos botões não podem ser alterados.
10.2. Botões da loja
Os botões da loja podem ser modificados diretamente no painel administrativo. Este não influenciará nas cores e
tema já escolhido para loja virtual.
Sua atualização poderá ser feita utilizando imagens em png e jpg.
A lista completa dos botões que podem ser personalizados poderá ser encontrada diretamente no painel
administrativo da loja virtual.
11.
Dados dinâmicos (tel., e-mail, outros)
Os dados dinâmicos do layout todos deverão ser utilizados com fontes padrões. Essa necessidade é para que o
conteúdo continue como texto e possa ser atualizado diretamente pelo lojista através de seu painel administrativo.
Alguns elementos que são utilizados como texto de forma dinâmica:
• saudação "olá visitante" e itens como cadastre-se e acesse sua conta;
• inputs de busca e newsletter;
• botões padrões dos temas;
• item e valor do carrinho;
• categorias e subcategorias do menu lateral;
• nome e valores dos produtos;
• links institucionais do rodapé;
• títulos das colunas no rodapé;
• telefone, e-mail e horário de atendimento.
12.
Redes sociais
As redes sociais serão inseridas de forma automática no rodapé da loja, basta apenas preencher o campo
corretamente em seu painel administrativo.
Seu posicionamento e imagem serão padrões conforme exemplo abaixo. No momento estão disponíveis as
seguintes redes sociais:
12.1. Facebook
12.2. Twitter
13.
Meu carrinho
As informações contidas no elemento meu carrinho no cabeçalho da loja serão dinamicas, ou seja, a cada produto
inserido no carrinho de compras esta informação irá modificar automaticamente.
Neste espaço haverá 2 informações, a de quantidade de produtos e o valor da compra dos produtos.
O título e ícone do carrinho podem ser modificados alterando dentro da guia EDITOR CSS as classes.carrinhodescricao e .icon-carrinho.
14.
Selos
Alguns selos padrões poderão ser inseridos no rodapé da loja. Verificar em relação a sua contratação e / ou
configuração em seu painel administrativo.
14.1. Loja protegida
Localizado no rodapé da loja possui tamanho padrão de 130 × 38 pixels.
14.2. E-bit
Localizado no rodapé da loja possui tamanho padrão de 89 × 94 pixels.
15.
Extensões
As extensões podem ser contratados para as lojas virtuais. Verifique se seu plano atual permite a
configuração de extensões.
Para estas extensões não serão permitidas a personalização de seu wireframe e visualização, pois seguem o
padrão da plataforma.
* Extensões que necessitam de mudança de layout serão possíveis sua implantação apenas para lojistas que
possuam layout personalizado. Na utilização do tema não será possível sua configuração.
16.
IDs e Classes
Abaixo segue um quadro com as principais classes encontradas nos temas para que possam ser utilizadas na
personalização de seu layout.
Todas elas podem ser sobrescritas através da edição do CSS dentro do tema escolhido.
/* classe com id do tema */
.theme-4
Classe dentro da tag BODY.
/* envoltório principal */
.wrapper
Bloco que envolve todo conteúdo após abertura da tag BODY.
Cabeçalho
#NavSuperior
Elemento que envolve todo o cabeçalho.
/* logotipo */
.logotipo
Personalizar espaçamentos ou background no logo fora da imagem
principal (troca do logo através do painel administrativo).
/* Saudação e menus */
.nav-cliente
Bloco de informações de saudação acima do Carrinho. Possibilidade de
personalizar cores e mudança de posicionamento do elemento.
.nav-logado
Personalizar bloco quando o usuário fez login.
.nav-deslogado
Personalizar bloco quando o usuário ainda não fez login.
/* Carrinho de compras */
.carrinho-compras
Possibilidade de trocar as bordas e cor de background da caixa de
carrinho.
.icon-carrinho
Possibilidade de modificar cor, tamanho ou ocultar ícone do carrinho.
.carrinho-descricao
Editar / ocultar fonte dos itens do carrinho.
/* Formulário de busca */
.bg-busca
.caixa-busca
Possibilidade de trocar as bordas e cor de background da caixa de busca.
Aumentar e/ou diminuir tamanho da caixa de busca.
.busca-botao
.icon-busca
.busca-palavra
Aumentar e/ou diminuir tamanho do botão de busca.
Possibilidade de modificar cor, tamanho ou ocultar ícone da busca.
Modifica a cor e tamanho do texto dentro do input de busca.
Meio
/* Envoltórios do conteúdo central */
#div1bg
#div2bg
Caixa principal que envolte todo o conteúdo central.
Caixa secundária que envolte todo o conteúdo central.
/* Lateral esquerda */
#NavLateralEsquerda
Bloco completo da lateral esquerda da loja. Engloba todos os itens como
menu de categorias e cadastro de newsletter.
/* chat */
.default-chat-online
Bloco do chat online - quando disponível. Acima do menu de categorias da
lateral esquerda.
/* menu lateral */
.menu-esquerdo
Bloco completo do menu lateral. Possibilidade de mudar as bordas e
background dos elementos.
.menu-icons
Possibilidade de modificar cor, tamanho ou ocultar ícone da categoria
principal.
.nivel-2
Personaliza o bloco das subcategorias.
/* newsletter */
.news
Bloco completo da caixa de newsletter. Possibilidade de trocar o
background ou ocultar o elemento todo.
.news-email
Personalizar o input do cadastro de e-mail.
.news-botao
Personalizar o botão CADASTRAR da caixa de newsletter.
/* vitrine de produtos */
.vitrine-home / .vitrine-geral
/* classes de cada produto */
Bloco completo da vitrine da loja.
.vitrine-borda-produto
Possibilidade de personalizar ou ocultar a borda que envolve o produto,
inclusive no hover.
.vitrine-imagem
Personalização da imagem (redução) via css, inserir borda na imagem,
entre outras aplicações.
.vitrine-nome
Possibilidade de personalizar a fonte do nome do produto.
.vitrine-preco
Possibilidade de personalizar a fonte do preço do produto.
.vitrine-parcela
Possibilidade de personalizar a fonte das parcelas do produto ou ocultar o
elemento.
.botoes-extras
Possibilidade de mudar o posicionamento ou ocultar o elemento.
.botao-destaque
Possibilidade de mudar o posicionamento ou ocultar o elemento.
.botao-lancamento
Possibilidade de mudar o posicionamento ou ocultar o elemento.
.botao-fretegratis
Possibilidade de mudar o posicionamento ou ocultar o elemento.
.botao-adicional
Possibilidade de mudar o posicionamento ou ocultar o elemento.
Rodapé
#NavInferior
Caixa principal que envolte todo o conteúdo.
.rodape
/*
Caixa secundária que envolte todo o conteúdo.
Links
das
páginas
personalizadas */
.nav-pages
.nav-pages-spacer
.rodape-info
.formas-pagamento
.forma-tipo
Personaliza a fonte do texto do menu institucional.
Personaliza o espaçamento entre os itens do menu institucional.
Caixa com todos os itens.
Bloco da caixa das formas de pagamento.
Possibilidade de modificar a fonte ou ocultar o sub-título dos pagamentos
(a vista / a prazo).
.redes-sociais-lista
Bloco da caixa das redes sociais. Caso não seja utilizado pelo lojista pode
ser oculto todo o bloco.
.certificados-seguranca
Bloco da caixa certificados. Caso não seja utilizado pelo lojista pode ser
oculto todo o bloco.
.atendimento-info
.telefones
.icon-telefone
.email
.icon-email
Bloco da caixa atendimento.
Personaliza a fonte do texto do telefone.
Possibilidade de modificar cor, tamanho ou ocultar ícone do telefone.
Personaliza a fonte do texto do e-mail.
Possibilidade de modificar cor, tamanho ou ocultar ícone do e-mail.
.horario-atendimento
Personaliza a fonte do texto do horário de atendimento.
.atendimento-fale-conosco
Personaliza a fonte do texto do link para página de Fale conosco.
.copyright-mensagem
Personaliza a fonte do texto da mensagem no final da página.