Design de cronômetro de contagem regressiva em linha na barra de anúncios

O que é um cronômetro de contagem regressiva?

Um cronômetro de contagem regressiva é uma ferramenta que conta o tempo restante até um evento específico, como o término de uma venda ou o início de um evento.

Ao criar uma sensação de urgência e escassez, motiva os clientes a agirem rapidamente, reduzindo a hesitação e o abandono do carrinho. Esse gatilho psicológico, geralmente chamado de medo de perder (FOMO), pode significativamente aumentar as vendas e o engajamento.

Exemplos de casos de uso

• Barra de Anúncios

• Páginas do produto

• Landing Page

Neste tutorial, vamos nos concentrar em projetar um cronômetro de contagem regressiva em linha dentro de uma barra de anúncios. Na linha significa que o cronômetro fica perfeitamente na mesma linha do seu texto promocional, em vez de ser colocado abaixo ou separadamente.

Como projetar um cronômetro de contagem regressiva em linha na barra de anúncios

Criar um cronômetro de contagem regressiva em linha (“em linha” significa que o cronômetro de contagem regressiva é colocado na mesma linha que o texto ou outros elementos, em vez de ser separado), como um para uma barra de anúncios.

Etapa 1: Crie uma linha com duas colunas

• Adicionar uma Elemento de linha com as duas colunas para o layout da sua página.

• De acordo com o relatório coluna esquerda, arraste e solte um Elemento de texto. É aqui que você pode adicionar uma breve mensagem promocional como “Oferta por tempo limitado!” or “A venda termina em breve.”

• De acordo com o relatório coluna direita, arraste e solte o Elemento de cronômetro de contagem regressiva para exibir o cronômetro.

• Abra o Configurações de linha E definir Largura da coluna → Ajustar conteúdo. Isso garante que sua barra de anúncios se adapte perfeitamente ao texto e ao cronômetro, sem espaçamento extra.

Etapa 2: personalize o elemento de texto

Clique no Elemento de texto na coluna da esquerda. O painel de configurações será aberto com duas abas: Configurações e Avançado. Aqui você pode:

• Edite o texto (por exemplo, “Frete grátis termina em:” ou “A promoção termina em breve”)
• Ajuste o estilo do texto: fonte, tamanho, espessura, alinhamento e cor
• Altere o fundo, o preenchimento ou as margens para melhor espaçamento

Para obter orientações detalhadas, consulte nosso artigo completo sobre o Elemento de texto.

Etapa 3: personalize o elemento do cronômetro de contagem regressiva

Clique no Elemento de cronômetro de contagem regressiva na coluna da direita. No painel de configurações (Configurações + Avançado), você pode ajustar:

• Tempo final: definido quando a contagem regressiva termina
• gerenciamento de itens: escolha quais unidades exibir (semanas, dias, horas, minutos, segundos) e edite suas legendas
• Opções de design: cor de fundo, tamanho, forma, fonte e alinhamento

Para um estilo mais avançado, consulte nosso guia completo sobre Elemento de contagem regressiva.

Etapa 4: personalize o layout da linha

Por fim, faça o ajuste fino do Elemento de linha que contém o texto e o cronômetro de contagem regressiva:

• Adjust tamanho da linha e alinhamento para se ajustar à sua barra de anúncios
• Adicionar ou remover cores de fundo para melhor visibilidade
• Controle o espaçamento e o preenchimento para garantir que a barra pareça equilibrada

Saiba mais em nosso artigo detalhado sobre o Elemento de linha.

Etapa 5: salvar e publicar

Quando terminar o design, clique em Economize e depois Publicar. Seu Contagem regressiva do Shopify agora aparecerá na sua barra de anúncios.