O logo, as cores, as fontes, o banner e a forma como os produtos aparecem. Tudo se edita ao vivo sobre a sua própria loja, com o editor.
Passo a passo
- Toque no botão EDITAR LOJA, no canto superior direito do painel. A sua loja abre numa aba nova, com o painel do editor por cima.
- Escolha o grupo no topo do painel: Estilo para a identidade visual, Conteúdo para o banner e os textos, Telas para o cartão de produto e as demais telas.
- Edite. A mudança aparece na loja na hora, ainda sem ser publicada.
- Toque em Salvar. Só então os seus compradores a veem.
Estilo: a identidade visual
- Designs prontos: combinações completas feitas por designers. Você escolhe uma e a loja inteira muda de uma vez. São 39, entre eles Clásico, Minimal, Editorial, Bento, Lujo, Brutalist, Y2K, Eco, Magazine, Quiet luxury, Hype, Viral, Technical, Apothecary, Cottagecore, Resale, Academia, Coastal, Chrome, Noir, Coquette, Boho, Art déco, Solarpunk, Storyteller, Boutique, Marketplace, Drop shop, Atelier, Pop-up, Mayorista, Café, Galería, Distribuidor, Reposición, Club privado, Lookbook, Fiesta e Outlet.
- Paleta e tipografias: as cores e as letras da sua loja, ajustáveis uma a uma, com buscador de fontes por estilo.
- Forma: o arredondamento dos cantos em botões, cartões e campos da loja inteira.
O mais rápido é começar por um Design pronto e depois ajustar a paleta.
O logo, o nome, o slogan, as redes e os links do rodapé ficam à parte, em Conteúdo → Marca.
O banner: qual medida usar
O banner é um bloco, não uma tela fixa. Ele se adiciona em Conteúdo → Páginas → Início, escolhendo o bloco Banner / carrossel.
Não há uma medida obrigatória. Em vez de pixels soltos, você escolhe uma forma com nome e a loja cuida do resto:
- Altura, para desktop: Ajustar à imagem, Compacto, Médio, Alto, 21:9 (cinema), 16:9 (panorâmica), 3:1 (faixa), 3:2, 4:3 ou 1:1 (quadrada). Por padrão vem em Médio.
- Altura (celular): Ajustar à imagem, Compacto, Médio, Alto, 16:9 (panorâmica), 1:1 (quadrada), 4:5 (vertical), 3:4 (vertical) ou 9:16 (story). Por padrão Médio.
Ajustar à imagem pega a altura da primeira imagem do carrossel: não recorta nem deixa faixas. É a opção para quando você não quer brigar com as medidas.
As duas alturas são independentes: a forma que você escolhe para desktop não manda no celular.
Com que proporção exportar as imagens
Quando você envia a imagem de um slide, a ferramenta de recorte abre já enquadrada na forma do banner: aproximadamente 12:5 no desktop e 4:5 no celular. Essas são as proporções de referência se você quiser preparar os arquivos de antemão. Mesmo assim você pode escolher outra proporção no recorte.
Cada slide aceita uma Imagem/vídeo (desktop) e uma Imagem/vídeo (celular) diferentes.
Quando a foto é cortada ou sobram faixas
O controle é Ajuste da imagem:
- Preencher: a imagem cobre todo o espaço e o excesso é recortado.
- Conter: a foto inteira aparece e a moldura que sobra é preenchida com um desfoque da própria imagem. Você também pode escolher preenchê-la com uma cor lisa.
Além disso, cada slide tem Foco da imagem, que decide qual parte é preservada quando há recorte.
Velocidade e comportamento do carrossel
- Reprodução automática: ligada por padrão.
- Intervalo: de 3 a 10 segundos, por padrão 5. É do carrossel inteiro, não de cada banner: não é possível fazer um slide durar mais que os outros.
- Transição: deslizar ou fundido.
- Barra de progresso, Setas e Pontos.
Programar um banner por datas
Cada slide tem Mostrar a partir de e Ocultar após. Você preenche as datas e o banner entra e sai sozinho. Ele também tem um interruptor de visibilidade para desligá-lo à mão, e Link do slide para que leve a algum lugar.
Sobre a imagem você pode colocar Antetítulo, Título, Subtítulo e até dois botões com o link de cada um, além da cor do texto e uma camada de opacidade para que se leia sobre a foto.
Quantos produtos por linha
No bloco Grade de produtos, dentro da página onde você o colocou:
- Colunas: de 2 a 5. Por padrão 4.
- Colunas (celular): de 1 a 3. Por padrão 2.
- O espaço entre produtos vai de 8 a 48 px, por padrão 24.
O mesmo bloco tem Mostrar filtros e Mostrar ordenação, que aparecem só quando o bloco mostra todo o catálogo.
Se você quer um mosaico irregular estilo Pinterest em vez de uma grade uniforme, use o bloco Mural de produtos.
Quando os produtos aparecem em tamanhos diferentes
A causa é a proporção das fotos. Vá em Telas → Cartão e procure Proporção da imagem, com estas opções:
- Natural (sem corte): cada foto mantém a forma dela, então os cartões ficam desiguais.
- Quadrada, 3:4, 4:5, 2:3 ou 16:9: todas as fotos são recortadas nessa mesma forma e os cartões ficam idênticos.
Escolher qualquer proporção diferente de Natural é o que uniformiza a grade.
Nessa mesma tela você configura a borda do cartão, o efeito ao passar o mouse, a segunda foto ao passar, e o tamanho, o peso e o alinhamento do nome e do preço. No topo você escolhe a variante de cartão, que muda a estrutura inteira dele.
A barra de anúncio do cabeçalho
O texto está em Conteúdo → Marca, campo Barra de anúncio. Ele suporta duas coisas úteis:
- Várias mensagens rotativas, separando-as com uma barra vertical:
Frete grátis | Nova coleção. A barra vai alternando entre elas. - Um link por mensagem, com o sufixo
=>:Frete grátis => /envios.
A aparência da faixa se configura em Telas → Cabeçalho, e depende da variante que você tiver escolhido:
- Todas têm o interruptor Mostrar aviso.
- A variante padrão acrescenta Cor do aviso, o fundo da faixa.
- A variante Brutalista acrescenta ainda Cor do texto, a espessura da borda e a tipografia monoespaçada.
- A variante Editorial acrescenta um Prefixo (Issue) com a cor dele.
- A variante Luxo acrescenta o Tom dourado.
Imagens e banners de categoria
As imagens e os banners de cada categoria são enviados pelo painel, não pelo editor: no menu lateral, Catálogo → Categorias, você abre a categoria e ali tem Imagem do Título, Imagem de Fundo e o bloco Banner Promocional com banner de desktop, banner mobile, link, margem e arredondamento.
Para montar acessos visuais às categorias na página inicial, use os blocos Categorias ou Categorias cinemáticas.
Testar antes de publicar
- No topo do painel há três botões com ícones de monitor, tablet e celular: eles mudam o tamanho da pré-visualização sem sair do editor.
- Abaixo do botão Salvar há uma linha com Anônimo e Cliente: com ela você olha a sua loja como a vê um visitante sem conta ou um cliente com a tabela de preços dele.
- Desfazer e Refazer estão no painel. E cada salvamento fica no Histórico, então, se algo quebrar, você volta a uma versão anterior com um clique.
O que não é possível fazer
Não há pop-up nem janela modal ao entrar na loja. Essa função não existe. O mais parecido é colocar no topo da página inicial um bloco Manifesto ou Promoção, ou usar a barra de anúncio do cabeçalho.
Se algo não aparece
- Você não consegue entrar no editor: é preciso ser administrador do negócio ou um gerente com a permissão de design. Se você não tem, a loja avisa "Você não tem permissão para editar a loja." Ela se habilita em Configuração → Gerente, grupo de permissões Loja.
- Você procura uma seção Banner e ela não está lá: o banner é um bloco da página inicial. Ele se adiciona em Conteúdo → Páginas → Início.
- Você não vê a barra de anúncio: nas variantes de cabeçalho Minimalista e Cinemático o interruptor Mostrar aviso vem desligado de fábrica. Ligue-o em Telas → Cabeçalho.
- A barra de anúncio não aparece em nenhuma variante: o campo Barra de anúncio de Marca está vazio. Sem texto a faixa não é desenhada.
- Você procura o grupo "Página": ele se chama Telas.
- O editor avisa que o design está perto do limite de tamanho: encurte textos ou tire blocos antes de salvar.