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... Geral Favicon Cor de fundo da loja Exibir imagem de fundo da loja Imagem de fundo da loja Cor padrão dos textos Cor padrão dos links... Cabeçalho Cor primária do topo Cor de fundo do topo Cor de fundo do topo flutuante Cor de fundo do submenu Imagem da logomarca Imagem do carrinho Cor dos links Cor de fundo do campo de busca Facebook Instagram Pinterest... Cabeçalho Checkout Imagem da Identificação do comprador Imagem da Entrega do pedido Imagem do Pagamento do pedido

3 Rodapé Cor de fundo do rodapé Cor secundária do rodapé Cor padrão dos textos e links CNPJ Link Quem Somos Ajuda: Como Comprar Ajuda: Perguntas Frequentes Ajuda: Fale Conosco Contato (link) Política de trocas (link) Política de entrega (link) Política de privacidade (link) Contato Ganhe desconto... Newsletter no Rodapé Cor do texto dos campos de cadastro da newsletter Cor de fundo dos campos de cadastro da newsletter Cor da borda dos campos de cadastro da newsletter... Menu Horizontal Cor dos textos Link do blog... Botões Botões primários: Cor de fundo dos botões primários Botões primários: Cor do texto dos botões primários

4 Botões Botões secundários: Cor de fundo dos botões secundários Botões secundários: Cor do texto dos botões secundários Botões especiais: Cor de fundo dos botões especiais Botões especiais: Cor do texto dos botões especiais... Títulos Cor de fundo dos títulos primários Cor do texto dos títulos primários Cor de fundo dos títulos secundários Cor do texto dos títulos secundários Cor do texto dos títulos especiais... Produto Cor do texto do nome Cor do texto do preço ajustado Cor do texto para o preço parcelado Cor de fundo para dos preços... Vitrines Vitrine principal Vitrine animada Cor do texto do nome do produto na vitrine Cor do texto do nome da vitrine Cor do fundo do nome da Vitrine... Tag de produto indisponível Cor de fundo da tag de produto indisponível Cor de texto para a tag de produto indisponível

5 Mensagens de erro Cor de fundo das mensagens de erro Cor da borda das mensagens de erro Cor do texto das mensagens de erro... Mensagens de sucesso Cor de fundo das mensagens de sucesso Cor da borda das mensagens de sucesso Cor do texto das mensagens de sucesso... Tabelas Cor do texto do cabeçalho do carrinho Cor do texto das informações da tabela Cor de fundo para o campo de CEP Cor de fundo do campo de cupom de desconto... Formulários Cor do texto do nome dos campos obrigatórios Cor da borda dos campos Cor de fundo dos campos Cor do texto interno dos campos... Avançado Imagem SPRITE da loja CSS

6 Geral 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: 2 - Cor de fundo da loja: Altere a cor de fundo da sua loja. A função exibir imagem como fundo da loja deverá ser desativada: 6

7 Geral 3 - Exibir imagem como fundo da loja: Escolha uma imagem de fundo para a sua loja. A imagem irá sobrepor a cor de fundo da sua loja: 4 - Imagem como fundo da loja: Faça o upload da imagem de fundo enviando seu arquivo. O arquivo deverá ter a extensão.png : 7

8 Geral 5 - Cor padrão dos textos: Página do Carrinho Altere a cor padrão dos textos para a cor de sua preferência: 6 - Cor padrão dos links: Página do Carrinho Altere a cor padrão dos links para a cor de sua preferência: 8

9 Cabeçalho 7 - Cor primária do topo: Altere a cor primária do topo para a cor da sua preferência: 8 - Cor de fundo do topo: Altere a cor de fundo do topo para a cor de sua preferência: 9

10 Cabeçalho 9 - Cor de fundo do topo flutuante: Altere a cor de fundo do topo flutuante para a cor de sua preferência: 10 - Cor de fundo do submenu: Altere a cor de fundo do fundo do submenu para a cor de sua preferência: 10

11 Cabeçalho 11 - Imagem da logomarca: Altere a imagem da sua logomarca. O arquivo deverá ter a extensão.png e o tamanho máximo de 786px X 464px: 12 - Imagem do Carrinho: Altere a imagem do seu carrinho. O arquivo deverá ter a extensão.png e o tamanho máximo de 50px X 50px: 11

12 Cabeçalho 13 - Cor dos links: : Altere a cor dos links do topo para a cor de sua preferência: 14 - Cor de fundo do campo de busca: Altere a cor de fundo do campo de busca para a cor de sua preferência: 12

