Seções de Impulso de Vendas
Estas são as seções focadas em conversão no Vertex — os indícios de urgência, as superfícies promocionais, os fluxos modais, os blocos de kits. Nenhuma delas requer um aplicativo de terceiros. Todas respeitam a política da Shopify Theme Store (sem listas de desejos persistentes, sem scripts de rastreamento, sem links de afiliados).
Empilhe muitos indícios de urgência e eles se anulam mutuamente. Um contador regressivo ao lado de um contador de baixo estoque ao lado de um popup promocional grita desespero. Escolha o que combina com sua campanha, foque nele e faça rotação.
promo-banner
Arquivo de seção: sections/promo-banner.liquid
Banner superior dispensável — tipicamente usado para promover uma promoção em todo o site, limite de frete grátis ou campanha sazonal. Distinto da barra de anúncios (que é chrome sempre presente); o banner promocional é orientado por campanha e dispensável.
Configurações
| Configuração | Tipo | Notas |
|---|---|---|
| Texto | Richtext | Mensagem curta de valor — "Promoção de Primavera · 15% off em pedidos acima de US$ 1.000". |
| Cor de fundo | Cor | Escolha um destaque de alto contraste — cobalto, vermelho-laranja, turquesa, etc. |
| URL do link | URL | Alvo do clique para o banner (toda a faixa é clicável). |
| Rótulo do link | Texto | CTA inline — "Compre na promoção →". |
| Dispensável | Checkbox | Padrão ativado. Adiciona o botão de fechar × + persistência no localStorage. |
| Posição | Select | above_header (padrão) · below_header. Acima do cabeçalho parece mais urgente; abaixo do cabeçalho parece mais como um banner. |
Dispensabilidade
Quando Dispensável está ativado, o botão × escreve uma chave vertex_promo_dismissed:{section-id} no localStorage. O banner permanece oculto até que o visitante limpe os dados do site — ou você republique a seção com um ID diferente.
Se você quer ressurgir um promo dispensado para uma nova campanha, mude o ID da seção (apague + readicione a seção no customizer). A chave antiga do localStorage não corresponderá mais e o banner reaparecerá para todos.
promo-popup
Arquivo de seção: sections/promo-popup.liquid
Modal de abertura automática com imagem, título, corpo e CTA. Gatilho configurável e cadência baseada em cookie para que os visitantes não o vejam a cada carregamento de página.
Configurações
| Configuração | Tipo | Notas |
|---|---|---|
| Título | Texto | "Assine e economize 10%" / "Espere — ganhe um kit de amostras grátis". |
| Corpo | Richtext | Breve garantia + proposta de valor. |
| Imagem | Imagem | Ilustração renderizada lateralmente (ou fundo full-bleed). |
| Rótulo do CTA | Texto | "Inscreva-se" / "Receba o kit". |
| URL do CTA | URL | Página de formulário ou produto. |
| Gatilho | Select | immediate · on_scroll (após rolar 50% da página) · exit_intent (detecção de saída do mouse). |
| Segundos de atraso | Número | Usado apenas quando o gatilho é immediate. Padrão 5. |
| Dias de expiração do cookie | Número | Padrão 7. Visitantes que fecham ou convertem não o veem novamente por N dias. |
Gatilhos explicados
| Gatilho | Melhor para | Consideração de UX |
|---|---|---|
| Imediato (atraso) | Cadastros de newsletter, ofertas para visitantes de primeira vez | O mais intrusivo — use um atraso mínimo de 5–10s |
| Ao rolar (50%) | Sinal de engajamento — só dispara depois que o visitante rola, sinalizando interesse | Melhor equilíbrio entre conversão + UX |
| Intenção de saída | Ofertas de última chance, recuperação de abandono | Apenas desktop — intenção de saída não dispara de forma confiável no mobile |
A chave de cookie é vertex_promo_popup:{section-id}. O modal não se reabrirá até que o cookie expire.
countdown
Arquivo de seção: sections/countdown.liquid
Contador de dias / horas / minutos / segundos. Contagem ao vivo via JS, renderizado no servidor para o estado inicial (sem flash).
Configurações
| Configuração | Tipo | Notas |
|---|---|---|
| Título | Texto | "A promoção de primavera termina em". |
| Data de término | Seletor de data | Data + hora de expiração. Armazenado no fuso horário da loja do comerciante. |
| Texto expirado | Texto | Substitui o contador quando o cronômetro chega a zero. "A promoção terminou". |
| URL do link | URL | CTA opcional abaixo do contador. |
| Rótulo do link | Texto | "Compre agora". |
| Esquema de cores | Select | Dropdown padrão de esquema de cores. |
Como conta
O assets/countdown.js executa um loop de requestAnimationFrame que atualiza o cronômetro a cada segundo. Quando o tempo alvo é atingido, o contador é substituído pelo Texto expirado. O link/CTA é ocultado após a expiração.
Contadores regressivos falsos (perpetuamente 24 horas, resetando ao recarregar a página) destroem a confiança. Vincule a Data de término a um término real de campanha e deixe a seção cuidar do estado de expiração.
featured-bundles
Arquivo de seção: sections/featured-bundles.liquid
Cards de kits curados com imagem, título, selo de desconto e ATC. Cada bloco é um kit (tipicamente um produto pai que agrupa 2–5 SKUs, configurado como um Shopify Bundle em seu admin).
Configurações por bloco
| Configuração | Tipo | Notas |
|---|---|---|
| Produto | Seletor de produto | O produto pai do kit. |
| Rótulo do kit | Texto | Sobrescreve o título do produto — "Kit MRO Inicial". |
| Texto de desconto | Texto | Selo sobreposto à imagem — "Economize 15%" / "3 pelo preço de 2". |
| Descrição | Richtext | Breve proposta de valor abaixo do título. |
Configurações da seção
- Título — "Combine e economize"
- Colunas — 2 / 3 / 4
- Mostrar preço — alternância (respeita preços que exigem login)
Estilo do selo de desconto
O texto de desconto é renderizado como uma pílula circular sobre o canto superior direito da imagem. Use cores de destaque (cobalto, vermelho-laranja, turquesa) — o selo é pequeno o suficiente para não dominar o visual do kit.
Contador de estoque (indicador de baixo estoque)
Snippet: snippets/stock-counter.liquid (renderizado como bloco em main-product)
Já abordado em Página de Produto. Limite configurável via a configuração de tema Limite de baixo estoque. Gera urgência sem revelar inventário exato aos concorrentes.
Três estados:
- Acima do limite: "Em estoque"
- ≤ limite: "Apenas 4 restantes"
- = 0: "Esgotado" (ou botão de pré-venda quando permissível para pedido posterior)
Modal de visualização rápida
Asset: assets/quick-view.js + snippets/quick-view-button.liquid
Acionado pelo botão Visualização rápida nos cards de produto. Abre um modal com a galeria do produto, seletor de variante, entrada de quantidade e ATC — sem sair da página de coleção.
O que é renderizado no modal
- Galeria de múltiplas imagens (com swipe no mobile)
- Título + preço (respeita preços que exigem login + preço de catálogo B2B)
- Seletor de variante
- Entrada de quantidade (com aplicação de MOQ / máximo / case-pack)
- Botão ATC
- Link "Ver detalhes completos →" para o PDP
Configurações (no card de produto / seções de coleção)
- Mostrar botão de visualização rápida — alternância (por seção:
featured-collection,collection-list, resultados de busca, produtos relacionados) - Rótulo do botão de visualização rápida — texto (padrão "Visualização rápida")
Quando habilitar / desabilitar
| Caso de uso | Recomendação |
|---|---|
| Catálogo de alto volume onde os compradores comparam variantes rapidamente | Habilitar — acelera o fluxo "navegar por 20 produtos, adicionar 3" |
| Catálogo altamente técnico onde os compradores precisam de datasheets + especificações antes de decidir | Desabilitar — a visualização rápida não exibe especificações ou documentos; force o clique para o PDP |
Quando usar o quê
| Objetivo | Seção |
|---|---|
| Direcionar atenção a uma campanha em todo o site | promo-banner |
| Capturar e-mail + oferecer um desconto de primeira vez | promo-popup |
| Oferta por tempo limitado com expiração rígida | countdown |
| Destacar ofertas multiproduto curadas | featured-bundles |
| Urgência no PDP sem revelar inventário exato | Contador de estoque |
| Reduzir atrito no fluxo página-de-coleção → ATC | Visualização rápida |
O que vem a seguir
- Seções da página de produto → — Contador de estoque no PDP em detalhes
- Marketing da página inicial → — Onde inserir banners promocionais na página inicial
- Referência de configurações do tema → — Limite de baixo estoque, esquemas de cores, layout