> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.hoppyapps.com/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # 🎨 Contagem regressiva — Desenho e estilo > ℹ️ **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 Carrinhos**ou **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 ✨