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

A Confiar nos & Ícones seção ajuda os comerciantes visualmente melhorar sua credibilidade loja usando indicadores de confiança personalizáveis como ícones de pagamento seguro, emblemas de garantia, destaques de entrega, e muito mais.

Esta seção permite o controle total sobre:

• Aspecto do distintivo
• Comportamento da disposição
• Tipografia
• Animações
• Estilo de fundo
• Responsividade móvel
• Personalização CSS avançada

🎨 Modelo

O que ele faz

Muda o tema visual geral e a paleta de cores dos seus crachás.

Como utilizar

Clique na lista para escolher entre predefinições como:

• Black Friday
• Mínimo
• Menta
• Crepúsculo

Estes modelos ajudam instantaneamente a combinar com sua marca de loja e estilo visual.

👀 Visibilidade

O que ele faz

Controla quais dispositivos podem ver seus crachás de confiança.

Opções Disponíveis

• Desktop e Mobile → Mostra crachás em todos os lugares
• Apenas área de trabalho → Escondido em dispositivos móveis
• Apenas Móvel → Escondido em dispositivos de desktop

Isso ajuda os comerciantes a criar experiências específicas para dispositivos.

Orientação do layout (Desktop & Mobile)

O que ele faz

Determina como os crachás individuais são organizados.

Opções Disponíveis

Horizontal

Distintivos aparecem lado a lado em uma única linha.

Vertical

Distintivos empilham um abaixo do outro em um layout de coluna.

Controles separados podem estar disponíveis para layouts de desktop e Mobile.

📱 Comportamento de Apresentação de Distintivos (Somente Móveis)

O que ele faz

Controla como os crachás se comportam em telas móveis menores quando o espaço fica limitado.

Opções Disponíveis

Deslocável

Os clientes podem deslizar horizontalmente para ver todos os crachás em uma linha.

Quebrar

Distintivos se movem automaticamente para a próxima linha para que todos sejam visíveis juntos.

✨ Animação

O que ele faz

Adiciona animações de entrada quando os crachás carregam na página.

Como utilizar

Selecione um estilo de animação na lista.

As opções de animação incluem:

• Entrar
• Pop
• Desvanecer
• E mais

Animações ajudam a atrair a atenção do cliente sem exigir trabalho de design adicional.

🖼️ Estilo de Fundo

O que ele faz

Controla a aparência de fundo por trás da seção de crachá.

Opções Disponíveis

• Cor Única
• Gradiente
• Gradiente Tricolor
• Padrões

Personalização Adicional

Os comerciantes também podem personalizar:

• Grau de ângulo de gradiente
• Cores individuais
• Códigos de cores Hex
• Aparência padrão

Isso ajuda os crachás a se misturar visualmente com o design da loja.

📐 Contornos e Cantos

Raio de Canto (px)

Controla como os cantos exteriores arredondados aparecem.

• Valores mais elevados → cantos mais arredondados
• 0 → Cantos quadrados afiados

Tamanho do Contorno (px)

Ajusta a espessura da borda externa.

Cor do Contorno

Muda a cor da linha de borda.

Estilo da Borda

Os estilos disponíveis podem incluir:

• Sólido
• Dotado
• Dashed
• Nenhum

📏 Espaço (Desktop vs Mobile)

Espaçamento pode ser personalizado separadamente para desktop e dispositivos móveis.

Isso garante que seu layout de crachá permaneça equilibrado e responsivo em todos os tamanhos de tela.

Espaço interior (Padificação)

Controla o espaçamento dentro do recipiente do distintivo.

Instruções disponíveis:

• Topo
• Fundo
• Esquerda
• Direita

Isso cria espaço para respirar entre o conteúdo e as fronteiras.

Espaço exterior (Margem)

Adiciona espaçamento fora do bloco de crachás.

Controlos disponíveis:

• Margem Superior
• Margem inferior

