Loja no celular primeiro: o design que a pessoa vê

O resumo direto

Loja no celular primeiro é desenhar a vitrine na largura do telefone, com o dedo como mouse, e só depois ver como isso se rearruma no monitor. O Google indexa a versão mobile do site, rastreada com o agente de smartphone. O que você esconde ou apaga no celular deixa de existir para a busca, mesmo que esteja lindo no desktop. Tema de loja quase sempre é responsivo: a mesma página, a mesma URL, o layout muda com a tela. Responsivo não significa pensado para o celular. Significa que o desktop encolheu. Abaixo eu mostro a ordem em que eu desenho, o que não pode sumir, o tamanho do toque e o que conferir no checkout do telefone.

1. O Google lê o celular, não o monitor

Indexação mobile-first quer dizer isto: a versão que o Google usa para indexar e ranquear é a do telefone. Não é obrigatório ter versão mobile para aparecer na busca. O Google diz que é fortemente recomendado.

Para loja, o caminho que ele recomenda é o design responsivo. O mesmo HTML, a mesma URL, a apresentação muda com o tamanho da tela. Os outros dois caminhos (HTML diferente na mesma URL, ou site separado tipo m ponto) existem, e dão mais trabalho para manter título, conteúdo e link iguais. Tema de Shopify já nasce no primeiro caminho. Eu não abro um segundo site para o celular.

O detalhe que muda o desenho: se o celular tiver menos conteúdo que o desktop, o Google avisa que dá para esperar perda de tráfego, porque ele não vê mais a página inteira. Sanfona e aba são aceitas para ganhar espaço. Apagar bloco não é.

Se você está montando a loja inteira, o projeto de e-commerce é onde home, coleção e produto entram juntos. A página de produto em si, com foto, variação e preço, está no artigo sobre o que o design precisa mostrar na página de produto.

2. O que não pode sumir quando a tela encolhe

O Google pede o mesmo conteúdo principal, os mesmos títulos claros, o mesmo title, a mesma meta description e o mesmo texto alternativo das imagens. Dados estruturados também nos dois. Se tiver de priorizar o que marcar no celular, a ordem que ele dá é Breadcrumb, Product e VideoObject.

Isso vira regra de layout. Menu hambúrguer pode guardar páginas secundárias. Não pode guardar o nome do produto, o preço, a variação e o botão de compra. Foto "só no desktop, porque pesa" tira da busca a imagem que a pessoa usaria para decidir. O Google ainda pede imagem de qualidade no celular, não uma miniatura borrada no lugar da foto grande.

Texto de medida, prazo e troca pode ir para uma sanfona debaixo do botão. O texto precisa estar no HTML da página, não atrás de um clique que carrega outra coisa. O Google declara que não carrega conteúdo principal que dependa de deslizar, clicar ou digitar. Sanfona que já traz o texto na página, só escondido visualmente, é diferente de botão que busca o texto depois.

Anúncio ou banner no topo come a tela do telefone. O Google cita o Better Ads e diz que anúncio no alto pode ocupar espaço demais. Na loja, o equivalente é empilhar faixa de frete, aviso de cookie e barra de aplicativo. Eu deixo uma faixa curta. O resto espera a pessoa rolar.

Vídeo de produto fica perto do topo, não depois de dez blocos. A ajuda do Google diz que vídeo difícil de achar no celular, porque exige rolar muito, pode prejudicar o vídeo na busca.

Fonte: Google Search Central, página de indexação mobile-first, atualizada em 10/12/2025, lida em 16/10/2026.

3. Desenhar na largura do polegar

Eu começo o arquivo do layout numa tela estreita. Home, lista e produto. Só quando a compra faz sentido nessa largura eu estico para o desktop. O contrário produz coluna vazia no telefone, botão abaixo da dobra e menu que só existe no hover. Hover não existe no dedo.

Na home, o primeiro bloco responde "o que esta loja vende" sem depender de um slider que troca sozinho. Slider que troca sozinho esconde a frase que o Google e a pessoa precisavam ler. Uma foto, uma frase, um botão.