13 Cabeçalho 15 - Facebook: Ao inserir o link da sua página do Facebook, o ícone será exibido no topo de sua loja: 16 - Instagram: Ao inserir o link da sua página do Instagram, o ícone será exibido no topo de sua loja: 13

14 Cabeçalho 17 Pinterest: Ao inserir o link da sua página do Pinterest, o ícone será exibido no topo de sua loja: 18 Identificação do comprador: Página Identificação do Comprador Altere a imagem do passo de identificação do comprador. O arquivo deverá ter a extensão.png e o tamanho máximo de 427px X 73px: 14

15 Cabeçalho Checkout 19 - Entrega do pedido: Altere a imagem do passo de entrega do pedido. O arquivo deverá ter a extensão.png e o tamanho máximo de 427px X 73px: Página Entrega do Pedido 20 - Pagamento do pedido: Altere a imagem do passo de pagamento do pedido. O arquivo deverá ter a extensão.png e o tamanho máximo de 427px X 73px: Página Pagamento do pedido 15

16 Rodapé 21 - Cor de fundo do rodapé: Altere a cor primária de fundo do rodapé para a cor de sua preferência: 22 - Cor secundária do rodapé: Altere a cor secundária do rodapé para a cor de sua preferência: 16

17 Rodapé 23 - Cor padrão dos textos e links Altere a cor padrão dos textos e links para a cor de sua preferência: 24 CNPJ: Insira o CNPJ de sua loja: 17

18 Rodapé 25 - Link Quem Somos: : Insira o link institucional da sua loja Ajuda: Como comprar: : Insira seu texto personalizado de como comprar em sua loja: 18

19 Rodapé 27 - Ajuda: Perguntas Frequentes : Insira as perguntas mais frequentes em sua loja: 28 - Ajuda: Fale Conosco : Insira os dados da sua central de atendimento: 19

20 Rodapé 29 - Contato : Insira as informações de contato da sua loja: 30 - Política de troca Insira o link da sua página institucional de Política de Troca: 20

21 Rodapé 31 - Política de entrega Insira o link da sua página institucional de Política de Troca: 32 - Política de privacidade Insira o link da sua página institucional de Política de Privacidade: 21

22 Rodapé 33 - Contato Insira o texto sobre os meios de contato de sua loja: 34 - Ganhe desconto Insira o link de uma categoria pré-definida com os produtos com descontos. 22

23 Rodapé 35 - Cor do texto dos campos de cadastro da newsletter Altere a cor padrão do texto de cadastro da newsletter para a cor de sua preferência: 36 - Cor de fundo dos campos de cadastro da newsletter Altere a cor padrão de fundo dos campos de cadastro da newsletter: 23

24 Rodapé 37 - Cor da borda dos campos de cadastro da newsletter Altere a cor padrão da borda dos campos de cadastro da newsletter para a cor de sua preferência: Menu Horizontal 38 - Cor dos textos Altere a cor dos textos do menu horizontal para a cor de sua preferência: 24

25 Menu Horizontal 39 - Link do Blog Insira o link do blog da sua loja: Botões 40 - Botões primários - Cor de fundo dos botões primários Altere a cor de fundo dos botões primários para a cor de sua preferência: 25

26 Botões 41 - Botões primários - Cor do texto dos botões primários Altere a cor do texto dos botões primários para a cor de sua preferência: 42 - Botões secundários - Cor de fundo dos botões secundários Página do Carrinho Altere a cor de fundo dos botões secundários para a cor de sua preferência: 26

27 Botões 43 - Botões secundários - Cor do texto dos botões secundários Altere a cor do texto dos botões primários para a cor de sua preferência: 44 - Botões especiais - Cor de fundo dos botões especiais Altere a cor de fundo dos botões especiais para a cor de sua preferência: 27

28 Botões 45 - Botões especiais - Cor do texto dos botões especiais Altere a cor do texto dos botões especiais para a cor de sua preferência: Títulos Página de Identificação 46 - Títulos principais - Cor de fundo dos títulos primários Altere a cor de fundo dos títulos primários para a cor de sua preferência: 28

29 Títulos 47 - Títulos principais - Cor de texto dos títulos primários Página de Identificação Altere a cor de texto dos títulos principais para a cor de sua preferência: Página de Identificação 48 - Títulos secundários - Cor de fundo dos títulos secundários Altere a cor de fundo dos títulos secundários para a cor de sua preferência: 29

