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 abre no mapa da loja

• À esquerda, a busca e o mapa: cada área da loja é um ícone. Em Toda a loja ficam Cores e estilos prontos, Fontes, Botões, Layout e espaços, WhatsApp e atendimento, No celular e Cookies e e-mails. Em Estrutura, o que se repete em todas as páginas: o Cabeçalho (Faixa de aviso, Cabeçalho e logo, Ícones do topo, Busca e Barra de categorias) e o Rodapé (Cadastro de e-mail, Rodapé, Contato e dados da loja e Redes sociais). Em Página inicial: Blocos da página, Banners, Benefícios, Produtos e filtros e Vistos recentemente. Em Outras páginas: Página do produto, Carrinho e checkout, Minha conta e Blog.
• Passe o mouse num ícone e a loja contorna onde aquela área fica. Clique e aparecem só as opções dela; ← Todas as áreas, no alto, volta ao mapa. O número no canto de um ícone diz quantas opções daquela área estão diferentes do que está no ar.
• Blocos da página (a ordem e as opções de cada bloco da home) e Banners (as artes) abrem ali mesmo, com a loja ao lado — moram só aqui. Eles vão ao ar quando você salva, sem passar pelo rascunho, e a prévia recarrega sozinha.
• À direita, a sua loja de verdade, com o rascunho valendo. A lista no alto dela troca a página mostrada.

Os avisos sobre a loja — o WhatsApp ligado sem número, uma cor difícil de ler — ficam num botão só, “2 avisos sobre a loja”, logo abaixo da barra do rascunho: clique para ver cada um e ir direto à área dele.

No celular e no tablet, as opções ocupam a tela, e o botão Ver a loja mostra a pré-visualização em tela cheia.

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

O principal primeiro, o resto a um clique

Cada grupo abre com o que quase toda loja muda. O resto fica em Mais N ajustes de…, no fim do grupo, e abre ali mesmo. Nenhuma opção some: a busca acha todas.

Os textos dos botões ficam junto da parte da loja em que aparecem: “Adicionar ao carrinho”, “Ver opções”, “Esgotado” e, com a entrega agendada, “Escolher data” e “Agendar horário” em Produtos → Textos dos botões; o botão de comprar da página do produto em Botão de comprar e entrega (com a página Produto escolhida), onde também fica o dos serviços com horário (aula, sessão, consulta), que tem texto próprio — “Reservar horário”, de fábrica — para a loja que vende serviço e produto não precisar escolher um texto que serve mal aos dois; 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 área por área, use Procurar opção…, no alto do mapa (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 área 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 “Marca no meio”, que já a põe no centro. 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.

Onde a opção aparece na loja

A pré-visualização não se mexe sozinha: entrar numa área, passar o mouse ou mudar uma opção não rola a loja. Passar o mouse num ícone do mapa ou numa opção só contorna a parte da loja que ela muda, se ela estiver à vista, com a etiqueta Você está mudando: ….

Para ir até a parte, use Ver na loja, no alto de cada área, ou Onde aparece, no canto de cada grupo: a loja rola até lá e escurece o resto por um instante. A área que só existe numa página leva a pré-visualização até ela ao abrir — Página do produto mostra um produto, Carrinho e checkout mostra o carrinho —, e No celular abre em largura de celular.

A pré-visualização

Cada área que só existe numa página leva a pré-visualização até ela: Página do produto mostra um produto, Carrinho e checkout mostra o carrinho, Minha conta mostra a conta. Para ver outra página, use a lista no alto da loja.

• 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. Abrir No celular já mostra em celular.
• Dá para clicar nos links dentro da pré-visualização e navegar pela loja com o rascunho valendo.
• Outra janela abre a loja numa janela à parte, que acompanha ao vivo o que você muda — bom em notebook pequeno e para quem tem dois monitores: as opções numa tela, a loja inteira na outra. Trazer para cá fecha a janela e a pré-visualização volta para o lado das opções.
• No celular e no tablet, a loja não cabe ao lado das opções: o botão Ver a loja, no canto de baixo, abre a pré-visualização em tela cheia (com um ponto laranja quando algo mudou desde a última olhada), e Voltar às opções fecha.

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 área 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

Em Cores e estilos prontos, 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.