Entendendo a área de Layout

A área de Layout, dentro da seção Conteúdo do menu lateral, é onde você edita os blocos visuais e de conteúdo da sua loja sem precisar mexer em código. Cada item do submenu de Layout controla uma parte diferente da vitrine, e você altera apenas o que precisar.

Onde fica o Layout

No menu lateral, localize a seção Conteúdo e abra Layout. Ao expandir, aparecem os itens que controlam cada parte da loja.

O que cada item do Layout controla

Cada item edita uma seção específica da loja. O submenu costuma reunir itens como:

• Banners Pequenos
• Banners Médios
• Banners Categorias
• Slideshow principal
• Barra no Cabeçalho
• Informações no Rodapé
• Texto para SEO
• Cupons Disponíveis
• Atributos Comerciais
• Depoimentos
• Redes Sociais (Ícones e Widget)
• Selos de confiança
• Blog

Os itens disponíveis mudam de uma loja para outra. Cada loja tem um layout próprio e pode ter blocos diferentes: algumas têm Blog, outras não, e assim por diante. O importante é entender que cada item edita um trecho específico da vitrine, e você mexe somente no que quiser ajustar.

Este artigo não detalha item por item. Ele mostra o funcionamento geral da área de Layout e traz exemplos que servem de modelo para os demais.

Exemplo prático: editar o Slideshow principal

O Slideshow principal é o carrossel de banners grandes que aparece no topo da página inicial da loja. Praticamente toda loja tem esse bloco, por isso ele é um bom exemplo do passo a passo que se repete nos demais itens de Layout.

1. Como chegar: no menu lateral, abra Conteúdo, depois Layout e clique em Slideshow principal. A tela mostra a lista dos slides já cadastrados; cada linha é um banner do carrossel.

Na lista você encontra:

• As colunas Imagem, Título, Posição e Ação.
• Um ícone de arrastar no início de cada linha, para reordenar os slides.
• No topo, os botões para ativar ou desativar os itens marcados, adicionar um novo (ícone de mais), duplicar e excluir.
• Acima da lista, filtros por Título e Situação.

2. Adicionar ou editar um slide: clique no botão de adicionar (ícone de mais) para criar um novo banner, ou no lápis da coluna Ação para editar um existente.

No formulário você define:

• Imagem (capa): o banner exibido no computador. Clique em Adicionar para enviar. A própria tela recomenda dimensão mínima de 1024px, tamanho de até 2mb, nos formatos JPG, PNG, JPEG, GIF ou MP4.
• Imagem Mobile: uma versão do banner para quem acessa pelo celular.
• Título: o nome do slide, usado para identificá-lo.
• Na aba Dados ficam as demais opções do bloco, como o link de destino e a situação.

3. Salvar: clique no botão de salvar (ícone de disquete), no topo. A alteração passa a valer na loja, e o cliente vê o carrossel atualizado ao acessar a página inicial.

Esse mesmo caminho (abrir o item no Layout, ver a lista, adicionar ou editar um bloco, preencher os campos e salvar) vale como modelo para os demais itens.

Outros exemplos

Para reforçar a ideia de que cada item controla uma parte da loja, veja mais dois blocos comuns:

Blog: algumas lojas têm um blog. Nele você cadastra as postagens (com imagem, título e conteúdo), do mesmo jeito da lista de slides, e elas aparecem em uma seção de postagens na loja.

Barra no Cabeçalho: é a faixa fina no topo do site com avisos como frete e formas de pagamento. Aqui alguns textos aceitam variáveis entre chaves (por exemplo, {module_price_pix}), que puxam informações automaticamente da loja, como a porcentagem de desconto no PIX. Assim, o aviso se atualiza sozinho quando você muda a configuração.

Precisa de ajuda?

Se tiver dúvidas, fale com o nosso suporte.