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

Actualizado em: 10/09/2026