Loja Virtual - Imagens » Histórico » Versão 23
Versão 22 (larissa, 24/09/2020 14:54 h) → Versão 23/44 (larissa, 24/09/2020 14:54 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 430px*
Largura: *Recomendado 1920px*
h2. Banner Rotativo (Mobile)
Responsivo: *não*
Tipo de Arquivo: *JPG*
Altura: *Recomendado 600px*
Largura: *Recomendado 770px*
h2. Imagens de produtos
Responsivo: *sim*
Tipo de Arquivo: *JPG*
Altura: *1000px* (ou proporcional)
Largura: *720px* (ou proporcional)
Estampa: *50x50px* 50x50px
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.*
Observação 3: *O Profile da cor é importante para não ter disparidade entre a foto e o que é exibido no site, procurar manter o padrão sRGB.*
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>
Além da imagem do produto, é possível adicionar imagens da estampa. Dessa forma, ao visualizar o produto na loja, no lugar do quadrado com as cores, aparecerá quadrados com as estampas.
As dimensões da imagem devem ser de 50x50px.
_Esta imagem é opcional._
<pre>
Imagem da estampa(opcional):
839103.jpg
| +--- extensão obrigatória
+--------- 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_213_sample.jpg
| | | +--- extensão obrigatória
| | +------- sample para identificar que a imagem se refere à estampa e não ao produto
| +---------- 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>
*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. Layout
O Layout do B2B possuí certas características que podem ser alteradas conforme a necessidade dos
clientes, dessa forma fazendo com que o produto assuma a identidade visual das marcas.
Podem ser alterados hoje esquema de cores, fontes, banners e logos.
!feminize1.jpg!
!feminize2.jpg!
!ohmy1.jpg!
!ohmy2.jpg!
!yeskla1.jpg!
!yeskla2.jpg!
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 430px*
Largura: *Recomendado 1920px*
h2. Banner Rotativo (Mobile)
Responsivo: *não*
Tipo de Arquivo: *JPG*
Altura: *Recomendado 600px*
Largura: *Recomendado 770px*
h2. Imagens de produtos
Responsivo: *sim*
Tipo de Arquivo: *JPG*
Altura: *1000px* (ou proporcional)
Largura: *720px* (ou proporcional)
Estampa: *50x50px* 50x50px
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.*
Observação 3: *O Profile da cor é importante para não ter disparidade entre a foto e o que é exibido no site, procurar manter o padrão sRGB.*
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>
Além da imagem do produto, é possível adicionar imagens da estampa. Dessa forma, ao visualizar o produto na loja, no lugar do quadrado com as cores, aparecerá quadrados com as estampas.
As dimensões da imagem devem ser de 50x50px.
_Esta imagem é opcional._
<pre>
Imagem da estampa(opcional):
839103.jpg
| +--- extensão obrigatória
+--------- 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_213_sample.jpg
| | | +--- extensão obrigatória
| | +------- sample para identificar que a imagem se refere à estampa e não ao produto
| +---------- 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>
*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. Layout
O Layout do B2B possuí certas características que podem ser alteradas conforme a necessidade dos
clientes, dessa forma fazendo com que o produto assuma a identidade visual das marcas.
Podem ser alterados hoje esquema de cores, fontes, banners e logos.
!feminize1.jpg!
!feminize2.jpg!
!ohmy1.jpg!
!ohmy2.jpg!
!yeskla1.jpg!
!yeskla2.jpg!