ℹ️ 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 Posição Personalizada permite que você coloque o conversor de moeda exatamente onde você quer em sua loja.

Em vez de usar as posições flutuantes padrão ou cabeçalho, você pode anexar o Conversor de Moedas a um elemento específico dentro de seu Shopify tema usando um seletor CSS.

Isso lhe dá maior flexibilidade e ajuda o Conversor de Moedas a se misturar naturalmente no design da sua loja. 🎯

⚠️ Antes de começar

Antes de definir uma posição personalizada, certifique-se:

• Hoppy Currency Converter está instalado e configurado
• A incorporação da aplicação está habilitada
• A integração foi concluída
• Você sabe onde você gostaria que o conversor de moeda para aparecer

💡 Locais comuns incluem barras de navegação, cabeçalhos, barras laterais, menus utilitários e seções de armazenamento personalizadas.

✅ Passo 1: Abrir configurações de exibição

Abrir o Hoppy Currency Converter app a partir da sua Shopify Admin.

Depois:

→ Ir para Configuração

→ Clique Visualização

Localizar:

• Posição do Ecrã
• Posição móvel

Você pode configurar o posicionamento personalizado separadamente para dispositivos móveis e desktop.

✅ Passo 2: Selecione a posição personalizada

Embaixo Estilo de posição, você verá as opções de colocação disponíveis.

Estilos de posição disponíveis

Flutuante

Mostra o Conversor de Moedas como um widget flutuante na frente da loja.

Cabeçalho

Coloca o conversor de moeda dentro do cabeçalho da loja.

Posição Personalizada

Coloca o conversor de moeda dentro de um elemento específico selecionado por você.

Selecionar:

→ Posição Personalizada

Uma vez selecionada, as configurações adicionais ficam disponíveis automaticamente.

✅ Passo 3: Digite o elemento alvo

Dentro da Elemento Personalizado campo, digite o seletor CSS do elemento onde o conversor de moeda deve aparecer.

Tipos de Selector Suportados

Selector de Classe

Começa com um período (.)

Exemplo

.header-actions

Seletor de ID

