Como mexer na aparência sem medo

Onde: Aparência.

Tudo o que a sua loja mostra sai daqui — e nada do que você mexer vai ao ar antes de você mandar. Essa é a primeira coisa a saber: as mudanças ficam em rascunho até você publicar.

A tela tem três partes

• À esquerda, as seções, organizadas pelo que o cliente vê: Estilo, Topo, Vitrine, Página do produto, Carrinho e checkout, Rodapé, Atendimento, Minha conta, Blog, Celular, Privacidade e E-mails. O número ao lado de uma seção diz quantas opções dela estão diferentes do que está no ar. Em telas médias, a lista vira só os ícones — passe o mouse para ver o nome.
• No meio, os ajustes da seção aberta. Cada seção e cada grupo abrem com uma frase dizendo o que mudam na loja.
• À direita, a pré-visualização da loja de verdade.

Cada seção tem endereço próprio, então dá para deixar uma nos favoritos.

Os textos dos botões ficam junto da parte da loja em que aparecem: “Adicionar ao carrinho”, “Ver opções” e “Esgotado” em Vitrine → Textos dos botões; o botão de comprar da página do produto em Página do produto → Comprar e entrega; e “Ver carrinho”, “Aplicar cupom”, “Finalizar compra” e “Fazer pedido” em Carrinho e checkout → Textos.

A busca é o atalho

Há muita coisa aqui. Em vez de procurar seção por seção, use Procurar opção…, no topo da coluna do meio (a tecla / leva até ela): digite parte do nome — “frete grátis”, “cor do botão”, “whatsapp” — e edite o campo ali mesmo, com a trilha mostrando de onde ele veio.

A busca geral do painel, no topo de toda tela (Ctrl K), também acha as opções da Aparência: escolher uma abre a seção certa, rola até o campo, põe o cursor nele e o faz piscar.

As escolhas são desenhadas

Quase nenhuma opção é uma lista fechada. O painel mostra a escolha em vez do nome dela:

• Ligar e desligar é uma chave, com a explicação embaixo.
• Poucas opções curtas ficam lado a lado, todas à vista.
• Tamanhos são degraus que crescem do menor ao maior. Quando o padrão do tema é um dos degraus, ele aparece no lugar dele, com o nome dele — “Médio · padrão”; quando não é, vem na frente, como Padrão.
• Fontes aparecem escritas nelas mesmas: você vê o “Aa” de cada uma antes de escolher.
• Modelos — cabeçalho, rodapé, cartão do produto, galeria, aviso de cookies e outros — têm uma miniatura de cada arrumação.
• Ícones são uma grade com o desenho que a loja usa.
• Cores têm a amostra, o código, as cores da loja como atalho e um selo de contraste: Leitura boa, Só para letra grande ou Difícil de ler. Quando o texto da loja, o texto sobre a cor principal ou o texto do botão ficam ilegíveis, um aviso aparece no topo da tela.

O padrão ao lado do nome de uma opção só aparece quando ela saiu do padrão, e a devolve com um clique.

Uma opção apagada, com uma frase embaixo, é uma que outra opção anula agora — a posição da marca, por exemplo, não faz nada com o cabeçalho “Centralizado”, que já põe a marca no meio. A frase diz qual opção mudar para ela voltar a valer.

Um aviso em amarelo embaixo de uma opção quer dizer que ela está ligada, mas outra coisa da loja muda o resultado — por exemplo, o parcelamento, que não aparece quando a loja não tem pagamento com cartão no checkout, ou o estilo dos benefícios, quando o bloco da página inicial escolheu outro. O aviso diz onde resolver.

Clicar na loja para editar

Não sabe onde fica a opção de alguma coisa que você está vendo? Use Clicar na loja, na barra do topo da tela. Passando o mouse, a pré-visualização contorna cada parte que tem opção; clicando, a tela abre a seção e o grupo daquela parte. Enquanto o modo está ligado, o clique não abre links nem compra nada. Esc desliga.

O caminho contrário também existe: Onde aparece, no canto de cada grupo, rola a pré-visualização até a parte da loja que ele muda e a faz piscar.

A pré-visualização

Cada seção abre a página certa: Vitrine mostra uma categoria, Produto mostra um produto, Carrinho mostra o carrinho, Minha conta mostra a conta. Rodapé já abre rolado até o rodapé.

• Cor, tamanho e fonte mudam na hora, sem recarregar.
• Texto e ligar/desligar recarregam a página, na mesma altura em que você estava.
• No Computador, a loja é desenhada na largura de um computador e reduzida para caber na coluna — a porcentagem ao lado diz quanto. No Celular, ela aparece numa moldura de telefone. Entrar na seção Celular já abre em celular.
• Dá para clicar nos links dentro da pré-visualização e navegar pela loja com o rascunho valendo.

Desfazer, refazer e comparar

Toda mudança pode ser desfeita: Desfazer e Refazer ficam na barra do topo, e também funcionam com Ctrl Z e Ctrl Shift Z fora dos campos de texto. Letras digitadas em sequência no mesmo campo voltam de uma vez. Aplicar um estilo pronto ou restaurar uma seção inteira também se desfaz num passo.

Comparar cobre a pré-visualização com a loja como está no ar, na mesma página. Clique de novo para voltar ao rascunho.

Publicar e descartar

A barra do topo acompanha a rolagem e diz o tempo todo onde você está: Rascunho salvo agora, com as alterações que ainda não estão no ar, ou Tudo publicado. O rascunho se salva sozinho enquanto você mexe.

Ali ficam também Publicar e Descartar rascunho. Descartar devolve tudo ao que está publicado. É a rede de segurança que permite experimentar à vontade.

Começar de um estilo

Na seção Estilo, o primeiro cartão traz dez combinações prontas de cor, fonte e cantos, todas sóbrias:

• Padrão — grafite sobre branco, sem serifa. O ponto de partida.
• Grafite — cinza-chumbo e branco. Serviços, corporativo, B2B.
• Marinho — azul-marinho com acento âmbar. Moda masculina, óptica, escritório.
• Ardósia — cinza-azulado, cantos suaves. Tecnologia, saúde, serviços.
• Areia — bege claro e carvão, serifa nos títulos. Decoração, cerâmica, linho.
• Oliva — verde-oliva fechado, serifa. Orgânicos, vinhos, cosmética natural.
• Vinho — bordô e marfim, cantos retos. Vinhos, joias, perfumaria.
• Terracota — terracota queimada e branco quente. Artesanal, casa, café.
• Editorial — preto no branco, serifa grande, tudo reto. Moda, livraria, galeria.
• Noturno — fundo escuro, sem cor forte. Eletrônicos, áudio, design.

Escolher um mexe só em sete escolhas — as cores, a fonte e o arredondamento — e não apaga o resto do que você já ajustou.