Na lista, o card mostra foto, nome e preço sem cortar o preço com reticências. Filtro não pode ser uma barra lateral que no celular vira página inteira sem o botão de aplicar visível. Eu deixo filtro em um botão, com aplicar fixo no pé da tela.

Na página de produto, galeria, nome, preço, variação e comprar cabem na primeira dobra ou logo no começo do scroll. A pesquisa de abandono ajuda a lembrar o que não pode ficar para "mais embaixo": custo extra é motivo de 40% dos abandonos, fora quem só estava olhando (42%). Frete e prazo não são rodapé. São parte da decisão, e no celular o rodapé fica longe.

Contraste segue a WCAG: 4,5:1 no texto normal e 3:1 no texto grande (18 pontos, ou 14 em negrito). No sol, cinza claro em branco some. Eu evito texto de preço em cinza sobre foto.

Se a sua loja foi desenhada no monitor e no celular o preço, o botão ou o frete somem, manda a URL e um produto de exemplo. Se ainda não criou a loja, fala comigo antes de criar: a loja nasce como loja de desenvolvimento, é montada pronta e transferida para o seu nome.

Falar sobre o projeto

4. Alvo de toque

O critério 2.5.8 da WCAG 2.2 pede que o alvo do ponteiro tenha pelo menos 24 por 24 pixels CSS. Há exceções: alvos menores podem existir se um círculo de 24 pixels em cada um não encostar no vizinho, se existir outro controle equivalente na página, se o alvo estiver no meio de uma frase, se o tamanho vier do navegador, ou se o tamanho pequeno for essencial.

Na loja, isso pega menu, variação de tamanho, quantidade, lixeira do carrinho e o link "ver mais" do filtro. Letra miúda com ícone colado no vizinho é onde a pessoa compra o tamanho errado. Eu aumento a área clicável mesmo quando o desenho do ícone continua pequeno. A área conta, não só o traço.

O botão de comprar é o maior alvo da página. Largura da coluna no celular, texto curto ("Comprar" ou "Adicionar"), cor que passa no contraste. Botão secundário ("favoritar", "avisar quando voltar") não fica do mesmo tamanho e da mesma cor, senão os dois competem.

5. Foto que o Google ainda enxerga

Imagem preguiçosa é normal em lista longa. O limite do Google é outro: não deixar o conteúdo principal depender de um gesto para existir. As primeiras fotos do produto entram na página sem a pessoa precisar clicar num "mais" que busca o arquivo.

A foto do celular é a mesma foto, não um recorte que corta a peça. URL que muda a cada carregamento atrapalha o Google a indexar a imagem. Texto alternativo descreve a peça ("tênis branco, vista lateral"), não a palavra "imagem" repetida.

Se a loja usa URL diferente de imagem no desktop e no celular, o Google avisa que o tráfego de imagem pode cair um tempo, porque a URL nova ainda não tem histórico. No tema responsivo, a mesma URL com tamanho ajustado evita esse desvio. Eu não crio uma segunda galeria "light" com outro nome de arquivo só para o telefone.

6. Checkout no telefone

A avaliação de checkout da Baymard, atualizada em novembro de 2025, encontrou 63% dos sites mobile com desempenho medíocre ou pior. No desktop, 64%. Só 2% dos sites mobile ficaram como bons. Encolher o checkout de desktop não resolve. A tela já é curta. Campo a mais vira scroll a mais.

Na Shopify, o resumo do pedido e o cupom começam recolhidos no celular. A pessoa precisa tocar para ver o total e o código. Se a loja vive de cupom, o admin deixa o campo de cupom sempre visível. Eu quero o valor do pedido legível antes desse toque. Custo que aparece tarde está na lista dos abandonos.

18% abandonaram porque o site pediu para criar conta. 17% porque o processo era longo ou complicado. No telefone isso dói mais: teclado cobre o campo, e cada etapa extra é um motivo para fechar o navegador. Compra sem conta fica como ação principal. Conta fica como caminho de quem já comprou.