Começa com um haxixe (#)

Exemplo

#currency-wrapper

Seletor de elementos

Usa o nome do elemento HTML diretamente.

Exemplo

header

🔍 Como encontrar um seletor

Se não tiver a certeza de qual selector usar:

1. Abre a tua loja.
2. Botão direito do mouse na área onde você quer o conversor de moeda.
3. Clique Inspecionar.
4. Localize o elemento HTML.
5. Botão direito do mouse no elemento.
6. Selecionar Copiar → Selector de Cópia.
7. Colar o seletor copiado no Elemento Personalizado Campo.

Exemplo

#block-template--166120#######__banner_bckcpm-video_CLEttT > div.media-with-text__content.rounded.text-custom > div > a

⚠️ Evite usar temporariamente Shopify- IDs gerados, como estes podem mudar após as atualizações do tema.

Usar nomes de classes estáveis é recomendado sempre que possível.

✅ Passo 4: Escolha posicionamento

Depois de inserir o seletor, escolha como o conversor de moeda deve ser inserido em relação a esse elemento.

Opções de colocação disponíveis

Antes

Coloca o conversor de moeda imediatamente antes do elemento selecionado.

Exemplo

Se o alvo for um ícone do carrinho:

→ O conversor de moeda aparece à esquerda do ícone do carrinho.

Após

Coloca o conversor de moeda imediatamente após o elemento selecionado.

Exemplo

Se se destinar a um logótipo:

→ O conversor de moeda aparece à direita do logotipo.

Adicionar

Coloca o conversor de moeda dentro do elemento selecionado, no final.

Exemplo

Se o alvo for um contentor de navegação:

→ O conversor de moeda aparece depois de todos os itens de navegação existentes.

💡 Esta é muitas vezes a melhor opção de partida para a maioria dos temas.

Prepend

Coloca o conversor de moeda dentro do elemento selecionado, no início.

Exemplo

Se o alvo for um contentor de navegação:

→ O conversor de moeda aparece antes de todos os itens de navegação existentes.

✅ Passo 5: Salve suas mudanças

Uma vez que o seletor e a opção de colocação tenham sido configurados:

→ Clique Gravar

O conversor de moeda agora tentará renderizar no local selecionado.

✅ Passo 6: Verifique o posicionamento

Visite sua loja e confirme que o Conversor de Moedas aparece no local desejado.

Se não aparecer:

• Verificar se o seletor está correto
• Confirmar a existência do elemento na página
• Tente uma opção de colocação diferente
• Atualizar a página

💡 Uma atualização dura é muitas vezes útil depois de fazer mudanças de colocação.

🛠️ Método alternativo: Colocação manual

Se usar um seletor CSS não é adequado para o seu tema, você pode colocar manualmente o conversor de moeda usando seu trecho de código.

Este método é útil quando:

• Você quer o controle completo sobre onde o conversor de moeda aparece.
• Seu tema não contém um elemento adequado para o alvo Posição Personalizada.
• Você está confortável fazendo pequenas personalizações temáticas.

Passo 1: Copie o Código de Conversor de Moeda Excerto

Abrir o Hoppy Currency Converter app a partir da sua Shopify Admin.

Depois:

→ Ir para Avançado

Localização:

→ Caixa de Conversor de Moeda Colocação

Copie o trecho de código fornecido do nosso aplicativo ou abaixo:

<div class="futureblink-currency-box"></div>

Este é o trecho que você vai colocar onde você quer que o conversor de moeda para aparecer.

Passo 2: Adicione o trecho ao seu tema

Opção A — Usar um Bloco Líquido Personalizado

Da Shopify Editor de temas:

→ Navegue para a seção onde você gostaria que o conversor de moeda para aparecer.

→ Clique no ➕ Adicionar bloco Botão.

→ Procurar e adicionar um Liquido Personalizado Bloquear.

→ Colar o Excerto de Código Conversor de Moeda no bloco líquido personalizado.

→ Clique Gravar.

Opção B — Editar os Ficheiros de Temas

Para personalização avançada storefront, você também pode adicionar o mesmo trecho de código diretamente ao seu Shopify ficheiros temáticos.

Ir para:

Loja online → Temas

→ Clique no □ menu ao lado Editar tema

→ Selecionar Editar código

Localize o apropriado .liquid arquivo para a seção onde você gostaria que o Conversor de Moedas para aparecer, em seguida, colar o Excerto Código Conversor de Moedas no local desejado.

⚠️ Importante:

Este método destina-se aos comerciantes de edição confortável Shopify Código do tema. Recomendamos duplicar o seu tema antes de fazer alterações, uma vez que modificações incorretas podem afetar seu layout ou funcionalidade storefront.

O Selector Deve Existir na Página

Se o elemento selecionado só existe em certas páginas, o Conversor de Moedas só aparecerá nessas páginas.

O uso de seletores globais de cabeçalho ou navegação geralmente fornece os melhores resultados.

Elementos ocultos Esconder o Conversor

Se o elemento selecionado é escondido pelo tema em certos dispositivos, o Conversor de Moedas também será escondido.

Sempre teste layouts de desktop e móveis.

Você pode mudar de volta a qualquer momento

Se a posição personalizada já não for necessária:

→ Voltar para Configuração da Visualização

→ Alterar Estilo de posição voltar para:

• Flutuante
• Cabeçalho

Não é necessária nenhuma configuração adicional.

🎉 Resultado Final

Uma vez configurado com sucesso:

✅ O conversor de moeda aparece exatamente onde você quer

✅ layouts de desktop e móveis podem usar diferentes posições

✅ O widget combina naturalmente em seu design storefront

✅ A colocação pode ser ajustada sem editar arquivos de tema

✅ Os comerciantes avançados podem colocar manualmente o conversor usando arquivos de Liquid personalizado ou Tema para controle completo

Usando a posição personalizada ajuda a criar uma experiência de loja mais perfeita e profissional, mantendo o conversor de moeda facilmente acessível aos compradores. 🎯

Actualizado em: 10/09/2026