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

Actualizado em: 10/09/2026