Seções versus blocos
Uma seção é uma linha de largura total em uma página. As seções se empilham verticalmente e podem ser reordenadas, ocultadas ou excluídas. Um bloco é um pedaço de conteúdo dentro de uma seção: um bloco de texto, uma imagem, um botão ou um grupo de layout. Algumas seções contêm um conjunto fixo de blocos (como o cabeçalho), enquanto outras permitem adicionar, remover e reordenar blocos livremente.
Seções globais (aparecem em todas as páginas)
Barra de anúncios
Uma faixa promocional slim no topo da página. Você pode adicionar até 7 mensagens de anúncio individuais, cada uma com seu próprio texto. As mensagens circulam em dois modos: Ticker (rolagem horizontal contínua) ou Slider (transições distintas com um intervalo configurável de 2 a 10 segundos). As opções adicionais incluem direção do texto (esquerda para direita ou direita para esquerda), um caractere separador entre mensagens do ticker, tamanho da fonte (10 a 30 px) e esquema de cores. Você pode adicionar no máximo 2 barras de anúncios por página.
Cabeçalho
A barra de navegação principal. Ela contém cinco blocos fixos que não podem ser adicionados, removidos ou reordenados, apenas configurados:
- Logo: exibe a imagem da marca da sua loja. Defina a posição (esquerda, centro ou direita), largura (20 a 300 px), altura (20 a 300 px) e preenchimento.
- Menu: o menu de navegação. Escolha um menu criado em Menus, depois defina sua posição horizontal, em qual linha do cabeçalho fica (superior ou inferior), tipo de exibição (drawer, mega menu ou menu suspenso) e esquema de cores para o painel suspenso. Uma opção de barra de menu adiciona uma faixa colorida de largura total por trás da linha inferior.
- Pesquisa: um ícone de pesquisa que abre uma sobreposição de pesquisa de produtos. Defina sua posição horizontal (esquerda ou direita) e em qual linha fica.
- Carrinho: o ícone de carrinho com um distintivo de contagem de itens. Opções de tipo de exibição: Drawer (um painel lateral), Menu suspenso (um mini carrinho no cabeçalho) ou Página (redireciona para a página completa do carrinho). Cada tipo tem seu próprio seletor de esquema de cores.
- Localização: um seletor de país e idioma para lojas com múltiplos mercados. Alterne para mostrar o nome e a bandeira do país, e defina a posição e a linha.
As configurações a nível de cabeçalho incluem: Comportamento fixo (Rolar (fixo inteligente: oculta ao rolar para baixo, reaparece ao rolar para cima), Sempre (permanentemente fixo no topo), Reduzir (encolhe ao rolar) ou Nunca (rola com a página)), além de Largura (restrita à página ou borda a borda), esquema de cores, preenchimento superior e inferior e um campo de CSS personalizado. Máximo de 1 cabeçalho por página.
Rodapé
A seção inferior de cada página. Você pode adicionar, remover e reordenar blocos dentro do rodapé. Blocos de rodapé disponíveis:
- Sobre Nós: uma área de história da marca contendo seu logo, blocos de texto, informações de contato e grupos de layout opcionais. Suporta controles de direção, alinhamento, espaçamento, largura e preenchimento. Máximo de 1 por rodapé.
- Menu: um menu de navegação exibido como uma lista de links. Selecione um menu criado em Menus. Máximo de 1 por rodapé.
- Ícones de redes sociais: uma linha de ícones de plataformas sociais. Plataformas suportadas: Facebook, Instagram, Threads, X (Twitter), TikTok, Snapchat, YouTube, LinkedIn, Pinterest, Tumblr, WhatsApp e Telegram. Configure o tamanho do ícone (12 a 64 px), espaçamento (0 a 48 px), formato (nenhum, círculo, arredondado ou quadrado), estilo de preenchimento de formato (sólido ou contorno), tamanho do contêiner (26 a 80 px), paleta de cores (cores da marca, monocromático ou uma cor personalizada) e efeito de hover (nenhum, marca, escala, elevação ou opacidade). Máximo de 1 por rodapé.
- Ícones de pagamento: mostra automaticamente ícones para os métodos de pagamento habilitados na sua loja (Visa, Mastercard, PayPal, Stripe, Apple Pay e assim por diante). Sem necessidade de configuração. Máximo de 1 por rodapé.
- Links de privacidade: links para suas páginas legais (Política de privacidade, Termos de serviço, Política de reembolso, Política de envio), gerados automaticamente a partir das políticas da sua loja. Defina o tamanho da fonte (12 a 20 px) e o caso do texto (padrão ou maiúsculas). Máximo de 1 por rodapé.
- Copyright: exibe o ano de copyright e o nome da sua loja, com uma linha opcional "Desenvolvido pelo Storeep". Defina o tamanho da fonte (12 a 20 px), o caso do texto e se deve mostrar a atribuição do Storeep. Máximo de 1 por rodapé.
- Texto, Divisor e Grupo: os mesmos componentes de layout disponíveis em outras seções. Veja Componentes de layout para detalhes completos.
Seções da página inicial
Herói
Uma seção de banner de viewport completo com um plano de fundo de mídia (imagem ou vídeo). Dois modos de exibição: Único (um plano de fundo) e Dividido (dois painéis de mídia lado a lado). Predefinições de altura: Pequeno (50% da altura do viewport), Médio (70%), Grande (90%), Tela cheia (a altura total da tela), Imagem (adota o tamanho natural da sua mídia para que toda a imagem seja visível) ou Personalizado (uma porcentagem definida pelo usuário). Os blocos de conteúdo se sobrepõem à mídia e suportam os mesmos controles de layout de um grupo: direção, alinhamento, espaçamento e preenchimento. Uma sobreposição com preenchimento sólido ou gradiente pode ser aplicada sobre a mídia. Quando colocado diretamente após o cabeçalho e a opção Cabeçalho transparente estiver habilitada, o cabeçalho se mistura ao herói e usa seu esquema de cores.
Produtos em destaque
Uma grade ou carrossel de produtos originado do seu catálogo. Opções de fonte: Manual (você escolhe produtos específicos), Mais recentes (os produtos adicionados mais recentemente) ou Mais vendidos (produtos ordenados por volume de vendas). Configure o número de colunas no desktop (1 a 8), colunas no celular (1 ou 2), espaçamento entre cartões, largura da seção e esquema de cores. Contém um bloco de cartão de produto que define o layout de cada cartão (imagem, título, preço, classificação e botão de compra), além de blocos opcionais de texto e divisor acima ou abaixo da grade.
Apresentação de slides
Um carrossel de imagem ou vídeo de largura total. Cada slide pode ter seu próprio plano de fundo de mídia, sobreposição e blocos de conteúdo (texto, botão, grupo e divisor). Até 7 slides por apresentação de slides, com um máximo de 2 seções de apresentação de slides por página. Disponível apenas na página inicial.
Newsletter
Um formulário de assinatura de e-mail. Modos de exibição: Incorporado (embutido na página) ou Fixo (um widget flutuante ancorado no canto inferior). Os blocos internos incluem texto (títulos e descrições), um campo de entrada de e-mail (com rótulo, espaço reservado e aviso de privacidade opcionais), um botão de assinatura (ícone ou rótulo de texto, com uma opção de mesclá-lo visualmente no campo de entrada), divisores e grupos. Você também pode configurar o título e a mensagem de sucesso mostrados após alguém se inscrever.
Seções da página do produto
Informações do produto
A seção principal de detalhes do produto. Contém a galeria de mídia do produto (imagens e vídeos), a área de detalhes do produto (título, preço, distintivo de economia, variantes, formulário de compra, botão de pedido pelo WhatsApp e temporizador de contagem regressiva) e o bloco de descrição do produto. O formulário de compra suporta um layout incorporado ou pop-up, um alternador de resumo de pedido, texto de título e subtítulo personalizado, rótulos de botão personalizados para Adicionar ao carrinho e Comprar agora, um gancho de mensagem de presente e um temporizador de contagem regressiva para expiração do desconto. Esta seção é obrigatória na página do produto.
Produtos relacionados
Uma grade de produtos mostrando produtos relacionados ao produto atualmente visualizado, com base na mesma coleção ou selecionados manualmente. Usa o mesmo sistema de cartão de produto que a seção de Produtos em destaque.
Avaliações
Exibe as avaliações dos clientes para o produto atual. Contém um bloco de resumo de avaliações (classificação média em estrelas, contagem total de avaliações e barras de distribuição de estrelas opcionais) e um bloco de formulário de avaliação (um botão que abre um painel de envio de avaliação). As avaliações são moderadas antes de serem publicadas.
Seções da página de destino
Informações da página de destino
A seção de vendas do produto para páginas de destino. Semelhante a Informações do produto, mas com layout para uma página de vendas dedicada: combina o formulário do produto, mídia, descrição e blocos de conteúdo relacionado em um único layout focado. Esta seção é obrigatória na página de destino.
Seções da página de coleção
Produtos da coleção
A grade de produtos para uma página de coleção. Os produtos exibidos são extraídos da coleção para a qual o comprador navegou. Você pode configurar colunas no desktop (1 a 8), colunas no celular (1 ou 2), espaçamento entre cartões, opções de ordenação, uma barra lateral de filtragem e o layout do cartão de produto. Esta seção é obrigatória na página de coleção.
Seções da página de pesquisa
Pesquisa de produtos
A grade de produtos para resultados de pesquisa. Renderiza produtos que correspondem à consulta de pesquisa do comprador. Usa a mesma configuração de cartão e grade que a seção de Produtos da coleção. Esta seção é obrigatória na página de pesquisa.
Seções da página de contato
Contato
Um formulário de contato com campos de nome, e-mail, assunto e mensagem. Você pode adicionar blocos de texto e grupos de layout acima ou abaixo do formulário. O rótulo do botão de envio e o estilo (primário ou secundário) são configuráveis. As mensagens enviadas são enviadas para o endereço de e-mail da sua loja. Esta seção é obrigatória na página de contato.
Seções disponíveis em todas as páginas
Texto
Uma seção de texto independente para um título, parágrafo ou bloco de conteúdo formatado. Até 3 seções de texto por página. Veja Componentes de layout para todas as configurações de texto.
Imagem
Uma seção de imagem independente. Até 3 seções de imagem por página. Configure largura, alinhamento, proporção (automático, retrato 3:4, quadrado 1:1 ou paisagem 4:3), ajuste (cobrir ou conter), arredondamento de cantos, preenchimento e um link de clique opcional.
Divisor
Uma linha separadora horizontal ou vertical. Até 10 seções de divisor por página. Configure espessura, comprimento (como porcentagem do contêiner), estilo de extremidade (afiado ou arredondado), alinhamento, esquema de cores, largura (ajustar ou preencher) e preenchimento. Veja Componentes de layout para detalhes completos.
Perguntas frequentes
Uma seção de perguntas frequentes em estilo acordeão. Adicione quantos pares de pergunta e resposta precisar. Configure o esquema de cores, a largura da seção e o preenchimento.
Código personalizado
Uma seção para HTML, CSS e JavaScript brutos. Seu HTML é inserido dentro de um contêiner único na página. O CSS que você escreve é automaticamente limitado a esse contêiner para que seus estilos não afetem outras seções. O JavaScript é executado em um escopo isolado e recebe o contêiner como sua única referência, carregado após o conteúdo da página estar pronto para que suas consultas sejam resolvidas corretamente. Máximo de 2 seções de código personalizado por página. Útil para incorporar widgets de terceiros, animações personalizadas ou qualquer outra coisa que as seções padrão não consigam expressar.