Customização de Interface - Página Inicial

Transcrição

1 Customização de Interface - Página Inicial

2 Sumário 1. Logo Edição Inputs - formulários Busca Novidades Fontes Cores (color) Tamanho (font-size) Tipo (font-family) Edição Meios de pagamento Pagamentos a vista Pagamentos a prazo Edição Banners Banner Home Banner Galeria Banner Vitrine Banner Lateral Banner Baixo Banner Rodapé Edição Menu categoria Menu categoria fechado Menu categoria aberto Edição Novidades (newsletter) Edição Atendimento online (chat)... 13

3 9. Produtos (foto, nome e preço) Foto Nome do produto Preço e parcelamento Botões Botões do tema Botões da loja Dados dinâmicos (tel., , outros) Redes sociais Facebook Twitter Meu carrinho Selos Loja protegida E-bit Extensões IDs e Classes... 18

4 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 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 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 Novidades A fonte utilizada e formato do input também podem ser alterados pelo Editor CSS utilizando a classe.news- .

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

6 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 Trebuchet MS Lucida Grande Arial Lucida Sans Unicode Verdana Franklin Gothic Medium Helvetica Neue Calibri Candara Trebuchet MS 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 Garamond Hoefler Text Baskerville Cambria Didot Constantia Big Caslon Goudy Old Style Baskerville Old Face Palatino Lucida Bright Bodoni MT Garamond

7 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 Pagamentos a vista As bandeiras abaixo serão inseridas dentro do bloco de informação para pagamento a vista Pagamentos a prazo As bandeiras abaixo serão inseridas dentro do bloco de informação para pagamento a prazo 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.

8 5.1. Banner Home Utilizado em todas as páginas do sistema abaixo do cabeçalho Banner Galeria Utilizado apenas na página inicial (dentro da vitrine) entre o cabeçalho e o banner home.

9 5.3. Banner Vitrine Utilizado apenas na página inicial (dentro da vitrine) entre o banner galeria e a vitrine Banner Lateral Utilizado na lateral da loja abaixo do cadastro de newsletter Banner Baixo Utilizado em todas as páginas entre a vitrine e o rodapé.

10 5.6. Banner Rodapé Utilizado em todas as páginas abaixo do rodapé 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 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.

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

12 7. Novidades (newsletter) A opção de cadastro para o recebimento de newsletter será feita usando apenas o campo de 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 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.

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

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

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

16 11. Dados dinâmicos (tel., , 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 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: Facebook Twitter

17 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 Loja protegida Localizado no rodapé da loja possui tamanho padrão de pixels E-bit Localizado no rodapé da loja possui tamanho padrão de 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.

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

19 .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- Personalizar o input do cadastro de ..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 */

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

21 .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.. Personaliza a fonte do texto do ..icon- Possibilidade de modificar cor, tamanho ou ocultar ícone do ..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.