> ## 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). # 🎨 Como definir CSS personalizado para contadores e barras > ℹ️ **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. Quer o seu temporizador ou barra regressiva para combinar perfeitamente com a marca da sua loja? 🎨 Enquanto o aplicativo inclui extensos controles de design, às vezes você precisa de flexibilidade adicional para personalizar detalhes de estilo específicos. A **CSS Personalizado** O recurso permite que você aplique suas próprias regras de CSS para contadores e barras para personalização visual avançada. Este guia percorre tudo o que você precisa saber sobre adicionar e gerenciar CSS personalizado para colocações regressivas. --- # **⚠️ Antes de começar** Antes de usar CSS personalizado: * Certifique-se de que você já criou um temporizador de contagem regressiva ou uma barra regressiva. * Certifique-se de que você tem acesso ao **Desenho** aba dentro do editor de contagem regressiva. * Tenha uma compreensão básica de CSS ou acesso a um desenvolvedor que possa ajudar. ⚠️ **Importante:** CSS personalizado é **não disponível para contagem regressiva da página de checkout**. Porque... Shopify Checkout usa uma estrutura de extensão de UI segura, injeção CSS externa é restrita por Shopify. CSS personalizado é totalmente suportado em: * Páginas de Produtos * Páginas de desembarque * Barras superiores * Barras inferiores * Páginas do Carrinho * Gavetas de Carrinhos * Colocações de E- mail --- # **🛠️ Passo 1 — Abra a Página Desenho** Abra o temporizador da contagem regressiva ou barra que você gostaria de personalizar. Depois: ➡️ Clique na **Desenho** tab. Desça até localizar o **CSS Personalizado** secção. 💡 CSS personalizado funciona em cima de suas configurações de design existentes, modelos, cores e seleções de tipografia. --- # **🎨 Passo 2 — Abra a seção CSS personalizada** Dentro da aba Desenho: ➡️ Localizar o **CSS Personalizado** Cartão. Dentro desta seção você vai encontrar: * Um editor de CSS * Um modelo CSS inicial * An **Aplicar** botão O modelo inicial inclui seletores comumente usados, tornando mais fácil começar a personalizar a contagem regressiva sem precisar identificar manualmente os nomes das classes. --- # **✍️ Passo 3 — Adicione seu CSS personalizado** O editor inclui vários seletores prontos para usar. ### **Selectores Disponíveis** Seletor Designação das mercadorias `.futureblink-countdown-timer` Container com contagem regressiva completa `.futureblink-countdown-timer .title` Texto do título principal `.futureblink-countdown-timer .subheading` Texto da subtítulo `.futureblink-countdown-timer .cta-button` Botão de chamada à ação `.futureblink-countdown-timer .close-btn` Fechar ícone --- ### **Exemplo CSS** Para tornar o título em negrito e mudar sua cor: .futureblink-countdown-timer . title { peso da fonte: 700; cor: #ff6600; } 💡 Você também pode adicionar seus próprios seletores, consultas de mídia, animações e regras adicionais de CSS, conforme necessário. --- # **✅ Passo 4 — Aplique seu CSS** Depois de entrar em seu CSS: ➡️ Clique **Aplicar**. Uma vez activada, a **Aplicar** alterações do botão para **Reiniciar**, indicando que seus estilos personalizados estão ativos. ### **O que acontece automaticamente** O aplicativo realiza automaticamente várias ações nos bastidores: * Injeta seu CSS na frente da loja. * Adiciona `!important` Prioridade, se necessário. * Estilos de escopos para a configuração atual da contagem regressiva. * Evita conflitos de estilo com outras contagens. Isso ajuda a garantir que seu CSS funcione de forma consistente em toda sua loja. --- # **💾 Passo 5 — Salvar e Publicar** Depois de aplicar o seu CSS: ➡️ Clique **Gravar**. ➡️ Clique **Publicar**. ⚠️ Salvar sozinho não atualiza o storefront. A contagem regressiva também deve ser publicada antes que os clientes possam ver as mudanças. --- # **👀 Passo 6 — Verificar as mudanças** Após publicação: ➡️ Abre a tua loja. ➡️ Navegue para a página onde a contagem regressiva aparece. ➡️ Atualizar a página. Se os estilos atualizados não aparecerem imediatamente, realize uma atualização dura: **Janelas** `Ctrl + Shift + R` **Mac** `Cmd + Shift + R` Se forem necessários outros ajustamentos: ➡️ Volte para o editor. ➡️ Atualizar o CSS. ➡️ Clique **Aplicar**, **Gravar**, e **Publicar** Outra vez. --- # **⚠️ Notas Importantes** ### **Limitação da Página de Obtenção** CSS personalizado não está disponível nas contagens da página de checkout porque Shopify's Checkout UI Extensões operam dentro de um ambiente seguro que restringe a injeção personalizada de CSS. ### **Manuseamento Automático!importante** O aplicativo adiciona automaticamente `!important` prioridade para declarações CSS ao renderizar estilos no storefront. Se `!important` já está presente, o aplicativo evita aplicá-lo duas vezes. ### **Styling Escondido** Cada contagem regressiva recebe seu próprio escopo de estilo isolado. Isto significa: ✅ Diferentes contagens podem ter desenhos diferentes. ✅ Os estilos permanecem isolados à contagem regressiva selecionada. ✅ Outros elementos da página permanecem inalterados. ### **Repor a Opção** Clicando **Reiniciar** somente remove CSS Personalizado. Não afecta: * Modelos * Cores * Tipografia * Configuração do desenho * Configuração de contagem regressiva ### **Ver Guia** A seção Custom CSS também inclui **Ver Guia** link que fornece referências adicionais de CSS quando necessário. --- # **❓ Resolução de Problemas** Se seus estilos não estão aparecendo corretamente: ➡️ Verificar que **Aplicar** foi clicado. ➡️ Confirmar a contagem regressiva **Gravado** e **Publicado**. ➡️ Verifique se os seletores correspondem exatamente aos nomes de classe fornecidos. ➡️ Teste usando uma janela do navegador Incognito ou Privado. ➡️ Execute uma atualização difícil para limpar estilos em cache. --- # **🎉 Resultado Final** ✅ Seu temporizador ou barra de contagem regressiva reflete os requisitos de estilo da sua marca. ✅ Os conflitos de estilo de tema são minimizados através do tratamento automático de prioridade CSS. ✅ As contagens individuais podem ser feitas de forma independente. ✅ Os estilos personalizados permanecem isolados sem afetar outros elementos de storefront. CSS personalizado fornece uma maneira flexível de ajustar projetos de contagem regressiva, mantendo o resto de sua configuração simples e fácil de gerenciar. 🚀