Montar a página inicial por blocos

Onde: Aparência → Blocos da página (no mapa, em Página inicial), com a loja ao lado. Os blocos vão ao ar quando você salva, sem passar pelo rascunho.

A página inicial é montada por blocos empilhados. Você escolhe quais entram, em que ordem, e sobe e desce cada um.

Se você não montar nada, a home usa o arranjo padrão da plataforma — que já é um arranjo bom. Mexer é opcional.

Os blocos

• Banners — as artes grandes do topo. Um só, vários um embaixo do outro, lado a lado, ou em carrossel; de ponta a ponta da tela ou na largura do conteúdo, com cantos arredondados.
• Produtos — uma vitrine, que pode ser os mais vendidos, os mais novos, os em promoção ou uma categoria escolhida.
• Categorias — os caminhos do catálogo, com foto e quantos produtos cada uma tem. A contagem se desliga em Mostrar quantos produtos. Em Formato você escolhe lista de atalhos, grade ou carrossel (as categorias passando); em Estilo das categorias, o desenho de cada uma: cartão com foto e nome embaixo, foto redonda sem cartão, foto inteira com o nome por cima, pílula com foto pequena e nome ao lado, só a foto e o nome, ícone — o desenho da categoria num cartão, sem foto nenhuma (o ícone de cada uma se escolhe em Categorias e marcas; sem escolha, a loja usa o que o nome sugere) —, ou foto saltando do cartão colorido: o cartão fica baixo, num tom da cor da loja, e a foto sai por cima dele e pula ao passar o mouse. Esse último pede foto recortada, de fundo transparente (PNG): foto com fundo vira um quadrado passando da borda. O estilo vale para a grade e o carrossel.
• Marcas — a fileira de logotipos. Só faz sentido se você revende marcas conhecidas. Em Estilo das marcas você escolhe o desenho: cartão com o logotipo e o nome embaixo, só o logotipo num cartão branco, só o logotipo solto, sem moldura e sem nome, logotipo solto com o nome embaixo, logotipos soltos em cinza que ganham cor ao passar o mouse, logotipo num círculo, ou pílula com logotipo pequeno e nome ao lado. Os soltos ficam melhores com logotipo de fundo transparente (PNG ou SVG): logotipo com fundo branco próprio mostra esse branco.
• Chamada — um bloco de texto com até dois botões. Para a promoção da semana, o anúncio da coleção, o convite ao clube. No Estilo: Primeira tela, ela vira a abertura grande da home, na cor da loja: frase de cima, título, dois botões, as garantias (“Frete para todo o Brasil; Compra segura”, separadas por ponto e vírgula) e uma imagem ao lado.
• Por que comprar aqui — até quatro motivos para escolher a sua loja, cada um com ícone, título e texto. Já vem escrito; troque pelo que é verdade no seu negócio.
• Fale com um especialista — um convite para tirar dúvidas antes de comprar, com a foto de quem atende. O botão leva ao WhatsApp cadastrado em Aparência → WhatsApp e atendimento, ou ao link que você escrever. Sem nenhum dos dois, o bloco não aparece.
• Produto em destaque — um produto só, grande: a foto de um lado e, do outro, o nome, o preço, o texto e o botão Comprar agora. Escolha o produto em Produto, buscando pelo nome. Se ele tiver variações (sabor, tamanho, cor), elas aparecem em botões, e ao tocar numa o preço e a foto mudam para os daquela variação — o cliente escolhe e compra ali, sem abrir a página do produto. A variação que abre marcada é a que você escolher em Variação que já vem escolhida, no editor do produto; sem escolha, abre a primeira que tem estoque. Sem Texto, entra a descrição curta do produto. Se o produto sair do ar ou esgotar, o bloco some sozinho.
• Perguntas frequentes — até oito perguntas com resposta, que abrem com um toque. Já vem com quatro que toda loja ouve (prazo, pagamento, rastreio e troca); troque pelo que é verdade no seu negócio. Pergunta sem resposta não aparece. Em Disposição, o título vai em cima ou à esquerda das perguntas. As perguntas também vão para o Google, marcadas como perguntas frequentes.
• Cupom de desconto — um cupom com o código à vista e o botão Copiar. Crie o cupom primeiro em Marketing → Cupons e escreva o mesmo código no bloco. Sem título, o título é o próprio desconto do cupom (“10% de desconto”, “Frete grátis”), e embaixo aparecem as regras que o cupom tem: valor mínimo, validade, um uso por cliente. Se o cupom vencer, esgotar ou for apagado, o bloco some sozinho — cupom anunciado que o checkout recusa é pior do que cupom nenhum. Em Estilo, um cupom recortado no meio da página ou uma faixa na cor da loja.
• Benefícios — os ícones de frete grátis, parcelamento, troca fácil, compra segura. Os textos, os ícones e as cores se editam em Aparência → Benefícios, no campo Os benefícios: abra o bloco e use o botão Editar os benefícios, que leva direto lá. Podem vir um cartão para cada; uma faixa só, branca e com divisórias; uma faixa só na cor da loja, com letras claras; ou soltos, sem caixa, só o ícone e o texto. No celular, eles vêm um por linha, com o ícone à esquerda; para pôr dois por linha, use Faixa de benefícios no celular, em Aparência → No celular. O estilo vale para a loja toda e fica em Estilo dos benefícios, em Aparência → Produtos e filtros; no bloco da home dá para escolher outro só para ela. Em Sobre o banner de cima, escolha Metade sobre o banner para a faixa subir exatamente meia altura por cima do fim do banner, como um cartão flutuando, ou Subir bastante para um recuo maior. Para isso, ponha o bloco logo abaixo do banner. Sem o bloco, a mesma faixa pode entrar sozinha nesse lugar: em Aparência → Benefícios, Onde aparece → Na home, metade sobre o banner principal. Ali também existe Na home, logo abaixo do banner principal, para a faixa vir inteira depois da arte, sem cobrir nada — é a escolha de quem usa a faixa de palavras correndo logo abaixo do banner, porque as duas querem o mesmo lugar e, assim, a de palavras encosta no banner e os benefícios vêm embaixo dela.
• Faixa que passa — as frases correndo de Aparência → Faixa de aviso → Faixa com texto passando, no ponto da página em que você puser o bloco (entre duas vitrines, por exemplo). De ponta a ponta da tela ou na largura do conteúdo, com cantos arredondados. As frases, as cores e a velocidade continuam em Aparência.
• Artigos do blog — os últimos textos publicados, em cartões com a capa, a data, o tempo de leitura e “Ler artigo”. Com a página do blog configurada, o título ganha o “Ver todos”.

