Como exibir produtos relacionados

Sugira outros itens da mesma categoria quando os compradores conferirem um produto.

Ultima atualização 20 de Janeiro de 2025

Incentive os clientes a explorar a loja, sugerindo produtos relacionados enquanto eles compram. Os produtos relacionados são exibidos nas páginas de detalhes de produtos, de acordo com a categoria ou tag. Esse é um ótimo jeito de ajudar os compradores a encontrar o que procuram e descobrir produtos novos. É possível exibir produtos relacionados a todos os tipos de produtos.

Para expor itens complementares relacionados como um complemento opcional e incentivar os clientes a adicionarem outros itens aos pedidos, confira Vendendo produtos complementares. Confira dicas sobre como aumentar sua receita em "Aumentando as vendas na sua loja".

Acessando o recurso

"Produtos relacionados" é um recurso disponível nos planos Essencial, Plus, Avançado, Commerce Básico e Commerce Avançado. Saiba mais em "Escolhendo o plano certo no Squarespace".

Antes de começar

Para sugerir produtos relacionados, adicione categorias e tags a todos os produtos. 

Exibição de produtos relacionados

Para exibir produtos relacionados:

  1. Abra o painel "Produtos relacionados".
  2. Desative a opção Mostrar produtos relacionados.
  3. Clique no Título da seção para personalizar o texto que apresenta a seção de produtos relacionados. O texto padrão é: “Você pode também gostar de”.
  4. Clique no menu suspenso Opções de exposição para escolher como os produtos aparecem.
    • Aleatório - mostra produtos aleatórios na categoria ou tag.
    • Recentemente adicionados - mostra os produtos mais recentes na categoria ou tag.
    • Com maior estoque - mostre produtos com o mais alto nível de estoque na categoria ou tag.
  5. Clique em Salvar.

A seção de produtos relacionados mostra apenas produtos da mesma página da loja.

Como os produtos relacionados são exibidos

Os produtos relacionados aparecem na parte inferior da página de detalhes do produto e mostram até cinco produtos da mesma página da loja. Não é possível personalizar o número de produtos relacionados que aparecem.

Por padrão, a seção de produtos relacionados utiliza a primeira categoria do produto. Para exibir os produtos relacionados com base em outra categoria ou tag, edite o produto:

  1. No editor de produto, clique em Ferramentas de vendas.
  2. Clique em Produtos relacionados.
  3. Clique no menu suspenso e selecione a tag ou categoria que deseja usar para sugerir produtos relacionados. Você também pode selecionar Desativado para desativar a seção dos produtos relacionados para esse item.
  4. Clique em Aplicar.
  5. Clique em Salvar

Estes campos são exibidos para todos os produtos relacionados:

  • Imagem em destaque
  • Título
  • Preço

O layout exato varia de acordo com o template. Veja como fica no template Brine:

Screen_Shot_2019-09-12_at_11.15.40_AM.png

Estilize produtos relacionados

Como você estiliza a seção de produtos relacionados depende da versão do Squarespace do seu site.

A seção de produtos relacionados segue os ajustes dos estilos da seção de loja. As fontes seguem os ajustes de fonte do site.

A fonte do título da seção e o tamanho do texto seguem o ajuste Título 2 na seção Títulos. Para alterar a cor:

  1. Vá até o painel Cores e clique no tema da seção aplicado à Página da loja.
  2. Altere o ajuste Título (grande.

Na versão 7.0, o modo de acessar as configurações de estilo dos produtos relacionados depende do tipo da página da loja que o template aceita. Algumas opções de estilo também diferem com base no tipo da página da loja.

  • Página da loja clássica – Abra uma página de item que mostra produtos relacionados. Em estilos de site, role até a seção Produtos: Produtos relacionados.
  • Página avançada da loja – Enquanto estiver na página da loja, abra os estilos do site e clique em Produto: Detalhes.

Use esses ajustes para mudar o estilo:

  • Itens por linha - ajuste o número de produtos relacionados exibidos por linha.
  • Espaçamento de itens - ajuste o espaçamento entre produtos relacionados.
  • Proporção da imagem - Altere a proporção entre largura e altura da imagem em destaque.
  • Alinhamento de Detalhes: Centro, Esquerda - desloque o alinhamento do texto do título e preço do produto.
  • Espaçamento do título do item - Defina a distância entre o título do produto e a imagem em destaque.

A forma como você edita a fonte, o tamanho do texto e a cor do título da seção depende do tipo de Página da loja aceito pelo template:

  Tamanho da fonte e do texto Cor
Advanced [Avançado] Título 2 na seção Conteúdo: Fontes Título 2 na seção Conteúdo: Cores
Clássico Título 2 na secção Tipografia Título 2 na seção Cor
Galapagos Ativar Cabeçalhos Personalizados e usar Fonte do Título 2 na seção Todo o Site Ativar cabeçalhos personalizados e usar a cor do cabeçalho 2 na seção Todo o site
Supply Fonte do cabeçalho na seção Conteúdo principal Cor do cabeçalho na seção Conteúdo principal

Desative produtos relacionados

Para desativar produtos relacionados:

  1. Abra o painel "Produtos relacionados".
  2. Desative a opção Mostrar produtos relacionados.
  3. Clique em Salvar.
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.

Como exibir produtos relacionados