A vitrine: cartões, filtros, ordem e o menu de categorias

Onde: Aparência.

A vitrine é a loja inteira listada: a página Loja, cada categoria, cada marca e a busca. O que muda ali fica em Produtos e Filtros, na Aparência, com a página Categoria escolhida; o menu de categorias, em Barra de categorias.

O cartão do produto

• Solto ou numa caixa — o cartão começa solto, sem moldura. Em Desenho do cartão dá para pô-lo numa caixa, com borda, cantos arredondados e uma sombra que sobe ao passar o mouse. Na caixa, o cartão aceita Fundo do cartão do produto e Borda do cartão do produto.
• Fundo atrás da foto do produto — escolha uma cor e a foto de cada produto ganha um quadro nessa cor, de cantos arredondados, com respiro em volta. Fica melhor com fotos recortadas, sem fundo: o produto parece flutuar no quadro.
• Nome do produto em MAIÚSCULAS, para combinar com os títulos das seções em caixa alta.
• Onde fica o botão no cartão — embaixo do preço (o padrão) ou ao lado do preço, na mesma linha, no computador. No celular, com dois produtos por linha, ele continua embaixo. Com o botão ao lado, use um texto curto, como “Comprar”, em Aparência → Produtos e filtros → Textos dos botões.
• A cor dos botões principais (comprar, finalizar, fazer pedido) segue a cor principal da loja, com o texto que se lê sobre ela e um tom mais escuro ao passar o mouse. Para outra cor, escolha em Aparência → Botões → Cor do botão; para voltar a seguir a cor da loja, deixe em Automática.
• O botão do cartão vem no estilo suave: fundo clarinho da cor do botão, que se preenche ao passar o mouse. Uma fileira de botões escuros iguais pesa mais que os produtos. No mesmo lugar — Aparência → Produtos e filtros → Estilo do botão na vitrine (ou clique num botão de produto na prévia) — dá para deixá-lo igual aos outros botões da loja, só com o contorno, ou fazendo com que ele apareça ao passar o mouse (no celular, onde não existe passar o mouse, ele fica sempre à vista).
• A categoria em cima do nome, em letras miúdas.
• No produto com variação, quantas opções ele tem (“3 opções disponíveis”) e o botão Ver opções, que leva à página para escolher.
• O selo de promoção com a porcentagem, o Pix com o selinho do desconto e, quando há desconto por quantidade, “-5% a partir de 10 un.” embaixo do preço.

A listagem

• Em cima, quantos produtos há (“15 produtos · página 1 de 2”).
• Na página da categoria, o topo vem numa faixa com o nome, quantos produtos ela tem e atalhos com foto para as subcategorias. No celular o topo fica compacto: a descrição em duas linhas e as subcategorias em pílulas pequenas, sem foto, numa fileira que corre para o lado. Para o topo completo também no celular, desligue Topo compacto da categoria no celular, em Aparência → Produtos e filtros. A descrição da categoria, quando é longa, aparece em três linhas com Ler mais: o texto não empurra os produtos para fora da primeira tela.
• Exibir 12, 24, 48 ou 96 por página. O padrão é seu, em Produtos por página.
• Ordenar por Destaques, Mais vendidos, Mais bem avaliados, Lançamentos, Menor preço, Maior preço e A–Z.
• Dois botões para ver os produtos em grade ou em lista. Na lista, cada produto ocupa uma linha, com a foto à esquerda e o preço à direita. A loja lembra a escolha do cliente na próxima visita. Os botões saem em Botões de ver em grade ou em lista, em Aparência → Produtos e filtros.
• No celular, Ordenar vira um botão que mostra a ordem atual e abre as opções de baixo para cima, onde o dedo alcança. Para voltar ao seletor comum, desligue Ordenação em lista que sobe no celular, em Aparência → Produtos e filtros.
• Números de página ou “Carregar mais produtos”: com o botão, os próximos produtos entram embaixo dos que já estão na tela, sem trocar de página, e uma linha mostra quanto já foi visto — “Você viu 24 de 48 produtos”. Escolha em Como passar para os próximos produtos, em Aparência → Produtos e filtros.
• Os favoritos, em Minha conta, aparecem no celular em lista: uma linha por produto, com a foto ao lado, o botão Comprar e um Remover escrito, e no topo quantos produtos estão salvos. Para os cartões da vitrine em duas colunas, escolha Lista de favoritos no celular → Cartões, em Aparência → Produtos e filtros.

Os filtros

Os filtros ficam num cartão ao lado dos produtos, com Limpar filtros em cima. Cada grupo abre e fecha no próprio título.

• As opções têm uma caixinha de marcar e, ao lado, quantos produtos há em cada uma. A faixa de preço vazia some.
• Embaixo das faixas vem a régua de preço, com dois pontos para arrastar, e os campos de mínimo e máximo. Soltar o ponto já aplica o preço.
• Somente em estoque e Em promoção são chaves de ligar e desligar. A de promoção só aparece quando há produto em promoção.
• Lista com mais de oito opções mostra oito e Ver mais, e ganha um campo para buscar dentro dela (“Buscar em cor”).
• O que está escolhido aparece em etiquetas em cima dos produtos, cada uma com um “×” para tirar, e Limpar tudo.
• No celular, o cartão vira uma gaveta que sobe de baixo pelo botão Filtrar, que mostra quantos filtros estão ligados.

Todas as categorias

No computador, a barra de categorias começa com o botão Todas as categorias: ele abre um painel com as categorias da loja à esquerda e, à direita, as subcategorias da que está sob o mouse, com quantos produtos cada uma tem e o começo da descrição. Aparece com duas categorias ou mais; o texto do botão e a chave para desligar ficam em Topo → Barra de categorias.

O carrinho do cabeçalho

Embaixo da palavra “Carrinho” aparece o valor do que está nele, que se atualiza a cada item adicionado. Para esconder, desligue Valor do carrinho no cabeçalho, em Topo → Ações do cabeçalho.

O coração dos favoritos no topo tem as opções no grupo Favoritos, que aparece tanto em Topo quanto em Vitrine — e clicar no coração da pré-visualização abre esse grupo. Ali dá para desligar só o coração do topo, em Coração dos favoritos no topo: os favoritos continuam nos produtos e em Minha conta. O lugar dele entre as ações se muda em Ordem das ações do cabeçalho, em Topo → Ações do cabeçalho.