Imagens de produtos

Dicas para adicionar fotografias de produtos de destaque à sua loja.

Ultima atualização 3 de Janeiro de 2025

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

matricule-se no nosso webinar com dicas de design para aumentar as vendas da sua loja (apenas em inglês). Apresentaremos ferramentas e dicas para você destacar seus produtos no site e gerar vendas.

Assista a este vídeo

Antes de adicionar imagens

Você pode adicionar imagens a um produto enviando-as diretamente ou reutilizando imagens que você já carregou em outras áreas do seu site.

Antes de fazer upload de uma imagem, consulte nossas diretrizes de formatação de imagem para garantir que suas imagens tenham o tamanho e a qualidade adequados para exibição online.

A proporção de uma imagem afeta a forma como ela aparece com o tamanho do produto e as opções de corte automático. Recomendamos editar suas imagens na proporção desejada antes de enviá-las. Você também pode alterar o foco de uma imagem cortada depois de adicioná-la usando seu ponto focal.

Um produto pode ter até 100 imagens. No entanto, sobrecarregar o produto com imagens pode fazer com que a página carregue lentamente. Recomendamos manter as páginas com menos de 5 MB.

Dica

comece adicionando algumas imagens de teste para ver como elas ficam e experimente as opções de estilo.

Página da loja x páginas 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áginas de Loja são páginas de destino para vários produtos.
  • A página de detalhes mostra os detalhes de um só produto

Por exemplo, nesta Página da loja, os visitantes podem navegar por 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 em destaque
  • Imagem principal
  • Additional images
  • Imagens variantes
  • Imagem alternativa de compartilhamento em redes sociais

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

As imagens em destaque representam o produto na maioria das áreas do seu site, então é melhor usar a imagem que você deseja que os clientes vejam primeiro. A imagem aparece nessas áreas:

  • Páginas da loja. Os compradores clicam na imagem em destaque de um produto para acessar a página de detalhes do produto
  • Blocos de Produto
  • Blocos de Sumário
  • Página da loja e painel "Produtos"

Por padrão, a imagem principal do seu produto se torna a imagem em destaque. Para definir uma imagem em destaque diferente:

  1. No editor do produto, clique na miniatura da imagem atual em destaque.
  2. Fazer upload de uma imagem.
  3. Passe o cursor sobre Concluído e clique em Salvar.

Imagens principais

A imagem principal aparece como a primeira imagem nas páginas de detalhes do produto. A imagem principal é a primeira imagem exibida no editor do produto. Clique e arraste as imagens para alterar a ordem.

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. No editor do produto, todas as imagens após a primeira são imagens extras. Clique e arraste as imagens para alterar a ordem. 

Imagens variantes

Na página do item de produto, as imagens das variantes mostram cada variante do produto. Você pode usar essas imagens, por exemplo, para mostrar um produto em diferentes tamanhos e cores. Como padrão, a imagem em destaque do produto aparece até o cliente selecionar uma variante no menu suspenso.

Para personalizar uma imagem variante:

  1. No Editor de produtos, role até a seção da variante e clique em Editar tudo.
  2. Clique no ícone Carregar imagem ao lado de uma variante.
  3. Clique no ícone + para fazer upload de uma imagem ou selecione uma imagem que você já enviou.
  4. Clique em Aplicar.

Também é possível clicar em uma variante no editor principal do produto e depois em Adicionar imagens para adicionar uma imagem da variante. As imagens das variantes aparecem na galeria de imagens extras na página de detalhes do produto. 

Na versão 7.0, a exibição da imagem depende do tipo de Página da loja do seu 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 da loja Clássicas ou Exclusivas.
  • Como a primeira imagem na página de detalhes do produto.
  • No painel da página da loja ou no painel "Produtos".

A imagem principal é a primeira imagem exibida no editor do 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 guia 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

As imagens em destaque mostram uma visualização de seus produtos em diferentes áreas do site. Nos templates compatíveis com a página Avançado da loja, os compradores clicam na imagem em destaque de um produto para acessar a página Detalhes do produto. As imagens em destaque também são exibidas nessas áreas:

Por padrão, a primeira imagem adicionada na guia Item do editor do produto se torna a imagem em destaque. Para definir uma imagem em destaque diferente:

  1. No editor do produto, clique na guia Opções.
  2. Na caixa Imagem em destaque, clique no ícone Lixeira.
  3. Adicione uma imagem em destaque.
  4. Clique em Salvar.

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

Imagens variantes

Na página do item de produto, as imagens das variantes mostram cada variante do produto. Você pode usar essas imagens, por exemplo, para mostrar um produto em diferentes tamanhos e cores. Como padrão, a imagem em destaque 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.

