Aparência e ícone do catálogo
A aba Aparência concentra todo o controle visual — onde o botão aparece, o ícone no catálogo, cores, largura e tipografia — tudo com pré-visualização ao vivo, sem CSS.
Onde exibir o botão
Três opções, apresentadas como cartões de seleção:
| Opção | O que faz | Quando usar |
|---|---|---|
| Página do produto + Catálogo (recomendado) | Botão completo na página do produto e ícone flutuante nos cards do catálogo (produtos totalmente esgotados). | Máxima captura de interessados. |
| Apenas na página do produto | Só a página individual tem o botão; o catálogo fica intocado. | Lojas que preferem o catálogo 100% limpo. |
| Apenas no catálogo | Só o ícone nos cards; a página do produto não mostra o botão. | Casos com página de produto muito customizada. |
A mudança vale na hora para toda a loja — limpe o cache após salvar.
O ícone no catálogo
A novidade da versão: no catálogo (loja e categorias), produtos esgotados não exibem mais um botão retangular — agora mostram um ícone flutuante discreto sobre a foto, no mesmo estilo do Quick Shop. Ao clicar, o cliente vai para a página do produto com o formulário de lista de espera já aberto.
As configurações do ícone:
- Ícone — sino (padrão), sacola, carrinho, olho, coração, relógio ou mais;
- Posição sobre a foto — horizontal (Esquerda/Direita) × vertical (Topo/Base);
- Distância das bordas — ajuste fino em pixels para encaixar no layout;
- Tamanhos — o círculo (28–80px) e o ícone interno (12–60px) são independentes;
- Formato — redondo ou quadrado com cantos arredondados;
- Mostrar texto ao passar o mouse — o ícone se expande revelando o texto (ex.: “AVISE-ME QUANDO CHEGAR”); desativado, fica só o ícone;
- Cores — fundo, cor do ícone, e ambos no hover (quatro seletores independentes).
Combinando com o Quick Shop: evite colocar os dois ícones no mesmo canto. Um arranjo clássico é o Quick Shop no inferior direito (o padrão dele) e a Lista de Espera no inferior esquerdo ou superior direito. Na prática eles nunca aparecem no mesmo card (Quick Shop só em compráveis, Lista de Espera só em esgotados), mas cantos distintos deixam a loja consistente.
Comportamento inteligente
- o ícone aparece apenas em produtos completamente esgotados (todas as variações sem estoque);
- produtos com qualquer variação disponível ficam como o tema define — o módulo não os toca;
- funciona com filtros AJAX e rolagem infinita do catálogo;
- se algo impedir o carregamento do ícone (cache agressivo, otimizadores), a loja degrada com segurança: o card fica normal, sem ícone — nunca com o layout quebrado.
Cores do botão (página do produto)
Três seletores com pré-visualização ao vivo: cor de fundo, cor do texto (texto e ícone) e cor de fundo no hover. A caixa de prévia abaixo atualiza em tempo real — o que você vê é o que vai para a loja.
Largura do botão
| Modo | Resultado |
|---|---|
| Largura total (100%) — padrão | O botão estica por toda a largura disponível. |
| Automática | O botão fica do tamanho do texto. |
| Personalizada | Você define o valor exato (ex.: 300px ou 80%). |
Nos modos Automática e Personalizada aparece também o Alinhamento (Esquerda/Centro/Direita).
Proteção automática: o botão nunca ultrapassa a largura do container, mesmo com valores exagerados, e valores inválidos voltam ao padrão seguro.
Tipografia
Ajuste fino do texto (vale para a página do produto e para o texto expandido do ícone): tamanho da fonte (px, em ou rem; padrão 14px), peso (de leve a extra-negrito) e transformar em maiúsculas (ligado por padrão; desative para respeitar o texto exatamente como digitado).
Ícone de sino no botão
Liga/desliga o 🔔 antes do texto no botão da página do produto — com ele desativado, o botão fica só com texto, num visual mais minimalista.
Perguntas frequentes
Mudei uma cor e não apareceu na loja
Limpe o cache do site. Se usa otimizadores de CSS, limpe também o cache deles — costuma ser um cache separado do normal.
O ícone do catálogo cobre o selo de desconto do tema
Ajuste a posição ou a distância das bordas — se o selo fica no canto superior direito, posicione o ícone na base, por exemplo.
Configurei “Apenas no catálogo” e o botão sumiu da página do produto
É isso mesmo — esse modo remove o botão da página de propósito. Para tê-lo nos dois lugares, use “Página do produto + Catálogo”.
Documentação do Lista de Espera · escrita com base na versão 1.10.4. As telas ilustradas podem variar conforme a versão instalada na sua loja.