ℹ️ Note: Este artigo foi traduzido automaticamente utilizando IA e pode conter imprecisões. Se algo parecer errado, entre em contato com nossa equipe de suporte.

A guia Design lhe dá controle completo sobre como seu temporizador regressivo fica em sua loja. De cores e fontes para animações timer e padrões de fundo, quase todos os detalhes visuais podem ser personalizados para combinar com sua marca.

Você pode:

• Lançar rapidamente usando modelos pré- elaborados
• Ou personalizar profundamente cada detalhe visual manualmente

Este guia quebra todas as opções de design para que você possa construir contagens que se sentem nativas de sua loja ✨

⚠️ Antes de começar

Para configurar as configurações do Design:

→ Abra uma configuração existente do temporizador de contagem regressiva
→ Ou criar um novo temporizador de contagem regressiva

Em seguida, navegue até o Desenho aba dentro do editor de contagem regressiva.

ℹ️ As opções de design disponíveis mudam dependendo de que tipo de colocação você selecionou. Por exemplo, contagem regressiva de páginas de checkout Shopify's sistema de design e oferecer muito menos opções de personalização.

🎨 & Visibilidade do Modelo

Esta seção controla o ponto de partida visual global e a visibilidade do dispositivo para sua contagem regressiva.

Modelos pré- elaborados

A Modelo dropdown permite- lhe aplicar instantaneamente um estilo visual completo. Há 24 modelos integrados a escolher, incluindo:

• Dawn — Limpos e mínimos
• Electricidade — Negrito e energético
• Floresta — Tons naturais de terra
• Neon — Brilhantes e atraentes
• Mínimo — Simplificação das costas
• Menta — Macio e fresco
• Chiclete de Bolha — Brincadeira e colorida
• E muitos mais

A seleção de um modelo preenche automaticamente:

• Cores ou gradientes de fundo
• Estilos de borda
• Cores e tamanhos de tipografia
• Estilo de botões

💡 Se você escolher um modelo e ajustar manualmente as configurações individuais, suas alterações serão preservadas. Selecionar um novo modelo mais tarde irá substituir seus valores personalizados.

ℹ️ Pela Página do Carrinho, Gaveta de Carrinhos, e Barra de Topo/Bottom colocações, modelos preservar o seu existente tamanho do título, tamanho do timer, e tamanho do separador em vez de os substituir.

Visibilidade

Controles em que dispositivos sua contagem regressiva aparece:

• Desktop e Mobile — Visível em toda a parte (por omissão)
• Apenas na área de trabalho — Escondidos em dispositivos móveis
• Apenas Móvel — Escondidos na área de trabalho

Comportamento de posição e pegajoso

Estas opções só aparecem para Barra de Topo/Bottom contagem decrescente.

• Posição — Escolher Topo ou Fundo da página
• Fixo — Aparece apenas quando a posição está configurada para Topo. Quando ativado, a barra permanece fixa no topo da tela enquanto os clientes rolam.

Estilo do temporizador

Esta seção controla como os próprios dígitos da contagem regressiva são exibidos.

ℹ️ Esta secção é não disponível em vez Página do Carrinho, Gaveta de Carrinhos, Página de Carrinhosou Página de Saída contagem decrescente.

Estilos Disponíveis

• Relógio inverter — Animação 3D clássica para cada dígito
• Duplas peças — Cada algarismo tem o seu próprio mini ladrilho flip
• Números simples — dígitos limpos sem caixa de fundo
• Ladrilhos quadrados — Números dentro de caixas quadradas arredondadas
• Círculo de peças — Números dentro das caixas circulares
• Nenhum — temporizador de ocultação — Remove inteiramente os algarismos do temporizador

Cor de fundo do timer

Este seletor de cores aparece apenas quando você seleciona:

• Relógio inverter
• Duplas peças
• Ladrilhos quadrados
• Círculo de peças

Sim. não aparecer para Números simples ou Nenhum.

Para estilos de flip clock, a metade inferior de cada telha flip é automaticamente renderizada em um tom ligeiramente mais claro de sua cor selecionada. Isso cria o efeito de flip 3D realista na frente da loja.

🖼️ Contexto

Esta secção controla o aspecto de fundo do seu recipiente de contagem decrescente.

ℹ️ Esta secção é não disponível em vez Página de Saída contagem decrescente.

Tipos de Fundo

• Cor única — Uma cor de fundo sólida
• Gradiente — Duas cores misturadas num ângulo que controla
• Tri gradiente de cores — Três cores misturadas num ângulo que controla
• Padrões — Sobreposições de fundo decorativas

Cor Única

Escolha uma cor usando o Selector de Cores ou insira uma Código Hex directamente.

Gradiente

Quando selecionado, aparecem três campos extras:

• Grau de ângulo de gradiente — Controla a direcção (0° a 360°)
• Cor Inicial — Cor inicial
• Cor Final — Cor final

