Cartão do produto
O que você vai aprender
- Pra que serve este block e o que pode ir dentro dele
- Como funciona a estrutura de imagem embutida
Pra que serve
É o cartão de produto usado em listas e coleções: uma "moldura" que já vem com um grupo de imagem interno (com galeria e troca de imagem ao passar o mouse) e aceita outros blocks dentro pra montar o conteúdo abaixo ou sobre a imagem (Título, Preço, Avaliação, Swatches, Texto, Liquid personalizado). Também aceita blocks de app.
Assim como o Group, este block é um container: o valor dele está em quais blocks você coloca dentro e na ordem deles, não em uma configuração isolada.
Como configurar
| Configuração | Pra que serve |
|---|---|
| Produto | Fixa o cartão num produto específico. Deixe vazio quando o cartão for usado dentro de uma lista dinâmica de produtos (o produto muda automaticamente por item). |
| Espaçamento vertical | Espaço entre a imagem e o conteúdo abaixo dela. |
| Herdar esquema de cores | Quando ativado, usa o esquema de cores do contexto ao redor. Desative pra escolher um esquema de cores próprio pro cartão. |
Tamanho
| Configuração | Pra que serve |
|---|---|
| Largura no desktop / Largura no celular | Ajustar, Preencher ou Personalizada (percentual), controla a largura do cartão separadamente por dispositivo. Ver Dimensão de imagem pra mais detalhe sobre esse padrão. |
Bordas
| Configuração | Pra que serve |
|---|---|
| Estilo | Nenhuma ou Sólida. |
| Espessura / Opacidade / Raio do canto | Só aparecem com borda "Sólida" (espessura e opacidade) ou sempre (raio do canto). |
Boas práticas
- Não é preciso adicionar manualmente a imagem, o preset já vem com a galeria de imagem do produto embutida, dá pra focar em organizar só os blocks de texto/preço abaixo dela.