Cartão do produto
O que você vai aprender
- Pra que serve este block
- O que pode ir dentro dele
- Como fixar um produto específico em vez do produto do contexto
Pra que serve
É o card de produto usado em listas de coleção, recomendações e outras grades de produtos: imagem, título, preço e o que mais você adicionar. É um block estrutural, os blocks de conteúdo (Imagem, Título do produto, Preço, Estrelas de avaliação, Swatches) ficam dentro dele e você monta a combinação que quiser.
Por padrão, ele mostra o produto do contexto onde está (ex: cada card dentro de uma lista de coleção mostra um produto diferente automaticamente). O campo Produto só é necessário quando você quer fixar manualmente um produto específico, independente do contexto (por exemplo, destacar sempre o mesmo produto numa section fixa).
Como configurar
| Configuração | Pra que serve |
|---|---|
| Produto | Fixa um produto específico no card, em vez de usar o produto do contexto. Deixe em branco na maioria dos casos. |
| Espaçamento vertical | Espaço entre os elementos dentro do card (imagem, título, preço). |
| Herdar esquema de cores | Usa a cor da section onde está; desative pra escolher uma cor própria pro card. |
Tamanho
| Configuração | Pra que serve |
|---|---|
| Largura no desktop / celular | Ajustar ao conteúdo, Preencher o espaço disponível, ou Personalizado (porcentagem definida manualmente). |
| Largura personalizada | Só aparece quando a largura está em "Personalizado". |
Bordas
| Configuração | Pra que serve |
|---|---|
| Estilo | Nenhuma borda ou borda sólida ao redor do card. |
| Espessura / Opacidade / Raio do canto | Ajustes da borda, só fazem efeito com estilo "Sólido". |
Boas práticas
- A Proporção da foto do produto é configurada clicando na galeria dentro do card (não aparece nas configurações do card em si). Veja Dimensão de imagem pra saber que tamanho enviar, e mantenha a mesma proporção nas fotos principais de todos os produtos, pra grade não ficar com alturas desiguais.