Gradiente Tricolor

Quando selecionado, aparecem quatro campos extras:

• Grau de ângulo de gradiente
• Cor Inicial
• Cor Intermediária — Cor do meio
• Cor Final

Padrões

Quando selecionado, a Padrão dropdown aparece com 37 opções incorporadas, incluindo:

• Pequenos quadrados, grãos aleatórios, quebra-cabeças, flores
• Temas sazonais: aniversário, balão, carnaval, Páscoa, dia dos pais, dia das mães, Ação de Graças, dia dos veteranos, dia das mulheres
• Venda focada: venda, desconto, estofados, fresco, ondulado
• E mais

Alguns padrões incluem sobreposições escuras sutis para manter o texto legível.

📐 Contorno

Esta seção controla o contorno do seu recipiente de contagem regressiva.

ℹ️ Esta secção é não disponível em vez Página de Saída contagem decrescente.

Estilo da Borda

Escolher entre:

• Nenhum, Dotado, Sólido, Duplo, Groove, Ridge, Inset, Outset

Campos Condicionais de Fronteiras

Aparecem os seguintes campos apenas quando o estilo Border não é "Nenhum":

• Raio de borda (px) — Como aparecem os cantos arredondados
• Tamanho do Contorno (px) — Espessura da linha fronteiriça
• Cor do Contorno — Cor da fronteira

⚠️ Se você selecionar um estilo de borda enquanto o tamanho ainda está definido como 0, o aplicativo o define automaticamente como 2px Então a borda fica visível.

📏 Espaço

Esta seção controla o espaçamento interno e externo em torno da contagem regressiva.

ℹ️ Esta secção é não disponível em vez Página de Saída contagem decrescente.

Campos Disponíveis

• Inside Top (px) — Espaço entre o conteúdo e a borda superior
• Inferior (px) — Espaço entre o conteúdo e a borda inferior
• Superior Exterior (px) — Espaço entre a contagem regressiva e os elementos acima dela
• Fundo Exterior (px) — Espaço entre a contagem regressiva e os elementos abaixo dela

💡 Pense em "dentro" como estofamento e "de fora" como margem. Aumentar o espaçamento externo ajuda a separar a contagem regressiva dos elementos de página próximos.

🔤 Tipografia

Esta seção controla como todos os elementos de texto aparecem. Os campos exatos disponíveis dependem da sua colocação na contagem regressiva.

ℹ️ Esta secção é não disponível em vez Página de Saída contagem decrescente.

Família de fontes

Escolher entre 60+ opções de fonte, incluindo:

• Usar o seu tipo de letra de tema — Corresponde ao seu Shopify tema automaticamente
• Fontes do sistema: Helvetica, Arial, Tahoma, Times New Roman, Georgia, Courier New, Segoe UI, Impact, and more
• Fontes do Google: Roboto, Montserrat, Open Sans, Poppins, Inter, Playfair Display, Oswald, Raleway, Nunito, Lobster, Pacifico, Bebas Neue, Anton, Dancing Script, e muitos mais

ℹ️ Se você selecionar um Google Font, o aplicativo carrega-o automaticamente do Google Fonts em sua loja. As fontes do sistema e "Use a fonte do tema" não acionam solicitações externas.

Elementos de Tipografia por Colocação

Cada elemento tem seu próprio Tamanho (px) e Cor campos:

Página de produto, Landing Page, e posição personalizada

• Título — Título principal da contagem decrescente
• Subdivisão — Mensagem secundária abaixo do título
• Temporizador — Os próprios dígitos da contagem regressiva
• Marcas de Tempo — o texto "Dias", "Horas", "Minutos", "Segundos"
• Mensagem Extendida — Mostrado quando o temporizador é estendido (aparece apenas se a sua acção final for definida como "Extender")

Página do Carrinho e Gaveta do Carrinho

• Título — normalmente contém o {timer} variável em linha
• Temporizador — Os dígitos da contagem regressiva ao vivo
• Mensagem Extendida — Só aparece se a acção final for "Extender"

ℹ️ Colocações relacionadas com carrinhos fazem não mostrar as opções de tipografia de Subtítulos de Tempo.

📊 Barra de Progresso

Esta seção personaliza o indicador de progresso visual mostrado acima ou abaixo do temporizador.

ℹ️ Esta secção é Apenas disponível em vez Página do produto, Página de desembarque, e Posição Personalizada contagem decrescente.

Quando Aparece

O cartão de design da barra de progresso aparece apenas se ativou a barra de progresso na Conteúdo tab primeiro.

Se a barra de progresso não estiver habilitada no Conteúdo, esta carta inteira estará oculta.

Configuração da Barra de Progresso

• Cor de Fundo — Cor da parte não preenchida da barra (por omissão: cinza claro)
• Cor da Barra — A cor da porção preenchida (por omissão: preto)

