Olá, futuros empreendedores e desenvolvedores Shopify! Sejam muito bem-vindos à nossa Aula 7! 🚀

Depois de entendermos os fundamentos do Shopify, navegarmos pelo painel administrativo e começarmos a personalizar nosso tema, é hora de pensar grande – ou melhor, pensar global! 🌍

Hoje, vamos mergulhar em um aspecto crucial para qualquer loja virtual que busca expandir seu alcance ou atender a um público específico: as configurações de moeda, idioma e localização. Parece complexo, mas vou te guiar passo a passo para que sua loja esteja pronta para atender clientes de qualquer lugar do mundo, com a experiência mais nativa possível.

Prepare seu ambiente Shopify e vamos nessa! 💪

—

Aula 7 – Loja Shopify do Zero ao Avançado: Configurações de moeda, idioma e localização completa

📚 O que você vai aprender nesta aula

Nesta aula, você dominará as ferramentas e conceitos para tornar sua loja Shopify verdadeiramente global ou perfeitamente adaptada ao seu mercado local. Ao final, você será capaz de:

• Compreender a importância da localização para a experiência do cliente e conversão.
• Configurar a moeda principal da sua loja e entender como ela afeta as transações.
• Ativar e gerenciar múltiplas moedas para permitir que seus clientes comprem na sua moeda local.
• Adicionar e gerenciar idiomas para oferecer sua loja em diferentes línguas.
• Utilizar o editor de idiomas do Shopify para traduzir textos do tema e do checkout.
• Entender como as configurações de localização (endereço e impostos) impactam sua operação.
• Aplicar filtros Liquid para formatação de moeda e tradução de textos no seu tema.
• Identificar as melhores práticas para uma estratégia de localização eficaz.

🔗 Conectando com aulas anteriores

Nas aulas anteriores, começamos a montar a estrutura da nossa loja. Vimos como configurar o painel administrativo, entender o funcionamento de um tema e até mesmo como realizar algumas personalizações básicas em HTML, CSS e JavaScript. Agora que sua loja já tem uma “cara” e uma “estrutura”, é fundamental pensar em quem vai interagir com ela e como podemos tornar essa interação a mais fluida e agradável possível.

Imagine que você criou um site lindo, com produtos incríveis, mas um cliente de Portugal vê os preços em Dólar Americano e não entende nada da moeda, ou um cliente do Japão tem que ler tudo em Português. As chances de conversão caem drasticamente! 📉

A localização (moeda, idioma, fuso horário, formato de endereço, etc.) não é apenas um “detalhe técnico”; é uma estratégia de confiança, conveniência e conquista de mercado. Uma loja localizada adequadamente fala a língua do seu cliente, tanto no sentido literal quanto no figurado, eliminando barreiras e construindo credibilidade.

Vamos transformar nossa loja de uma loja “brasileira” para uma loja “internacionalmente amigável”! ✨

📖 Conteúdo Principal

A localização no Shopify envolve diversas configurações no painel administrativo e, em alguns casos, adaptações no seu tema. Vamos explorar cada uma delas.

1. Entendendo a Importância da Localização no E-commerce

A localização vai além de traduzir textos. Ela engloba:

• Moeda Local: Exibir preços na moeda do cliente aumenta a transparência e reduz a confusão.
• Idioma Nativo: A navegação e o conteúdo na língua do cliente geram conforto e confiança.
• Formato de Endereço/Telefone: Adaptar campos de formulário para os padrões locais.
• Impostos e Regulamentações: Cumprir com as leis fiscais de diferentes regiões.
• Métodos de Pagamento: Oferecer opções de pagamento preferidas localmente.

Tudo isso contribui para uma melhor experiência do usuário (UX) e, consequentemente, para taxas de conversão mais altas.

2. Configurações de Moeda 💰

O Shopify permite que você defina uma moeda principal para sua loja e, se usar o Shopify Payments, ofereça múltiplas moedas.

a. Moeda Principal da Loja

Esta é a moeda na qual todos os seus relatórios e cálculos de backend são feitos. É a moeda base do seu negócio.