Útil para separar crachás das seções da loja circundante.

Espaço de Ícones

Controla a distância entre crachás/ícones individuais.

🔷 Styling de Ícones

Distintivo/Forma de Ícone

O que ele faz

Adiciona fundos decorativos atrás de ícones individuais.

Opções Disponíveis

• Nenhum
• Escudo
• Emblema
• Círculo
• Quadrado

📏 Tamanho e personalização

Ecrã / Tamanho Móvel (px)

Controla o tamanho do ícone de forma independente para:

• Área de trabalho
• Telemóvel

Cor de Fundo

Muda a cor de fundo por trás da forma do ícone.

Raio de Canto

Ajusta o quão arredondado o fundo do ícone se torna.

🚀 Pro Styling (Avançado)

Animação de Ícones

Adiciona efeitos de movimento contínuo aos ícones.

Os exemplos podem incluir:

• Agitar
• Pulso
• Salto

Animação em Hover de Ícones

Ativa animações quando os clientes pairam sobre ícones.

Os exemplos podem incluir:

• Flutuante
• Wobble
• Holográfico

Sombra de Ícone

Adiciona efeitos de profundidade e camadas usando sombras.

Os exemplos podem incluir:

• Brilho suave
• Sombra Subtil

➖ Separador de Ícones

O que ele faz

Adiciona linhas divisórias entre ícones individuais de crachás.

Como utilizar

Activar a Adicionar separador de ícones caixa de verificação.

Isso ajuda a criar espaçamento e separação visual mais limpos.

✍️ Tipografia (Texto & Fontes)

Selecção da Fonte

O que ele faz

Controla o estilo de tipografia usado para títulos de crachás e subposições.

Opções Disponíveis

• Use o seu Shopify fonte do tema
• Escolha fontes personalizadas
• Suporte ao Google Fonts

Usar o tipo de letra do tema ajuda a manter a consistência storefront.

📝 Título & Subtítulo Styling

Tamanho (px)

Controla o tamanho do texto.

Cor

Muda a cor do texto usando:

• Selector de cores
• Código Hex

📐 Espaçamento de Texto

O que ele faz

Controla o espaçamento entre linhas de texto para uma melhor legibilidade.

Aumentar o espaçamento pode fazer o conteúdo se sentir mais limpo e mais premium.

💻 CSS personalizado (para desenvolvedores)

Funcionalidade Avançada

Se as configurações incorporadas não forem suficientes, os comerciantes podem adicionar um estilo CSS totalmente personalizado.

Classes-alvo disponíveis

Container de Distintivos Inteiros

.futureblink-trust-badge

Texto do Título

.fb-title

Texto de Subtítulo

.subposições

Botão CTA

.cta-botão

⚡ Aplicando CSS Personalizado

Como utilizar

1. Colar o seu CSS personalizado no editor
2. Clique Aplicar
3. Antevisão muda instantaneamente

❗ Substituição Shopify Estilos de Tema

Às vezes Shopify temas podem substituir o seu estilo personalizado.

Se suas alterações de CSS não aparecerem corretamente, use:

- É importante.

Isso força seu estilo a ter prioridade sobre estilos de tema.

Exemplo:

.fb-title {
cor: vermelho!importante;
}

✅ Resultado Final

Uma vez configurado com sucesso, o Trust Badges & Icons ajuda a criar uma experiência mais profissional, confiável e focada na conversão.

Com estilo adequado no lugar:

• ✅ A credibilidade da loja melhora
• ✅ Garantias importantes tornam-se mais visíveis
• ✅ Aumenta a confiança do cliente
• ✅ Marca de loja se sente mais polido
• ✅ A resposta móvel melhora
• ✅ Os layouts do distintivo se tornam mais limpos e organizados
• ✅ A consistência visual na frente da loja se torna mais forte

Emblemas de confiança bem desenhados podem ser significativos!

Actualizado em: 10/09/2026