30 Títulos 49 - Títulos secundários - Cor de texto dos títulos secundários Página de Identificação Altere a cor de texto dos títulos principais para a cor de sua preferência: Página de Identificação 50 - Títulos especiais - Cor de texto dos títulos especiais Altere a cor de texto dos títulos especiais para a cor de sua preferência: 30

31 Produto 51 - Cor do texto para o nome Página do Produto Altere a cor de texto do nome do produto para a cor de sua preferência: Página do Produto 52 Cor do texto para o preço ajustado Altere a cor de texto do preço ajustado para a cor de sua preferência: 31

32 Produto 53 - Cor do texto para o preço parcelado Página do Produto Altere a cor de texto do preço parcelado para a cor de sua preferência: 54 - Cor de fundo dos preços Página do Produto Altere a cor de fundo do preço ajustado para a cor de sua preferência: 32

33 Vitrines 55 - Vitrine principal Escolha a vitrine principal de sua loja. As vitrines devem ser pré-configuradas nos clusters. 56 Vitrine animada Escolha a vitrine principal de sua loja. As vitrines devem ser pré-configuradas nos clusters. 33

34 Vitrines 57 - Cor do texto para o nome do produto na vitrine Altere a cor do texto do nome do produto na vitrine para a cor de sua preferência Cor do texto do nome da vitrine Altere a cor do texto do nome da vitrine para a cor de sua preferência. 34

35 Vitrines 59 - Cor de fundo do nome do produto na vitrine Altere a cor do fundo do nome do produto na vitrine para a cor de sua preferência. Tag de produto indisponível 60 - Cor de fundo da tag de produto indisponível Altere a cor da tag de produto indisponível para a cor de sua preferência. 35

36 Tag de produto indisponível 61 - Cor do texto para tag de produto indisponível Altere a cor do texto da tag de produto indisponível para a cor de sua preferência. Mensagens de erro/sucesso Página do Carrinho 62 - Cor de fundo das mensagens de erro Altere a cor de fundo para mensagens de erro para a cor de sua preferência. 36

37 Mensagens de erro/sucesso 63 - Cor da borda das mensagens de erro Página do Carrinho Altere a cor da borda da mensagem de erro para a cor de sua preferência Cor do texto das mensagens de erro Página do Carrinho Altere a cor do texto para mensagens de erro para a cor de sua preferência. 37

38 Mensagens de sucesso 65 - Cor de fundo das mensagens de sucesso Altere a cor de fundo da mensagem de sucesso para a cor de sua preferência Cor da borda das mensagens de sucesso Altere a cor do texto das mensagens de sucesso para a cor de sua preferência. 38

39 Mensagens de sucesso 67 - Cor do texto das mensagens de sucesso Página de Produto Altere a cor do texto das mensagem de sucesso para a cor de sua preferência. Tabelas Página do Carrinho 68 - Cor do texto do cabeçalho do carrinho Altere a cor do texto do cabeçalho para a cor de sua preferência. 39

40 Tabelas 69 - Cor do texto das informações da tabela Página do Carrinho Altere a cor do texto das informações da tabela para a cor de sua preferência Cor de fundo para o campo de CEP. Página do Carrinho Altere a cor de fundo para o campo de CEP para a cor de sua preferência. 40

41 Tabelas 71 - Cor de fundo do campo de cupom de desconto Página do Carrinho Altere a cor de fundo do campo de cupom de desconto para a cor de sua preferência. Formulários Página de Cadastro 72 - Cor do texto do nome dos campos obrigatórios Altere a cor de texto do nome dos campos obrigatórios para a cor de sua preferência. 41

42 Formulários 73 - Cor da borda dos campos Página de Cadastro Altere a cor da borda dos campos para a cor de sua preferência Cor de fundo dos campos Página de Cadastro Altere a cor de de fundo dos campos para a cor de sua preferência. 42

43 Formulários 75 - Cor do texto internos dos campos Página de Cadastro Altere a cor do texto interno dos campos para a cor de sua preferência. Avançado 76 Imagem SPRITE da loja. Altere os ícones da sua loja com uma imagem Sprite. Essa opção deverá ser efetuada por alguém com conhecimentos sólidos em CSS: 43

44 Avançado 77 - CSS Insira códigos CSS e altere várias configurações do layout da sua loja. Essa opção deverá ser efetuada por alguém com conhecimentos sólidos em CSS: Caso ainda houver dúvidas, é só entrar em contato conosco pelo telefone: ou pelo contato@egrupomidia.com.br 44