Customização de Interface - Página Inicial

Sumário
1. Logo ......................................................................................................................................................................4

1.1. Edição ...........................................................................................................................................................4

2. Inputs - formulários ..............................................................................................................................................4

2.1. Busca .............................................................................................................................................................4

2.2. Novidades .....................................................................................................................................................4

3. Fontes ...................................................................................................................................................................5

3.1. Cores (color) .................................................................................................................................................5

3.2. Tamanho (font-size)......................................................................................................................................5

3.3. Tipo (font-family) ..........................................................................................................................................6

3.4. Edição ...........................................................................................................................................................7

4. Meios de pagamento ............................................................................................................................................7

4.1. Pagamentos a vista .......................................................................................................................................7

4.2. Pagamentos a prazo .....................................................................................................................................7

4.3. Edição ...........................................................................................................................................................7

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

6. Menu categoria...................................................................................................................................................10

6.1. Menu categoria fechado ............................................................................................................................10

6.2. Menu categoria aberto...............................................................................................................................11

6.3. Edição .........................................................................................................................................................11

7. Novidades (newsletter) ......................................................................................................................................12

7.1. Edição .........................................................................................................................................................12

8. 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.carrinho-
descricao 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 Possibilidade de trocar as bordas e cor de background da caixa de busca.

.caixa-busca Aumentar e/ou diminuir tamanho da caixa de busca.

 .busca-botao Aumentar e/ou diminuir tamanho do botão de busca.

.icon-busca Possibilidade de modificar cor, tamanho ou ocultar ícone da busca.

.busca-palavra Modifica a cor e tamanho do texto dentro do input de busca.

Meio

/* Envoltórios do conteúdo central */

#div1bg Caixa principal que envolte todo o conteúdo central.

#div2bg 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 Bloco completo da vitrine da loja.

/* classes de cada produto */

 .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 Personaliza a fonte do texto do menu institucional.

.nav-pages-spacer Personaliza o espaçamento entre os itens do menu institucional.

.rodape-info Caixa com todos os itens.

.formas-pagamento Bloco da caixa das formas de pagamento.

.forma-tipo 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 Bloco da caixa atendimento.

.telefones Personaliza a fonte do texto do telefone.

.icon-telefone Possibilidade de modificar cor, tamanho ou ocultar ícone do telefone.

.email Personaliza a fonte do texto do e-mail.

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