No editor de temas: Personalizar›Configurações do tema›Cartões de produto
Cartões de produto
Como os produtos aparecem em qualquer grade: a imagem, o nome e o preço, a moeda de adição rápida e os selos.
O campo “Badge” do próprio produto mostra uma palavra própria no card, como “Novo”. Os selos de promoção e esgotado aparecem automaticamente.
Configurações
Imagem
- Proporção da imagem
- Opção: Quadrada, Retrato, Paisagem, Igual à imagem do produtoPadrão: Retrato
- Cantos da imagem
- Controle deslizante, de 0 a 40 pxPadrão: 12 pxDe 0 (cantos retos) a totalmente arredondados. 12 corresponde aos cantos dos botões.
- Mostrar segunda imagem
- Ativado ou desativadoPadrão: AtivadoCelular: deslize entre as duas imagens. Computador: setas aparecem ao passar o mouse.
Conteúdo
- Mostrar fornecedor
- Ativado ou desativadoPadrão: Desativado
- Pontos de cor
- Ativado ou desativadoPadrão: AtivadoPontinhos abaixo do preço quando o produto tem opção de cor, a partir das amostras de cor da Shopify ou do nome da cor.
Moeda no cartão
- O que a moeda do cartão faz
- Opção: Inteligente, com Espiar em cada cartão (recomendado), Só inteligente, Sempre abrir a visualização rápida, Sem moeda: o cartão inteiro abre o produtoPadrão: Inteligente, com Espiar em cada cartão (recomendado)Inteligente: um produto sem opções vai direto para o carrinho. Um produto com uma escolha (tamanho, cor ou material) abre no próprio cartão um leque com os valores, e um toque adiciona. Um produto com várias opções abre a visualização rápida. “Espiar” adiciona um pequeno botão de vidro no canto superior que sempre abre a visualização rápida.
- Cor do botão de adicionar
- CorO sinal de mais nas imagens dos produtos. Vazio: a cor escura da página. Uma cor preenche o sinal de mais.
- Cor do ícone de adicionar
- CorVazio: escolhida automaticamente, escura em um botão claro e clara em um escuro.
- Botão de adicionar quando pronto
- CorPadrão: #2563EBO sinal de mais no card do produto quando o leque curto está aberto e outro toque adiciona o produto ao carrinho. Se a cor for igual à do botão mais, ele troca a cor do fundo e do símbolo, então sempre muda.
- Mais no botão de adicionar
- CorPadrão: #FFFFFF
- Opções na aba do mais
- Opção: Preenchidas, ContornoPadrão: PreenchidasPreenchidas: círculos brancos. Contorno: uma moldura fina e texto em uma só cor no fundo da aba, como o mais.
- Cor do contorno
- CorA moldura e o texto das opções. Vazio: a cor do mais que mais se destaca na página.
- Intensidade do contorno
- Controle deslizante, de 20 a 100 %Padrão: 42 %O quanto a moldura é forte em repouso. Ao passar o mouse e ao escolher, ela é sempre plena.
Detalhes
- Porcentagem de desconto no selo
- Opção: Preço exibido (recomendado), Até: o maior desconto, Ocultar quando as porcentagens diferemPadrão: Preço exibido (recomendado)Para produtos cujas variantes têm preços diferentes. Preço exibido: a porcentagem e o preço comparativo pertencem à variante cujo preço o cartão mostra. Se ela não estiver em promoção, não há selo de promoção. Até: o maior desconto do produto, com a redação "até". Ocultar: um selo de promoção somente quando todas as variantes disponíveis têm a mesma porcentagem. Produtos com um único preço não são afetados. Na página do produto e na visualização rápida, a pessoa escolhe uma variante e o preço e a porcentagem sempre pertencem a ela, então esta configuração não se aplica ali.
- Peso do preço no card
- Opção: Normal, NegritoPadrão: NormalO preço nos cards de produto em coleções, busca e linhas de produtos. Negrito igual à página do produto.
- Selo em produtos com desconto
- Opção: Promoção, Porcentagem (23% de desconto)Padrão: PromoçãoO que o selo na imagem diz quando um produto está em promoção. Para um texto seu em qualquer produto (Novo, Mais vendido), preencha o metacampo do produto custom.badge.
- Brilho no botão
- Ativado ou desativadoPadrão: AtivadoUm feixe de luz a cada poucos segundos, somente enquanto o botão está na tela.
Algo aqui não bate com o que aparece no seu editor? Conte para a gente e corrigimos o guia.