Loja baseada em blocos
Neste artigo vamos te mostrar o que é a loja baseada em blocos, quais tipos de página e de bloco você pode usar, e como funcionam o rascunho, a pré-visualização e a publicação.
O QUE É A LOJA BASEADA EM BLOCOS?
Com a loja baseada em blocos você monta sua loja a partir de blocos, como uma barra de navegação, estantes de produtos, HTML incorporado e um rodapé, sem escrever código.
Com ela você pode:
- Compor o Início e páginas adicionais por conta própria, na ordem que quiser.
- Trabalhar em um rascunho, vê-lo como seus visitantes vão ver e publicá-lo quando estiver pronto. Seus visitantes nunca veem um trabalho pela metade.
- Mudar cores, fontes e formas em um só lugar (o tema).
- Criar páginas personalizadas com seu próprio endereço e suas próprias configurações para buscadores, por exemplo para campanhas, autores ou conteúdo de destino.
- Adicionar um pop-up ao Início e um aviso em todas as páginas de produto.
Tudo isso é editado em Painel de Controle > Configurações > Interface > Aparência.
OS TRÊS TIPOS DE PÁGINA
Cada página da sua loja é de um destes três tipos. O tipo define onde a página fica e quais blocos ela aceita.
| Tipo de página | Onde fica | Blocos que aceita | Configurações de SEO próprias |
|---|---|---|---|
| Início | O catálogo da sua loja, {domínio_da_sua_loja}/library | Barra de navegação, estantes de produtos, HTML incorporado, rodapé e pop-up | Sim |
| Página de produto | Todas as páginas de produto da loja (uma única página compartilhada) | Somente o aviso da página de produto | Não (cada produto traz as suas) |
| Página personalizada | {domínio_da_sua_loja}/p/ seguido do endereço que você escolher | Barra de navegação, estantes de produtos, HTML incorporado e rodapé | Sim, e uma opção para ocultá-la dos buscadores |
Sua loja tem um único Início e uma única página de produto, e pode ter quantas páginas personalizadas você precisar. Mostramos como criá-las em Criar páginas personalizadas e configurar o SEO.
OS TIPOS DE BLOCO
| Bloco | O que faz | Onde pode ficar | Mais informações |
|---|---|---|---|
| Barra de navegação | A barra superior com o logo, a busca, o login e o carrinho. Você pode usar filtros automáticos do catálogo ou montar um menu personalizado. | Início e páginas personalizadas (fixa no topo) | Configurar a barra de navegação e o rodapé |
| Rodapé | Ícones de redes sociais, links legais e o botão de arrependimento (opcional). | Início e páginas personalizadas (fixo embaixo) | Configurar a barra de navegação e o rodapé |
| Estante de produtos | Uma fileira de produtos escolhidos com filtros como gênero, autor, ano ou títulos gratuitos. | Início e páginas personalizadas | Adicionar estantes e HTML incorporado |
| HTML incorporado | Seu próprio HTML, estilos e scripts, exibidos exatamente como você os escrever. | Início e páginas personalizadas | Adicionar estantes e HTML incorporado |
| Pop-up | Uma mensagem que abre sobre o Início, com um horário e uma frequência. | Somente o Início | Adicionar um pop-up e um aviso na página de produto |
| Aviso da página de produto | Um texto curto exibido na página de cada produto. | Somente a página de produto | Adicionar um pop-up e um aviso na página de produto |
A barra de navegação e o rodapé mostram uma etiqueta Fixo na lista de blocos: você pode editá-los, mas não movê-los. O conteúdo deles é compartilhado por todas as páginas. Nas páginas personalizadas você pode ocultá-los somente para aquela página. O Início sempre mantém os dois visíveis.
O TEMA
O tema controla a aparência de toda a sua loja:
- Quatro cores: cabeçalho e rodapé, botões e links, fundo e texto.
- As fontes e os tamanhos de texto.
- A forma dos cartões e dos botões: cantos, bordas, sombras e espaçamento.
Ele parte das cores atuais da sua loja. Você pode aplicar um tema pronto (Default, Modern, Editorial ou Nocturne) e ajustá-lo. O tema tem seu próprio editor e sua própria publicação. Explicamos em Personalizar o tema da loja.
COMO FUNCIONA A EDIÇÃO
Para editar uma página, vá em Painel de Controle > Configurações > Interface > Aparência e clique em Editar. Funciona da mesma forma em todas as páginas:
1. As alterações são salvas automaticamente como rascunho, alguns segundos depois da sua última edição. Não existe botão de salvar para os blocos.
2. Uma pré-visualização ao vivo mostra a página como seus visitantes a veriam, com o rascunho aplicado. O link Ver rascunho abre o rascunho completo em uma nova aba.
3. Publicar transforma o rascunho na versão que seus visitantes veem.
4. Reverter para a versão publicada descarta o rascunho e volta ao que está no ar.
Uma etiqueta ao lado do nome da página indica em que estado ela está.
| Etiqueta | Significado |
|---|---|
| Rascunho | A página nunca foi publicada. Seus visitantes não podem vê-la. |
| Alterações não publicadas | A página está publicada e o rascunho tem alterações que seus visitantes ainda não veem. |
| Publicado | O rascunho e a versão no ar coincidem. No lugar da etiqueta aparece um link para ver a página. |
O passo a passo está em Editar e publicar uma página em Aparência.
O QUE CADA ALTERAÇÃO PRECISA PARA CHEGAR AOS SEUS VISITANTES
Nem toda alteração passa por Publicar. Confira esta tabela se você fez uma alteração e sua loja continua igual.
| Alteração | O que faz chegar aos seus visitantes | Quando |
|---|---|---|
| Blocos de uma página (barra de navegação, estantes, HTML incorporado, rodapé) | Publicar nessa página | Depois de publicar |
| Aviso da página de produto | Publicar na página de produto | Depois de publicar |
| Pop-up | A publicação própria, no editor do pop-up (antes você deve publicar o Início uma vez) | Depois de publicar |
| Tema (cores, tipografia, forma) | Publicar tema, no editor do tema | Depois de publicar |
| Título SEO, descrição SEO e imagem Open Graph | Salvar nas configurações da página | Imediatamente |
| Botão de arrependimento | O interruptor salva sozinho | Imediatamente, mas os visitantes só o veem quando sua loja já está no ar com blocos |
| Exclusão de conteúdo adulto | O interruptor salva sozinho | Imediatamente |
⚠️ Somente a primeira publicação do Início coloca sua loja no ar com blocos. Até você publicar o Início, seus visitantes continuam vendo a loja anterior e as páginas personalizadas aparecem como "não encontradas". Publicar o Início não publica o tema: lembre-se de publicá-lo também.
💡 Enquanto isso, você pode editar e pré-visualizar com calma: seus visitantes não percebem nada até você publicar o Início.
O QUE CONTINUA FUNCIONANDO
A loja baseada em blocos mantém o rastreamento, o suporte e o consentimento de cookies da sua loja.
| Recurso | Como se comporta com blocos |
|---|---|
| Google Tag Manager (contêiner da loja) | Carrega quando você preenche o ID do contêiner em Configurações > Marketing e sua loja tem a conexão com o Google Analytics. Se o aviso de cookies estiver ativo, espera o visitante aceitar as análises. |
| Google Analytics e Facebook Pixel | Carregam quando configurados, com a mesma regra de consentimento. |
| Chat de suporte | Continua ativo por padrão, como antes. Não aparece nas páginas de checkout, carrinho nem faturamento. |
| Botão flutuante de perguntas frequentes | Mostra o botão flutuante FAQs quando você o ativa em Configurações > Avançado. |
| Consentimento de cookies | O aviso e o selo carregam quando sua loja tem o recurso ativo. |
| Verificação do Google Search Console | A tag continua sendo exibida a partir de Configurações > Marketing. |
💡 O rastreamento também carrega na pré-visualização do editor e na pré-visualização do rascunho, então suas sessões de edição podem aparecer nas suas análises.
O QUE NÃO É TRANSFERIDO
| Item | O que acontece com blocos |
|---|---|
| CSS personalizado | Não é exibido. |
| Código personalizado de cabeçalho e de rodapé | Não é exibido. Somente a tag do Google Search Console é mantida. |
| Código personalizado de suporte (o chat que substitui o chat de suporte padrão) | Não é exibido. A loja usa o chat de suporte padrão. |
| Widgets anteriores posicionados acima do cabeçalho | Não são convertidos. Com blocos não há espaço acima da barra de navegação. |
| Cores anteriores do template e das estantes | São ignoradas. O tema as substitui. |
Se você dependia de código personalizado, precisará refazer essa parte com blocos, com o tema ou com HTML incorporado. Personalizar o tema da loja e Adicionar estantes e HTML incorporado vão te ajudar.
⚠️ Quando sua loja passa a usar blocos, as telas anteriores de estantes, menu e widgets ficam bloqueadas e tudo é gerenciado em Aparência.
PERGUNTAS FREQUENTES
Preciso saber programar? Não. O HTML incorporado é opcional, para quem quer colar o próprio código.
Posso testar sem que meus visitantes percebam? Sim. Depois que o recurso é habilitado, seus visitantes continuam vendo a loja anterior até você publicar o Início. Enquanto isso, você pode editar e pré-visualizar.
Por que minha loja continua igual depois de publicar? Confira qual alteração você fez. O tema e o pop-up são publicados separadamente, e o SEO e a imagem Open Graph são aplicados ao clicar em Salvar. Veja a tabela acima.
O botão de arrependimento aparece automaticamente em lojas da Argentina? Não. Ele fica desativado em todas as lojas e você o ativa no editor do rodapé. O texto de ajuda indica que ele é obrigatório na Argentina pela Resolución 424/2020.
Existe um limite de estantes ou de páginas personalizadas? O editor não define um máximo de estantes, blocos nem páginas personalizadas. Cada estante mostra até 8 produtos, e a página carrega as estantes em grupos conforme o visitante rola (3 primeiro e depois mais 5 a cada vez).
Posso voltar para a loja anterior? Escreva para [email protected] e vamos ver juntos.
ARTIGOS RELACIONADOS
- Editar e publicar uma página em Aparência
- Configurar a barra de navegação e o rodapé
- Adicionar estantes e HTML incorporado
- Personalizar o tema da loja
- Criar páginas personalizadas e configurar o SEO
- Adicionar um pop-up e um aviso na página de produto
Esperamos que este tutorial tenha sido simples para você. Se tiver dúvidas, escreva para [email protected].