Obs.: embora os nossos guias mais acessados tenham sido traduzidos para o português, 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 Produtos x página de detalhes do produto

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ágina de Produtos é a página de destino de vários produtos. Na versão 7.1, ela é chamada de Página da Loja.
  • A página de detalhes mostra os detalhes de um só produto

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

Galapagos__.jpg

Clicar em um produto leva à página dos detalhes do produto, contendo mais imagens e informações sobre ele.

Teresa_Jacket___Galapagos.jpg

Tipos de imagens de produto

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

  • Imagem principal
  • Additional images
  • Thumbnail image
  • Imagens variantes

A forma como ela aparece depende da versão do site.

Miniaturas

As miniaturas representam o produto na maioria das áreas do seu site; por isso, é melhor usar a imagem que você deseja que os clientes vejam primeiro. A imagem aparece nos seguintes lugares: 

  • Página de Produtos. O cliente deve clicar na miniatura do produto para acessar a página de detalhes do produto
  • Product Blocks
  • Blocos de Sumário
  • A Página de Produtos e os painéis Inventário

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 principais

A imagem principal aparece como a primeira imagem nas páginas de detalhes do produto.

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

As imagens extras dão aos clientes uma ideia mais clara dos seus produtos. Use as imagens extras para mostrar mais detalhes, ângulos diferentes ou fotos encenadas do produto. Essas imagens aparecem nas páginas de detalhes do produto. Na aba Item do editor do produto, todas as imagens após a primeira são imagens extras. Clique e arraste as imagens para alterar a ordem. 

Additional_Image.png 

Imagens variantes

Na página do item de produto, as imagens das variantes mostram a aparência de cada variante do produto. Por exemplo: você pode usar essas imagens para mostrar um produto em diferentes tamanhos e cores. Como padrão, a miniatura do produto aparece até o cliente selecionar 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.

Na versão 7.0, a exibição da imagem depende do tipo de Página de Produtos do template.

Imagens principais

Como a imagem principal representa o produto na maioria das áreas do seu site, é melhor usar uma imagem que você deseja que a maioria dos clientes veja primeiro. A imagem aparece nos seguintes lugares:

  • Nas Páginas de Produtos Clássicos ou Exclusivos.
  • Como a primeira imagem na página de detalhes do produto.
  • 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 visualização dos seus produtos em diferentes áreas do seu site. Em modelos que suportam a Página de Produtos Avançados, os compradores clicam na imagem de miniatura de um produto para acessar a página Detalhes do produto. As imagens em miniatura também são exibidas nestas á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

Na página do item de produto, as imagens das variantes mostram a aparência de cada variante do produto. Por exemplo: você pode usar essas imagens para mostrar um produto em diferentes tamanhos e cores. Como padrão, a miniatura do produto aparece até o cliente selecionar 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

O modo de editar o estilo das imagens do produto depende da versão do Squarespace na qual o site está.

Use os estilos de seção e os ajustes Item do produto no painel Design para personalizar como as imagens do produto aparecem.

Seção de produtos

Para alterar a forma como as miniaturas do produto aparecem na seção Produto, passe o cursor sobre a seção e clique no ícone de lápis.

Você pode alterar o espaçamento, as colunas, a proporção da imagem e o alinhamento do texto. Você também pode mostrar ou ocultar o preço dos produtos. Para alterar as cores, clique em Cores.

Páginas de detalhes de produtos

Para alterar a forma como o produto aparece na página de detalhes do produto:

  1. No Menu Inicial, clique em Design e em Itens de produtos.
  2. Faça as alterações e clique em Salvar.

Você pode editar o estilo de elementos como proporção da imagem, alinhamento do texto e design da galeria 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ágina de Produtos - use os ajustes de Tamanho do item de produtoRecorte automático da imagem do produtoCor de fundo do produto para editar como as imagens do produto aparecem na página de destino.
  • Página de itens- use os ajustes de Tamanho da galeria de produtos e Recorte automático da galeria de produtos para definir o tamanho da imagem e o recorte na página de detalhes.

Ajustes Avançados

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

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

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 do produto - Os clientes podem clicar em um botão para exibir detalhes do item em uma lightbox, sem navegar para longe da página atual. Na versão 7.1, isso está disponível somente na página Detalhes do produto.
  • Zoom da imagem do produto - Os clientes podem ampliar as imagens do produto para uma visão mais detalhada do material, textura e detalhes mais finos. Na versão 7.1, isso está disponível somente na página Detalhes do produto.
  • Imagem alternativa ao pairar - Esta é uma ótima maneira de mostrar um recurso especial, outro ângulo ou um detalhe chave para cada produto. Isso só está disponível na versão 7.0.

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".

Este artigo foi útil?
Utilizadores que acharam útil: 14 de 62
Imagens de produtos