Customização de Template FWK. Guidelines

Transcrição

1 Customização de Template FWK Guidelines 1

2 GUIA DE CUSTOMIZAÇÃO DE TEMPLATE FWK... Índice... - Abas Favicon... - Topo Cor primária do header Cor secundária do header Cor do texto escuro Cor de texto claro Cor das barras Botões especiais Sprite da loja Imagem da marca Imagem de fundo da logo Fundo do topo header Cor do texto no topo do header Redes Sociais Redes Sociais Central de Atendimento Cores do campo de busca Ícone buscar Ícone carrinho Cor de fundo do topo

3 - Cabeçalho Checkout Identificação do comprador Entrega da compra Pagamento da compra... - Vitrines Vitrine Vitrine Cores Cor da tag de pré-venda e lançamento Cor da tag de oferta Cor da tag de indisponibilidade Texto de informações da loja... - Selos de Segurança Código do selo Ebit Exibir selo FCONTROL Exibir selo THAWTE Exibir selo SITE BLINDADO Central de atendimento Facebook Barra de endereço Informações adicionais Chat online Avançado

4 Abas 1 - Favicon: Favicon é o ícone que fica na barra de endereços do seu navegador que serve para identificar rapidamente o site. Você deve enviar um arquivo no formato.ico com o tamanho de 16px X 16px: Topo Página Categorias 2 - Cor Primária Header: Será aplicada em diversos locais e terá maior destaque entre outros elementos: 4

5 Topo 3 - Cor Secundária Header Será aplicada em diversos locais em elementos com menos destaque: 4 - Cor de texto escuro Será aplicado em diversos locais e terá maior destaque: 5

6 Topo 5 - Cor de texto claro Será aplicado em diversas locais e terá destaque médio entre outros elementos.: 6 - Cor das barras Página Categorias Cor de fundo das barras de menu, carrinho, tabelas de pedido e outras: 6

7 Topo 7 - Botões especiais Cor de fundo de botões mais importantes como o botão comprar e botão finalizar pedido: 8 - Sprite de Loja Folha de Sprite Sprite são vários itens em uma imagem só, como logomarca, ícones e bullets, que serão exibidos na loja através do CSS: 7

8 Topo 9 - Imagem da marca: Insira a logomarca da sua loja. Ela será utilizada em vários lugares, como no checkout e topo flutuante. A imagem deverá ter a extensão.png e tamanho máximo de 245px x 102px: 10 - Imagem de Fundo da Logo: Opção de inserir uma imagem complementar para a logomarca: 8

9 Topo 11 - Fundo Topo Header: Insira uma textura para o fundo do topo. A imagem deverá ter a extensão.png e tamanho máximo de 29px x 27px : 12 - Cor do texto no topo do header: Altere a cor do texto pela cor de sua preferência: 9

10 Topo 13 Redes Sociais 1: Insira o link da sua rede social e seu ícone. A imagem deverá ter a extensão.png e tamanho máximo de 29px x 27px: 14 Redes Sociais 2: Insira o link de outra rede social e seu ícone: A imagem deverá ter a extensão.png e tamanho máximo de 29px x 27px: 10

11 Topo 15 Central de Atendimento: Insira o número de telefone da sua central de atendimento. 16 Cores do campo de busca: Personalize as cores do campo de busca (texto, contorno e campo de texto) com as cores de sua preferência: 11

12 Topo 17 Ícone Buscar: Substitua o ícone buscar pela imagem de sua preferência. A imagem deverá ter a extensão.png e tamanho máximo de 26px x 32px: 18 Ícone Carrinho: Substitua o ícone carrinho pela imagem de sua preferência. A imagem deverá ter a extensão.png e tamanho máximo de 31px x 27px: 12

13 Topo 19 Cor de fundo dos topos: Altere a cor dos topos (flutuante e fixo) pela cor de sua preferência: Cabeçalho Checkout 20 Identificação do comprador: Página Identificação Personalize a imagem para o passo de identificação do comprador. A imagem deverá ter a extensão.png e tamanho máximo de 427px X 73px: : 13

14 Cabeçalho Checkout 21 Entrega da compra: Página Entrega Personalize a imagem para o passo de identificação do comprador. A imagem deverá ter a extensão.png e tamanho máximo de 427px X 73px: 22 Pagamento da compra: Página Pagamento Personalize a imagem para o passo de identificação do comprador. A imagem deverá ter a extensão.png e tamanho máximo de 427px X 73px: 14

15 Vitrines 23 - Vitrine 1: Exibição da Vitrine 1. O cluster dos produtos para exibição deverão ser pré-definidos: 24 Vitrine 2: Exibição da Vitrine 2. O cluster dos produtos para exibição deverão ser pré-definidos: 15

16 Cores 25 - Cor da tag de pré-venda e lançamento: Altere a cor do fundo e cor do texto da tag de pré-venda e de lançamento: 26 Cor da tag oferta: Altere a cor do fundo e cor do texto da tag de oferta. 16

17 Cores 27 - Cor da tag indisponibilidade: Altere a cor do fundo e cor do texto da tag de produto indisponível : Rodapé 28 - Texto de informações da loja: Página inicial: Insira as informações da sua loja, como CNPJ, endereço, etc: 17

18 Selos de Segurança 29 Ebit - Código do selo: Insira o código do seu Ebit FCONTROL: Opção de exibir o selo do FCONTROL no rodápé: 18

19 Selos de Segurança 31 Thawte: Insira a url segura da sua loja. 32 Site Blindado: Insira o código do selo do Site Blindado: 19

20 Selos de Segurança 33 Central de Atendimento: Insira os horários e os números de telefone da sua central de atendimento. Redes Sociais 34 Facebook: Insira código da sua fanpage do facebook: 20

21 Rodapé 35 Barra de endereço: Altere a imagem de fundo da área de endereço. A imagem deverá ter a extensão.png e tamanho máximo de 24px x 26px: 36 Informações adicionais: Insira informações adicionais no rodapé da sua loja: 21

22 Rodapé 37 Chat Online: Insira o código de chat online para atendimento em tempo real em sua loja: 38 Avançado: Insira códigos CSS que desejar para alterar cores, posições e elementos. Essa opção só deve ser usada por quem possui conhecimentos avançados em CSS. 22

23 Caso ainda houver dúvidas, é só entrar em contato conosco pelo telefone: ou pelo 23