Quer controlo total sobre a aparência da sua barra de anúncios? 🎨

Embora as definições de design integradas cubram a maioria das necessidades de personalização, a funcionalidade Custom CSS (CSS personalizado) permite ajustar o estilo para além das opções padrão.

Isto é útil para comerciantes que pretendem corresponder exatamente às diretrizes da marca, ajustar espaçamentos, personalizar a tipografia ou resolver conflitos de estilo específicos do tema.

⚠️ Antes de começar

Antes de utilizar o Custom CSS:

• Certifique-se de que a sua barra de anúncios já foi criada.
• Tenha conhecimentos básicos de CSS ou acesso a um desenvolvedor.
• Compreenda que o Custom CSS pode substituir as definições de design padrão.

ℹ️ A maioria dos comerciantes nunca precisa de Custom CSS. Utilize-o apenas quando as opções de design integradas não conseguirem obter o aspeto pretendido.

🛠️ Passo 1 — Abra o separador Design

Abra a app Hoppy Announcement Bar e navegue até à barra de anúncios que pretende personalizar.

Depois:

➡️ Clique no separador Design.

Percorra a página até encontrar a secção Custom CSS.

🎨 Passo 2 — Ative o Custom CSS

Dentro da secção Custom CSS:

➡️ Clique em Apply (Aplicar).

Assim que ativado, aparecerá um editor CSS com uma estrutura CSS pré-configurada.

Esta estrutura inclui todos os seletores suportados, facilitando a personalização dos diferentes elementos da barra de anúncios sem ter de identificar manualmente os nomes das classes.

✍️ Passo 3 — Adicione o seu CSS personalizado

O editor fornece seletores prontos para os principais elementos da barra de anúncios.

Seletores disponíveis

Seletores específicos para dispositivos móveis

Para direcionar especificamente dispositivos móveis, utilize a variante .mobile.

Exemplos:

• .futureblink-announcement-bar.mobile .title
• .futureblink-announcement-bar.mobile .cta-button
• .futureblink-announcement-bar.mobile .close-btn

Exemplo de CSS

Para colocar o título em maiúsculas com espaçamento adicional:

.futureblink-announcement-bar .title {
text-transform: uppercase;
letter-spacing: 2px;
}

Para que o botão de chamada à ação ocupe toda a largura em dispositivos móveis:

.futureblink-announcement-bar.mobile .cta-button {
width: 100%;
}

💡 Pode utilizar quaisquer propriedades CSS válidas dentro dos seletores fornecidos.

👀 Passo 4 — Pré-visualize as alterações

Depois de introduzir o CSS:

➡️ Clique em Apply.

A pré-visualização em tempo real é atualizada automaticamente, para que possa rever imediatamente as alterações.

Se forem necessários ajustes:

➡️ Edite o CSS diretamente no editor.

➡️ Revise a pré-visualização atualizada.

⚙️ Como funciona o Custom CSS

A app aplica automaticamente um processamento adicional para ajudar a garantir que o seu estilo funciona corretamente.

Injeção automática de \!important

Todas as declarações CSS recebem automaticamente a prioridade !important na loja, para ajudar a impedir que os estilos do tema substituam as suas alterações.

Processamento automático para dispositivos móveis

Os seletores que utilizam a variante .mobile são automaticamente envolvidos em media queries para dispositivos móveis quando apresentados na loja.

Prioridade sobre as definições de design

O Custom CSS geralmente tem precedência sobre as definições de design padrão configuradas noutras partes da app.

💾 Passo 5 — Guardar e publicar

Quando estiver satisfeito com o estilo:

➡️ Clique em Save (Guardar).

➡️ Clique em Publish (Publicar).

⚠️ Guardar por si só não atualiza a loja.

A configuração também tem de ser publicada antes de os clientes poderem ver as alterações.

🔄 Repor o Custom CSS

Se quiser voltar às definições de design padrão:

➡️ Abra a secção Custom CSS.

➡️ Clique em Reset (Repor).

Isto remove o seu CSS personalizado e devolve o controlo às definições de design padrão.

💡 Dicas úteis

Comece aos poucos

Faça uma alteração de cada vez, para que seja mais fácil identificar o efeito de cada regra CSS.

Utilize a pré-visualização em tempo real

Reveja sempre as alterações na pré-visualização antes de publicar.

Teste os layouts em dispositivos móveis

Mesmo que o CSS pareça correto no computador, verifique também a aparência em dispositivos móveis.

Mantenha uma cópia de segurança

Para personalizações CSS mais extensas, considere manter uma cópia do seu código fora da app.

❓ Resolução de problemas

Se o CSS não for aplicado como esperado:

➡️ Verifique se Apply está ativado.

➡️ Confirme que a barra de anúncios foi Saved (Guardada) e Published (Publicada).

➡️ Verifique se os nomes dos seletores correspondem exatamente aos nomes das classes fornecidos.

➡️ Teste numa janela de navegação privada para eliminar problemas de cache do browser.

Para requisitos de estilo avançados, considere trabalhar com um desenvolvedor da Shopify ou com a equipa de suporte do seu tema.

🎉 Resultado final

✅ A sua barra de anúncios utiliza um estilo totalmente personalizado.

✅ Os conflitos com o tema são minimizados através do processamento automático de prioridade CSS.

✅ Os layouts para dispositivos móveis e computador podem ser estilizados independentemente.

✅ A barra de anúncios pode ser adaptada para corresponder mais precisamente à identidade visual da marca.

O Custom CSS oferece a máxima flexibilidade quando as definições de design padrão não são suficientes, ajudando a criar uma experiência de loja mais polida e consistente. 🚀

Actualizado em: 01/09/2026