Calculadora de tamanhos de calçado no Shopify, com metacampos e a ajuda da IA

Uma calculadora de tamanhos de calçado no Shopify não precisa de uma app paga. Monta-se como uma secção do tema, numa página própria: o cliente escreve o comprimento do pé em milímetros, a secção compara esse valor com o comprimento interior de cada tamanho de cada modelo e mostra os tamanhos que servem, com ligação direta para comprar. O código pode ser gerado com a ajuda de uma IA como o Claude ou o ChatGPT. O que decide se a calculadora acerta são os dados que lhe dás.

Este guia segue a ordem certa: primeiro as medidas, depois onde guardá-las, depois o código, e por fim os testes.

Porque é que a tabela do fabricante não chega

As tabelas genéricas de tamanhos dizem que um 24 corresponde a um certo comprimento de pé. Mas dois modelos com o mesmo número podem ter interiores diferentes, porque cada forma de sapato é diferente. Uma calculadora que usa a tabela do fabricante repete esse erro em todos os modelos.

O dado que interessa é o comprimento interior de cada tamanho de cada modelo, medido por ti na palmilha, do calcanhar à ponta, em milímetros. A calculadora faz uma conta simples:

margem = comprimento interior do sapato − comprimento do pé

Se a margem cai dentro do intervalo que definiste para esse tipo de calçado, o tamanho é recomendado. Se fica perto, aparece como opção com margem não ideal. Se fica longe, não aparece.

Passo 1: medir cada tamanho e definir as margens

Antes de abrir qualquer ferramenta de IA, prepara uma folha de cálculo com uma linha por tamanho:

Os valores da tabela são um exemplo fictício. A largura é opcional, mas ajuda se quiseres comparar modelos mais estreitos e mais largos.

Depois decide a margem ideal por tipo de calçado. Um ponto de partida usado numa calculadora de calçado infantil em funcionamento, a ajustar à tua realidade:

Estes intervalos são uma regra comercial tua, não uma norma. Se vendes calçado técnico ou para adulto, revê-os com quem conhece os teus modelos.

Aproveita esta fase para uniformizar o nome da opção de tamanho em todos os produtos. Se uns usam “Tamanho”, outros “Size” e outros “Número”, a calculadora e os filtros da coleção ficam mais difíceis de montar.

Passo 2: escolher onde guardar os dados

Há duas formas de guardar as medidas no admin, e a escolha depende do catálogo.

Metacampos de variante, se o catálogo é teu e tem até algumas dezenas de modelos. Cada variante (cada tamanho) recebe o seu comprimento interior. A vantagem é que o stock, o preço e a ligação vêm dos produtos reais, sem uma base de dados paralela para manter. O custo é preencher cada variante.

Metaobjetos, se tens muitas marcas e cada forma de sapato existe em várias cores, cada uma um produto separado. Crias uma entrada por modelo com a tabela de tamanhos e ligas-lhe a coleção. Os dados ficam editáveis no admin, mas vivem ao lado dos produtos e tens de os manter sincronizados.

Para a opção de metacampos, cria as definições em Definições > Metacampos e metaobjetos (em versões anteriores do painel, Dados personalizados), segundo a documentação do Shopify sobre definições de metacampos:

• Em Variantes: comprimento interior, chave custom.comprimento_interior_mm, tipo número inteiro. Opcionalmente, largura interior, custom.largura_interior_mm.
• Em Produtos: tipo de calçado, custom.tipo_calcado, texto de linha única com os valores fechado ou sandalia. Opcionalmente, filtros da calculadora, custom.filtros_calculadora, lista de texto.

Se os valores preenchidos não aparecem depois no tema, uma das primeiras coisas a verificar é se o namespace e a chave usados no código batem certo com a definição; vê porque é que os metacampos não aparecem no produto.

Passo 3: pedir o código à IA, um passo de cada vez

Com os dados no admin, a IA escreve a secção. Funciona melhor com pedidos sequenciais, validando cada resultado antes de passar ao seguinte. Se a IA estiver ligada à loja, pode confirmar os metacampos que já existem; vê como ligar a IA à loja e que permissões dar.

Pedido 1, contexto e plano. Explica o objetivo e os campos, e pede um plano sem alterar nada:

Tenho uma loja Shopify de calçado e quero uma calculadora de tamanho
numa página dedicada. O cliente mede o comprimento do pé e a calculadora
recomenda o tamanho em cada produto, comparando com o comprimento
interior real de cada tamanho.

Dados:
- Metacampo de variante custom.comprimento_interior_mm (inteiro, mm)
- Metacampo de variante custom.largura_interior_mm (inteiro, mm, opcional)
- Metacampo de produto custom.tipo_calcado ("fechado" ou "sandalia")

Antes de escrever código, confirma que os metacampos existem e
apresenta um plano de ficheiros. Não alteres nada ainda.

Pedido 2, a secção. Pede uma secção sections/calculadora-tamanho.liquid e um modelo de página que a use, com estes requisitos: uma definição para escolher a coleção de origem; um campo numérico que aceite mm ou cm e vírgula decimal, com validação entre 70 e 290 mm; o cálculo da margem com as tuas regras por tipo; os resultados agrupados em “Recomendados” e “Outras opções”, com imagem, nome, tamanho, margem e botão; o botão a abrir o produto com o tamanho já selecionado; e “Sem stock neste tamanho” quando a variante está esgotada. Pede também CSS e JavaScript com classes próprias da secção, sem bibliotecas externas, e desenho pensado primeiro para o telemóvel.

