Loja Virtual - Imagens » Histórico » Versão 13
Versão 12 (ivo, 30/01/2019 11:10 h) → Versão 13/44 (alexandre, 12/03/2020 13:49 h)
h1. Loja Virtual - Imagens
h2. Introdução
Este documento visa orientar na criação das imagens que irão compor o site B2B ou B2C - informe-se com o responsável do projeto sobre o tipo de loja.
Em caso de dúvida sobre como estas imagens serão aplicadas, segue dois exemplos de loja:
Exemplo de e-commerce (B2C): https://homologacaob2c.ibtech.inf.br/
Exemplo de B2B: https://homologacaob2b.ibtech.inf.br/
h2. Considerações
As imagens geradas serão usadas somente para o site, então as mesmas devem ser otimizadas para web. O perfil de cor deve ser estritamente RGB e no caso dos arquivos JPG recomendamos compactação entre 75~90%.
A loja restringe o uso de imagens pesadas, limitando o Upload de imagens até 500KB, por isso observe na documentação sempre se foi especificado o tamanho máximo. Este cuidado com tamanhos é importante, pois, muitas pessoas acessarão o site via celular (3G/4G) e o acesso deve ser o mais otimizado possível.
h2. Logo da Empresa
Responsivo: *não*
Tipo de Arquivo: *PNG* (pode ser com fundo transparente)
Altura: *Recomendado 41px*
Largura: *Máximo 200px*
h2. Cabeçalho e Rodapé de E-mail
Responsivo: *não*
Tipo de Arquivo: *JPG*
Altura: *variável*
Largura: *560px*
h2. Banner Rotativo (Desktop)
Responsivo: *não*
Tipo de Arquivo: *JPG*
Altura: *Recomendado 620px*
Largura: *Recomendado 1920px*
h2. Banner Rotativo (Mobile)
Responsivo: *não*
Tipo de Arquivo: *JPG*
Altura: *Recomendado 720px*
Largura: *Recomendado 650px*
h2. Banner(s) da Tela de Login (somente B2B)
Responsivo: *sim*
Tipo de Arquivo: *JPG*
Altura: *Recomendado 720px*
Largura: *Recomendado 2550px*
Carrossel: *Sim*
Observação: *Procure manter um padrão de tamanho para todos os banners deste tipo para evitar disparidade de altura*
h2. Video de produto
Tipo de Arquivo: *MP4*
Altura: *480px*
Largura: *640px* (ou proporcional)
Limite de Tamanho do Arquivo: *3145728KB*
Observação 1: *Por padrão o sistema aceita apenas um video por produto.*
Observação 2: *Sobre as dimensões, recomendamos manter o aspecto de retrato, não há necessidade de ter exatamente a proporção indicada acima.*
<pre>
Video do Produto:
839103.mp4
| +--- extensão obrigatória
+--------- código do produto
</pre>
h2. Imagens de produtos
Responsivo: *sim*
Tipo de Arquivo: *JPG*
Altura: *1950px* (ou proporcional)
Largura: *1836px* (ou proporcional)
Limite de Tamanho do Arquivo: *500KB*
Observação 1: *Procure manter um padrão de tamanho para todos as imagens de produtos para evitar disparidade de altura.*
Observação 2: *Sobre as dimensões, recomendamos manter o aspecto de retrato, não há necessidade de ter exatamente a proporção indicada acima.*
O produto pode ter várias imagens organizadas por *cor*. Por isso este tipo de imagem tem uma nomenclatura especial:
<pre>
Imagens da tela de produto:
839103_213_00.jpg
| | | +--- extensão obrigatória
| | +------- numero sequencial para mais de uma imagem por produto/cor
| +---------- código da cor do produto
***ATENÇÃO! No caso de ERP Consistem aqui é o Código do Sortimento! (NÃO É O CÓDIGO DA COR BASE!)***
+---------------- código do produto
</pre>
O produto também pode ter uma imagem especial para uso na galeria. Neste caso o nome da imagem é o próprio código do produto.
_Esta imagem é opcional._
<pre>
Imagem da galeria (opcional):
839103.jpg
| +--- extensão obrigatória
+--------- código do produto
</pre>
*Exemplo de imagens de produto:*
Código do Produto: *10082*
Código da Cor: *AZU*
Sequência da Foto: *01*
Nome da Imagem: *10082_AZU_01.jpg*
!cor1.png!
Código do Produto: *10082*
Código da Cor: *SAL*
Sequência da Foto: *01*
Nome da Imagem: *10082_SAL_01.jpg*
!cor2.png!
h2. Introdução
Este documento visa orientar na criação das imagens que irão compor o site B2B ou B2C - informe-se com o responsável do projeto sobre o tipo de loja.
Em caso de dúvida sobre como estas imagens serão aplicadas, segue dois exemplos de loja:
Exemplo de e-commerce (B2C): https://homologacaob2c.ibtech.inf.br/
Exemplo de B2B: https://homologacaob2b.ibtech.inf.br/
h2. Considerações
As imagens geradas serão usadas somente para o site, então as mesmas devem ser otimizadas para web. O perfil de cor deve ser estritamente RGB e no caso dos arquivos JPG recomendamos compactação entre 75~90%.
A loja restringe o uso de imagens pesadas, limitando o Upload de imagens até 500KB, por isso observe na documentação sempre se foi especificado o tamanho máximo. Este cuidado com tamanhos é importante, pois, muitas pessoas acessarão o site via celular (3G/4G) e o acesso deve ser o mais otimizado possível.
h2. Logo da Empresa
Responsivo: *não*
Tipo de Arquivo: *PNG* (pode ser com fundo transparente)
Altura: *Recomendado 41px*
Largura: *Máximo 200px*
h2. Cabeçalho e Rodapé de E-mail
Responsivo: *não*
Tipo de Arquivo: *JPG*
Altura: *variável*
Largura: *560px*
h2. Banner Rotativo (Desktop)
Responsivo: *não*
Tipo de Arquivo: *JPG*
Altura: *Recomendado 620px*
Largura: *Recomendado 1920px*
h2. Banner Rotativo (Mobile)
Responsivo: *não*
Tipo de Arquivo: *JPG*
Altura: *Recomendado 720px*
Largura: *Recomendado 650px*
h2. Banner(s) da Tela de Login (somente B2B)
Responsivo: *sim*
Tipo de Arquivo: *JPG*
Altura: *Recomendado 720px*
Largura: *Recomendado 2550px*
Carrossel: *Sim*
Observação: *Procure manter um padrão de tamanho para todos os banners deste tipo para evitar disparidade de altura*
h2. Video de produto
Tipo de Arquivo: *MP4*
Altura: *480px*
Largura: *640px* (ou proporcional)
Limite de Tamanho do Arquivo: *3145728KB*
Observação 1: *Por padrão o sistema aceita apenas um video por produto.*
Observação 2: *Sobre as dimensões, recomendamos manter o aspecto de retrato, não há necessidade de ter exatamente a proporção indicada acima.*
<pre>
Video do Produto:
839103.mp4
| +--- extensão obrigatória
+--------- código do produto
</pre>
h2. Imagens de produtos
Responsivo: *sim*
Tipo de Arquivo: *JPG*
Altura: *1950px* (ou proporcional)
Largura: *1836px* (ou proporcional)
Limite de Tamanho do Arquivo: *500KB*
Observação 1: *Procure manter um padrão de tamanho para todos as imagens de produtos para evitar disparidade de altura.*
Observação 2: *Sobre as dimensões, recomendamos manter o aspecto de retrato, não há necessidade de ter exatamente a proporção indicada acima.*
O produto pode ter várias imagens organizadas por *cor*. Por isso este tipo de imagem tem uma nomenclatura especial:
<pre>
Imagens da tela de produto:
839103_213_00.jpg
| | | +--- extensão obrigatória
| | +------- numero sequencial para mais de uma imagem por produto/cor
| +---------- código da cor do produto
***ATENÇÃO! No caso de ERP Consistem aqui é o Código do Sortimento! (NÃO É O CÓDIGO DA COR BASE!)***
+---------------- código do produto
</pre>
O produto também pode ter uma imagem especial para uso na galeria. Neste caso o nome da imagem é o próprio código do produto.
_Esta imagem é opcional._
<pre>
Imagem da galeria (opcional):
839103.jpg
| +--- extensão obrigatória
+--------- código do produto
</pre>
*Exemplo de imagens de produto:*
Código do Produto: *10082*
Código da Cor: *AZU*
Sequência da Foto: *01*
Nome da Imagem: *10082_AZU_01.jpg*
!cor1.png!
Código do Produto: *10082*
Código da Cor: *SAL*
Sequência da Foto: *01*
Nome da Imagem: *10082_SAL_01.jpg*
!cor2.png!