O que é o construtor
O construtor de vitrines é um editor visual que permite criar cada página da sua loja sem escrever código. As alterações são visualizadas ao vivo no centro da tela. Nada aparece para os clientes até você clicar em Publicar.
Layout do construtor
O construtor possui três áreas:
- Barra lateral esquerda: cinco abas empilhadas como ícones na borda esquerda. De cima para baixo são Mercados (bandeira), Páginas, Seções, Configurações (engrenagem) e o assistente de IA (Amed) fixado na parte inferior.
- Painel de controle: abre ao selecionar uma seção ou bloco e mostra todas as configurações dele.
- Painel de visualização: uma prévia ao vivo da sua loja exatamente como os clientes verão.
Alternando páginas e mercados
Abra a aba Páginas para navegar entre as páginas que você pode editar: Início, Produto, Landing, Coleção, Carrinho, Checkout, Obrigado, Busca, Política, Contato e 404. Para uma descrição de cada página, veja Páginas que você pode editar. Abra a aba Mercados (primeira, ícone de bandeira) para alternar entre seus mercados. Cada mercado mantém seu próprio modelo e histórico de desfazer para cada página, então edições em um mercado não afetam outro.
Visualização, viewport e Inspetor
Um seletor de viewport permite visualizar em diferentes larguras com os botões Tela cheia, Desktop e Mobile. O seletor só mostra as opções que cabem na sua janela atual, então em telas estreitas alguns botões desaparecem. A barra superior também tem um botão Visualizar (ícone de olho) que abre sua loja ao vivo em uma nova aba do navegador, e um botão Sair do construtor.
O modo Inspetor fica ativado por padrão (o ícone de cursor na barra superior fica destacado). Enquanto estiver ativado, clicar em qualquer elemento na visualização seleciona instantaneamente aquela seção ou bloco e o abre no painel de controle, sendo a forma mais rápida de acessar algo sem rolar a barra lateral. Clique no botão Inspetor para desativar.
Adicionando uma seção
- Abra a aba Seções da página atual.
- Clique no botão Adicionar seção (ícone de círculo com mais) na lista, ou abra o menu de uma seção e escolha Adicionar seção antes ou Adicionar seção depois.
- Um seletor será aberto listando todos os tipos de seção que você ainda pode adicionar nesta página. Clique em um para adicionar.
Cada tipo de seção tem um máximo por página. Quando um tipo atinge o limite, ele some do seletor, e quando o espaço está cheio o botão Adicionar seção é desativado com um aviso de que o máximo foi atingido. Os tipos de seção também são específicos por página (por exemplo, herói ou newsletter só aparecem na Início). O catálogo completo de tipos e limites está em Seções e blocos.
Adicionando um bloco dentro de uma seção
Selecione uma seção e, no painel de controle dela, clique em Adicionar bloco. Blocos são os elementos dentro de uma seção: texto, imagens, botões, grupos de layout, divisores e outros. Os tipos de bloco disponíveis e a quantidade permitida variam conforme a seção.
Menu da seção (copiar, duplicar e mais)
Para acessar todas as ações de uma seção, selecione-a e clique no ícone de menu no topo do painel de controle, ou clique com o botão direito na seção na barra lateral. O menu contém:
- Copiar: copia toda a seção (conteúdo e estilo).
- Copiar apenas o estilo: copia apenas o estilo visual.
- Colar: cola uma seção copiada. A dica mostra onde ela será inserida (Depois, Dentro ou Substituir). Fica desativado com um motivo quando nada foi copiado, o limite foi atingido ou o tipo não é permitido naquele local.
- Colar apenas o estilo: aplica o estilo copiado à seção selecionada. Fica desativado em caso de tipo incompatível ou quando nada foi copiado.
- Duplicar: insere uma cópia logo abaixo do original, apenas na página atual. Fica desativado quando o limite por página da seção é atingido.
- Ocultar / Mostrar: alterna a visibilidade. Seções ocultas permanecem no seu modelo, mas não aparecem para os clientes.
- Excluir: remove a seção. Desfazer traz de volta.
As linhas da barra lateral também têm um ícone de olho (Ocultar/Mostrar) e um ícone de lixeira (Excluir) diretamente. Seções obrigatórias não podem ser ocultadas ou excluídas, então Informações do produto na página Produto e Informações de landing na página Landing não têm ícone de lixeira.
Reordenando seções e blocos
Na lista de Seções, arraste uma linha de seção para cima ou para baixo para mudar sua posição na página. A visualização é atualizada imediatamente. Os blocos são reordenados da mesma forma, arrastando dentro do painel de controle.
Aplicar uma seção a todas as páginas
Cabeçalho, Rodapé, Barra de anúncio e Código personalizado aparecem em todas as páginas. Para aplicar uma cópia editada em todos os lugares, abra o menu da seção e escolha Aplicar a todas as páginas. Isso sobrescreve a seção correspondente em todas as páginas do mercado atual que já a incluam (páginas sem ela são ignoradas). A ação é aplicada direto na sua loja ao vivo, então é irreversível. O construtor pede confirmação antes. O assistente de IA também pode executar essa ação para você, explicado em Ações do construtor de IA.
Desfazer, refazer e salvar
A barra superior tem botões de Desfazer e Refazer. O histórico é separado por mercado e por página, então desfazer na Início não afeta a página Produto. Atalhos de teclado: Cmd/Ctrl + Z para desfazer, Cmd/Ctrl + Shift + Z ou Cmd/Ctrl + Y para refazer, e Cmd/Ctrl + S para publicar.
Clique em Publicar (canto superior direito) para colocar suas alterações no ar. O botão fica desativado quando não há alterações não salvas. A publicação é por mercado e por página, então publicar Início não publica a página Produto.
O que conferir antes de publicar
- Altere para a visualização Mobile e role toda a página, pois a maioria dos clientes usa o celular.
- Verifique o contraste do texto com a cor de fundo de cada seção.
- Garanta que todo bloco de imagem tenha um arquivo de mídia selecionado, pois espaços reservados vazios aparecem como espaço em branco na loja ao vivo.
- Confirme que botões e itens de menu levam aos destinos corretos.
Para deixar o assistente de IA criar e editar seções para você, veja Criando com o assistente de IA.