Aprenda a personalizar a barra de anúncios no seu drawer do Upcart, incluindo altura, posição, cronômetro de contagem regressiva, formatação de texto e cores.
A configuração de Altura controla a espessura da barra de anúncios. Ela oferece três opções: Slim, Normal e Thick. Slim mantém o drawer mais compacto, abrindo espaço para o conteúdo do carrinho — especialmente útil em telas menores. Normal fica entre as duas. Thick oferece maior destaque visual, ajudando sua mensagem a chamar a atenção dos clientes.
Use a configuração de Posição para escolher se a barra de anúncios aparece Antes dos produtos ou Depois dos produtos dentro do cart drawer.
Antes dos produtos coloca a barra no topo do corpo do carrinho, logo abaixo do cabeçalho.
Depois dos produtos a coloca na parte inferior do corpo do carrinho, logo acima do rodapé — abaixo dos módulos de notas e upsells, se eles também estiverem posicionados ali.
Se você quiser que o anúncio expire após um tempo determinado, defina uma contagem regressiva no campo Timer duration. Ele usa o formato MM:SS — 05:00 para cinco minutos, 00:30 para trinta segundos. Os segundos devem estar entre 00 e 59; o campo rejeita qualquer valor acima disso.A contagem regressiva só é executada se o texto do seu anúncio contiver a variável do cronômetro. Quando ela termina, toda a barra de anúncios é removida automaticamente do carrinho.
O cronômetro de contagem regressiva integrado é baseado na sessão e faz a contagem a partir de um número definido de minutos. Ele não oferece suporte a contagens recorrentes ou diárias que reiniciam em um horário específico (por exemplo, contar até as 14h todos os dias). Essa funcionalidade não está disponível atualmente no Upcart.
Esta seção permite inserir e formatar a mensagem exibida no banner de anúncio. Você pode estilizar partes específicas do texto usando a barra de formatação acima do campo de entrada, que inclui opções de negrito, itálico, sublinhado e cor.
O campo Announcement Text não oferece suporte a hiperlinks — não há botão de link ou URL na barra de formatação, e tags <a> coladas ou links em Markdown são removidos ao salvar. Para tornar o anúncio clicável ou incluir um link, use o módulo Custom HTML (veja abaixo).
Como o campo Announcement Text integrado não renderiza hiperlinks, você pode substituir ou complementar a barra de anúncios injetando um link com Custom HTML:
Defina HTML Location como Above announcements/rewards (para aparecer acima da barra de anúncios) ou Below header/announcements/rewards (para aparecer logo abaixo dela).
Cole um snippet com o seu link, por exemplo:
<div style="text-align: center; padding: 8px;"> <a href="https://yourstore.com/sale" style="color: #ffffff; text-decoration: underline;"> Shop the sale → </a></div>
Clique em Save e depois teste no seu carrinho ativo.
Para mais informações sobre as localizações e a estilização do Custom HTML, veja Custom HTML e Custom CSS. A equipe de suporte do Upcart não escreve nem depura código personalizado — procure um Shopify Expert se precisar de ajuda para criá-lo.Se você estiver usando o recurso de contagem regressiva, insira a variável do cronômetro diretamente na sua mensagem. Use {{timer}} para carrinhos V2 ou {TIMER} para carrinhos V1.
Certifique-se de digitar manualmente a variável do cronômetro ({{timer}} para V2, {TIMER} para V1) em vez de copiá-la e colá-la. Isso evita problemas de formatação ocultos que poderiam impedir o cronômetro de ser exibido corretamente no seu carrinho ativo.
Você pode controlar o tamanho do texto do anúncio usando o controle deslizante, com opções que vão de 10px a 24px. Isso ajuda a garantir a legibilidade tanto no mobile quanto no desktop.
Background Color permite definir a cor de preenchimento geral da barra de anúncios. Border Color permite ajustar as linhas horizontais acima e abaixo do banner para um visual de contêiner estilizado.
Para funcionalidades adicionais, é possível usar JavaScript para personalizar o cronômetro de contagem regressiva. Adicione seu script na seção “Scripts (Before Load)”, e não no módulo Custom HTML. Isso é um requisito de tempo de carregamento, não uma restrição de segurança — o Custom HTML executa scripts, mas eles rodam tarde demais para se conectar de forma confiável ao evento de carregamento do carrinho. A seção “Scripts (Before Load)” executa seu código antes de o carrinho carregar, então callbacks como upcartSubscribeCartLoaded disparam corretamente. Código de exemplo:
<script> window.upcartSubscribeCartLoaded(function(event) { // Your countdown timer code here // event.cart contains the cart object with .items[], .total, .currency });</script>
Nota sobre versões antigas: window.upcartOnCartLoaded ainda funciona, mas está obsoleto e registra um aviso no console. Use upcartSubscribeCartLoaded para todos os scripts novos.Teste com cuidado o posicionamento e a sintaxe do seu código. Algumas restrições da plataforma ainda podem afetar como os scripts são processados.
Esta página foi útil?
⌘I
Assistant
Responses are generated using AI and may contain mistakes.
