Documentação do App Shopify
Tudo o que você precisa para configurar e personalizar a conversão de moedas na sua loja Shopify
Índice
1 Instalação
Instalar pela Shopify App Store
- Acesse a página do app Currency.Wiki na Shopify App Store
- Clique em 'Adicionar app' e autorize a instalação
- O app será aberto e irá guiá-lo pelo assistente de configuração
- Conclua o assistente para começar a converter preços
Dica: O assistente de configuração leva cerca de 2 minutos e orienta cada etapa.
2 Assistente de Configuração
O assistente de configuração ajuda a configurar o app corretamente. Ele orienta sobre como atualizar o formato de moeda e ativar a incorporação do app.
Passo 1: Boas-vindas
Revise o que envolve o processo de configuração e clique em 'Vamos Começar'.
Passo 2: Atualizar Formato de Moeda
Acesse Shopify Admin → Configurações → Geral → Padrões da loja. Encontre sua moeda e clique no menu de três pontos → 'Alterar formatação de moeda'. Atualize os campos HTML com nossa classe wrapper:
HTML com moeda:
<span class="cwiki">${{amount}} USD</span>
HTML sem moeda:
<span class="cwiki">${{amount}}</span>
Importante: A classe wrapper cwiki é essencial. Ela indica ao app quais elementos da página são preços, para converter apenas valores reais e não telefones ou IDs de pedidos.
Passo 3: Ativar Incorporação do App
Ative o app na seção de incorporações do seu tema:
- Acesse Loja Virtual → Temas → Personalizar
- Procure por 'App embeds' na barra lateral esquerda
- Encontre 'Currency.Wiki App' e ative
- Clique em Salvar no editor de temas
Passo 4: Verificar Configuração
Clique em 'Escanear Minha Loja' para verificar se a configuração está completa. O assistente checará a classe wrapper cwiki e a incorporação do app. Se tudo estiver certo, você está pronto!
3 Estilos do Widget
Escolha entre 6 estilos de widget para combinar com o design da sua loja. Cada estilo pode ser personalizado com as cores da sua marca.
Menu Suspenso Minimalista
Integração compacta no cabeçalho com uma lista simples. Melhor para o topo direito do cabeçalho.
Botão Flutuante
Botão flutuante amigável para mobile com painel expansível. Ótimo para lojas mobile-first. Posicionamento nos cantos.
Painel Lateral
Painel deslizante de altura total com busca. Ideal para lojas com muitas moedas.
Popup Modal
Sobreposição centralizada com layout em grade. Torna a seleção de moeda uma experiência focada.
Abas Inline
Abas horizontais para moedas populares. Troca rápida sem abrir menus.
Selo de Canto
Ícone minimalista no canto que expande ao clicar. Menos intrusivo para designs limpos.
Dica: Use a página de Configurações do Widget no admin do app para visualizar todos os estilos com as cores da sua loja.
4 Painel Administrativo
O painel administrativo oferece controle total sobre como a conversão de moedas funciona na sua loja.
Início do Painel
Ative/desative o widget, veja estatísticas de conversão e visualize seu widget ao vivo.
Configurações do Widget
Escolha o estilo, posição, cores, tamanho, bordas e opções de bandeiras do widget.
Gerenciamento de Moedas
Ative/desative moedas, reordene a lista, configure detecção automática e preferências de taxas.
Análises
Veja gráficos de conversão, moedas mais usadas e entenda a distribuição internacional dos clientes.
Tema & Aparência
Escolha o modo de tema (auto, claro, escuro, personalizado), defina cores, ative efeitos glassmorphism e configure o comportamento do modo escuro.
Mensagem no Checkout
Ative uma mensagem nas páginas de carrinho/checkout para informar sobre a moeda do pagamento.
5 Configurações Avançadas
As configurações avançadas dão mais controle aos usuários Pro sobre formatação de preços e comportamento da conversão.
Formatação de Preços (Pro)
- Casas Decimais - Controle quantas casas decimais exibir (0-6).
- Formato de Número - Escolha o estilo de formatação (Auto, US, EU, Indiano, Espaço•Ponto, Espaço•Vírgula).
- Posição do Símbolo - Coloque o símbolo da moeda antes ou depois do valor, ou automático por moeda.
- Arredondamento - Padrão, sempre para cima, sempre para baixo ou sem arredondamento. Opção para arredondar para .99.
Integração com Tema (Pro)
Incorpore manualmente o widget ou aviso do carrinho em qualquer lugar do seu tema usando estes trechos de HTML:
Incorporação do widget (adicione em header.liquid ou qualquer seção):
<div class="cwiki-widget"></div>
Incorporação do aviso no carrinho (adicione em cart.liquid):
<div class="cwiki-banner"></div>
Opções para Desenvolvedores (Pro)
- Sobrescrever Estilos - Insira CSS personalizado para ajustar o estilo do widget.
- Listeners de Clique - Reconverta preços ao clicar em elementos específicos (ex: seletores de tamanho, opções de produto).
- Elementos de Preço Extras - Alvo para elementos de preço além do padrão .cwiki.
- Padrões de URL - Reescaneie preços quando a URL contiver determinados termos (para conteúdo AJAX, rolagem infinita).
- Atraso de Conversão - Aguarde antes de converter preços (para conteúdo que carrega após a página pronta).
Atenção: Essas opções são para usuários avançados. Teste em um tema de pré-visualização antes de publicar.
6 Solução de Problemas
Preços não estão sendo convertidos?
Certifique-se de que a classe wrapper cwiki está nas configurações de formato de moeda. Vá em Configurações → Geral → Padrões da loja e verifique o HTML. Também confirme se a incorporação do app está ativada no personalizador de tema.
Widget não aparece?
Verifique se a incorporação do app está ativada em App Embeds do seu tema. Abra o personalizador, encontre App Embeds e ative o Currency.Wiki. Salve e atualize sua loja.
Preços piscando ao carregar?
Nosso app foi projetado para carregamento sem piscar. Se ocorrer, verifique se há plugins de cache interferindo. Certifique-se de que a incorporação do app está no head do tema.
Moeda errada sendo detectada?
A detecção é baseada no IP do visitante. VPNs ou redes corporativas podem afetar. Visitantes sempre podem selecionar manualmente a moeda. Você pode definir uma moeda padrão nas configurações.
Widget não combina com meu tema?
Use as configurações de Tema & Aparência para personalizar cores, ou ative o modo Auto para detectar automaticamente as cores do tema. Também é possível usar CSS personalizado em Configurações Avançadas.
Precisa de Ajuda?
Nossa equipe de suporte está pronta para ajudar com dúvidas sobre configuração.
