Página de produto na Shopify: o que o design precisa mostrar

O resumo direto

Página de produto na Shopify é a tela da loja onde o cliente decide se compra: ela precisa mostrar o produto de verdade, deixar escolher a variação sem erro, dizer quanto vai custar no total e tirar o medo de comprar de quem ele não conhece. Quase tudo isso já existe no tema. O que eu mais vejo faltar, quando desenho essa página, é ordem e prioridade. A pesquisa da Baymard mostra que mais da metade das pessoas começa pelas fotos, e que custo extra inesperado é o motivo mais citado de abandono de carrinho. Então o design começa pela galeria e termina no bloco de compra, com frete, troca e prazo à vista. Abaixo, o que cada parte da página precisa ter, por quê, e como montar no tema sem depender de app para tudo.

1. A ordem em que o cliente olha a página

Quem chega numa página de produto não lê de cima para baixo. Nos testes de usabilidade da Baymard, 56% dos participantes começaram explorando as imagens, antes de ler o título ou a descrição. Depois da foto, a pessoa procura três coisas: se existe a variação que ela quer, quanto vai pagar no fim e o que acontece se der errado.

Isso muda a forma de desenhar. O topo da página, a parte que aparece sem rolar, precisa ter a galeria, o nome, o preço, a escolha de variação e o botão de compra. Tudo que ajuda a decidir (frete, troca, avaliação) fica colado no botão, não no rodapé. O resto (história da marca, produtos relacionados, texto longo) vem depois.

Quando eu desenho uma página de produto, uso uma pergunta simples para cada bloco: isso ajuda a pessoa a decidir agora? Se ajuda, sobe. Se é bonito mas não decide nada, desce ou sai.

Se você está montando a loja do zero, a página de criação e ajuste de lojas Shopify mostra como esse trabalho entra no projeto inteiro, junto com tema, catálogo e checkout.

O que a Baymard encontrou nas grandes lojas

A avaliação de páginas de produto da Baymard, atualizado em março de 2026, avaliou grandes lojas dos Estados Unidos e da Europa. Só 48% delas têm uma página de produto considerada razoável ou melhor no desktop. No celular, o número cai para 38%. Loja grande, com equipe de experiência do usuário, ainda erra nisso. Loja pequena, com tema instalado e nunca revisado, costuma repetir o mesmo tipo de erro. A boa notícia é que boa parte dos erros é de design e de conteúdo, não de tecnologia.

2. Galeria de fotos: o que precisa ter

A galeria é a parte mais vista e a que mais vende. Não basta foto bonita: cada foto precisa responder uma dúvida. Uma galeria que funciona tem pelo menos estes tipos de imagem:

• Foto principal limpa: o produto inteiro, fundo neutro, bem iluminado. É a que aparece na coleção e no carrinho.
• Foto em escala: o produto ao lado de uma mão, de uma pessoa ou de um objeto conhecido. Na pesquisa da Baymard, 42% das pessoas tentam entender o tamanho pelas fotos, e 37% das grandes lojas ainda não têm essa imagem.
• Foto com modelo: para roupa, acessório e qualquer coisa que se usa no corpo. 23% das lojas avaliadas não têm.
• Detalhe: costura, textura, encaixe, rótulo. É aqui que o zoom precisa funcionar.
• Foto explicativa: a imagem com uma seta, uma medida ou uma frase curta destacando o que importa. 52% dos sites não usam esse tipo de foto nem nos produtos mais vendidos.
• Vídeo curto: quando o produto tem movimento, montagem ou caimento.

Tamanho e formato na Shopify

A Shopify aceita imagem, vídeo, modelo 3D e vídeo do YouTube ou Vimeo no produto. Para foto, a recomendação oficial é o quadrado de 2048 x 2048 px, o tamanho que a central de ajuda aponta como o que costuma aparecer melhor. Manter todas as fotos na mesma proporção evita que a galeria pule de altura quando o cliente troca de imagem, um defeito pequeno que passa sensação de loja malfeita.

Miniaturas no celular