Comportamento da frente da loja

A barra de progresso é uma barra arredondada de 8px de altura que preenche proporcionalmente com base no tempo restante. Ele atualiza a cada segundo com uma suave animação de transição de 1 segundo.

Separador

Esta seção controla os caracteres que aparecem entre unidades de tempo (entre dias, horas, minutos e segundos).

Colocações de Não- Verificação

• Caracter Separador — Escolha entre:
• • : Colón
  • - Hífen
  • . Período
  • | Barra vertical
  • / Barra dianteira
  • Espaço (em branco)
• Tamanho do separador (px)
• Cor do Separador — Selector de cores Hex

Página de Saída

Porque as contagens de checkout usam Shopify's Checkout UI Extension framework, o estilo do separador está limitado a ShopifyOs símbolos predefinidos:

• Tamanho do separador — extraSmall, small, base, medium, large, extraLarge
• Cor do Separador — accent (azul), subdued (cinzento), info (preto), success (verdes), warning (amarelo), critical (vermelho)

🔘 Desenho de Botão

Esta seção personaliza o botão de chamada à ação.

ℹ️ Esta secção é Apenas disponível em vez Barra de Topo/Bottom, Página de desembarque, e Posição Personalizada contagem decrescente.

Estilo de Animação de Botão

Adiciona uma animação de loop contínua ao botão:

• Nenhum — Botão estático
• Agitar — Agitar lado a lado
• Pulso — Efeito de escala rítmica
• Ampliação — Expansões e contratos
• Deslizar — Movimento de deslizamento sutil
• Desvanecer — Pulso de opacidade
• Rodar — Efeito rotativo
• Pop — Salto rápido em escala
• Blink — Efeito de clarão breve

Efeitos de Hover de Botão

Adiciona um efeito interativo quando os clientes pairam sobre o botão:

• Nenhum
• Brilhar — Gradiente brilho em torno do botão
• Lob — Efeito blob morph orgânico
• Pulso de hover — Pulsações ao longo do rato
• Botão n° 045 — Um estilo predefinido numerado
• Botão Flush
• Rodar o botão direito
• Smoosh, Sobrecarga, Colisão
• Botão bolha — Bubble pop effect
• Squishy
• Máscara 1, Máscara 2, Máscara 3
• Botão Gooey
• Botão 3D — Efeito de profundidade tridimensional

Configurações adicionais do botão

• Cor do Botão — Cor de fundo do botão
• Tamanho do Texto do Botão (px)
• Cor do Texto do Botão
• Raio de borda (px) — Como os cantos dos botões são arredondados

📝 Desenho Personalizado da Mensagem

Esta secção aparece apenas quando a ação final da sua contagem regressiva está definida como Mostrar mensagem personalizada ou Temporizador de extensão.

Ele controla a tipografia dos clientes de mensagens ver após o temporizador termina.

Campos Disponíveis

• Tamanho Personalizado do Título (px) + Cor
• Tamanho personalizado da sub- página (px) + Cor

ℹ️ Se sua ação final incluir múltiplos intervalos de extensão e qualquer um deles usar uma mensagem personalizada, este cartão fica visível.

❌ Fechar Ícone

Esta seção personaliza o botão de descarte para barras de contagem regressiva.

ℹ️ Esta secção é Apenas disponível em vez Barra de Topo/Bottom contagem decrescente.

Pré-requisito

O ícone de fechamento em si deve primeiro ser habilitado no Conteúdo aba usando o Fechar Ícone caixa de verificação. Se não estiver habilitado, este cartão de design não tem efeito.

Fechar a Cor do Ícone

Escolha uma cor hexadecimal para o ícone X. O ícone está posicionado na borda direita da barra e verticalmente centrado.

Comportamento na frente da loja: Quando um cliente clica no ícone de fechamento, a barra é escondida usando o armazenamento do navegador e não reaparece durante essa sessão.

💻 CSS Personalizado

Para comerciantes que precisam de estilo para além das opções integradas, você pode escrever o seu próprio CSS.

ℹ️ Esta secção é não disponível em vez Página de Saída contagem decrescente.

Classes-alvo disponíveis

O editor inclui um modelo padrão com estas classes de destino:

.futureblink-countdown-timer { }
.futureblink-countdown-timer .title { }
.futureblink-countdown-timer .subheading { }
.futureblink-countdown-timer .cta-button { }
.futureblink-countdown-timer .close-btn { }

Como Aplicar

1. Digite seu CSS na área de texto
2. Clique Aplicar
3. Os estilos são injetados na sua frente de loja automaticamente

⚠️ A aplicação adiciona automaticamente !important para cada propriedade CSS quando aplicada, o que ajuda a substituir conflitos de tema. Se um estilo não parece funcionar imediatamente, tente salvar e refrescar sua loja.

