> ## 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). # 🎨 Como definir CSS personalizado para Hoppy Currency Converter > ℹ️ **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. O recurso CSS personalizado permite que você personalize ainda mais a aparência do conversor de moeda além das configurações de design padrão. Se você deseja ajustar as cores, espaçamento, bordas, sombras, ou combinar o widget com uma frente de loja altamente personalizada, CSS personalizado dá-lhe flexibilidade de estilo adicional sem editar o seu Shopify ficheiros temáticos. Este guia caminha através de como com segurança adicionar e gerenciar CSS personalizado para o conversor de moeda. --- # **⚠️ Antes de começar** Antes de usar CSS personalizado, certifique-se: * Hoppy Currency Converter está instalado e ativo * A incorporação da aplicação está habilitada * O processo de integração foi concluído * Você tem uma idéia clara das mudanças de estilo que você gostaria de fazer ⚠️ CSS incorreto pode afetar a aparência do widget. Sempre teste as mudanças cuidadosamente antes de deixá-las ao vivo em sua loja. --- # **✅ Passo 1: Abra as configurações personalizadas do CSS** Abrir o **Hoppy Currency Converter** app a partir da sua Shopify Admin. Depois: → Clique **Avançado** → Rolar para o **Configuração do Especialista** secção → Localizar o **CSS Personalizado** campo É aqui que todas as regras de estilo personalizadas devem ser adicionadas. --- # **✅ Passo 2: Entenda as classes disponíveis de CSS** Para personalizar o Conversor de Moedas, você precisará direcionar as classes CSS apropriadas. Estas classes identificam diferentes partes do widget e permitem que você as estile individualmente. --- ## **🖥️ Conversor de Moeda do Ambiente de Trabalho** .futureblink montrency desktop ### **Utilização** * Cores de fundo * Fronteiras * Sombras * Padding * Margens Esta classe visa o conversor de moeda exibido em dispositivos desktop. --- ## **📱 Conversor de moeda móvel** .futureblink moeda móvel ### **Utilização** * Espaçamento móvel específico * Estilo móvel específico * Ajustes de disposição móvel Esta classe visa o conversor de moeda exibido em dispositivos móveis. --- ## **📋 Retirada de Moeda** .futureblink-moeda-gota ### **Utilização** * Estilo suspenso * Fronteiras * Raio da borda * Sombras * Cores de fundo Esta classe controla a lista de moedas disponíveis exibidas após clicar no conversor. --- ## **🔘 Comutador de moeda** Interruptor de moedas ### **Utilização** * Estilo de botões * Aparência da moeda selecionada * Fronteiras * Espaço Esta classe controla o cliente selecionador de moeda visível interage com. --- ## **📄 Opções de eliminação** .opção ### **Utilização** * Linhas monetárias individuais * Tamanho da fonte * Padding * Efeitos da temperatura Esta classe tem como alvo cada opção monetária dentro da lista. --- # **✅ Passo 3: Crie suas regras de CSS** CSS usa uma estrutura simples: Selector { propriedade: valor; } ### **Estrutura de Exemplo** * Selector → O que você quer estilo * Propriedade → O que você quer mudar * Valor → A nova aparência --- # **🎨 Exemplo: Mudar a Cor de Fundo** .futureblink morrency desktop { fundo- cor: #f8f9fa; } Isto muda a cor de fundo do conversor de moeda desktop. --- # **🔲 Exemplo: Adicionar contornos e sombras** .futureblink morrency desktop { borda: 1px solid #dd; Raio-fronteira: 8px; box-shadow: 0 2px 8px rgba(0,0,0.0,1); } Isso cria uma aparência de cartão mais limpa. --- # **📋 Exemplo: Style the Money Dropdown** .futureblink-moeda-queda { Raio-fronteira: 6px; box-shadow: 0 4px 12px rgba(0,0,0,15); } Isso adiciona cantos arredondados e uma sombra mais forte. --- # **📱 Exemplo: Ajuste o Espaço Móvel** .futureblink moeda móvel { enchimento: 12px 16px; margem superior: 8px; } Isso aumenta o espaçamento em torno do widget móvel. --- # **⚠️ Se os Estilos Não Se Aplicam** Às vezes, o estilo de widget padrão pode substituir o seu CSS personalizado. Se isso acontecer, adicione: \- É importante. à declaração CSS. ### **Exemplo** .futureblink morrency desktop { fundo- cor: branco!importante; Raio de fronteira: 10px!importante; } 💡 Utilização `!important` é recomendado sempre que um estilo personalizado não está sendo aplicado com sucesso. --- # **✅ Passo 4: Salve suas mudanças** Depois de adicionar seu CSS: → Clique **Gravar** As mudanças de estilo são aplicadas imediatamente ao widget Conversor de Moedas. --- # **✅ Passo 5: Teste o Widget** Visite sua loja e verifique as alterações. Certifique-se de testar: * Dispositivos de ecrã * Dispositivos móveis * Comportamento de entrega de moeda * Páginas da frente de lojas diferentes Isso ajuda a garantir que o estilo funcione consistentemente em toda a sua loja. --- # **🔍 Precisa de Mais Aulas de CSS?** Se você gostaria de personalizar partes adicionais do conversor de moeda: 1. Abra a sua loja 2. Botão direito do mouse o conversor de moeda 3. Clique **Inspecionar** 4. Rever a estrutura HTML 5. Localizar nomes de classe adicionais Estas classes podem então ser usadas dentro do campo CSS Personalizado. --- # **⚠️ Notas Importantes** ### **Mudanças Vivam Imediatamente** Não existe modo de rascunho para CSS Personalizado. Qualquer mudança torna-se visível na frente da loja assim que você salvá-los. --- ### **CSS Personalizado Sobrepõe as Configurações de Design** Se existir uma regra de estilo em ambos: * Configuração do Desenho * CSS Personalizado A versão CSS personalizada terá prioridade. --- ### **Desktop & Mobile pode exigir Styling separado** Alterações feitas nas classes de desktop não afetam automaticamente as classes móveis. Para os melhores resultados, reveja ambas as versões separadamente. --- ### **Atualizações de tema podem afetar CSS personalizado** Maior Shopify as atualizações do tema podem alterar a estrutura do storefront. Se isso acontecer, algumas regras CSS podem precisar ser ajustadas. --- # **🎉 Resultado Final** Uma vez configurado com sucesso: ✅ O conversor de moeda combina com sua marca storefront ✅ Cores, espaçamento e bordas podem ser personalizadas ✅ Os layouts desktop e móvel podem ser decorados de forma independente ✅ Personalizações visuais avançadas tornam-se possíveis ✅ Styling pode ser ajustado sem edição Shopify arquivos de tema Usando CSS personalizado dá-lhe um controle adicional sobre a aparência do Conversor de Moeda e ajuda a criar uma experiência de loja mais perfeita. 🎨 ---