ℹ️ 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 seção Design & Styling lhe dá controle completo sobre como seu banner de consentimento de cookies aparece em sua loja.

De modelos e posicionamento a cores, tipografia, ícones e estilo de botão, quase todos os aspectos visuais do banner podem ser personalizados para combinar com sua marca de loja e criar uma experiência de consentimento mais profissional.

⚠️ Antes de começar

Para aceder às opções de Desenho e Estilhaço:

→ Abrir GDPR EU Cookie Banner

→ Abrir Configuração do Banner

→ Navegar para o Desenho aba

💡 Uma pré-visualização ao vivo atualiza automaticamente à medida que você faz alterações, permitindo que você veja exatamente como o banner aparecerá antes de salvar.

🎨 Modelos

Os modelos fornecem uma maneira rápida de aplicar um design de banner completo sem configurar manualmente cada configuração.

O Que Faz

Aplica uma combinação predefinida de:

• Cores de fundo
• Cores do texto
• Cores dos botões
• Cores do ícone

Isso permite aos comerciantes lançar rapidamente um design de banner polido.

Modelos Disponíveis

Os exemplos incluem:

• Floresta
• Aqua
• Alerta
• Roxo
• Azul
• Oceano
• Amarelo
• Preto
• Marinha

Modelo Personalizado

O modelo Custom fornece um ponto de partida neutro para os comerciantes que preferem construir seu próprio design do zero.

💡 Esta é muitas vezes a melhor opção ao combinar um guia de estilo de marca existente.

👀 Visibilidade

Controles de visibilidade quais dispositivos exibem o banner de consentimento de cookies.

Opções Disponíveis

Ecrã & Móvel

Mostra o banner em todos os dispositivos.

Apenas na área de trabalho

Mostra o banner apenas nos dispositivos de desktop.

Apenas Móvel

Mostra o banner apenas em dispositivos móveis.

Isso pode ser útil ao testar ou criar experiências específicas do dispositivo.

📍 Configuração da Posição

Controle de configurações de posição onde o banner aparece no desktop e dispositivos móveis.

💻 Tipo de Ecrã

Determina o estilo de disposição geral usado nos dispositivos de desktop.

Barra cheia

Mostra um banner estendido pela largura da tela.

Comumente usado para banners de consentimento tradicionais de cookies.

Cartão Flutuante

Mostra o banner como uma carta flutuante menor.

Isso cria uma aparência mais compacta e reduz a cobertura da tela.

📌 Posição do Ecrã

As posições disponíveis dependem do tipo de exibição selecionado.

Posição da Barra Completa

• Topo
• Fundo

Posição do Cartão Flutuante

• Superior Esquerda
• Superior Direita
• Médio
• Baixo- Esquerda
• Baixo- Direita

📱 Posição móvel

Controla onde o banner aparece em dispositivos móveis.

As opções disponíveis incluem:

• Topo
• Médio
• Fundo

💡 A colocação inferior é frequentemente preferida porque se sente menos intrusiva em telas menores.

🎨 Cartão Styling

Carta Styling controla a aparência do próprio recipiente de banner.

🖼️ Cor de Fundo

Controla a cor de fundo do banner.

Você pode:

• Selecione uma cor visualmente
• Digite um Código Hex manualmente

Isso ajuda a alinhar o banner com sua marca storefront.

⭕ Raio de Canto

Controla como os cantos arredondados do banner aparecem.

Valores mais baixos criam cantos mais nítidos, enquanto valores mais elevados criam uma aparência mais suave.

📐 Configuração do Contorno

Personalize o contorno do banner.

Tamanho do Contorno

Controla a espessura da fronteira.

Cor do Contorno

Controla a cor da borda.

Uma fronteira sutil pode ajudar a bandeira se destacar sem se sentir distraído.

✍️ Tipografia

As configurações de tipografia controlam como o texto aparece ao longo do banner de consentimento de cookies.

🔠 Família de fontes

Controla a fonte usada em todo o texto do banner.

Usar fonte de tema

Coincide automaticamente com a tipografia usada pela sua Shopify tema.

Fontes Personalizadas

Escolha entre o sistema suportado e as fontes do Google.

Os exemplos incluem:

• Roboto
• Abrir Sans
• Montserrat
• Poppins

Usar a mesma fonte que a sua storefront muitas vezes cria a experiência mais perfeita.