📍 Desenho por Colocação

Diferentes colocações regressivas têm diferentes capacidades de design baseadas em restrições técnicas.

Página de produto, Landing Page, Posição personalizada

Estas colocações oferecem experiência de design mais completa:

✅ Todos os modelos
✅ Todos os estilos do temporizador (flip, azulejos, simples, etc.)
✅ Opções de fundo completas (único, gradiente, tri-gradiente, padrões)
✅ Contorno, espaçamento, barra de progresso
✅ Controlos de tipografia completos
❌ Desenho de botões — não disponível para páginas de produtos
✅ CSS Personalizado

Barra superior / inferior

Opções de design quase completas com algumas adições específicas de colocação:

✅ Posição (top/bottom) e comutador pegajoso
✅ Fechar o desenho dos ícones
✅ Desenho dos botões
✅ Todos os estilos e fundos do temporizador
✅ CSS Personalizado
❌ Barra de progresso — não disponível para barras

Página de carrinho, Gaveta de carrinho, Página de carrinho independente

Disposição simplificada focada nas mensagens em linha:

✅ Fundo, borda, espaçamento, separador
✅ Tipografia de título e temporizador
✅ CSS Personalizado
❌ Estilo do temporizador — texto sempre simples em linha
❌ Barra de progresso
❌ Desenho dos botões
❌ Tipografia de subtítulos e etiquetas temporais

Página de Saída

Fortemente restringido devido a Shopify Extensões da interface de saída:

✅ Tamanho e cor do separador (somente fichas de polonês)
✅ Tamanho e cor do título (somente fichas de Polis)
✅ Tamanho e cor do temporizador (somente fichas de poláris)
❌ Modelos
❌ Fundo, borda, espaçamento
❌ Estilos de tempo — apenas texto simples
❌ Barra de progresso
❌ Estilo de botões
❌ Fechar ícone
❌ CSS Personalizado
❌ Seleção de família de fontes

⚠️ Notas Importantes

Modelos Sobrescrever Valores Personalizados

Quando você seleciona um modelo pré-feito, ele substitui a maioria dos valores de design. Se você já tiver cores e tamanhos personalizados manualmente, salve seu trabalho antes de experimentar com modelos.

Limitações de checkout são de nível de plataforma

As opções de design restritas nas páginas de checkout são impostas por Shopify's Checkout UI Extension framework. Estas não são limitações de aplicativos - eles garantem que sua contagem regressiva permanece compatível com ShopifyÉ um ambiente seguro.

Temporizadores de carrinho são sempre simples

As contagens relacionadas com o carrinho tornam o temporizador em texto simples, porque a contagem regressiva é geralmente incorporada dentro de uma frase usando o {timer} variável. Relógios inverter e estilos de azulejo iria quebrar o fluxo de frase visualmente.

Escala de temporizador móvel

Em telas menores que 633px de largura, os tamanhos do dígito do cronômetro são automaticamente reduzidos (normalmente cerca de 33%) para evitar o transbordamento e manter a legibilidade em dispositivos móveis.

💡 Usar casos e exemplos

Temporizador de página do produto mínimo

→ Colocação: Página do produto
→ Estilo Timer: Números simples
→ Fundo: Cor única (branca ou transparente)
→ Borda: Nenhuma
→ Tipografia: Título pequeno, temporizador médio, separador sutil

Anúncio de barra superior ousada

→ Colocação: Topo / Bottom Bar
→ Posição: Topo + Fixo
→ Modelo: Neon ou elétrico
→ Estilo do temporizador: Flip relógio ou telhas quadradas
→ Animação Botão: Pulso
→ Fechar Ícone: Activado com a cor correspondente

Venda de página de desembarque sazonal

→ Colocação: Landing Page
→ Fundo: Padrão (por exemplo, aniversário, carnaval, ou tema sazonal)
→ Estilo temporizador: azulejos círculo
→ Barra de progresso: Habilitado com cores de marca
→ Botão: cantos arredondados com efeito de brilho hover

🎉 Resultado Final

Uma vez configurado com sucesso, as configurações Design & Styling ajudam você a criar contagens que parecem parte natural da sua loja.

✅ Countdowns correspondem às cores e tipografia da sua marca
✅ Os estilos do timer criam o nível certo de urgência visual
✅ Fundos e padrões definem o humor para cada campanha
✅ Os botões se destacam com animações e efeitos hover
✅ Espaçamento e fronteiras dar o seu polimento profissional contagem regressiva
✅ CSS personalizado desbloqueia flexibilidade de design ilimitada
✅ Cada tipo de colocação respeita as suas próprias restrições de design

Usando estas opções de design corretamente garante que seus relógios de contagem regressiva olhar intencional, profissional, e alinhado com o resto da sua loja ✨

Actualizado em: 10/09/2026