ℹ️ 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. 🚀

Actualizado em: 10/09/2026