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.
Observação: atualizamos recentemente o editor de produtos, de modo que as etapas deste guia podem não corresponder ao que você vê em seu site. Você pode alternar para o novo editor de produtos a qualquer momento ou seguir as etapas em Usando o editor de produtos clássico se não estiver pronto para alternar.
Assista a este 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 Armazenamento 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 de Armazenamento, os visitantes podem navegar por vários produtos.
Clicar em um produto leva à página dos detalhes do produto, contendo mais imagens e informações sobre ele.
Tipos de imagens de produto
Ao adicionar ou editar um produto, você pode adicionar as seguintes imagens:
- Imagem em Miniatura
- Imagem principal
- Additional images
- Imagens variantes
- Imagem alternativa de compartilhamento em redes sociais
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áginas de Armazenamento. O cliente deve clicar na miniatura do produto para acessar a página de detalhes do produto
- Blocos de Produto
- Blocos de Sumário
- Os painéis Página de Armazenamento e Inventário
Por padrão, a imagem principal do seu produto se torna a imagem em miniatura. Para definir uma imagem em miniatura diferente:
- No editor do produto, clique em Imagem em miniatura.
- Fazer upload de uma imagem.
- 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.
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 a aparência de cada variante do produto. Por exemplo: você pode usar essas imagens para mostrar um produto em diferentes tamanhos e cores. Por padrão, a miniatura do produto aparece até o cliente selecionar uma variante no menu suspenso.
Para personalizar uma imagem variante:
- No Editor de produtos, role até a seção da variante e clique em Editar tudo.
- Clique no ícone Carregar imagem ao lado de uma variante.
- Clique no ícone + para fazer upload de uma imagem ou selecione uma imagem que você já enviou.
- 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.
Na versão 7.0, a exibição da imagem depende do tipo de Página de Armazenamento 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 de Armazenamento Clássicas ou Exclusivas.
- Como a primeira imagem na página de detalhes do produto.
- No painel Página de Armazenamento ou no painel Inventário.
A imagem principal é a primeira imagem exibida no editor do produto. Clique e arraste as imagens para alterar a ordem.
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:
- Página de detalhes do produto.
- A segunda imagem pode ser exibida ao mover o cursor em Páginas de Armazenamento Avançadas.
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.
Miniaturas
As miniaturas mostram uma prévia dos seus produtos em diferentes áreas do seu site. Em templates que suportam a Página de Armazenamento Avançada, 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:
- Páginas de Armazenamento Avançadas
- Blocos de Produto
- Blocos de Sumário
- No template Adirondack, eles são exibidos como um banner em páginas individuais de detalhes do produto.
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:
- No editor do produto, clique na guia Opções.
- Na caixa da Imagem em miniatura, clique no ícone da Lixeira.
- Adicione uma imagem em miniatura.
- Clique em 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. Por padrão, a miniatura do produto aparece até o cliente selecionar uma variante no menu suspenso.
Para personalizar uma imagem variante:
- No editor de produto, clique em Preços e variantes.
- Na coluna à extrema esquerda, clique no campo de imagem para editá-la.
Imagem alternativa de compartilhamento em redes sociais
A Imagem de compartilhamento social alternativo de um produto é exibida nas plataformas de compartilhamento social ou em aplicativos de mensagens de texto quando você compartilha o URL da página de detalhes do produto. Se você não adicionar uma Imagem de compartilhamento social alternativo para um produto, usaremos a miniatura do item.
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 como as imagens em miniatura 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:
- Edite a página, Abra Estilos do Site e, em seguida, clique em Itens do produto .
- 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 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 de Armazenamento da sua família de templates. Para saber mais, acesse Estilizar de Página de Armazenamento.
- Clássico
- Advanced [Avançado]
- Exclusivo
Ajustes Clássicos
Estes são os ajustes específicos da imagem para as Páginas de Armazenamento Clássicas:
- Páginas de Armazenamento — 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 de Armazenamento.
- 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
Estes são os ajustes específicos da imagem para Páginas de Armazenamento Avançadas:
- Páginas de Armazenamento – Use o ajuste Proporção da imagem na seção Produtos: Layout para definir a forma das imagens na Página de Armazenamento. 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 de Armazenamento 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 de Armazenamento.
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".