ℹ️ 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 controle total sobre como seus Distintivos de Confiança ficam em sua loja? 🎨

Enquanto a guia Design fornece opções extensas de personalização, CSS Personalizado dá-lhe a flexibilidade para fazer ajustes de estilo avançados que vão além das configurações padrão.

Se você está refinando o espaçamento, combinando diretrizes estritas da marca, adicionando efeitos visuais personalizados ou resolvendo conflitos de estilo específicos do tema, o Custom CSS oferece controle criativo completo sobre seu design Trust Badge.

⚠️ Antes de começar

Antes de usar CSS personalizado:

• Certifique-se de que você já criou um Distintivo de Confiança.
• Tenha uma compreensão básica de CSS ou acesso a um desenvolvedor.
• Compreenda que CSS personalizado pode sobrepor configurações de design padrão.

💡 Se você ainda não criou um Distintivo de Confiança, crie um antes de prosseguir com este guia.

🛠️ Passo 1 — Abra a Página Desenho

Abrir o Hoppy Trust Badges app e navegue para o distintivo de confiança que você deseja personalizar.

Depois:

➡️ Clique na Desenho tab.

Desça até localizar o CSS Personalizado secção.

Esta seção contém todas as ferramentas necessárias para adicionar e gerenciar o estilo personalizado.

🎨 Passo 2 — Abra a seção CSS personalizada

Dentro da CSS Personalizado Seção que você vai encontrar:

• Um editor de CSS
• A Ver Guia botão
• An Aplicar botão
• Um modelo CSS inicial

O template starter contém os selectores disponíveis que podem ser personalizados para o seu distintivo de confiança.

Isto torna mais fácil começar a styling sem necessidade de inspecionar manualmente elementos storefront.

✍️ Passo 3 — Adicione seu CSS personalizado

O editor inclui vários seletores pré-configurados que visam elementos específicos do Trust Badge.

Selectores Disponíveis

Container

Seletor

Designação das mercadorias

.futureblink-trust-badge

Contêiner de distintivos de confiança completo

Título

Seletor

Designação das mercadorias

.futureblink-trust-badge .fb-title

Texto do título principal

.futureblink-trust-badge.mobile .fb-title

Estilo de título móvel

💡 Para crachás flutuantes, o seletor de título usa .title em vez de .fb-title.

Subdivisão

Seletor

Designação das mercadorias

.futureblink-trust-badge .subheading

Descrição do texto

.futureblink-trust-badge.mobile .subheading

Estilo de descrição móvel

Ícones

Seletor

Designação das mercadorias

.futureblink-trust-badge .icon

Ícones de Distintivo

.futureblink-trust-badge.mobile .icon

Estilo de ícones móveis

Botão Chamar a Ação

Seletor

Designação das mercadorias

.futureblink-trust-badge .cta-button

Botão CTA

.futureblink-trust-badge.mobile .cta-button

Estilo de botão CTA móvel

Exemplo CSS

Para adicionar enchimento ao recipiente de crachá e personalizar o título:

.futureblink-trust-badge {
padding: 20px;
}

.futureblink-trust-badge .fb-title {
color: #2c3e50;
font-size: 18px;
}

💡 Você pode adicionar seletores CSS adicionais, consultas de mídia, animações e regras de estilo, conforme necessário.

📱 Passo 4 — Adicionar um estilo específico para dispositivos móveis

Para direcionar especificamente dispositivos móveis, use o .mobile variação dos selectores.

Exemplo:

.futureblink-trust-badge.mobile .fb-title {
font-size: 14px;
}

A aplicação é automática .mobile Seletores dentro de uma consulta de mídia móvel ao renderizá-los em sua loja.

Se você preferir escrever suas próprias consultas de mídia, elas serão preservadas exatamente como inseridas.

✅ Passo 5 — Aplique seu CSS

Uma vez que o seu CSS foi adicionado:

➡️ Clique Aplicar.

As atualizações de visualização ao vivo automaticamente, permitindo que você reveja suas alterações de estilo imediatamente.

Se você quiser remover seu estilo personalizado mais tarde:

➡️ Clique Reiniciar.

Isso remove seu CSS personalizado e restaura as configurações de Design padrão.

👀 Passo 6 — Reveja a Visualização

Depois de aplicar o seu CSS:

➡️ Reveja a visualização do Desktop.

➡️ Reveja a pré-visualização do Mobile.

Verificar que:

• O texto aparece correctamente.
• Ícones permanecem alinhados.
• O espaçamento parece consistente.
• Os botões exibem como esperado.

Se forem necessários ajustamentos:

➡️ Atualizar o CSS.

➡️ Clique Aplicar Outra vez.

A antevisão atualiza automaticamente após cada alteração.

💾 Passo 7 — Salvar e Publicar

Uma vez satisfeito com o design:

➡️ Clique Gravar.

➡️ Clique Publicar.

⚠️ Salvar sozinho não atualiza o storefront.

O Distintivo de Confiança também deve ser publicado antes que os clientes possam ver as alterações.

⚠️ Notas Importantes

CSS Personalizado Substitui as Configurações Padrão

CSS personalizado tem precedência sobre a maioria das configurações da aba Design.

Se uma configuração de cor, espaçamento ou tipografia parecer ser ignorada, é provável que esteja sendo substituída por seu CSS.

Manuseamento Automático!importante

O aplicativo adiciona automaticamente !important prioridade para declarações CSS ao renderizar estilos no storefront.

Você não precisa adicionar !important manualmente.

Styling Escondido

CSS personalizado é automaticamente escopo para o distintivo de confiança específico sendo editado.

Isso ajuda a evitar conflitos de estilo com:

• Outros Distintivos de Confiança
• Elementos temáticos
• Outros componentes da frente da loja

Seletores vazios são permitidos

Você não precisa usar cada seletor fornecido no modelo.

Apenas adicione estilos aos elementos que deseja personalizar.

Validação do CSS

O editor não valida a sintaxe do CSS.

Se um estilo não estiver se aplicando corretamente:

➡️ Verifique os nomes do selector.

➡️ Verifique os suportes e pontos e vírgulas.

➡️ Reveja o CSS para erros de sintaxe.

❓ Resolução de Problemas

Se seus estilos não estão aparecendo corretamente:

➡️ Confirmar que Aplicar foi clicado.

➡️ Verificar o distintivo de confiança tem sido Gravado e Publicado.

➡️ Verifique se os nomes do seletor correspondem exatamente ao modelo fornecido.

➡️ Teste em uma janela de navegador Incógnito ou Privado.

➡️ Atualizar o storefront para limpar estilos em cache.

🎉 Resultado Final

✅ Seu distintivo de confiança pode ser personalizado além das configurações de design padrão.

✅ Branding, espaçamento, tipografia e estilo de ícones podem ser controlados com mais precisão.

✅ Os layouts desktop e móvel podem ser decorados de forma independente.

✅ Os estilos personalizados permanecem isolados ao distintivo de confiança selecionado.

Custom CSS fornece uma maneira flexível de criar uma experiência mais polida e consistente com a marca Trust Badge, mantendo a simplicidade das ferramentas de design integradas do aplicativo. ✨

Actualizado em: 10/09/2026