CSS personalizado

Todo tipo de contagem regressiva termina as configurações de design com uma caixa Custom CSS (Developer Zone). Tudo o que você colocar ali é aplicado a essa contagem regressiva na sua loja virtual, por cima de tudo o que os controles visuais definiram.

A caixa Custom CSS, no fim das configurações de design.

Cuidado

Este é um recurso de último caso, não a primeira opção. O CSS escrito aqui não é verificado, não tem uma prévia confiável e continua sendo aplicado mesmo que o seu tema mude por baixo dele. Tente primeiro os controles visuais: eles cobrem a maior parte do que as lojas precisam.

Quando é realmente útil

• Posicionamento fino: ajustar as margens de uma contagem regressiva para que ela se encaixe em um tema com espaçamento incomum.
• Ajustes responsivos: uma media query para um ponto de quebra que as configurações para celular não cobrem.
• Combinar um detalhe do tema: um raio de borda ou uma sombra específica que o seu tema usa em tudo e que os controles não reproduzem com exatidão.
• Ocultar um elemento: remover uma parte da contagem regressiva que não pode ser desativada de outra forma.

Como escrever

A caixa aceita CSS puro (seletores e regras, sem a tag <style>):

.samita-countdown {
  margin-top: 24px;
}

@media (max-width: 749px) {
  .samita-countdown {
    margin-top: 12px;
  }
}

O contêiner da própria contagem regressiva tem a classe samita-countdown, e cada contagem regressiva exibida recebe um ID formado a partir do ID dela. Para atingir algo mais específico, inspecione a contagem regressiva exibida nas ferramentas de desenvolvedor do navegador e use as classes que encontrar ali.

Nota

Os nomes das classes dentro da contagem regressiva podem mudar quando o app é atualizado. Limitar o seu CSS a .samita-countdown e às suas próprias substituições, em vez de seletores internos profundos, reduz muito a chance de ele quebrar.

Mantenha o escopo restrito

O CSS desta caixa não fica limitado automaticamente à contagem regressiva. Um seletor como img { ... } atingirá todas as imagens da página.

Sempre prefixe as regras para que elas atinjam apenas a contagem regressiva:

/* Good — scoped */
.samita-countdown img { border-radius: 4px; }

/* Risky — affects the whole page */
img { border-radius: 4px; }

Teste em uma página real

A prévia do construtor não reproduz o seu tema, então um CSS que alinha algo na prévia pode não alinhar na sua página de produto. Salve, abra uma página real e confira, no computador e no celular.

Se você prefere não escrever CSS

O suporte pode ajudar com ajustes específicos do tema. O app oferece um botão Chat now! ao lado da caixa Custom CSS, descrito como “Chat with us to customize countdown in your theme.” Você também pode entrar em contato com o suporte com um link da página e uma descrição do que quer mudar.

Próximas etapas

• Crie o design de uma contagem regressiva
• Posição de exibição
• Entre em contato com o suporte
• A contagem regressiva não aparece