Você está na página 1de 21

Customizao de Interface - Pgina Inicial

Sumrio
1.

Logo ......................................................................................................................................................................4
1.1.

2.

3.

4.

5.

6.

7.

Inputs - formulrios ..............................................................................................................................................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.

Edio ...........................................................................................................................................................7

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


4.1.

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

4.2.

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

4.3.

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

Edio .........................................................................................................................................................10

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

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

6.2.

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

6.3.

Edio .........................................................................................................................................................11

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


7.1.

8.

Edio ...........................................................................................................................................................4

Edio .........................................................................................................................................................12

Atendimento online (chat) .................................................................................................................................13

9.

Produtos (foto, nome e preo) ...........................................................................................................................13


9.1.

Foto .............................................................................................................................................................14

9.2.

Nome do produto .......................................................................................................................................14

9.3.

Preo e parcelamento.................................................................................................................................15

10.

Botes .............................................................................................................................................................15

10.1.

Botes do tema.......................................................................................................................................15

10.2.

Botes da loja .........................................................................................................................................15

11.

Dados dinmicos (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.

Extenses ........................................................................................................................................................17

16.

IDs e Classes ....................................................................................................................................................18

1. Logo
A logo da loja virtual ser inserida apenas no cabealho da loja. Este elemento poder ser configurado pelo painel
administrativo na guia Marca.
A logo poder ser salva em jpg ou png.
Sua proporo mxima ser de 250 pixels de largura e 74 pixels de altura.

1.1. Edio
Para edio deste item pode ser usada a guia EDITOR CSS e modificar a classe .logotipo.

2. Inputs - formulrios
Os inputs utilizados nos temas usam a mesma dimenso em sua altura, criando uma padronizao desta
informao. Sua utilizao dentro dos temas sero para os campos de busca e cadastro de newsletter.
A fonte utilizada para este elemento tambm deve ser uma padro dos sistemas operacionais (principalmente
para SO Windows), pois este item ser considerado como um elemento dinmico. Mais informaes no tpico
Fontes.
A label dos inputs no poder ser modificada.

2.1. Busca
A fonte utilizada e formato do input tambm podem ser alterados pelo Editor CSS utilizando a classe.caixa-busca
label. H outra classe especfica para o cone .icon-busca.

2.2. Novidades
A fonte utilizada e formato do input tambm podem ser alterados pelo Editor CSS utilizando a classe.news-email.

3. Fontes
Todos os elementos que sero utilizados do banco de dados ou que haver entrada de informaes, tais como os
citados abaixo, devero seguir utilizando como fonte padro dos Sistemas Operacionais.
formulrios
menus de categorias
nome e preo dos produtos
textos dos temas - login e cadastre-se
carrinho de compras
entre outros
Estes elementos no podem ser gerados como imagens, por isso a necessidade de mante-los como texto dentro
da criao do layout.

3.1. Cores (color)


Procure utilizar um padro de cor para link e outro para textos, assim voc conseguir criar uma identidade padro
que ir ajudar o seu usurio a identificar as aes dentro da loja virtual.
Para a configurao do layout personalizado ser utilizado o padro 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. No utilize tamanhos muito maiores, pois
preciso ter uma coerncia entre a arte desenvolvida e seu pblico alvo.
Ainda neste tpico, utilize fontes com valores inteiros como 10 ou 11 pixels. No 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 possvel ser visualizada sem a instalao 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. Edio
Para edio deste item pode ser usada a guia EDITOR CSS e modificar a classe body. Outras fontes e
elementos desejveis podem ser verificados a classe inspecionando o elemento diretamente na loja virtual.

4. Meios de pagamento
Para a utilizao do meio de pagamento dever ser utilizada as bandeiras abaixo, no mesmo tamanho e formato.
Elas sero utilizadas atravs do sistema Tray, no sendo necessrio 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 antecipao para que seja ilustrada as bandeiras
que sero utilizadas, pois caso seja inserida novas bandeiras, pode haver uma quebra de estrutura no local da
ilustrao.

4.1. Pagamentos a vista


As bandeiras abaixo sero inseridas dentro do bloco de informao para pagamento a vista.

4.2. Pagamentos a prazo


As bandeiras abaixo sero inseridas dentro do bloco de informao para pagamento a prazo.

4.3. Edio
Para edio deste item pode ser usada a guia EDITOR CSS e modificar a classe .formas-pagamento.

5. Banners
A utilizao dos banners seguir um posicionamento padro para os elementos. Abaixo segue a lista de banner
disponvel e seu posicionamento dentro da loja virtual.

5.1. Banner Home


Utilizado em todas as pginas do sistema abaixo do cabealho.

5.2. Banner Galeria


Utilizado apenas na pgina inicial (dentro da vitrine) entre o cabealho e o banner home.

5.3. Banner Vitrine


Utilizado apenas na pgina 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 pginas entre a vitrine e o rodap.

5.6. Banner Rodap


Utilizado em todas as pginas abaixo do rodap.

5.7. Edio
A edio dos banners neste caso ser feita atravs do painel administrativo. Caso queira inserir alguma cor de
fundo ou espaamento no banner poder inspecionar o elemento e editar a classe no EDITOR CSS dentro do
tema. Exemplo .header-banner.

6. Menu categoria
H duas opes para o menu de categorias da loja virtual. Esta escolha ser realizada de acordo com o tema
escolhido para configurao 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 possvel a visualizao das demais subcategorias.

6.2. Menu categoria aberto


Sero exibidas as categorias principais e as subcategorias da loja na lateral esquerda j de forma aberta, sem a
necessidade de o usurio clicar em algum cone para sua visualizao.

6.3. Edio
Para edio deste item pode ser usada a guia EDITOR CSS e modificar a classe .menu-esquerdo h3. Outras
fontes e elementos desejveis pode ser verificado a classe inspecionando o elemento diretamente na loja virtual.

7. Novidades (newsletter)
A opo de cadastro para o recebimento de newsletter ser feita usando apenas o campo de e-mail para o
usurio. O input e boto permanecero com o mesmo texto.
O modelo de cadastro e mensagem de confirmao seguir o padro da plataforma Tray.

7.1. Edio
Para edio deste item pode ser usada a guia EDITOR CSS e modificar a classe .news. Outras fontes e
elementos desejveis 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 verso Online e Offline das imagens.
* Ser de responsabilidade do lojista cadastrar as imagens no sistema da empresa contratada para gerenciar o
servio de atendimento online.

9. Produtos (foto, nome e preo)


A configurao passada neste item refere-se apenas a vitrine da loja virtual.

9.1. Foto
O padro 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 atravs do EDITOR CSS do tema usando a classe .vitrine-geral img.
No ser possvel aumentar o tamanho da imagem, tendo em vista que esta a maior imagem gerada para
utilizao dentro da loja virtual. Aps esta imagem somente ser exibida a imagem original dentro da pgina 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 personalizao da fonte do nome do produto tambm poder ser feita dentro dos temas na guia EDITOR CSS
avanado utilizando a classe vitrine-nome.

9.3. Preo e parcelamento


As informaes de parcelamento somente sero exibidas caso existir alguma forma de pagamento parcelado
disponvel no painel administrativo e esta esteja habilitada para visualizao.
Ser possvel a personalizao da cor exibida nos valores (demais informaes seguem padro do sistema)
atravs da guia EDITOR CSS utilizando a classe .vitrine-parcela. Outras fontes e elementos desejveis pode ser
verificado a classe inspecionando o elemento diretamente na loja virtual.

10.

Botes

H dois tipos de botes dentro do layout da loja virtual. Botes do tema e botes da loja.

10.1. Botes do tema


Os botes do tema esto associados principalmente aos botes do layout personalizado. Nos temas podemos vlos 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 botes basta entrar dentro da personalizao do tema e escolher uma das sugestes
pr formatadas ou pode ir na guia EDITOR CSS e modificar a classe .busca-botao e .news-botao.
O texto (nome) dos botes no podem ser alterados.

10.2. Botes da loja


Os botes da loja podem ser modificados diretamente no painel administrativo. Este no influenciar nas cores e
tema j escolhido para loja virtual.
Sua atualizao poder ser feita utilizando imagens em png e jpg.
A lista completa dos botes que podem ser personalizados poder ser encontrada diretamente no painel
administrativo da loja virtual.

11.

Dados dinmicos (tel., e-mail, outros)

Os dados dinmicos do layout todos devero ser utilizados com fontes padres. Essa necessidade para que o
contedo continue como texto e possa ser atualizado diretamente pelo lojista atravs de seu painel administrativo.
Alguns elementos que so utilizados como texto de forma dinmica:
saudao "ol visitante" e itens como cadastre-se e acesse sua conta;
inputs de busca e newsletter;
botes padres dos temas;
item e valor do carrinho;
categorias e subcategorias do menu lateral;
nome e valores dos produtos;
links institucionais do rodap;
ttulos das colunas no rodap;
telefone, e-mail e horrio de atendimento.

12.

Redes sociais

As redes sociais sero inseridas de forma automtica no rodap da loja, basta apenas preencher o campo
corretamente em seu painel administrativo.
Seu posicionamento e imagem sero padres conforme exemplo abaixo. No momento esto disponveis as
seguintes redes sociais:

12.1. Facebook

12.2. Twitter

13.

Meu carrinho

As informaes contidas no elemento meu carrinho no cabealho da loja sero dinamicas, ou seja, a cada produto
inserido no carrinho de compras esta informao ir modificar automaticamente.
Neste espao haver 2 informaes, a de quantidade de produtos e o valor da compra dos produtos.
O ttulo e cone do carrinho podem ser modificados alterando dentro da guia EDITOR CSS as classes.carrinhodescricao e .icon-carrinho.

14.

Selos

Alguns selos padres podero ser inseridos no rodap da loja. Verificar em relao a sua contratao e / ou
configurao em seu painel administrativo.

14.1. Loja protegida


Localizado no rodap da loja possui tamanho padro de 130 38 pixels.

14.2. E-bit
Localizado no rodap da loja possui tamanho padro de 89 94 pixels.

15.

Extenses

As extenses podem ser contratados para as lojas virtuais. Verifique se seu plano atual permite a
configurao de extenses.
Para estas extenses no sero permitidas a personalizao de seu wireframe e visualizao, pois seguem o
padro da plataforma.
* Extenses que necessitam de mudana de layout sero possveis sua implantao apenas para lojistas que
possuam layout personalizado. Na utilizao do tema no ser possvel sua configurao.

16.

IDs e Classes

Abaixo segue um quadro com as principais classes encontradas nos temas para que possam ser utilizadas na
personalizao de seu layout.
Todas elas podem ser sobrescritas atravs da edio do CSS dentro do tema escolhido.
/* classe com id do tema */
.theme-4

Classe dentro da tag BODY.

/* envoltrio principal */
.wrapper

Bloco que envolve todo contedo aps abertura da tag BODY.

Cabealho
#NavSuperior

Elemento que envolve todo o cabealho.

/* logotipo */
.logotipo

Personalizar espaamentos ou background no logo fora da imagem


principal (troca do logo atravs do painel administrativo).

/* Saudao e menus */
.nav-cliente

Bloco de informaes de saudao acima do Carrinho. Possibilidade de


personalizar cores e mudana de posicionamento do elemento.

.nav-logado

Personalizar bloco quando o usurio fez login.

.nav-deslogado

Personalizar bloco quando o usurio ainda no 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.

/* Formulrio 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 boto 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
/* Envoltrios do contedo central */
#div1bg
#div2bg

Caixa principal que envolte todo o contedo central.


Caixa secundria que envolte todo o contedo 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 disponvel. 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 boto 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

Personalizao da imagem (reduo) via css, inserir borda na imagem,


entre outras aplicaes.

.vitrine-nome

Possibilidade de personalizar a fonte do nome do produto.

.vitrine-preco

Possibilidade de personalizar a fonte do preo 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 contedo.

.rodape
/*

Caixa secundria que envolte todo o contedo.


Links

das

pginas

personalizadas */
.nav-pages
.nav-pages-spacer
.rodape-info
.formas-pagamento
.forma-tipo

Personaliza a fonte do texto do menu institucional.


Personaliza o espaamento 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-ttulo dos pagamentos
(a vista / a prazo).

.redes-sociais-lista

Bloco da caixa das redes sociais. Caso no seja utilizado pelo lojista pode
ser oculto todo o bloco.

.certificados-seguranca

Bloco da caixa certificados. Caso no 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 horrio de atendimento.

.atendimento-fale-conosco

Personaliza a fonte do texto do link para pgina de Fale conosco.

.copyright-mensagem

Personaliza a fonte do texto da mensagem no final da pgina.