Obs.: embora os nossos guias mais acessados tenham sido traduzidos para o espanhol, outros guias estão disponíveis apenas em inglês.
Imagens de produtos

Ao administrar uma loja on-line, é muito importante ter ótimas imagens de produtos. Você pode usar imagens para representar produtos em todo o seu site, destacar suas principais características e oferecer uma perspectiva mais próxima de detalhes e texturas. Este guia aborda as diversas maneiras de usar imagens de produtos.

Dica: para aproveitar tudo que este guia oferece, primeiro crie uma Página de Produtos e adicione produtos à sua loja.

Assistir a um vídeo

Antes de carregar imagens

Veja nossas orientações de formatação de imagens para garantir que suas imagens tenham tamanho e qualidade adequados para a visualização on-line.

A proporção da imagem afeta como ela irá aparecer conforme suas opções de tamanho do produto e recorte automático. Recomendamos editar suas imagens para a proporção desejada antes de fazer o upload. Após carregá-la, você também pode ajustar o foco de uma imagem recortada usando seu ponto focal.

Dica: comece carregando algumas imagens de teste para ver como fica e experimente as diferentes opções de estilo.

Página de destino x Páginas de itens de produtos

Antes de abordar imagens de produtos, é importante saber como o Squarespace estrutura os produtos nos sites. Os produtos são organizados em duas partes:

  • Páginas de produtos são páginas de destino de vários produtos
  • Páginas de itens mostram os detalhes de um único produto

Por exemplo, nesta Página de Produtos, os visitantes podem buscar vários produtos.

Galapagos__.jpg

Clicar em qualquer produto leva à página de item de produto, contendo mais imagens e informações sobre o produto individual.

Teresa_Jacket___Galapagos.jpg

Tipos de imagens de produtos 

Ao adicionar ou editar um produto, você pode adicionar as seguintes imagens:

O modo como elas são exibidas depende do tipo de Página de Produtos do seu template.

Imagens principais

A imagem principal representa o produto na maioria dos lugares, por isso é importante usar uma imagem que você deseja que seus clientes vejam primeiro. A imagem aparece nos seguintes lugares:

  • Em páginas de destino de Páginas de Produtos Clássicas ou Exclusivas.
  • Como a primeira imagem em páginas de itens de produtos.
  • No painel de Página de Produtos ou no Painel de Inventário.

A imagem principal é a imagem no canto superior esquerdo na aba de Item do editor de produto. Clique e arraste as imagens para alterar a ordem.

product_primary_image.png

Additional images

Imagens adicionais oferecem aos clientes uma bom contato com seus produtos. Use imagens adicionais para mostrar mais detalhes, ângulos diferentes ou fotos encenadas do seu produto. Imagens adicionais aparecem nos seguintes lugares:

Na aba Item do editor de produto, todas as imagens depois da primeira imagem são imagens adicionais. Clique e arraste as imagens para alterar a ordem.

Additional_Image.png

Miniaturas

As imagens em miniatura mostram uma prévia dos seus produtos em diferentes áreas do seu site. Clientes clicam na imagem em miniatura do produto para acessar a página de item de produto. As imagens em miniatura são exibidas nas seguintes áreas: 

Por padrão, a primeira imagem adicionada na aba Item do editor de produto se torna a imagem em miniatura. Para definir outra imagem em miniatura:

  1. No editor de produto, clique na aba Opções
  2. Na caixa da Imagem em miniatura, clique no ícone da Lixeira
  3. Adicione uma imagem em miniatura.
  4. Clique em Save (Salvar).

Se você remover a imagem em miniatura sem definir uma substituição, a imagem principal será exibida.

Imagens variantes

Em páginas de itens de produtos, as imagens variantes mostram aos clientes a aparência de cada variante de produto. Por exemplo, você pode usar imagens variantes para mostrar produtos em diferentes tamanhos e cores. Por padrão, a imagem em miniatura do produto é exibida até que o cliente selecione uma variante no menu suspenso.

Para personalizar uma imagem variante:

  1. No editor de produto, clique em Preços e variantes.
  2. Na coluna à extrema esquerda, clique no campo de imagem para editá-la.

Estilize imagens de produtos

Use o painel de Estilos do Site para personalizar a aparência das imagens de produtos. As opções de layouts e estilos disponíveis dependem do tipo de Página de Produtos da família do template:

Ajustes Clássicos

Veja abaixo os ajustes específicos de imagens para Páginas de Produtos Clássicas:

  • Páginas de destino - use os ajustes de Tamanho do item de produtoRecorte automático de imagem do produtoCor de fundo do produto para estilizar como as imagens do produto são exibidas na página de destino.
  • Páginas de itens- use os ajustes de Tamanho da Galeria de ProdutosRecorte automático da Galeria de Produtos para definir o tamanho da imagem e o recorte em páginas de itens.

Ajustes Avançados

Veja abaixo os ajustes específicos de imagens para Páginas de Produtos Avançadas:

  • Páginas de destino - use o ajuste de proporção da imagem na seção Produtos: Layout para definir a forma das imagens na página de destino. As imagens são recortadas automaticamente para caber na forma.
  • Páginas de itens - use os ajustes na seção de Produtos: Galeria, como Design, Proporção da imagem, Alinhamento de imagens em miniatura e Largura de imagens em miniatura para estilizar imagens em páginas de itens.

Ajustes Exclusivos

Para saber como estilizar imagens de produtos nos templates abaixo, acesse os guias de templates:

Opções de imagens especiais

Algumas Páginas de Produtos oferecem recursos especiais que permitem exibir imagens de maneiras dinâmicas.

  • Visualização rápida de produtos - clientes podem clicar em um botão para visualizar detalhes de itens em uma lightbox sem sair da página atual.  
  • Aproximação na imagem de produtos - clientes podem ampliar imagens de produtos para ver de perto o material, a textura e os detalhes.
  • Imagem alternativa ao pairar o cursor - esta é uma ótima maneira de exibir um recurso especial, um ângulo diferente ou um detalhe importante dos produtos.

Para obter ajuda com esses recursos, acesse Recursos especiais da Página de Produtos.

Como adicionar texto alternativo

Adicionar texto alternativo às imagens dos produtos identifica o conteúdo das suas imagens para navegadores e motores de busca. Isso ajuda suas imagens a aparecerem em resultados de busca de imagens e torna seu site mais acessível para visitantes que usam leitores de tela assistivos.

Ao adicionar texto alternativo, use termos curtos que descrevam a imagem e o produto. Por exemplo, "Plano fechado do broche de latão" e "Parte de trás do vestido floral".

Esse artigo foi útil?
Usuários que acharam isso útil: 10 de 37
Imagens de produtos