> ## 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). # 🎨 Conversor de moeda – Design e Styling > ℹ️ **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 dá-lhe o controle completo sobre a aparência do conversor de moeda em sua loja. De estilos de bandeira e tipografia para cores, bordas e preferências de exibição, essas configurações ajudam você a criar um conversor de moeda que se sente como uma parte natural de sua loja, mantendo uma experiência suave para compradores internacionais. # **⚠️ Antes de começar** Para aceder às opções de Desenho e Estilhaço: → Abrir **Hoppy Currency Converter** → Complete o processo de integração → Abra o **Desenho** aba 💡 Todas as mudanças de design se tornam visíveis na frente da loja após salvar. --- ## **🏳️ Personalização da Bandeira** Esta seção controla como bandeiras aparecem em todo o Conversor de Moeda. As alterações aplicam-se a ambos: * A apresentação da moeda seleccionada * A lista de moedas suspensas --- ### **🎨 Estilo da Bandeira** Controla a aparência visual das bandeiras. #### **Tradicional** Mostra imagens de bandeira padrão sem estilo adicional. **Melhor para:** Lojas mínimas e profissionais onde você quer bandeiras para misturar naturalmente no design. --- #### **Moderno** Exibe bandeiras com: * Cantos arredondados * Sombras suaves * Fronteiras sutis * Tratamento visual melhorado **Melhor para:** Modern storefronts que querem o Conversor de Moedas para se destacar como um elemento de design premium. 💡 O estilo selecionado aplica-se a cada bandeira exibida pelo Conversor de Moedas. --- ### **🔘 Tema da Bandeira** Controla a forma das bandeiras. #### **Redonda** Bandeiras aparecem com cantos suavemente arredondados. #### **Círculo** Bandeiras aparecem dentro de uma forma circular. #### **Plano** Bandeiras aparecem com cantos afiados e um olhar tradicional. O tema selecionado ajuda a determinar a personalidade visual geral do widget. --- ## **🔘 Personalização do Selector de Moeda** Estas configurações controlam a aparência do widget principal Conversor de Moeda. --- ### **🎨 Tema** Controla o estilo visual geral do recipiente Conversor de Moeda. #### **Predefinição** Uma aparência limpa e simples que se mistura naturalmente na maioria Shopify temas. #### **Camada Moderna** Cria um efeito visual em camadas por trás do widget para maior profundidade e ênfase. 💡 O efeito Camada Moderna usa automaticamente a cor de fundo selecionada. --- ### **👀 Modo de exibição** Controla que informação aparece dentro do Conversor de Moedas. #### **Mostrar Bandeira e Moeda** Mostra tanto a informação da bandeira como da moeda. #### **Mostrar apenas a bandeira** Mostra apenas bandeiras. #### **Mostrar apenas a Moeda** Mostra apenas informação monetária. Esta configuração aplica- se tanto ao seletor como à lista suspensa. --- ### **🌓 Tema de Cores** Controla se o Conversor de Moeda usa uma aparência clara ou escura. #### **Luz** Usa um fundo claro com texto mais escuro. #### **Escuro** Usa um fundo escuro com texto mais claro. #### **Automático** Automaticamente corresponde à preferência do sistema do comprador. 💡 O modo automático ajuda o conversor de moeda a adaptar-se naturalmente em diferentes dispositivos e ambientes de navegação. --- ### **🔤 Mostrar apenas os códigos monetários** Controla como os nomes das moedas aparecem. #### **Activado** Exibe códigos de moeda curta. Exemplos: * USD * EUR * GBP #### **Desactivado** Mostra os nomes e códigos completos da moeda. Exemplos: * Dólar dos EUA (USD) * Euro (euros) * Libra britânica (GBP) Isso pode ajudar a tornar o dropdown mais compacto ao suportar muitas moedas. --- ## **🎨 Personalização do Tema** Esta seção controla o estilo do núcleo do conversor de moeda. --- ### **📦 Estilo da Borda** Controla como a borda do widget é exibida. #### **Caixa Sombra** Adiciona uma sombra sutil em torno do conversor de moeda. #### **Linha Borda** Adiciona um contorno visível em torno do elemento. #### **Sem Fronteira** Remove completamente fronteiras e sombras. Cada opção cria uma ênfase visual diferente dependendo do seu estilo storefront. --- ### **🔤 Família de fontes** Controla a fonte usada em todo o Conversor de Moedas. #### **Usar fonte de tema** Corresponde à sua Shopify tipografia de tema automaticamente. #### **Fontes do Google** Escolha entre uma variedade de fontes suportadas. Os exemplos incluem: * Roboto * Abrir Sans * Montserrat * Poppins 💡 Usando sua fonte de tema normalmente cria a experiência storefront mais perfeita. --- ### **🎨 Cor de Fundo** Controla a cor de fundo do conversor de moeda. Você pode: * Usar o seletor de cores * Digite um valor de cor Hex Escolha uma cor que complemente sua storefront enquanto permanece fácil de identificar. --- ### **🖊️ Cor do Texto** Controla a cor do texto em todo o conversor de moeda. Tal inclui: * Moeda seleccionada * Opções suspensas * Etiquetas Para melhor legibilidade, assegure contraste suficiente entre o texto e as cores de fundo. --- ### **🖱️ Cor do Mouseover** Controla a cor mostrada quando os clientes pairam sobre as opções de moeda. Isso ajuda os clientes a identificar claramente qual opção eles estão prestes a selecionar. Um contraste sutil da cor de fundo geralmente funciona melhor. --- ### **🔽 Cor do Ícone Descartado** Controla a cor do ícone do indicador suspenso. Combinando esta cor com sua cor de texto muitas vezes cria a aparência mais consistente. --- ## **⚠️ Notas Importantes** ### **Tema escuro Sobrepõe Algumas Cores** Ao utilizar: * Tema Escuro * Automático Tema (enquanto um comprador usa o modo escuro) O conversor de moeda pode usar cores de modo escuro otimizado em vez de seu fundo selecionado e cores de texto. Para personalização avançada de modo escuro, use CSS personalizado. --- ### **Tema de Camada Usa Cor de Fundo** O tema Camada Moderna gera automaticamente seu efeito em camadas usando a cor de fundo selecionada. Mudar a cor de fundo também muda a aparência da camada. --- ### **Modo de exibição Aplica-se em todo lugar** Visualização As configurações do modo afetam: * A apresentação da moeda seleccionada * Opções da moeda suspensa Ambos os locais permanecem sempre sincronizados. --- ### **Alterações de Fonte Aplicam-se Globalmente** A fonte selecionada afeta todo o texto do Conversor de Moedas, incluindo: * Moeda seleccionada * Opções suspensas * Resultados da pesquisa (quando aplicável) --- ### **Precisa de mais personalização?** Para o estilo avançado além da guia Design, use: **Avançado → Custom CSS** Isso permite que os desenvolvedores para aplicar estilos totalmente personalizados para o conversor de moeda. --- # **🚀 Resultado Final** Uma vez configurado com sucesso: ✅ O conversor de moeda combina com sua marca storefront ✅ Bandeiras exibem em seu estilo e forma preferidos ✅ Cores e tipografia parecem consistentes com seu tema ✅ A seleção de moeda permanece clara e fácil de usar ✅ Clientes internacionais desfrutam de uma experiência mais polida ✅ O conversor de moeda se sente como uma parte natural de sua loja Um Conversor de Moedas bem desenhado não só parece melhor – ele também ajuda a criar uma experiência de compras mais suave e confiável para os clientes em todo o mundo. 🌍 ---