📝 Título Styling

Personalize o título do banner.

Tamanho do Título

Controla o tamanho da fonte do título.

Cor do Título

Controla a cor do texto do título.

📄 Descrição Styling

Personalize o texto do corpo exibido dentro do banner.

Tamanho da Descrição

Controla o tamanho da fonte.

Cor da Descrição

Controla a cor do texto.

🔗 Política de Privacidade Link

Personalize o aparecimento do link Política de Privacidade.

Tamanho da Ligação

Controla o tamanho da fonte.

Cor da Ligação

Controla a cor da ligação.

Escolha uma cor que permaneça perceptível enquanto ainda corresponde ao design geral.

🔘 Desenho de Botão

Estas configurações controlam a aparência dos botões de consentimento.

🎨 Cor do Botão

Controla a cor de fundo do botão.

Este é geralmente um dos elementos de design mais visíveis no banner.

🔤 Styling de Texto de Botão

Personalize a aparência do texto do botão.

Tamanho do Texto

Controla o tamanho da fonte do botão.

Cor do Texto

Controla a cor da fonte do botão.

⭕ Raio de Canto

Controla como os cantos arredondados do botão aparecem.

Isto pode ser configurado independentemente do recipiente do banner.

🎯 Configuração do Ícone

Ícones ajudam a tornar o banner mais visualmente reconhecível e envolvente.

🍪 Mostrar ícone de banner de cookies

Activa ou desactiva o ícone exibido ao lado do conteúdo do banner.

Quando habilitado, uma biblioteca de ícones fica disponível.

🖼️ Selecção de Ícones

Escolha entre uma variedade de ícones embutidos.

Os exemplos incluem:

• Cookie
• Escudo
• Bloquear
• Segurança
• Informação
• Configuração
• Notificação
• Atenção
• Lista de verificação

Ícones diferentes podem ajudar a enfatizar privacidade, segurança, conformidade ou informações gerais.

🎨 Cores de Ícones

Personalize a aparência dos ícones do banner.

Fechar a Cor do Ícone

Controla a cor do botão de fechar.

Cor do Ícone da Seta

Controla a cor do ícone de seta reabrir.

Usar cores complementares ajuda a manter um design coeso.

📏 Alinhamento de Texto

Controla como o conteúdo está alinhado dentro do banner.

Opções Disponíveis

Esquerda

Alinha o conteúdo para o lado esquerdo.

Centro

Centra todo o conteúdo dentro do banner.

Direita

Alinha o conteúdo para o lado direito.

💡 O alinhamento do centro é frequentemente a opção mais equilibrada em dispositivos móveis e desktop.

⚠️ Notas Importantes

Modelos Substituir Cores Existentes

A seleção de um novo modelo substitui automaticamente as configurações de cores atuais.

Para melhores resultados:

1. Seleccione primeiro um modelo
2. Em seguida, aplicar qualquer ajuste de cor personalizado

Opções de posição mudam dinamicamente

As posições disponíveis na área de trabalho dependem do tipo de exibição selecionado.

Se as escolhas de posição mudarem inesperadamente, verifique se a Barra Completa ou a Carta Flutuante estão selecionadas.

Os Ícones Devem Ser Activados

A biblioteca de ícones só aparece quando:

Mostrar ícone de banner de cookies está habilitado.

Visibilidade Controla o Alvo do Dispositivo

Se o banner aparecer em um dispositivo, mas não em outro, verifique a configuração de visibilidade selecionada.

Atualizações de visualização ao vivo automaticamente

O painel de pré-visualização atualiza à medida que as alterações são feitas, ajudando você a revisar seu design antes de salvar.

🚀 Resultado Final

Uma vez configurado com sucesso:

✅ O banner de consentimento de cookies corresponde à sua marca storefront

✅ Cores, tipografia e botões parecem consistentes com o seu tema

✅ Colocação Banner é otimizado para desktop e móvel

✅ Ícones e estilo melhorar a clareza visual

✅ Visitantes recebem uma experiência de consentimento mais polida

✅ Mensagens de conformidade parecem profissionais sem interromper a experiência de compras

Um banner de consentimento de cookies bem desenhado ajuda a manter a conformidade ao criar uma experiência mais confiável e perfeita para seus visitantes. 🍪

Actualizado em: 10/09/2026