Adicionar estantes e HTML incorporado

Neste artigo vamos te mostrar como adicionar e configurar uma estante de produtos e um bloco de HTML incorporado na página inicial ou em uma página personalizada da sua loja.

💡 Se a sua loja ainda usa o editor anterior, consulte Configurar as estantes, que se aplica a esse editor (legado).

ONDE ENCONTRAR AS ESTANTES E O HTML INCORPORADO​

As estantes e o HTML incorporado são blocos que você adiciona a uma página a partir de Aparência.

1. Acesse o seu Painel de Controle e vá em Configurações > Interface > Aparência.

2. Abra a página que você quer editar (por exemplo, a página inicial ou uma página personalizada) com o botão Editar.

3. Clique em Adicionar bloco e escolha a opção de que você precisa: Estante de produtos ou HTML incorporado.

4. Quando terminar, clique em Publicar para que as alterações apareçam na sua loja.

💡 As alterações só chegam à loja no ar quando você publica a página. Para ver o processo completo, consulte Editar e publicar uma página em Aparência.

ESTANTE DE PRODUTOS​

Uma estante é uma fileira de produtos com título, filtros e uma ordem. Serve, por exemplo, para destacar seus lançamentos, seus títulos gratuitos ou os livros de um autor.

Adicionar uma estante​

1. Na página que você está editando, clique em Adicionar bloco e escolha Estante de produtos.

2. Escreva o Título da prateleira. É o cabeçalho que seus visitantes verão acima da fileira. É obrigatório e aceita até 255 caracteres.

3. Em Filtros, adicione pelo menos um filtro (veja a próxima seção).

4. Escolha a Ordem das publicações.

5. Clique em Adicionar bloco para salvar a estante no rascunho da página.

⚠️ Uma estante nova não é salva no rascunho até que você clique em Adicionar bloco, e não é possível salvá-la sem pelo menos um filtro. Uma estante que já existe é salva automaticamente enquanto você a edita.

Editar uma estante existente​

1. Na lista de blocos da página, localize a linha da estante. Você verá o título e a origem dela, que é tirada do primeiro filtro.

2. Clique em Editar para abrir o editor da estante.

3. Faça as alterações de que precisar. Elas são salvas automaticamente, mas só aparecem na loja quando você clicar em Publicar.

Na mesma linha você também pode:

💡 Se você descartar o rascunho antes de publicar, uma estante removida volta a aparecer.

Filtros disponíveis​

Cada filtro tem um tipo e, na maioria dos casos, um valor. Para adicionar outro filtro, clique em Adicionar filtro. Para remover um, use o botão de remover da linha dele.

💡 Nos filtros com busca, os resultados aparecem a partir do terceiro caractere digitado.

Regras para combinar filtros:

• Os filtros se combinam: um produto precisa atender a todos os filtros para aparecer na estante.
• Cada tipo de filtro pode ser usado apenas uma vez por estante. Para mostrar dois autores, crie duas estantes ou use uma classificação que os agrupe.
• Todos os filtros que precisam de um valor devem tê-lo antes de salvar.
• Se o primeiro filtro for Meu conteúdo, essa estante é mostrada apenas para leitores com sessão iniciada.

Ordem das publicações​

O seletor Ordem das publicações oferece três opções. A opção padrão é Mais recente primeiro.

⚠️ Se a estante incluir o filtro Novidades ou Em promoção, o seletor não aparece, porque esses filtros aplicam a sua própria ordem e ela não pode ser personalizada.

O que seus visitantes veem​

Ocultar conteúdo adulto​

Na página inicial, a aba Blocos inclui um interruptor de Exclusão de conteúdo adulto. Ele oculta de todas as estantes o conteúdo com o público "Somente adultos". Esse interruptor é salvo imediatamente, sem precisar publicar.

HTML INCORPORADO​

O bloco de HTML incorporado mostra o código que você colar, exatamente no lugar em que ele estiver na lista de blocos. É útil para conteúdo que os outros blocos não cobrem, como um formulário, um banner ou um widget de outro serviço.

Adicionar um bloco de HTML incorporado​

1. Na página que você está editando, clique em Adicionar bloco e escolha HTML incorporado.

2. Cole ou escreva o seu código no campo Conteúdo HTML.

3. Confira o contador de caracteres que aparece abaixo do campo.

4. Clique em Publicar para que o bloco apareça na sua loja.

Como funciona o editor​

💡 O bloco é criado quando você começa a digitar. Se você abrir o editor e sair sem digitar nada, o rascunho não muda. Um bloco vazio não mostra nada aos visitantes.

⚠️ O código é mostrado como você o escreve: scripts, iframes e estilos são executados exatamente como estão escritos, tanto na pré-visualização quanto na loja publicada. O editor não limpa nem limita o código. Cole apenas código em que você confie.

Como o código é isolado​

Por padrão, a loja mantém o HTML incorporado separado do resto da página:

• Os estilos da sua loja não chegam ao código incorporado. Um título ou um botão dentro do bloco não assume as fontes, as cores nem as formas da sua loja.
• Os estilos do código incorporado não vazam para o resto da página. Uma regra como "todos os links em vermelho" afeta apenas o bloco.
• Os scripts do bloco só conseguem encontrar elementos que estejam dentro do bloco.

⚠️ Se o seu HTML carregar um script externo (uma tag script com um endereço de origem), esse bloco não fica isolado e é executado diretamente na página. As ferramentas de terceiros que precisam de acesso a toda a página, como widgets de chat ou de reservas, funcionam assim.

Se você tinha widgets no editor anterior​

Ao ativar a loja baseada em blocos, os widgets posicionados na parte superior da loja se tornam blocos de HTML incorporado. Os widgets posicionados acima da barra de navegação não são convertidos, porque os blocos não têm lugar nessa área.

A loja baseada em blocos carrega apenas os próprios estilos e código, então um widget que dependia da loja anterior pode aparecer sem estilos ou deixar de funcionar. A solução é sempre a mesma: tornar o HTML autossuficiente, com tudo de que ele precisa.

LIMITES​

PERGUNTAS FREQUENTES​

Por que uma estante não aparece na minha loja?​

Verifique estas causas em ordem:

1. A página não está publicada ou a loja ainda não está no ar. Os visitantes veem apenas a versão publicada.
2. A estante está oculta (ícone de olho).
3. Nenhum produto atende aos filtros para esse visitante. Estantes vazias não são mostradas.
4. A estante começa com o filtro Meu conteúdo. Visitantes sem sessão iniciada não a veem.

Por que a minha estante não tem seletor de ordem?​

Porque ela inclui o filtro Novidades ou Em promoção, que definem a sua própria ordem.

Por que a minha estante não tem o link Ver mais?​

O link aparece apenas quando a estante mostra 8 produtos. Se houver menos resultados, não há mais nada a mostrar.

Posso incorporar um script de terceiros?​

Sim. Adicione a tag script ao HTML incorporado. Nesse caso, o bloco é executado diretamente na página, sem isolamento.

ARTIGOS RELACIONADOS​

• Loja baseada em blocos
• Editar e publicar uma página em Aparência
• Configurar a barra de navegação e o rodapé
• 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].