> ## 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 uma posição personalizada para o conversor de moeda > ℹ️ **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: `
` 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. 🎯