Como escolher o tema, a cor, o fundo, as fontes, os cantos, o cabeçalho, a grade de produtos e os blocos da página inicial da sua loja online

A aparência da vitrine é o jeito que a sua loja se apresenta: a cor de destaque, a cor do fundo da página, as fontes dos títulos e dos textos, o formato dos cantos, o topo da loja, o jeito de cada produto aparecer, quantos produtos aparecem por linha e os blocos que aparecem na página inicial. O logo e a capa continuam em Identidade da vitrine.

Tudo fica em Configurações, no menu lateral, na aba Aparência, logo depois de Loja. No topo, um selo mostra se a loja está num tema pronto (por exemplo Tema Delicado) ou em Personalizado. Abaixo vêm o bloco Tema, com os temas prontos, o bloco Cores e estilo, com a cor, o fundo, as fontes e os cantos, o bloco Layout, com o cabeçalho, o card de produto e a grade de produtos, e o bloco Blocos da página inicial, todos fechados até você tocar no título. Há também a Prévia da sua vitrine, que muda na hora para você ver o resultado antes de publicar. No computador a prévia fica fixa na coluna da direita. No celular ela abre em tela cheia pelo link Prévia rápida, na barra do rodapé, que fica sempre à vista: sem nada pendente ela mostra Tudo publicado. A loja está igual à aba., e com a prévia aberta dá para salvar o rascunho sem fechar. Fechar volta para o mesmo ponto da tela. A prévia tem duas abas: Início, com a página inicial da loja, e Produto, com uma página de produto de amostra. Ao mexer na seção Página do produto, ela vai sozinha para Produto; para voltar, toque em Início.

Nada do que você muda nesta aba chega às suas clientes sem passar por Publicar. Veja Rascunho e publicar, mais abaixo.

Temas prontos

Um tema é um ponto de partida: preenche a cor, o fundo, as fontes e os cantos de uma vez. Toque num dos seis cartões do bloco Tema; cada um mostra uma miniatura da sua loja no tema e os tipos de loja com que ele combina.

• Clássico: Terracota, fundo Creme, fontes Vitrine e cantos arredondados. O visual de sempre, serve para qualquer loja.
• Delicado: Rosa queimado, fundo Areia, fontes Delicado e cantos arredondados. Moda feminina, beleza, lingerie e noivas.
• Minimalista: Grafite, fundo Branco, fontes Moderno e cantos retos. Decoração, acessórios e moda neutra.
• Vibrante: Tomate, fundo Branco, fontes Divertido e cantos arredondados. Pet, infantil, doces e papelaria.
• Editorial: Vinho, fundo Creme, fontes Editorial e cantos retos. Moda autoral, joias e artesanato.
• Esportivo: Marinho, fundo Cinza claro, fontes Esportivo e cantos retos. Fitness, suplementos e calçados.

Tocar num tema não salva nada: ele preenche a cor, o fundo, as fontes e os cantos no bloco Cores e estilo, a prévia muda na hora e você confere antes de salvar o rascunho ou publicar. Depois dá para ajustar qualquer um dos quatro à vontade. Ao mexer em qualquer um, o selo do topo passa a dizer Personalizado e nenhum cartão fica marcado. Para voltar a um tema, é só tocar nele de novo.

Tocar num tema aplica na hora, mesmo que os seus ajustes estejam em Personalizado: a cor, a fonte, os cantos e o fundo do tema substituem os que estavam na tela. Trocou sem querer? Toque em Descartar na barra do rodapé e a aba volta ao que estava guardado. Nada chega às suas clientes antes de Publicar, e a janela do Publicar mostra a lista do que muda (por exemplo Tema Personalizado → Vibrante e Cor da marca: Verde mata → Tomate).

Cor da marca

Em Cor da marca você escolhe a cor de destaque da vitrine: ela aparece nos botões, no preço, nos selos, nos links e na bolinha do carrinho.

• Toque numa das 12 cores prontas, ou
• use Cor própria: toque no quadradinho para abrir o seletor de cores ou digite o código no formato #RRGGBB (por exemplo #2F6B4F, que você encontra no manual da sua marca).

A vitrine cuida da leitura sozinha. Se a cor for clara (um amarelo, um rosa bebê), o botão continua na sua cor e o texto dele fica escuro. Preço, selo e links usam um tom mais fechado da mesma cor, porque a cor pura some no fundo claro da loja. Quando isso acontece, um aviso mostra as cores usadas: a do botão e a dos textos.

Para voltar à cor original da plataforma, escolha Terracota, a primeira cor da lista.

Fundo

Em Fundo você escolhe a cor da página da vitrine, atrás dos produtos. São quatro fundos claros:

• Creme: o de sempre.
• Branco: limpo, deixa a foto do produto em destaque.
• Areia: um tom mais quente que o creme.
• Cinza claro: neutro, sem o tom quente.

Cada opção mostra como ficam o preço e o botão na sua cor sobre aquele fundo. O cabeçalho, os cards dos produtos, as gavetas (menu, carrinho e busca) e o rodapé não mudam de cor. A leitura continua garantida: se a sua cor ficar fraca sobre o fundo escolhido, o preço, os selos e os links usam um tom um pouco mais fechado da mesma cor, e o aviso da Cor da marca mostra isso. As páginas de política da loja seguem o mesmo fundo.

Para voltar ao fundo original, escolha Creme.

Fontes

Em Fontes você escolhe um dos seis pares prontos. Cada par traz uma fonte para os títulos e outra para os textos, e as duas mudam juntas. Cada cartão mostra um exemplo de título e de texto na fonte do par.

• Vitrine: Archivo Narrow e Nunito Sans. O par de sempre, condensado, cabe nome longo no celular. Serve para qualquer nicho.
• Editorial: DM Serif Display e DM Sans. Serifa de revista no título, texto limpo e redondo. Combina com moda autoral, joias e decoração.
• Delicado: Cormorant Garamond e Mulish. Serifa fina e elegante. Combina com moda feminina, beleza e lingerie.
• Moderno: Outfit e Inter. Geométrica e neutra, muito legível em tela pequena. Combina com acessórios, eletrônicos e estilo minimalista.
• Divertido: Fredoka e Nunito. Arredondada e simpática. Combina com pet, infantil, doces e presentes.
• Esportivo: Oswald e Work Sans. Condensada e forte, com os títulos em letras maiúsculas. Combina com fitness, suplementos e calçados.

A fonte dos títulos aparece no nome da loja, nos títulos das seções, nos nomes dos produtos e nos preços. A fonte dos textos vale para o resto: descrições, botões, carrinho e checkout. As páginas de política da loja seguem o mesmo par.

Para voltar às fontes originais, escolha Vitrine.

Cantos

Em Cantos você escolhe o formato dos cantos da vitrine:

• Arredondado: o visual de sempre, com cards arredondados e botões em pílula.
• Reto: cards, fotos, botões, campos, selos, a gaveta do carrinho e as janelas ficam com o canto reto, num visual mais sóbrio.

No formato Reto, o que é redondo de verdade continua redondo: as bolinhas de cor, a bolinha do carrinho, os contadores, os botões de escolha do checkout, os interruptores e os números das etapas. As páginas de política da loja seguem o mesmo formato.

Para voltar ao formato original, escolha Arredondado.

Layout

Cabeçalho

A seção Cabeçalho decide o topo da loja, com o logo (ou o nome), a busca, o carrinho e as categorias. Toque num dos três cartões; cada um tem um desenho do topo.

• Clássico: o de sempre. Logo à esquerda; no computador, as categorias no meio (as que não cabem vão para Mais), a busca, o carrinho e a conta; no celular, a busca, o carrinho e o botão do menu.
• Centralizado: logo no meio, maior no computador. No celular, o menu e a busca ficam à esquerda e o carrinho à direita. No computador, o campo Buscar na loja fica à esquerda, a conta e o carrinho à direita, e as categorias descem para uma segunda linha, centralizadas (também com Mais). Combina com moda, joias e marcas com logo marcante. O topo fica um pouco mais alto no computador.
• Compacto: uma barra baixa, com o logo menor, um campo de busca largo, o carrinho e o menu. No computador as categorias saem da barra e ficam no botão Categorias, que abre o mesmo menu do celular. Combina com loja de muitos produtos e muitas categorias, em que a busca é o caminho principal.

Nos três o resto é igual: o mesmo menu (com a conta e as categorias), a mesma busca, o carrinho, a faixa de frete grátis e os botões Filtros e Ordenar, que continuam pendurados embaixo do topo. Os links das categorias continuam no código de todas as páginas, para o Google achar, inclusive no Compacto. O nome da loja (ou o logo) aparece sempre; nome longo termina em reticências no celular.

Card de produto

A seção Card de produto decide como cada produto aparece na lista e nas faixas da página inicial. Toque num dos três cartões; cada um tem um desenho do card.