No celular, muita loja mostra só pontinhos embaixo da foto para indicar que existem outras. A Baymard viu que só 24% dos sites móveis usam miniaturas, e que, quando o site usou só indicadores, metade dos usuários de desktop teve dificuldade de achar as outras fotos. Miniatura mostra o que vem a seguir: a pessoa vê que existe foto com modelo e vai direto nela. Confira nas opções da seção de produto do seu tema se a galeria pode mostrar miniaturas antes de pensar em código.

Texto alternativo não é detalhe

Cada foto precisa de texto alternativo. A Shopify explica que ele é usado por tecnologia assistiva para descrever a imagem a quem tem deficiência visual, e que também ajuda no SEO. O limite é de 512 caracteres, mas a recomendação é ficar em 125 ou menos. Escreva o que a foto mostra, não palavra-chave repetida: "Tênis branco de couro visto de lado, sola de borracha bege" funciona; "tênis branco tênis couro comprar tênis" não.

3. Variações: deixe a escolha visível

Cor, tamanho, voltagem e sabor são variações. Elas parecem simples, mas é aqui que muita venda trava: a pessoa não vê que existe o tamanho dela, escolhe errado ou não entende por que o botão de compra sumiu.

A avaliação da Baymard de 2026 mostra que 57% das grandes lojas ainda não usam botões para escolher tamanho. Lista suspensa esconde as opções: o cliente precisa tocar, abrir, rolar e fechar para descobrir o que existe. Botão mostra tudo de uma vez e deixa claro o que está esgotado.

Na hora de desenhar, siga estas regras:

• Botão para poucas opções, lista só para muitas. Tamanho de P a GG e três cores cabem em botões. Uma lista muito longa de numerações talvez não.
• Cor com amostra de cor, não com nome. "Areia" e "bege" confundem muita gente. A amostra resolve, e a foto da galeria deve trocar junto quando a cor muda.
• Esgotado aparece riscado ou apagado, não some. Se o tamanho some da tela, a pessoa acha que a loja não trabalha com ele. Se aparece riscado, ela entende que acabou e pode pedir aviso de reposição.
• Tabela de medidas perto do seletor. Um link "ver medidas" do lado do tamanho, abrindo uma janela ou uma seção logo abaixo. Escondida no rodapé ela não é usada.
• Estado selecionado com contraste. Borda grossa ou fundo preenchido. Diferença sutil de cinza não serve, principalmente no sol, no celular.

Variação também afeta o preço. Se o tamanho maior custa mais, o preço da página precisa mudar na hora em que o cliente escolhe, sem recarregar e sem esperar o carrinho para mostrar a diferença.

4. Preço, frete e custo total perto do botão

Esta é a parte que mais pesa na venda e a que mais lojas deixam para depois. Na lista de motivos de abandono de carrinho da Baymard, sem contar quem só estava olhando, 40% das pessoas abandonaram por custo extra alto (frete, taxa) e 12% por não conseguir ver ou calcular o custo total antes. A média documentada de abandono de carrinho, juntando 50 estudos, é de 70,22%.

O problema raramente é o frete em si. É a surpresa. Se a pessoa descobre o frete só no checkout, ela sente que a loja escondeu, mesmo quando o valor é justo. E 67% das grandes lojas avaliadas em 2026 ainda não mostram uma estimativa de custo total perto do botão de compra.

O bloco de compra ideal

Ao redor do botão "Comprar" ou "Adicionar ao carrinho", o cliente deveria encontrar, sem rolar:

1. Preço com destaque, e o preço anterior riscado só quando a promoção é real.
2. Forma de pagamento resumida, como "Pix, cartão e boleto", com a condição de parcelamento que a loja realmente oferece.
3. Frete ou caminho curto para calcular: um campo de CEP ou a regra de frete grátis escrita de forma direta ("frete grátis acima de R$ X para todo o Brasil", se for o caso da sua loja).
4. Prazo de entrega ou de envio, mesmo que aproximado.
5. Link para troca e devolução, em uma linha.

Se o seu tema não tiver um campo de cálculo de frete na página de produto, ele pode entrar por app ou por ajuste no tema. Antes de instalar qualquer coisa, decida a mensagem: às vezes uma frase clara sobre a regra de frete resolve mais que uma calculadora.

O botão