Nos blocos de Produtos, Categorias, Marcas e Artigos, a Frase abaixo do título põe uma linha curta embaixo do título da seção, como “Para te salvar em qualquer momento do dia”.

No bloco Produtos, Produtos por linha vem em Igual à loja: segue o “Produtos por linha” de Aparência → Produtos e filtros, o mesmo das categorias — mudou lá, muda aqui, na grade e no carrossel. Escolha um número só para um bloco diferente dos outros. A Ordem dos produtos escolhe quem vem primeiro — os mais recentes, os mais vendidos, o menor preço ou a ordem manual do catálogo; deixada como está, segue a de “Quais produtos”. No bloco Categorias em carrossel, Quantas aparecem de uma vez no carrossel vai de quatro a oito no computador; no celular cabem menos, sozinhas.

Os blocos que mostram o que você cadastra em outra tela — Banners, Benefícios, Categorias, Marcas, Fale com um especialista, Cupom de desconto e Faixa que passa — trazem, ao abrir, um botão que leva direto a essa tela.

As cores de cada bloco

Abra o bloco: depois dos campos dele vem Cores, fundo e borda. Ali ficam a Cor de fundo (chapada, ou em degradê com a Segunda cor), a Cor do texto, a Imagem de fundo, a Borda e a Cor da borda. Nos blocos desenhados em cartões — Fale com um especialista, Por que comprar aqui, Perguntas frequentes, Cupom de desconto e Produto em destaque (o fundo atrás da foto) — há também a Cor do cartão.

O fundo pinta a faixa inteira do bloco, de uma ponta da tela à outra; a cor do cartão pinta só o cartão. A cor do texto vale para títulos e textos — botões e preços continuam com as cores da loja, que é por onde o cliente a reconhece. Campo vazio quer dizer “como o resto da loja”. Para mudar as cores da loja inteira, o lugar é Aparência → Cores e estilos prontos.

Uma ordem que funciona

1. Banner ou Chamada em Primeira tela — diz o que você vende, logo de cara.
2. Benefícios — responde “posso confiar?” logo de cara. Os textos se editam em Aparência → Benefícios: título até 40 caracteres e descrição até 80, com a conta embaixo do campo, para caberem nas três colunas sem ficar compridos.
3. Produtos em destaque — dá o que clicar antes de o cliente pensar em sair.
4. Produto em destaque ou Cupom de desconto, se você tem um carro-chefe ou uma oferta de primeira compra.
5. Categorias — para quem quer navegar em vez de escolher.
6. Chamada — a promoção ou o convite.
7. Por que comprar aqui — responde “por que esta loja e não outra?”.
8. Mais vendidos — a prova social de que outras pessoas compram aqui.
9. Perguntas frequentes ou Fale com um especialista — para quem ainda está em dúvida.
10. Artigos do blog, se você escreve.

A primeira tela

O que aparece antes de rolar precisa responder três perguntas em segundos: o que essa loja vende, por que eu confiaria nela, e o que eu clico agora.

Erros comuns: banner bonito que não diz o que a loja vende; primeira tela só com banner, sem nenhum produto; carrossel de oito banners que ninguém espera terminar.

Banners

Onde: Aparência → Banners (no mapa, em Página inicial), com a loja ao lado.

Os banners vêm agrupados pela faixa em que aparecem: Banner principal (o do alto da página inicial), Meio da página inicial, Antes do rodapé e as três faixas extras. Cada um é uma linha com a arte em miniatura, o nome e o que está ligado — “Só imagem”, “Desligado”, “Escondido no celular”. As setas trocam a ordem dentro da faixa, Editar abre o formulário daquele banner, e Adicionar banner aqui põe um novo na faixa.

No formulário, Tipo é “Imagem com texto” ou “Somente imagem”, que usa a arte inteira sem texto por cima. Prefira “Imagem com texto” quando puder: o texto fica legível em qualquer tela e não estica junto com a imagem. Arte com texto embutido some no celular.

No Banner principal, Passar em carrossel (slider) mostra um banner por vez, com setas e pontos; com Passar sozinho, eles trocam a cada seis segundos e param quando o cliente passa o mouse ou toca na tela. As duas chaves mudam o bloco de banners do topo da página inicial — o mesmo que está em Blocos da página, onde ficam também a altura e a largura.

Os banners vão ao ar quando você salva: não passam pelo rascunho da Aparência.

No bloco de banners, em Blocos da página, Largura escolhe se o banner vai de uma ponta à outra da tela (o padrão) ou se fica na largura do conteúdo da loja, alinhado com as vitrines e com os cantos arredondados. Vale para um banner por linha e para o carrossel; banners lado a lado já seguem a largura do conteúdo.