• Padrão: o de sempre, um cartão com moldura, a foto, o nome, a cor, o preço e o botão do carrinho.
• Foto alta: sem moldura, com a foto em pé (retrato) do mesmo tamanho em qualquer tela e, abaixo, o nome em até duas linhas, a cor em texto discreto, o preço e o botão do carrinho. Combina com moda e beleza, com foto de modelo.
• Minimal: sem moldura, com a foto quadrada, o nome numa linha só (nome longo termina em reticências) e o preço. O botão do carrinho fica sobre o canto da foto. A cor não aparece no card, só na página do produto, e Sob encomenda vira um selo sobre a foto. Combina com acessórios, decoração e loja com muitos produtos.

Nos três a foto aparece inteira, sem corte, e o resto funciona igual: o selo Esgotado, o preço de promoção, o botão do WhatsApp para produto esgotado e a compra rápida (no computador ela abre sobre o card; no celular, numa gaveta). Em Foto alta e Minimal o botão do carrinho é maior, mais fácil de tocar no celular. Com 1 Destaque no celular, a foto do Minimal fica em pé, como nos outros.

Grade do catálogo

No bloco Layout, a seção Grade do catálogo decide quantos produtos aparecem por linha e o espaço entre eles. A escolha vale para a lista de produtos (página inicial, categorias, busca e filtros), para as faixas Em promoção e Mais vendidos da página inicial e para os links compartilhados.

• Colunas no celular: 2 colunas (o de sempre) ou 1 Destaque, com um produto por linha e a foto maior, em pé. Bom para loja com poucos produtos e fotos bonitas. Vale só no celular em pé: no tablet e no celular deitado a grade segue com 2. Nas faixas da página inicial, cada produto ocupa quase a largura toda e a ponta do próximo aparece, para mostrar que dá para arrastar.
• Colunas no computador: 3, 4 (o de sempre) ou 5 produtos por linha, a partir de telas de 1280 px de largura. Em telas um pouco menores, ficam 3. As faixas da página inicial mostram uma linha com o mesmo número de produtos.
• Espaço entre produtos: Confortável (o de sempre) ou Compacto, com os produtos mais juntos.

A prévia mostra o topo no estilo escolhido e a grade do celular. Como as colunas do computador não cabem nela, a prévia avisa, por exemplo, No computador: 5 produtos por linha.

Trocar de tema não muda o layout (nem o cabeçalho, nem o card), e mudar o layout não tira a loja do tema: o selo do topo continua o mesmo. Para voltar ao original, escolha o cabeçalho Clássico, o card Padrão, 2 colunas, 4 e Confortável.

Como o resto da aba, o layout vai para o rascunho e só muda a loja quando você publica (veja Rascunho e publicar, mais abaixo).

Página do produto

Em Fotos, você escolhe como as fotos aparecem na página de todos os produtos:

Opção	Como fica
Miniaturas ao lado	Foto grande com miniaturas ao lado. No celular, miniaturas embaixo. É a de sempre.
Fotos empilhadas	Fotos grandes, uma embaixo da outra. No celular, barra de compra fixa.
Mosaico	Foto de capa grande e as outras em grade. No celular, carrossel.
Foto em tela cheia	Uma foto enorme por vez, com setas e bolinhas para trocar.

A foto nunca é cortada, e tocar nela abre a foto ampliada, como hoje. Se o produto tem fotos por cor, escolher a cor troca as fotos em qualquer opção.

Em Compra, você escolhe como ficam nome, preço, opções e botão:

Opção	Como fica
Atual	A de hoje: preço, opções, quantidade e selos de entrega e troca.
Essencial	Mais limpa: preço com selo de promoção, opções em pílulas e quantidade.
Elegante	Título grande e leve, preço discreto e um botão com o preço.
Direto	Nome e preço na mesma linha, régua de tamanhos e barra de compra fixa no celular.
Promocional	Preço em destaque com a economia, opções em cartões e barra fixa no celular.

Qualquer combinação de Fotos e Compra funciona. O pedido continua pelo carrinho; o botão de WhatsApp da compra é para tirar dúvida.

No celular, a barra de compra fixa aparece no rodapé quando o botão de compra sai da tela: sempre no Direto e no Promocional, e em qualquer compra com Fotos empilhadas. Ela some quando o produto está esgotado.

Ao tocar numa opção de Fotos ou Compra, a prévia vai para a aba Produto e mostra um produto de amostra com a sua escolha, na cor, nas fontes, nos cantos e no fundo da loja. Para ver com um produto de verdade, salve o rascunho e toque em Ver na loja: a loja abre numa página de produto, já com a sua escolha. Suas clientes só veem depois de Publicar.

Blocos da página inicial

Sem mexer em nada, a página inicial da loja abre direto nos produtos, com a capa por cima quando você tem capa. No bloco Blocos da página inicial você pode colocar outras seções antes dos produtos e escolher a ordem:

• Capa: a imagem de topo cadastrada em Loja. Aqui ela só muda de posição. Para ligar ou desligar a capa (no celular e no computador), use Identidade da vitrine; a linha mostra se ela aparece hoje.
• Em promoção: até 8 produtos em promoção, com o link Ver tudo. Some sozinho quando não há promoção ativa.
• Mais vendidos: os 8 produtos que mais saíram, com o link Ver tudo. Some enquanto a loja não tiver venda.
• Avaliações: as últimas avaliações de 4 e 5 estrelas com comentário. Avaliação que você ocultou nunca aparece.

Todos começam desligados. Use o interruptor de cada linha para ligar ou desligar e os botões de seta para subir ou descer. A prévia mostra a página na ordem escolhida antes de salvar. Bloco ligado sem nada para mostrar (sem promoção, sem venda ou sem avaliação) simplesmente não aparece.

Duas linhas ficam fixas, só para informar: Todos os produtos, que fica sempre no fim porque a lista carrega mais produtos conforme o cliente rola a página, e Receba ofertas, o convite que fica depois dos produtos e liga ou desliga em Captação de leads.

Os blocos aparecem só na página inicial. Quando o cliente abre uma categoria, faz uma busca, usa um filtro ou toca em Ver tudo, a página mostra só os produtos, como sempre.

Como o resto da aba, os blocos vão para o rascunho e só mudam a loja quando você publica (veja Rascunho e publicar, mais abaixo).

Rascunho e publicar

A aba guarda as suas mudanças num rascunho da loja. Enquanto você não publica, as suas clientes continuam vendo a loja como estava. A barra do rodapé da tela mostra sempre em que pé as coisas estão:

• Tudo publicado. A loja está igual à aba.: não há nada pendente. No computador a barra some.
• Alterações não salvas: você mudou alguma coisa nesta tela. No computador, a barra mostra Descartar (volta ao último estado guardado, sem perguntar), Salvar rascunho, Ver na loja e Publicar. No celular, Salvar rascunho e Descartar alterações ficam no menu ⋯, ao lado de Ver na loja e Publicar.
• Rascunho salvo às 14
  e, abaixo, Suas clientes ainda veem a loja publicada.: há um rascunho guardado. A barra oferece Descartar rascunho, Ver na loja e Publicar.

Em cada opção (tema, cor, fundo, fontes, cantos, cabeçalho, card e grade), o selo verde Publicado marca a que está no ar para as suas clientes, mesmo quando você já escolheu outra ou tem um rascunho salvo. O selo do topo (Tema Clássico ou Personalizado) mostra o que está na tela. Se você mexer e voltar a deixar tudo igual ao que está no ar, a barra avisa Igual ao publicado por alguns segundos antes de voltar a Tudo publicado.

Salvar rascunho guarda tudo o que está na aba: a cor, o fundo, as fontes e os cantos (inclusive quando vieram de um tema), o layout e os blocos da página inicial. Aparece a mensagem Rascunho salvo. Suas clientes ainda veem a loja publicada. Dá para sair da tela e voltar depois: a aba abre com o rascunho. No topo aparece o selo Rascunho não publicado, a aba Aparência ganha um ponto laranja e os blocos que diferem da loja publicada mostram a etiqueta mudou. Se você deixar a aba igual à loja publicada e salvar, o rascunho some.

Publicar abre uma janela com a lista do que muda (por exemplo Fundo: Creme → Branco ou Bloco Mais vendidos ligado). Ao confirmar em Publicar, as suas clientes passam a ver a nova aparência na hora e a janela mostra Aparência publicada. Ela só fecha quando você toca em Fechar. Se havia mudanças ainda não salvas, elas vão junto, num toque só.

Descartar rascunho pergunta antes de apagar: as mudanças guardadas somem e a aba volta a mostrar a loja publicada. As suas clientes não percebem nada.

Para uma olhada rápida sem sair da tela, use a Prévia da sua vitrine (no celular, Prévia rápida).

Ver na loja

Ver na loja abre a sua loja de verdade, em outra aba, já com o rascunho aplicado. Só você (e quem mais da equipe tocar em Ver na loja) enxerga essa versão: as clientes continuam vendo a loja publicada. Se havia mudanças ainda não salvas, elas são salvas no rascunho antes de a aba abrir. Sem rascunho, o botão abre a loja publicada.

No topo da loja aparece uma faixa escura: Rascunho no celular, Visualizando rascunho no computador, com a hora em que o rascunho foi salvo. Ela acompanha você pela página inicial, categorias, produtos, carrinho e páginas de política. Pela faixa você também pode:

• Publicar: abre a mesma janela da aba, com a lista do que muda. Depois de publicar, a janela mostra Aparência publicada com Voltar ao admin e Fechar (que mostra a loja publicada, sem a faixa);
• Descartar: pergunta antes e mostra Rascunho descartado;
• Voltar ao admin (a seta, no celular): volta para esta aba e encerra o modo rascunho naquela aba da loja. Para ver de novo, toque em Ver na loja.

Em modo rascunho:

• finalizar pedido fica desligado. O carrinho avisa Modo rascunho: finalizar pedido está desligado. Saia do rascunho para fazer um pedido. Você pode navegar, buscar, abrir produtos e montar o carrinho, mas nenhum pedido é criado e o estoque não muda;
• as suas visitas não contam nas métricas, e o carrinho montado ali não aparece em Carrinhos abandonados;
• o acesso vale por 60 minutos. Depois disso, ou se você sair do admin, a loja volta a mostrar a versão publicada; toque em Ver na loja de novo.

Se o rascunho for publicado ou descartado por outra pessoa enquanto você navega, a faixa avisa Este rascunho não existe mais e a loja mostra a versão publicada. Se você perder a permissão de mexer nas Configurações, a faixa avisa Seu acesso ao rascunho terminou. Nos dois casos, Sair do rascunho tira a faixa. Se o link da loja já tiver sido usado ou tiver passado do tempo, aparece Não foi possível abrir o rascunho: volte ao admin e toque em Ver na loja de novo.

Voltar ao padrão

Para recomeçar do zero, use Restaurar aparência padrão: no celular, no menu ⋯ ao lado do seletor da aba; no computador, no topo da aba Aparência, à direita do selo do tema. A tela volta ao visual de sempre da plataforma (tema Clássico, cor Terracota, fundo Creme, fontes Vitrine, cantos arredondados, cabeçalho, card e grade padrão, e os blocos da página inicial desligados) e a barra mostra Alterações não salvas. Nada é gravado nem publicado sozinho: salve o rascunho ou publique como sempre, e a janela do Publicar mostra a lista do que muda. Mudou de ideia? Toque em Descartar. Se a aparência já está no padrão, a opção fica desligada e avisa Já está no padrão.

Mais de uma pessoa na aba

O rascunho é um só para a loja. Se outra pessoa da equipe salvou o rascunho, a barra mostra Rascunho de Ana, salvo às 14

e um aviso no topo explica que o que você mudar continua o rascunho dela.

Se outra pessoa salvar o rascunho depois que você abriu a tela, a próxima ação sua avisa Outra pessoa mexeu no rascunho:

• ao salvar, você escolhe entre Ver o da Ana (recarrega a aba com o rascunho dela e perde o que você mudou) e Salvar por cima;
• ao publicar ou descartar, só aparecem Ver o da Ana e Cancelar: ninguém publica nem apaga o trabalho de outra pessoa sem ver.

Se outra pessoa já publicou ou descartou o rascunho, a janela diz Este rascunho não existe mais e oferece Recarregar. Se a loja foi publicada por outra pessoa depois que o seu rascunho começou, a janela avisa e oferece Publicar mesmo assim, que troca também o que a outra pessoa publicou.

Quem só pode ver as Configurações enxerga o rascunho e o selo, mas os botões ficam desligados.

O que NÃO faz

• Não aceita enviar uma fonte própria nem digitar o nome de uma fonte. Só os seis pares da lista.
• Não tem meio-termo nos cantos nem raio por tamanho: só Arredondado ou Reto.
• Não oferece 3 colunas no celular (o produto ficaria pequeno demais para ler o preço) nem grade diferente por página.
• Não aceita fundo escuro, cor de fundo digitada nem imagem de fundo. Só os quatro fundos claros da lista.
• Não guarda versões antigas da aparência: depois de publicar, não há "voltar à versão anterior" com um toque. Também não há um rascunho por pessoa: o rascunho é um só para a loja.
• Não cria tema próprio nem guarda o nome do tema: o que fica salvo é a cor, o fundo, as fontes e os cantos.
• Não muda o painel de administração nem os e-mails da FitVitrine para você.
• Não troca o logo nem a capa. Isso é Identidade da vitrine.
• Não escolhe quais produtos entram em Em promoção ou Mais vendidos: a loja decide pelas promoções ativas e pelas vendas. Também não coloca blocos em categoria, busca ou filtro.
• Selo de compra segura, cálculo de frete na página do produto e estilo diferente por produto: a escolha de Fotos e Compra vale para a página de todos os produtos.

Para achar os outros ajustes da tela, veja Onde fica cada coisa em Configurações.

Próximo tópico: Endereço e horário de atendimento.