Um botão só, com cor própria, que não aparece em nenhum outro lugar da página. Se "Comprar" e "Ver mais" têm a mesma cor, o olho não sabe para onde ir. No celular, vale uma barra fixa embaixo com preço e botão quando a pessoa rola para ler a descrição, para que a decisão não dependa de voltar ao topo.

Depois do botão vem o checkout, e lá as escolhas são outras. Se a sua dúvida é trocar o checkout da Shopify por um externo, o artigo sobre checkout da Shopify no Brasil: nativo, Yampi ou Cartpanda mostra o que pesa nessa decisão.

5. Confiança: troca, avaliações e quem é a loja

Na mesma pesquisa de abandono, 19% das pessoas desistiram porque não confiavam no site com o cartão de crédito, e 13% por causa de uma política de devolução ruim. Confiança é design também: ela aparece em detalhes que o cliente procura antes de pagar a uma loja que ele não conhece.

Política de troca à vista

A avaliação de 2026 da Baymard mostra que 44% das grandes lojas não mostram nem linkam a política de devolução no conteúdo principal da página de produto. É um link de uma linha. Melhor ainda: uma frase com a regra ("troca em até X dias, primeira troca grátis"), escrita de acordo com o que a loja de fato pratica, e o link para a política completa.

Avaliações

Avaliação de cliente é prova social, mas só funciona se for real e se estiver perto da decisão. Dois cuidados de design:

• Nota e quantidade perto do título, com link que desce até as avaliações.
• Foto de cliente navegável, quando existir. Para roupa e produto de tamanho, a foto de quem comprou responde dúvida que a foto de estúdio não responde.

Responder avaliação negativa com educação também conta. Quem lê vê que existe gente do outro lado.

Sinais de que a loja existe

CNPJ no rodapé, canal de atendimento visível, página "Sobre" com pessoas reais e domínio próprio. Selo de segurança genérico, desenhado no Canva, pesa menos do que parece; o que pesa é a loja parecer cuidada em todos os detalhes. Foto torta, texto com erro e preço diferente entre página e carrinho derrubam a confiança mais rápido que qualquer selo levanta.

6. Descrição e especificações: texto que dá para escanear

Depois da foto e do preço, uma parte das pessoas desce para ler. Elas não leem tudo: procuram a resposta de uma dúvida específica (material, medida, voltagem, como lavar, o que vem na caixa). O design da descrição precisa deixar essa busca rápida.

• Primeiro parágrafo curto, com o benefício principal. Duas ou três frases dizendo para quem é o produto e o que ele resolve.
• Especificações em lista ou tabela, não escondidas no meio do texto. Medidas, peso, material e composição em linhas separadas.
• Abas e sanfonas com cuidado. Elas organizam, mas escondem. Se a informação é decisiva (medida, prazo, troca), ela não deveria ficar fechada.
• O que vem na caixa, quando o produto tem partes ou acessórios.

Metafields: a mesma estrutura em todos os produtos

Na Shopify, metafields permitem guardar informação própria do produto, como composição, medidas ou instruções de cuidado, em campos separados da descrição. Em temas com fontes dinâmicas, esses campos podem ser ligados ao tema pelo editor. Na prática de design, isso significa que a ficha técnica aparece no mesmo lugar e com o mesmo visual em todos os produtos, sem depender de alguém formatar a descrição à mão a cada cadastro.

7. Leitura, contraste e velocidade

Uma página bonita que ninguém consegue ler no celular, ou que demora para mostrar a foto principal, perde a venda antes do cliente chegar ao botão.

Contraste e tamanho de texto

O critério 1.4.3 da WCAG, a referência de acessibilidade do W3C, pede contraste de pelo menos 4.5:1 para texto normal e 3:1 para texto grande (a partir de 18 pontos, ou 14 pontos em negrito). Na página de produto, os pontos que mais falham são preço em cinza claro, texto sobre foto e botão com cor clara e texto branco. Teste as cores da marca numa ferramenta de contraste antes de aplicar no tema. Se a cor principal da marca não passa com texto branco, use texto escuro no botão ou escureça o tom só para esse uso.

A foto principal é a métrica de velocidade