O checkout da Shopify não se desenha no tema. Cores, logo e fonte vão no editor de checkout. A decisão de usar checkout nativo ou um externo (Yampi, Cartpanda) está no artigo sobre checkout da Shopify no Brasil. O visual do telefone continua valendo nos dois casos: total visível, poucos campos, botão que o dedo acerta.

A média documentada de abandono de carrinho é 70,22%. Parte é gente só olhando. A parte que o design alcança é custo, conta obrigatória e fluxo longo. No celular, esses três aparecem primeiro.

7. Ordem de trabalho

Quando eu pego uma loja para revisar, a ordem é esta.

Primeiro eu abro a home, a lista e um produto na largura do telefone, sem girar para paisagem. Anoto o que não cabe: preço cortado, botão fora da tela, menu que não fecha, banner que empurra o produto.

Depois eu confiro se o texto que existe no desktop também está no celular, mesmo que dentro de sanfona. Título da página e descrição iguais. Alt das fotos preenchido.

Depois o toque: variação, quantidade, filtro, comprar. Se dois controles cabem sob o mesmo dedo, eu afasto.

Por último o desktop. Aí eu uso o espaço que sobrou para mostrar mais fotos lado a lado, não para inventar um conteúdo que o celular não tem. Conteúdo novo no desktop, sem par no celular, é conteúdo que a busca não usa.

Tema pronto acelera. Não substitui essa passagem. Tema instalado e nunca aberto no telefone repete o erro dos 63%: a tela existe, a compra não.

Perguntas frequentes

Loja no celular primeiro é fazer um site separado para o telefone?

Não. O Google recomenda o mesmo HTML e a mesma URL, com o layout se adaptando à tela. Site separado ou HTML diferente na mesma URL exige título, conteúdo, imagem e link iguais nas duas versões. Tema de loja responsivo já está no caminho mais simples. O trabalho é desenhar essa tela estreita de propósito.

Posso esconder texto no celular para a página ficar mais limpa?

Pode recolher em sanfona ou aba, com o texto ainda na página. Não pode apagar. O Google indexa o mobile. Se o celular tem menos conteúdo, a busca perde o que estava só no desktop. Conteúdo principal também não pode depender de um clique que busca o texto depois.

Qual o tamanho mínimo de um botão?

A WCAG 2.2 pede alvo de pelo menos 24 por 24 pixels CSS, com exceções de espaço entre alvos, outro controle equivalente, link no meio da frase, controle do navegador e caso essencial. Na loja eu aplico isso em variação, quantidade, filtro e comprar. O botão principal ocupa a largura da coluna.

O checkout da Shopify no celular mostra o total sozinho?

O resumo e o cupom começam recolhidos. A pessoa toca para abrir. Dá para deixar o campo de cupom sempre à mostra. O total precisa ser legível cedo: custo extra alto é um dos motivos de abandono que a Baymard mede, em 40% de quem não estava só olhando.

Banner de promoção no topo atrapalha a busca?

O Google diz que anúncio no alto pode ocupar espaço demais no telefone e cita o padrão Better Ads. Uma faixa curta de frete ou de campanha cabe. Várias faixas empilhadas empurram o produto e a foto para baixo. Eu deixo uma.

Conclusão

Loja no celular primeiro é a ordem do desenho e a ordem da busca: o Google lê o telefone, a pessoa compra no telefone, e o desktop aproveita o que já funcionou na tela estreita. O conteúdo fica o mesmo, o toque fica folgado, a foto continua nítida e o checkout mostra o custo antes do cartão. Se a sua loja foi montada no monitor e nunca revisada no aparelho, o projeto de e-commerce é o lugar para ver esse trabalho. Manda a URL da loja e um produto que você queira como exemplo. Se ainda não criou a loja, fala comigo antes de criar: a loja nasce como loja de desenvolvimento, é montada pronta e transferida para o seu nome.

Falar sobre o projeto