A loja no celular

Onde: Aparência → Celular.

A maior parte do comércio brasileiro acontece no celular. Se você só conferir a loja no computador, vai estar olhando a minoria das visitas.

O que já acontece sozinho

• O menu vira gaveta e a busca vira lupa.
• O carrinho vira cartão em vez de painel lateral.
• As grades se reorganizam para caber.
• Carrossel curto fica centralizado e esconde as setas.

O que você escolhe

Na seção Celular ficam os ajustes próprios de tela pequena — quantos produtos por linha, o que aparece na barra de baixo, e o que some para não poluir.

O topo do celular vem enxuto: o botão de menu à esquerda, o logo no meio e o carrinho à direita, e a busca inteira embaixo. O logo sai com 48px de altura. Para mudar o tamanho, use Altura da marca no celular; para encostá-lo à esquerda, Posição da marca no celular. A busca vem compacta, com 40px de altura e o botão só de lupa; em Tamanho da busca no celular ela volta a ser igual à do computador, com o botão escrito. O botão de menu abre uma gaveta que se monta sozinha:

• a conta do cliente;
• o botão de destaque da barra de categorias, como “Super Ofertas”;
• as categorias em cartões com foto, dois por linha, e as subcategorias na setinha do canto de cada cartão;
• as marcas numa fileira de logos que corre para o lado;
• os atalhos do cabeçalho em botões pequenos;
• o WhatsApp, fixo no pé da gaveta, sempre à vista enquanto o cliente rola.

A barra de categorias sai do celular, porque tudo o que ela tinha está na gaveta. Na barra de baixo, cada atalho ganha um ícone, e Categorias também abre a gaveta. O atalho da página em que o cliente está fica destacado numa pílula da cor da loja, e a barra deixa espaço para a barrinha de baixo do iPhone. Para voltar ao jeito de antes, escolha outra forma em Menu de navegação no celular, na seção Celular.

Entrar nessa seção já muda a pré-visualização para largura de celular, então você vê exatamente o que está mexendo.

O que conferir antes de abrir a loja

1. O logo cabe? Logo largo demais empurra a lupa e o carrinho para fora.
2. Dá para ler o preço sem aproximar?
3. O botão de comprar aparece sem rolar muito? Em tela pequena, título e foto ocupam quase tudo.
4. O checkout funciona com o teclado subindo? Faça uma compra de verdade pelo seu celular, do início ao fim.
5. Os botões flutuantes brigam entre si? WhatsApp, aviso de cookies e barra de baixo disputam o mesmo canto. A loja já soma o espaço de cada um, mas vale conferir com todos ligados.

Fotos

Foto pesada é o que mais atrasa uma loja no celular, e página lenta perde venda. Suba imagens já reduzidas — largura de 1200 a 1600 pixels resolve qualquer tela e pesa uma fração de uma foto direto da câmera.