Seções compartilhadas e de sistema
Este artigo explica as seções que você pode adicionar a qualquer tipo de página, além das seções fixas que acompanham cada página de sistema. Para saber como adicionar e organizar seções, veja Seções e blocos.
Seções que você pode adicionar a qualquer página
Essas aparecem no seletor Adicionar em todos os tipos de página.
Texto
Uma seção de texto independente para título ou parágrafo. Até 3 por página. Todas as configurações de tipografia estão documentadas em Componentes de layout.
Imagem
Uma seção de imagem independente. Até 3 por página. Configure largura (ajustar, preencher ou porcentagem personalizada), alinhamento, proporção (automática, retrato, quadrada ou paisagem), ajuste (cobrir ou conter), raio de borda, espaçamento interno e um link opcional ao clicar.
Divisor
Uma linha separadora. Até 10 por página. Configure espessura, comprimento (porcentagem do contêiner), estilo das extremidades, alinhamento, esquema de cores, largura (ajustar ou preencher) e espaçamento interno. Veja Componentes de layout.
Ícones de redes sociais
Uma linha independente de ícones de plataformas sociais (um por página). O visual pode ser Ícones (controle total de forma e paleta) ou Apps (cada plataforma como um círculo colorido com a marca). O modo pode ser Em linha (no fluxo da página) ou Fixo (ancorado à borda esquerda ou direita da tela, sempre visível ao rolar), com opção de voltar para em linha no celular. Plataformas suportadas: Facebook, Instagram, Threads, X, TikTok, Snapchat, YouTube, LinkedIn, Pinterest, Tumblr, WhatsApp e Telegram, cada uma inserida como nome de usuário (WhatsApp como número de telefone). Configurações: tamanho do ícone (12 a 64 px), espaçamento (0 a 48 px), alinhamento, forma (nenhum, círculo, arredondado, quadrado), estilo de preenchimento (sólido ou contorno), tamanho do contêiner (26 a 80 px), paleta (cores da marca, mono ou cor hex personalizada) e efeito ao passar o mouse (nenhum, marca, escala, levantar, opacidade).
Código personalizado
Uma seção para HTML, CSS e JavaScript puro (até 5000 caracteres cada, máximo de 2 por página). Seu HTML é renderizado dentro de um contêiner exclusivo, seu CSS é automaticamente restrito a esse contêiner para não afetar outras seções, e seu JavaScript roda em um escopo isolado com o contêiner passado como parâmetro, carregado após a página estar pronta. Útil para widgets e incorporações de terceiros.
FAQ
Um acordeão de perguntas e respostas. Disponível nas páginas inicial e de produto. Defina esquema de cores, largura (página ou total) e espaçamento interno.
Seções de páginas de sistema
Cada página de sistema vem com uma seção obrigatória que define sua função principal. Essas não podem ser excluídas, apenas configuradas, mas você ainda pode adicionar seções de Texto, Imagem, Divisor e outras seções de qualquer página ao redor delas.
- Produtos da coleção (página de coleção): a grade de produtos de uma coleção. Configure colunas no desktop, colunas no celular (1 ou 2), espaçamento, largura, esquema de cores e o layout do cartão de produto.
- Produtos da busca (página de busca): a grade de resultados, usando os mesmos controles de grade e cartão de produto dos Produtos da coleção.
- Contato (página de contato): um formulário com campos de nome, e-mail, assunto e mensagem. Defina o espaçamento entre campos, o rótulo do botão de envio e seu estilo (primário ou secundário). Você pode colocar blocos de Texto e Grupo ao redor do formulário.
- Carrinho (página de carrinho): o carrinho de compras com itens, totais e acesso ao checkout.
- Checkout (página de checkout): o fluxo de finalização de compra com campos do cliente e de pagamento.
- Confirmação de pedido (página de agradecimento): o resumo pós-compra que mostra detalhes do pedido, informações do cliente, totais e métodos de envio e pagamento selecionados.
- Política (página de política): exibe o conteúdo da sua página legal (título e corpo). O texto da política é escrito nas configurações da loja; esta seção controla apenas a aparência.
- 404 (página 404): a seção de página não encontrada, com título, texto descritivo e um botão para voltar à página inicial.
Para as seções das páginas inicial, de produto e de destino, veja Seções da página inicial e Seções de produto e de página de destino. Para cabeçalho, rodapé e barra de anúncio, veja Seções globais.