• Onde configurar: No seu painel administrativo, vá em Configurações > Detalhes da loja.
• Na seção “Padrões da loja”, você encontrará a opção “Moeda da loja”.

Importante: Mudar a moeda principal após* você ter começado a vender pode ter implicações fiscais e contábeis significativas. Escolha com sabedoria no início! Se você já vendeu, a Shopify recomenda entrar em contato com o suporte ou um especialista fiscal.

b. Ativar Múltiplas Moedas (Shopify Markets ou Shopify Payments)

Para que seus clientes vejam e paguem em sua própria moeda, você precisa ativar esta funcionalidade.

• Shopify Payments: Se você usa o Shopify Payments como gateway de pagamento, o recurso de multi-moeda é integrado e bastante fácil de configurar. Ele automaticamente converte e exibe os preços na moeda local do cliente (baseado na geolocalização IP).
• Shopify Markets: É a solução mais robusta do Shopify para vendas internacionais. Ele permite personalizar a experiência para diferentes países ou regiões, incluindo moedas, idiomas, domínios, impostos e frete.

Como funciona (com Shopify Payments/Markets):

Quando um cliente de outro país visita sua loja, o Shopify detecta sua localização e tenta exibir os preços na moeda correspondente. A conversão é feita automaticamente, e o cliente paga na moeda selecionada. Você continua recebendo pagamentos na sua moeda principal (BRL, por exemplo), e o Shopify Payments cuida da conversão da taxa de câmbio.

• Onde configurar:
• Para o Shopify Payments, vá em Configurações > Pagamentos. Na seção “Shopify Payments”, clique em “Gerenciar”. Lá você poderá adicionar as moedas que deseja aceitar.
• Para o Shopify Markets, vá em Configurações > Markets. Lá você pode configurar mercados específicos para países ou regiões.

c. Formatação de Moeda com Liquid

No desenvolvimento de temas, você frequentemente precisará exibir preços. O Shopify oferece filtros Liquid poderosos para formatar moedas.

• | money: Formata um valor numérico como moeda, usando o formato definido nas configurações da loja. Ex: {{ product.price | money }} pode exibir “R$123,45”.
• | money_without_currency: O mesmo que | money, mas sem o símbolo da moeda. Ex: {{ product.price | money_without_currency }} pode exibir “123,45”.
• | money_with_currency: O mesmo que | money, mas garante que o código da moeda (e não apenas o símbolo) seja incluído. Útil para clareza em lojas multi-moeda. Ex: {{ product.price | money_with_currency }} pode exibir “R$123,45 BRL”.

Existem outras variações para remover decimais, usar vírgulas, etc. Recomendo consultar a documentação Liquid para a lista completa.

3. Configurações de Idioma 🗣️

Oferecer sua loja em múltiplos idiomas é um passo gigante para a expansão.

a. Adicionar e Gerenciar Idiomas

• Onde configurar: No seu painel administrativo, vá em Configurações > Idiomas.
• Aqui você pode ver os idiomas publicados (visíveis para os clientes) e os idiomas não publicados.
• Clique em “Adicionar idiomas” e selecione os idiomas que deseja oferecer.
• Dica: Ao adicionar um idioma, o Shopify automaticamente faz uma tradução inicial (mas que pode ser genérica). A revisão e personalização são essenciais.

b. Traduzir Conteúdo (Editor de Idiomas)

O Shopify possui um editor de idiomas integrado que facilita a tradução de textos no seu tema, checkout e notificações.

• No mesmo local (Configurações > Idiomas), clique no idioma que deseja gerenciar e depois em “Traduzir”.
• O editor de idiomas mostra diferentes seções (Produtos, Coleções, Blog, Tema, Checkout e sistema, etc.).
• Você pode buscar por termos específicos e traduzi-los. Por exemplo, se seu botão “Adicionar ao carrinho” está em Português e você adicionou o Inglês, você pode ir na seção “Tema” ou “Produtos” e traduzir “Adicionar ao carrinho” para “Add to cart”.

c. Traduzir Conteúdo Dinâmico (Produtos, Páginas, Blogs)

Para o conteúdo que você cria (descrições de produtos, textos de páginas, artigos de blog), o editor de idiomas também permite traduzir.

