Widget de mapa para Shopify

Por que uma seção de tema é melhor que um app da Shopify

A maioria dos anúncios de “app de mapa” exige uma instalação, permissões para os dados da sua loja e uma taxa mensal — por algo que, no fim, é um único iframe. Esta é a alternativa honesta: um único arquivo Liquid que fica no seu próprio tema. Ele não pede permissões da loja, não adiciona scripts às suas páginas, não envia nada para ninguém e não custa nada. As únicas requisições externas que seus visitantes fazem são o iframe do mapa em sandbox de whatismylocation.ai e suas imagens de mapa do OpenStreetMap — sem cookies do Google, sem a bagagem dos banners de consentimento. E se o serviço ficasse indisponível, o iframe falha em silêncio, sem quebrar sua página. Apague o arquivo da seção e todo vestígio desaparece.

Baixe whatismylocation-shopify-sections.zip — as duas seções mais um README, alguns kilobytes. Depois siga os passos de instalação abaixo.

Instalação em cerca de dois minutos

São duas metades: cole o arquivo uma vez e depois use-o como qualquer seção nativa.

Cole o arquivo: painel da Shopify ▸ Loja virtual ▸ Temas ▸ ⋯ ▸ Editar código. Na barra lateral esquerda, em Seções, clique em Adicionar uma nova seção, dê a ela o nome whatismylocation-map, apague o conteúdo de exemplo e cole todo o conteúdo de whatismylocation-map.liquid — o bloco {% schema %} no final é o que monta o seu painel de configurações, então ele precisa vir junto. Salve.

Use a seção: abra o editor de temas (Personalizar), vá até a sua página de contato (ou qualquer página), clique em Adicionar seção e escolha WhatIsMyLocation Map. O painel de configurações aparece à esquerda. Até você inserir as coordenadas, a seção mostra um aviso amigável dizendo exatamente o que falta.

Pegue as coordenadas no gerador de mapa para incorporar — digite seu endereço e depois arraste o pino até a sua entrada antes de copiar. A seção guarda as suas coordenadas finais, então o pino nunca sai do lugar depois.

As filiais são blocos

Lojas com várias unidades ganham a melhor parte: no editor de temas, cada filial é um bloco — clique em Adicionar filial, preencha latitude, longitude, um rótulo e um endereço, e reordene arrastando (até 10). O mapa se ajusta automaticamente a todas as filiais, os pinos são numerados de acordo com a lista e os visitantes recebem o painel de locais — um acordeão ao lado do mapa no computador e uma faixa de cartões deslizáveis no celular, com rotas para cada filial e ícones opcionais “Abrir no Google Maps / Apple Maps”. O layout do painel (auto, lateral, inferior, nenhum) e a animação de troca (suave, esmaecimento, animada, nenhuma — quem usa redução de movimento sempre recebe a versão instantânea) são listas suspensas no mesmo painel.

Cada configuração, explicada

O mesmo zip inclui whatismylocation-widget.liquid — o widget de encontrar minha localização como uma segunda seção (tema, modo compacto/completo, altura), para páginas de entrega e localizadores de lojas.

Solução de problemas

A seção não aparece em Adicionar seção. O arquivo precisa estar em Seções (não em Snippets nem Assets) e a colagem precisa incluir o arquivo inteiro — se o bloco {% schema %} ficou de fora, a Shopify rejeita ou esconde a seção. Cole o arquivo completo de novo e salve.

Erro “Invalid schema” ao salvar. Uma colagem incompleta — na maioria das vezes falta uma chave de fechamento, porque a seleção parou uma linha antes do fim. Cole o arquivo completo outra vez; não edite o schema à mão se você não conhece Liquid.

O mapa está cinza. As imagens do mapa vêm de tile.openstreetmap.org; um bloqueador de anúncios agressivo ou uma rede corporativa pode bloqueá-las. Teste no celular usando dados móveis — seus clientes quase com certeza veem tudo normal.

O pino não está na minha porta. Gere as coordenadas de novo no gerador, arraste o pino até a sua entrada e cole os novos valores nas configurações da seção.

As alterações não aparecem na loja publicada. Você editou um tema rascunho ou não publicado — faça a alteração no tema publicado (ou publique o que você editou). O próprio widget não tem nada em cache.