A foto principal precisa aparecer rápido. O Google mede isso pelo tempo até o maior pedaço visível da página aparecer. A meta considerada boa é de 2,5 segundos ou menos, no percentil 75 dos acessos. Na página de produto, esse pedaço quase sempre é a foto principal. Imagem, pôster de vídeo e imagem de fundo também entram nessa conta.

Para o designer, isso vira três decisões: foto no tamanho que a Shopify recomenda, sem enviar arquivo gigante "para garantir qualidade"; vídeo que não toca sozinho no topo da página; e nada de carrossel automático de banners acima da galeria.

8. Como montar a página de produto no tema da Shopify

Quase tudo deste artigo se resolve no editor de tema, sem programar. O caminho que eu sigo:

1. Desenhe a página antes de abrir o editor. Um esboço no papel ou no Figma com a ordem dos blocos: galeria, título, avaliação, preço, variação, bloco de compra com frete e troca, descrição, especificações, avaliações, relacionados.
2. Monte o template padrão de produto com essa ordem nas seções e blocos do tema.
3. Crie templates diferentes quando a família de produtos pede. A Shopify permite vários templates de produto e atribuir a produtos um a um ou em massa, com limite de 1.000 templates no total. Roupa precisa de tabela de medidas em destaque; um acessório, não.
4. Padronize as fotos e o texto alternativo antes de subir o catálogo. Corrigir depois, produto por produto, custa muito mais tempo.
5. Ligue as especificações a metafields para que a ficha técnica tenha o mesmo visual em todos os produtos.
6. Confira os dados estruturados. Com dados estruturados de produto, o Google pode mostrar na busca preço, disponibilidade, avaliações, frete e política de devolução. Confira com o Teste de pesquisa aprimorada do Google se o tema já gera essa marcação e se preço e disponibilidade aparecem corretos.

Checklist de revisão antes de publicar

O artigo sobre Nuvemshop ou Shopify: custo total de 12 meses ajuda se você ainda está decidindo a plataforma antes de pensar no layout.

Perguntas frequentes

Quantas fotos uma página de produto precisa ter?

Não existe número fixo. O que conta é cada foto responder uma dúvida: a foto principal limpa, uma em escala, uma com modelo quando o produto se usa no corpo, detalhes e, se fizer sentido, uma foto explicativa. Para um produto simples, poucas fotos bem escolhidas podem bastar.

Qual o tamanho ideal de foto de produto na Shopify?

A central de ajuda da Shopify recomenda o quadrado de 2048 x 2048 px. O limite é 5000 x 5000 px (25 megapixels) e menos de 20 MB por arquivo. Manter todas as fotos na mesma proporção deixa a galeria estável.

Preciso de app para mostrar o frete na página de produto?

Depende do tema e da regra de frete da loja. Se a regra é simples, uma frase clara perto do botão pode resolver. Se o frete varia muito por região, um campo de CEP ajuda, e ele pode vir de app ou de ajuste no tema.

Devo usar lista suspensa ou botões para variação?

Botões, sempre que as opções cabem na tela. A Baymard mostra que 57% das grandes lojas ainda não usam botões para tamanho, e a lista suspensa esconde quais opções existem e quais estão esgotadas.

O tema gratuito da Shopify serve para uma página de produto boa?

Serve como ponto de partida. A maior parte do que faz a página vender é conteúdo e ordem: fotos certas, variação clara, custo à vista e troca explicada. Um tema pago ajuda quando a loja precisa de recursos que o gratuito não tem, não para resolver falta de conteúdo.

Conclusão

A página de produto que vende responde, na ordem certa, as dúvidas que o cliente tem: como é o produto, se existe a variação dele, quanto vai custar no total e o que acontece se der errado. Na Shopify, quase tudo isso se monta no editor de tema, com fotos padronizadas, botões de variação, um bloco de compra completo e a ficha técnica em metafields. Se a sua loja já roda na Shopify e você quer uma revisão da página de produto, ou se ainda vai abrir a loja, veja como funciona a criação e ajuste de lojas Shopify e manda em oailton.dev/contato a URL de um produto e o que você vende. Se ainda não criou a loja Shopify, fala comigo antes de criar: a loja nasce como loja de desenvolvimento, é montada pronta e transferida para o seu nome.