Produtos recomendados
O que você vai aprender
- A diferença entre Relacionados e Complementar
- O que acontece quando não há recomendação disponível
- Como funciona a estrutura interna dos cards
Pra que serve
Mostra uma lista de produtos sugeridos com base no produto que a pessoa está vendo, em grade ou carrossel. É um block estrutural: por dentro, ele renderiza um card de produto (imagem, título, preço) pra cada item, que você pode customizar adicionando/removendo blocks dentro dele (o preset padrão já vem com um título "Você também pode gostar" e um card de produto configurado).
Existem dois modos de recomendação, escolhidos em "Tipo":
- Relacionados: usa o algoritmo automático da Shopify, baseado em produtos parecidos (mesma categoria, tags, etc). Funciona sem nenhuma configuração extra.
- Complementar: mostra produtos que combinam com o principal (ex: "combina com"), mas precisa ser configurado no app Search & Discovery no admin da Shopify. Sem essa configuração, esse modo não mostra nada.
Quando não há recomendação disponível (app não configurado, produto muito novo, etc.), o modo Relacionados cai de volta pra mostrar produtos aleatórios do catálogo; o modo Complementar simplesmente fica vazio.
Como configurar
| Configuração | Pra que serve |
|---|---|
| Tipo | Relacionados (automático) ou Complementar (precisa do app Search & Discovery). |
Layout dos cards
| Configuração | Pra que serve |
|---|---|
| Tipo | Grade (todos visíveis) ou Carrossel (rolagem horizontal). |
| Carrossel no celular | Mesmo com Grade escolhida no desktop, força carrossel no celular, útil quando a grade fica apertada em telas pequenas. |
| Contagem de produtos | Quantos produtos buscar e mostrar. |
| Espaçamento horizontal / vertical | Espaço entre os cards. |
Navegação do carrossel
| Configuração | Pra que serve |
|---|---|
| Ícone | Estilo das setas de navegação (só aparece em modo Carrossel). |
| Plano de fundo do ícone | Adiciona um fundo (círculo/quadrado) atrás das setas. |
Layout e aparência
| Configuração | Pra que serve |
|---|---|
| Espaçamento | Espaço entre o título e a lista de produtos. |
| Raio do canto | Arredondamento do bloco todo. |
| Herdar esquema de cores | Usa a cor da section onde está; desative pra escolher uma cor própria. |
Boas práticas
- Se "Complementar" não mostrar nada, o problema quase sempre é falta de configuração no Search & Discovery, não um bug do tema.