As imagens das variantes aparecem na galeria de imagens extras na página de detalhes do produto.

Imagem alternativa de compartilhamento em redes sociais

Quando você compartilha o URL da página de detalhes do produto, a Imagem alternativa para compartilhamento em redes sociais de um produto aparece nas plataformas de compartilhamento em redes sociais ou nos aplicativos de mensagens de texto. Se você não adicionar a imagem alternativa, usaremos a imagem em destaque do item.

Apague a imagem de um produto

Para apagar a imagem de um produto:

  1. Edite o produto
  2. Na seção Imagens, passe o cursor sobre a imagem e clique no ícone de lixeira
  3. Clique em Apagar

Ao apagar a imagem de uma variante da galeria de imagens extras, ela também é excluída do editor da variante.

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

Personalize como as imagens do produto aparecem usando estilos de seção e os ajustes do Item do produto no painel Estilos do Site.

Seção de produtos

Para alterar a forma como as imagens de destaque do produto são exibidas nas seções da loja, mova 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.

Se as imagens do produto aparecerem recortadas, confira Solução de problemas no recorte.

Páginas de detalhes de produtos

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

  1. Edite a página e clique em Editar design.
  2. Abra estilos de seção e clique no menu suspenso de layout.
  3. Selecione um layout.
  4. Clique em Salvar para salvar as alterações e continuar editando ou clique em Sair e depois em Salvar para fechar o editor.
    .

Você pode estilizar elementos como proporção da imagem, alinhamento do texto e design da galeria de produtos. Para obter um design coeso, essas mudanças de estilo se aplicam a todos os produtos em sua loja. Não é possível editar essas configurações para produtos específicos.

Use o painel Estilos do Site para personalizar como as imagens do produto aparecem. Os layouts e as opções de estilo disponíveis dependem do tipo de Página da loja da sua família de templates. Para saber mais, acesse Estilizar de Página da loja.

  • Clássico
  • Advanced [Avançado]
  • Exclusivo

Ajustes Clássicos

Estes são os ajustes específicos da imagem para as Páginas da loja Clássicas:

  • Páginas da loja — use os ajustesTamanho de item de produto, Recorte automático de imagem do produto e Cor de fundo do produto para estilizar o modo como as imagens do produto são exibidas na Página da loja.
  • Página de itens- use os ajustes de Tamanho da galeria de produtos e Recorte automático da galeria de produtos para fixar o tamanho e o recorte da imagem na página de detalhes.

Ajustes Avançados

Estes são os ajustes específicos da imagem para Páginas da loja Avançadas:

  • Páginas da loja – Use o ajuste Proporção da imagem na seção Produtos: Layout para definir a forma das imagens na Página da loja. As imagens são automaticamente recortadas para se ajustarem à 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 da loja oferecem recursos especiais que permitem exibir imagens de formas dinâmicas. A exibição dessas imagens depende da versão do seu site.

  • 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. 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 o cursor - esta é uma ótima maneira de exibir um recurso especial, um ângulo diferente ou um detalhe importante dos produtos.

Para obter ajuda com qualquer um desses, acesse os recursos especiais da Página da loja.

Como adicionar texto alternativo

O texto alternativo nas imagens dos produtos identifica o conteúdo das suas imagens para browsers e buscadores. Com isso, suas imagens aparecem nos resultados da busca de imagens e deixa seu site mais acessível para visitantes que usam leitor de tela com assistência.

Ao adicionar um texto alternativo, use termos curtos e que descrevam a imagem e o produto, como "Plano fechado do broche de bronze" e "Parte de trás do vestido floral". Você pode adicionar um texto alternativo com até 200 caracteres a uma imagem do produto. Confira este guia para saber mais sobre como criar um site Commerce acessível.

Melhorar as imagens de produtos usando extensões

Vincule o Soona - o estúdio de conteúdo virtual para fotografia e vídeos de eCommerce. Localizado no painel "Extensões" do seu site, ele cria visuais de qualidade profissional para aprimorar sua loja on-line. Basta enviar os produtos para o Soona e explicar o que quer criar. Em seguida, monte sua sessão de fotos ou selecione um pacote com preço fixo e participe virtualmente da sessão de fotos.

Trabalhamos com serviços externos para que as Squarespace Extensions funcionem corretamente; porém, as extensões fogem do escopo do nosso suporte. Podemos ajudar você a vincular ou a desvincular suas extensões. Para todas as outras perguntas, procure o provedor da extensão.

Footer Image
  • Peça ajuda à nossa comunidade

  • Peça ajuda à nossa comunidade sobre personalizações avançadas.

  • Contrate um Squarespace Expert

  • Ganhe destaque on-line com a ajuda de um designer ou desenvolvedor experiente.