Adicionar contador regressivo (temporizador) em sua loja virtual

Todos os códigos demonstrados neste conteúdo são apenas exemplos.

O contador regressivo — ou temporizador — costuma ser utilizado para marcar a data e hora de encerramento de uma determinada promoção, inscrição, venda de ingressos, etc:

1.1. Criar e customizar temporizador

A criação de temporizadores é feita em ferramentas específicas para essa finalidade. Caso você não possua uma ferramenta de sua preferência, recomendamos o Tickcounter.

1.2. Vamos configurar as opções para contabilizar o período da forma que desejar.

• Date (Data): A Data que o contabilizar deverá atingir para o término do prazo que irá contabilizar.
• Hour (hora), Minute (Minuto) e Secound (Segundos): A hora, minutos e segundos em que o contador deverá atingir para finalização do prazo a marcar.
• Timezone: Fuso horário da região do País onde mora. Digite “Brazil” para localizar o fuso horário de sua região.
• Name (Nome): Nome que identifique a função do contador. Em nosso exemplo, vamos informar Black Friday para contabilizar o prazo do inicio da promoção.
• Show Name (Exibir Nome): Selecione para exibir o nome do contador.
• Units (Unidades): Remova ou acrescente as informações de contabilização que serão exibidas (Dia, horas, minutos e segundos).
• Languange (Língua): O idioma do contador. Opte por “Português (Portuguese)”.
• Background Color (Cor de fundo): Cor do fundo do contador. Marque “Transparent” para não aplicar cor de fundo.
• Name Color (Cor do Nome): Aplique a cor do Título do contador.
• Digits Color (Cor dos Digitos): Aplique a cor dos digitos do contador
• Last Unit Color (Cor da última unidade): Cor da última unidade de contabilização. Em nosso exemplo seria os segundos.

1.3. Após configurar seu contador da forma que deseja de acordo com as funções disponíveis acima, clique em “EMBED ON YOUR WEBSITE” para gerar o código HTML a ser configurado no layout de sua loja virtual:

1.4. Copie todo o código disponibilizado para ser utilizado em sua loja virtual:

2. Acesse o administrador de sua loja virtual > Configurações > Aparência da Loja:

2.1 Clique para editar o Tema da sua loja

2.2. Crie um novo conteúdo para sua página

Localize em qual ponto do seu site você gostaria de inserir seu contador e clique para Adicionar Conteúdo. O local fica a seu critério, de acordo com a estrutura que você deseja criar para sua loja. O mais usual é que esse elemento fique logo abaixo do banner que identifique a função do Contador.

2.3. Selecione o elemento “Conteúdo HTML” e clique em Salvar

2.4. Clique na ferramenta “Código-Fonte”

2.5. Cole todo o script disponibilizado Tickcounter e copiado de acordo com o Item 1.4. Clique em “Salvar”

2.6. Agora, basta visualizar sua loja virtual e verificar o Contador aplicado

Viu como é simples? Com bastante praticidade você insere o novo conteúdo no Tema da sua loja e rapidamente você passa a ter o contador de período. É um ótimo chamativo para suas promoções.

Atenção: este conteúdo trata-se de uma Edição Avançada, à qual a LojaVirtual.com.br não oferece suporte ou prestação de serviço. Para trabalhar com edições avançadas, é necessário ter conhecimento em HTML, CSS e JavaScript.

A Edição Avançada é uma ferramenta que agrega flexibilidade às Lojas Virtuais, onde o desenvolvedor terá autonomia para criar customizações que podem afetar os padrões de funcionamento da página.