Crie a sua primeira contagem regressiva

Este passo a passo monta uma contagem regressiva completa e comum: um cronômetro de promoção nas suas páginas de produto que conta até uma data de término fixa e desaparece quando acaba. Ele passa por todas as partes do construtor (conteúdo, horário, design e exibição) sem nenhuma das opções mais avançadas.

Verifique se você já ativou a incorporação de app, ou a contagem regressiva que você criar aqui não será exibida na sua loja virtual.

1. Comece uma nova contagem regressiva

   Abra o app. No painel, clique em Create countdown no segundo card de configuração. (Na página Countdowns, o botão Create countdown faz a mesma coisa.)

   

   Comece uma contagem regressiva pelo card Create a countdown do painel.

2. Escolha um modelo

   A página Countdown templates abre com quatro guias de tipo no topo: Countdown timer, Delivery date, Stock countdown e Cart countdown. Deixe em Countdown timer.

   Navegue pelos designs ou pesquise por nome ou ocasião: digitar black friday encontra os designs dessa estação mesmo que tenham nomes como Onyx e Ribbon. Quando encontrar um que goste, clique em Select no card dele.

   

   Escolha um design na grade de modelos: você pode alterar tudo nele depois.

3. Dê um nome à contagem regressiva

   O construtor abre com o design escolhido já na prévia. Dê um nome à contagem regressiva no topo, algo como “Cronômetro da promoção de primavera”. Esse nome é só para você; quem compra nunca o vê.

4. Escreva o texto do cronômetro

   Na guia Settings, abra a seção Content e defina o que o cronômetro diz:

   • Title: a linha grande, por exemplo 🔥 Hurry up! 🔥
   • Subtitle: a linha acima dos dígitos, por exemplo Sale ends in:
   • Timer: os rótulos abaixo de cada número: Days, Hours, Min, Sec

   

   A seção Content controla cada parte do texto do cronômetro.

5. Defina a data de término

   Ainda em Settings, abra a seção Setting timer. Deixe Time type em Countdown to a date: é o padrão e o modo de que este exemplo precisa.

   Em Date between, defina End como o momento em que a sua promoção termina. Deixe Start vazio para o cronômetro funcionar a partir de agora; preencha-o se quiser que o cronômetro fique oculto até a promoção realmente começar.

   

   Countdown to a date é o Time type padrão: defina a End date como o seu prazo.

6. Escolha o que acontece ao chegar a zero

   Abaixo das datas, defina When countdown timer end como Hide countdown block. Quando o prazo passar, o cronômetro desaparece em vez de ficar parado em 00:00:00.

   As outras duas opções estão em Quando o cronômetro termina.

7. Escolha onde ele aparece

   Vá para a guia Display. Em Show countdown on, marque Product page. Isso coloca o cronômetro em todas as páginas de produto, logo abaixo da área do Add to cart.

   

   Marcar Product page coloca o cronômetro em todas as páginas de produto.

8. Limite aos produtos certos (opcional)

   Acima da posição de exibição, a seção Conditions decide quais produtos recebem o cronômetro. Deixe em All Products para cobrir todo o catálogo ou mude para segmentar uma coleção, produtos específicos ou um grupo de clientes. Consulte Condições de exibição.

9. Salve como ativa

   Clique em Save. Confira se o controle de status indica Active, não Draft: um rascunho é salvo, mas nunca exibido.

   

   Salve a contagem regressiva com o status definido como Active.

10. Confira na sua loja virtual

    Abra qualquer página de produto da sua loja virtual publicada em uma nova guia: o botão Open my store do painel é um atalho. Você deve ver o cronômetro abaixo do botão Add to cart, em contagem regressiva.

    Experimente também no celular ou estreite a janela do navegador: os temas organizam as páginas de produto de forma diferente em telas pequenas, e vale ver o cronômetro onde a maioria das pessoas vai vê-lo.

    

    O cronômetro pronto em uma página de produto no ar.

Dica

Se o cronômetro aparece na sua página de produto e os segundos estão diminuindo, tudo está configurado corretamente: a incorporação está ativada, a contagem regressiva está ativa e as condições dela correspondem.

Nota

Não está vendo? Siga A contagem regressiva não aparece: é uma lista de verificação curta e os dois primeiros itens resolvem a maioria dos casos.

Próximas etapas

• Como as contagens regressivas funcionam
• Crie o design de uma contagem regressiva
• Condições de exibição
• Tipos de contagem regressiva