• No editor de idiomas, selecione a seção “Produtos”, por exemplo, e depois escolha um produto. Você poderá traduzir o título, descrição, tags, etc., para cada idioma ativo.
• Alternativa: Para grandes volumes de conteúdo, apps de tradução (como o Translate & Adapt do Shopify, ou apps de terceiros como o Langify, GTranslate) podem automatizar ou agilizar o processo.

d. Tradução no Tema (Liquid)

Assim como a moeda, o Liquid tem uma forma de gerenciar textos traduzíveis. Isso é crucial para temas customizados.

• Filtro | t (translate): Este filtro é usado para pegar uma “chave de tradução” e substituí-la pelo texto correspondente no idioma ativo da loja.
• Exemplo: {{ 'products.product.add_to_cart' | t }}
• Quando a loja estiver em Português, o texto virá de locales/pt-BR.json. Se estiver em Inglês, virá de locales/en.json.
• **Arquivos de Tradução (locales/*.json):** Dentro da estrutura de um tema Shopify, a pasta locales contém arquivos .json para cada idioma. Estes arquivos contêm pares chave-valor para todos os textos traduzíveis do tema.
• pt-BR.json:

json

{
"products": {
"product": {
"add_to_cart": "Adicionar ao carrinho",
"price_label": "Preço:"
}
},
"general": {
"search": "Buscar"
}
}

• en.json:

json

{
"products": {
"product": {
"add_to_cart": "Add to cart",
"price_label": "Price:"
}
},
"general": {
"search": "Search"
}
}

Quando você usa o editor de idiomas do Shopify, ele edita esses* arquivos JSON por trás dos panos. É importante saber disso se você estiver desenvolvendo um tema do zero ou fazendo edições avançadas.

e. Seletores de Idioma e Moeda no Frontend

Seu tema precisa ter uma forma de o cliente selecionar o idioma ou a moeda. A maioria dos temas modernos já vem com seletores integrados.

• Esses seletores geralmente são snippets Liquid que usam os objetos globais localization ou cart.currency para renderizar as opções.
• Exemplo de um seletor de idioma simples (geralmente em header.liquid ou footer.liquid):

{% form 'localization', class: 'localization-form' %}

{{ 'general.language_selector.title' | t }}

{% for locale in localization.available_countries %}

{{ locale.name }}

{% endfor %}

{{ 'general.language_selector.submit' | t }}

{% endform %}

Obs: O exemplo acima é simplificado e usa available_countries que pode conter idiomas e moedas dependendo da configuração do tema e markets. Para idiomas é mais comum localization.available_languages.

4. Configurações de Localização Geral (Endereço, Impostos e Fuso Horário)

Embora o idioma e a moeda sejam os mais visíveis, outras configurações de localização são cruciais para a operação.

• Endereço da Loja:
• Onde configurar: Configurações > Detalhes da loja > Perfil da Loja.
• O endereço da sua loja é fundamental porque ele afeta o cálculo de impostos e as taxas de frete. Certifique-se de que ele esteja sempre atualizado.
• Fuso Horário:
• Onde configurar: No mesmo local, Configurações > Detalhes da loja > Perfil da Loja.
• O fuso horário impacta a exibição de datas e horas de pedidos, relatórios e agendamento de publicações. Escolha o fuso horário da sua operação principal.
• Configurações de Impostos:
• Onde configurar: Configurações > Impostos e deveres.
• Aqui você pode configurar como os impostos serão cobrados para diferentes regiões. O Shopify pode calcular impostos automaticamente para muitos países, mas você também pode configurar manualmente.
• Dica: A complexidade dos impostos varia muito por país. Para vendas internacionais, consulte um contador especializado.
• Zonas de Frete:
• Onde configurar: Configurações > Frete e entrega.
• Veremos isso em detalhes na próxima aula, mas saiba que as zonas de frete estão intrinsecamente ligadas à localização geográfica dos seus clientes e à sua capacidade de entrega.

Dicas de Boas Práticas e Otimização 💡

1. Priorize: Comece com os idiomas e moedas dos seus maiores mercados-alvo. Não tente traduzir para 10 idiomas de uma vez se não tiver recursos.

2. Qualidade da Tradução: Evite traduções literais. Use tradutores nativos ou ferramentas que considerem o contexto cultural e terminologia de e-commerce. O Google Translate é um bom ponto de partida, mas sempre revise.

3. Teste, Teste, Teste: Navegue pela sua loja usando diferentes idiomas e moedas. Verifique se os preços são exibidos corretamente, se os textos estão fluindo e se o checkout funciona sem problemas.

4. SEO Internacional (hreflang): Para lojas multi-idioma/multi-país, o Shopify Markets cuida automaticamente das tags hreflang. Elas são essenciais para indicar aos motores de busca qual versão da sua página é relevante para cada idioma/região, evitando problemas de conteúdo duplicado e direcionando o usuário certo para a página certa.

5. Apps de Tradução/Moeda: Para requisitos mais avançados (como diferentes preços por mercado, ou traduções muito específicas), considere explorar os apps da Shopify App Store.

💻 Exemplos Práticos

Vamos colocar a mão na massa!

Cenário 1: Alterando a Moeda Principal da Loja

1. Acesse seu painel administrativo Shopify.

2. Vá em Configurações (ícone de engrenagem no canto inferior esquerdo).

3. Clique em Detalhes da loja.

4. Role para baixo até a seção “Padrões da loja”.

5. No campo “Moeda da loja”, selecione a moeda desejada (por exemplo, de USD para BRL se sua loja estiver configurada como USD).

6. Clique em Salvar.

Captura de Tela (Conceitual):

[IMAGEM: Screenshot do Painel Shopify mostrando Configurações > Detalhes da loja, com o campo "Moeda da loja" em destaque para alteração.]

Descrição: A imagem acima mostra onde você pode definir a moeda principal da sua loja. Lembre-se, esta mudança afeta a moeda dos seus relatórios internos.

Cenário 2: Adicionando um Novo Idioma e Traduzindo um Termo

Vamos adicionar o idioma “Inglês” e traduzir o botão “Comprar agora”.

1. Acesse seu painel administrativo Shopify.

2. Vá em Configurações > Idiomas.

3. Clique em Adicionar idiomas.

4. Na janela pop-up, selecione “English” (ou outro idioma de sua escolha) e clique em Adicionar. O idioma será adicionado como “Não publicado”.

5. Para publicar o idioma e torná-lo visível na loja, clique nos três pontos ... ao lado do idioma e selecione Publicar.

6. Agora, para traduzir, clique no idioma recém-adicionado e depois em Traduzir.

7. Na barra de pesquisa, digite “Comprar agora”. O editor de idiomas irá filtrar os resultados.

8. Encontre a entrada correspondente ao botão de compra (geralmente na seção “Checkout e sistema” ou “Tema”).

9. No campo de tradução para o Inglês, digite “Buy now”.

10. Clique em Salvar.

Captura de Tela (Conceitual):

[IMAGEM: Screenshot do Painel Shopify mostrando Configurações > Idiomas, com o botão "Adicionar idiomas" em destaque.]
[IMAGEM: Screenshot do Editor de Idiomas do Shopify, mostrando a pesquisa por "Comprar agora" e o campo de tradução para "Buy now" preenchido.]

Descrição: As imagens ilustram o processo de adicionar um novo idioma à sua loja e como usar o editor de idiomas para traduzir um termo específico como “Comprar agora”.

Cenário 3: Manipulando Formatação de Moeda com Liquid no Tema

Vamos adicionar um snippet simples para mostrar diferentes formatos de preço.

1. No seu tema, vá em Loja Virtual > Temas > Ações > Editar código.

2. Procure por um arquivo como product-card.liquid (para um card de produto) ou product-template.liquid (para a página de produto). Se não encontrar, você pode adicionar este código temporariamente em sections/header.liquid ou footer.liquid para testar.

3. Adicione o seguinte código Liquid:

{% comment %}
Exemplo de formatação de moeda com Liquid
Vamos usar um preço de exemplo para demonstrar.
Em um ambiente real, você usaria {{ product.price }} ou {{ current_variant.price }}
{% endcomment %}

Exemplos de Formatação de Preços com Liquid:
{% assign sample_price = 12345 %} {# Representa R$123,45 ou $123.45 #}
{% assign another_sample_price = 9999 %} {# Representa R$99,99 ou $99.99 #}
Preço padrão da loja: {{ sample_price | money }}

Preço sem símbolo da moeda: {{ sample_price | money_without_currency }}

Preço com código da moeda: {{ sample_price | money_with_currency }}

Preço sem decimais: {{ sample_price | money_without_decimals }}

Preço com separador de vírgula (para centavos): {{ another_sample_price | money_with_comma_separator }}

Preço no formato HTML (para microdados): {{ another_sample_price | money_formatted }}

{% comment %}
Você pode verificar os formatos de moeda definidos em Configurações > Detalhes da loja
Na seção "Formatos de moeda".
{% endcomment %}

4. Salve o arquivo e visualize sua loja. Você verá como o Shopify aplica automaticamente os formatos definidos para a moeda principal da sua loja.

Cenário 4: Usando o Filtro | t para Tradução no Tema

Vamos simular a criação de um título que será traduzido automaticamente.

1. No seu tema, vá em Loja Virtual > Temas > Ações > Editar código.

2. Abra o arquivo locales/pt-BR.json (ou crie um se não existir, mas geralmente já existe).

3. Adicione a seguinte chave de tradução (ou insira em um local lógico existente, como sections.footer):

json

{
"sections": {
"homepage_hero": {
"title": "Bem-vindo à nossa loja!"
},
"footer": {
"copyright_text": "Todos os direitos reservados"
}
}
}

4. Crie ou abra o arquivo locales/en.json e adicione a mesma estrutura de chave com a tradução em inglês:

json

{
"sections": {
"homepage_hero": {
"title": "Welcome to our store!"
},
"footer": {
"copyright_text": "All rights reserved"
}
}
}

5. Agora, em um arquivo de seção ou snippet do seu tema (por exemplo, sections/header.liquid ou um novo snippet que você crie para o cabeçalho), adicione o seguinte Liquid:

{{ 'sections.homepage_hero.title' | t }}
 
📚 Informações da Aula
 
Nível: Intermediário
 
Tempo estimado: 15-20 minutos
 

{{ 'sections.footer.copyright_text' | t }}

6. Salve o arquivo.

7. Visualize sua loja. Se o idioma ativo for Português, você verá “Bem-vindo à nossa loja!”. Se você mudar o idioma da loja para Inglês (usando o seletor de idioma do seu tema ou publicando o inglês e acessando sua-loja.myshopify.com/en), o texto mudará para “Welcome to our store!”.

Este exemplo demonstra como o filtro | t busca a string correta com base no idioma ativo e nas chaves de tradução definidas nos arquivos .json.

🎯 Exercícios e Desafios

Hora de colocar o que aprendemos em prática!

1. Exercício 1: Configuração Multi-Moeda:

• Se sua loja estiver configurada com Shopify Payments, ative a moeda Dólar Americano (USD) e Euro (EUR) além do Real Brasileiro (BRL).
• Navegue pela sua loja e certifique-se de que o seletor de moedas (se seu tema tiver um) funciona e que os preços mudam corretamente ao alternar as moedas.

Dica:* Se você não tem Shopify Payments, pode simular isso com um app gratuito de teste ou apenas focar na moeda principal.

2. Exercício 2: Adição e Tradução de Idiomas:

• Adicione o idioma Espanhol à sua loja (se ainda não o fez).
• Usando o Editor de Idiomas do Shopify, localize e traduza os seguintes termos para o Espanhol:
• “Ver carrinho” (geralmente na seção “Carrinho”)
• “Finalizar compra” (na seção “Checkout e sistema”)
• “Informações de contato” (na seção “Checkout e sistema”)
• Publique o idioma Espanhol e verifique se as traduções aparecem corretamente na sua loja e no checkout ao mudar o idioma.

3. Desafio: Criando um Snippet de Preço Localizado (Avançado para a aula, mas um bom começo):

• Crie um novo snippet no seu tema chamado price-display.liquid.
• Dentro dele, adicione Liquid para exibir o product.price atual e o product.compare_at_price (se existir) usando o filtro money.

Adicione um parágrafo extra no snippet que, independentemente da moeda ativa na loja*, sempre tente exibir o preço em BRL e USD (se possível, usando as moedas configuradas no localization.available_countries ou localization.available_currencies ou hardcoded com format_money se você souber o formato).

• Inclua o snippet em uma página de produto para ver o resultado.

Dica:* Para exibir em uma moeda específica, você precisaria de um pouco mais de lógica ou um app, mas o desafio é mais para explorar os filtros Liquid e a ideia de múltiplas moedas. Uma abordagem mais simples para o desafio seria apenas usar os filtros money_with_currency e exibir ambos para a moeda atual.

{# price-display.liquid #}
{% comment %} Supondo que você passou um produto para este snippet {% endcomment %}
{% assign current_price = product.price %}
{% assign compare_price = product.compare_at_price %}

{% if compare_price > current_price %}
{{ compare_price | money }}
{{ current_price | money }}
{% else %}
{{ current_price | money }}
{% endif %}
{% comment %} Desafio: Tente exibir também o preço em USD, se o Shopify o fornecer {% endcomment %}
{% comment %} Isso pode exigir APIs ou apps para conversão exata,
mas podemos simular a exibição de como seria {% endcomment %}
Preço atual em {{ localization.currency.iso_code }}: {{ current_price | money_with_currency }}

{% comment %} Exemplo (simplificado e conceitual) de como um app poderia exibir outra moeda {% endcomment %}
{% if localization.currency.iso_code != 'USD' %}
Preço estimado em USD: $ {{ current_price | divided_by: 5.0 | money_without_currency_and_decimals }} USD (apenas estimativa)

{% endif %}

📝 Resumo da Aula

Ufa! Percorremos um caminho importante hoje. Vimos que a localização é muito mais do que apenas traduzir palavras. É sobre criar uma experiência de compra inclusiva e eficiente para clientes de diferentes partes do mundo.

• A moeda principal define a base financeira da sua loja, e com múltiplas moedas (via Shopify Payments ou Markets), você atrai clientes globais.
• Idiomas podem ser adicionados e gerenciados facilmente pelo painel, e o editor de idiomas é uma ferramenta poderosa para traduções.
• Conhecemos os filtros Liquid | money e | t que são essenciais para temas dinâmicos e multilíngues.
• As configurações de endereço, fuso horário e impostos são fundamentais para a conformidade legal e a operação logística.

Dominar esses aspectos coloca sua loja em outro patamar de profissionalismo e alcance! Parabéns por mais essa etapa. 🎉

🚀 Preparação para próxima aula

Com a nossa loja pronta para atender a clientes de diferentes lugares e falando seus idiomas e moedas, o próximo passo lógico é pensar em como esses produtos chegarão até eles.

Na Aula 8, vamos mergulhar nas Configurações de Frete e Entrega (Shipping and Delivery). Abordaremos:

• Criação de zonas de frete para diferentes regiões.
• Configuração de taxas de frete (gratuitas, fixas, baseadas no peso/preço).
• Integração com transportadoras (cotação de frete em tempo real).
• Opções de retirada na loja.
• Melhores práticas para uma estratégia de frete eficaz.

Entender o frete é tão crucial quanto ter um bom produto e uma loja bem localizada. Não perca!

📚 Recursos Adicionais

• Ajuda Shopify – Configurações de moeda: https://help.shopify.com/pt-BR/manual/payments/prices-currencies
• Ajuda Shopify – Idiomas e tradução: https://help.shopify.com/pt-BR/manual/markets/translate-store
• Documentação Liquid – Filtros de dinheiro: https://shopify.dev/docs/api/liquid/filters/money-filters
• Documentação Liquid – Filtro ‘t’ (translate): https://shopify.dev/docs/api/liquid/filters/t
• Shopify Markets: https://www.shopify.com/markets (para entender a solução completa de comércio internacional)

Até a próxima aula! Bons estudos e boas configurações! 👋