Pedido 3, extras. Filtros por tipo de calçado, um link partilhável que guarde a medida no endereço (por exemplo ?medida=125) e calcule ao abrir, e uma etiqueta de desconto quando o preço de comparação for maior do que o preço.

Pedido 4, conteúdo. Uma secção de perguntas frequentes (como medir o pé, quanta margem deixar, porque os tamanhos variam entre marcas, se vale a pena comprar maior) e instruções de medição com imagem.

O que o código lê: um ponto de partida

Para perceberes o que a IA vai gerar, este é o núcleo em Liquid, a linguagem dos temas Shopify: percorre os produtos da coleção escolhida e, para cada tamanho com medida interior preenchida, deixa na página os dados de que o JavaScript precisa para calcular. É um ponto de partida para testar num tema duplicado, não uma secção pronta: falta o formulário, o cálculo e o desenho.

{%- assign colecao = section.settings.colecao -%}
<ul class="calc-dados" hidden>
  {%- for produto in colecao.products -%}
    {%- assign tipo = produto.metafields.custom.tipo_calcado.value | default: 'fechado' -%}
    {%- for variante in produto.variants -%}
      {%- assign interior = variante.metafields.custom.comprimento_interior_mm.value -%}
      {%- if interior -%}
        <li
          data-produto="{{ produto.title | escape }}"
          data-tamanho="{{ variante.title | escape }}"
          data-interior="{{ interior }}"
          data-tipo="{{ tipo | escape }}"
          data-disponivel="{{ variante.available }}"
          data-url="{{ variante.url }}"
        ></li>
      {%- endif -%}
    {%- endfor -%}
  {%- endfor -%}
</ul>

{% schema %}
{
  "name": "Calculadora de tamanhos",
  "settings": [
    { "type": "collection", "id": "colecao", "label": "Coleção com os modelos" }
  ],
  "presets": [{ "name": "Calculadora de tamanhos" }]
}
{% endschema %}

Três notas sobre este código. As variantes sem medida preenchida são ignoradas, por isso um produto incompleto não parte a página. O endereço de cada variante já inclui o parâmetro ?variant=, segundo a referência do objeto variant, o que leva o cliente ao tamanho certo. E, sem paginação, um ciclo sobre collection.products carrega no máximo 50 produtos, como explica a documentação de desempenho dos temas: se a coleção tiver mais, pede à IA que use a etiqueta paginate (até 250 por página) ou divide os modelos por coleções.

Com metacampos por variante, a secção já tem os produtos e o stock no momento em que a página é gerada, e não precisa de pedir dados à loja a cada cálculo. Com metaobjetos, pede à IA que os leia diretamente em Liquid e os coloque na página da mesma forma.

Ligação ao produto ou à coleção

Se cada modelo é um único produto com os tamanhos como variantes, liga ao produto com o tamanho selecionado. Se um modelo existe em várias cores, cada uma um produto separado, podes ligar à coleção desse modelo com o filtro de tamanho aplicado. Nesse caso, confirma que o filtro de tamanho está ativo na app Search & Discovery e que o nome da opção é igual em todos os produtos.

Testar num tema duplicado antes de publicar

Trabalha sempre numa cópia do tema, nunca no tema publicado. Se ainda não o fizeste, vê como duplicar e editar um tema com segurança. Depois percorre esta lista:

• A medida em mm (125) e em cm (12,5) dá o mesmo resultado.
• Valores fora do intervalo (50, 300) ou texto mostram um erro claro.
• Um pé exatamente no limite da margem (interior menos pé igual a 8 e igual a 11) aparece como recomendado.
• Um pé acima de 230 mm usa as margens de adulto, se as definiste.
• As sandálias usam a margem de sandália.
• Uma variante esgotada mostra “Sem stock” e não aparece como compra direta.
• O botão abre o produto com o tamanho certo selecionado.
• O link com ?medida= calcula automaticamente.
• Funciona em iPhone e em Android.
• Um produto sem metacampo preenchido não parte a página.

Se a IA tiver permissão para alterar o tema, revê antes a lista de segurança para deixar a IA mexer na loja.

Erros que estragam os resultados

• Usar a tabela do fabricante em vez de medir. O código pode estar perfeito e a recomendação errada.
• Somar a margem à medida do pé. A calculadora já trata da margem; diz nas perguntas frequentes que o cliente deve escrever a medida real do pé.
• Nomes de opção diferentes entre produtos. Uniformiza antes de montar filtros ou ligações.
• Código espalhado por blocos de Liquid personalizado. Uma secção própria é mais fácil de manter e de voltar a aplicar se atualizares o tema.

A página também pode trazer visitas

Uma calculadora útil é uma página que as pessoas procuram e partilham. Pede à IA um bom título, uma frase curta a seguir ao título e um texto mais longo para colocar junto das perguntas frequentes, sem empurrar a calculadora para baixo no telemóvel: quem chega quer medir primeiro. Não esperes efeitos especiais da marcação de perguntas frequentes em JSON-LD: a Google deixou de mostrar os resultados enriquecidos de FAQ na pesquisa em maio de 2026, segundo o registo de alterações da Google Search Central. As perguntas continuam a valer pelo que respondem ao cliente.

Este guia foi preparado a partir dos conteúdos da Academia Shopifyers.