> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.hoppyapps.com/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # 🎨 Consentimento de Cookies – Design e Estilhaço > ℹ️ **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. 🍪 ---