Página de produto
Estrutura da página
Seção intitulada “Estrutura da página”A seção Informação do produto reúne a galeria e a coluna Informações sobre a compra. No Zenit, essa coluna usa quatro grupos com blocos próprios:
| Grupo | Blocos principais | |---|---| | Cabeçalho | Quantidade de vendas, nome e SKU | | Preços e descontos | Preços, formas de pagamento e descontos | | Formulário de compra | Variações, alerta de estoque, botão de compra e calculadora de frete | | Detalhes do produto | Descrição, ícones informativos e conteúdo adicional |
Os grupos e os blocos essenciais de compra são protegidos contra remoção. Dentro dos grupos, o editor oferece os blocos e as ações permitidas, incluindo conteúdo auxiliar como textos, imagens e botões. Todos os blocos do grupo Formulário de compra seguem a ordem definida no editor dentro do mesmo formulário. Por exemplo, um SKU colocado antes de Variações aparece nessa posição, sem ser deslocado para depois do botão de compra. Os grupos também oferecem o catálogo de blocos gerais, incluindo separador e código.
Na instalação inicial do Zenit, a descrição continua em uma seção abaixo da ficha do produto, seguida por depoimentos e recomendações. Os ícones informativos ficam em Detalhes do produto. Adicionar uma descrição nesse grupo é opcional; evite duplicá-la se a seção externa já estiver sendo utilizada.
Configurações locais
Seção intitulada “Configurações locais”Configurar a galeria
Seção intitulada “Configurar a galeria”Clique em Multimídia na árvore da página de produto. O Flex oferece:
- Formato em computadores: Grade ou Carrossel.
- Disposição em computadores: uma coluna, duas colunas ou uma e duas colunas intercaladas. Esta opção aparece quando o formato é Grade.
- Separação entre elementos: controla a distância entre as mídias da grade.
- Miniaturas: no Carrossel, podem aparecer no desktop e recebem posição, tamanho e arredondamento configuráveis. Na Grade, servem somente para a navegação no celular.
- Celular → Galeria de ponta a ponta: remove as margens laterais da mídia principal no mobile. Este controle é independente das miniaturas.
Quando a grade tem apenas uma foto, ela ocupa toda a largura disponível; nenhuma coluna vazia é mantida.
Ofertas e promoções aparecem como selos sobre a galeria. Quando existem ambas, a promoção por quantidade tem prioridade. As cores seguem Etiquetas nas configurações globais. Na composição granular, as condições ficam em Preços e descontos: aplicação por categoria e possibilidade de combinar produtos formam uma única mensagem. Produtos sem mídia mantêm a etiqueta personalizada na área de informações.
Na composição anterior do formulário, brinde, frete grátis e promoção mantêm espaçamento entre si e as variações. No celular, as variações também mantêm espaço antes dos controles de compra. Os campos de frete e cupom usam a cor de fundo principal do tema, inclusive quando a calculadora aparece em um cartão. O cabeçalho desse cartão apresenta título e descrição alinhados ao campo de CEP, sem ícone decorativo. A altura do cartão acompanha o formulário, o CEP informado e as mensagens de erro, mantendo o padding interno.
Um alerta de estoque sem mensagem visível não acrescenta espaço entre as variações e a compra. O controle de negrito do preço principal também se aplica ao preço com assinatura.
Mostrar fotos da cor selecionada
Seção intitulada “Mostrar fotos da cor selecionada”Ative Mostrar fotos da cor selecionada para apresentar somente as mídias ligadas à variação escolhida. No texto alternativo de cada foto, informe o nome da cor exatamente como cadastrado no produto. O editor também permite definir como tratar fotos sem uma cor vinculada.
Ao trocar a amostra, a galeria, o vídeo aplicável e a paginação são atualizados juntos. Teste todas as cores do produto antes de publicar.
Configurar os blocos de compra
Seção intitulada “Configurar os blocos de compra”Selecione o bloco correspondente para editar:
- Nome: tipografia e tamanho do título, incluindo ajuste para celular.
- Preços: preço em destaque, ordem, tamanhos principal e secundário, negrito, cartão de fundo, ícone do Pix, cores, preço anterior e valor economizado.
- Formas de pagamento: exibição de parcelas e percentual de desconto por pagamento.
- Variações: botões ou lista, fotos nas cores, formato e tamanho das amostras e botões, guia de medidas. Os textos dos botões ficam centralizados na altura configurada, tanto em celulares quanto em computadores.
- Alerta de estoque: quantidade limite, mensagem de última unidade e cor.
- Botão de compra: quantidade, estoque, texto, aparência e WhatsApp. O link depende do número configurado na loja.
- Calculadora de frete: exibição do cálculo e apresentação em cartão ou formato compacto.
Os seletores de variantes usam botões nativos: a seleção por teclado acompanha o clique, sem enviar o formulário. No Botão de compra, o estilo secundário herda as cores correspondentes do tema quando o bloco não define cores próprias.
Em produtos com assinatura, o preço anterior e a mensagem de desconto também recebem a tipografia configurada no bloco Preços. A disponibilidade de assinaturas depende da ativação do recurso pela Nuvemshop. A integração ainda aguarda homologação com produtos de assinatura habilitados.
O recurso de compra fixa fica nas configurações do grupo Formulário de compra. Os espaçamentos gerais da coluna permanecem em Informações sobre a compra.
O preço com desconto por pagamento só aparece quando a loja e o produto oferecem essa condição. Se esse preço estiver escolhido como destaque, mas não houver desconto disponível, o preço principal assume o destaque.
O link Ver mais detalhes abre as formas de pagamento e as condições de parcelamento oferecidas pela loja. O modal reúne logo e nome de cada meio de pagamento no cartão, com o total em destaque à direita no computador e abaixo da identificação no celular. Descontos aparecem junto ao nome; as condições ficam separadas por uma linha discreta. A tabela usa linhas alternadas para facilitar a comparação das parcelas. No celular, as condições rolam dentro da janela; o cabeçalho e o retorno ao produto ficam separados dessa rolagem. Os nomes dos provedores, descontos e avisos seguem os dados da plataforma. Esse conteúdo também funciona nas composições anteriores com quatro blocos; não é necessário migrar a página para consultar as parcelas.
Compra rápida e produto principal
Seção intitulada “Compra rápida e produto principal”O antigo grupo global Formulário de produto foi removido. A PDP usa as configurações dos próprios blocos.
A compra rápida tem controles próprios em Configurações globais → Cartão de produto, para variantes e exibição de estoque. O preço com desconto por pagamento dos cartões permanece nessa área, assim como as mensagens de estoque dos cartões.
A seção Produto principal, usada na home, passa a oferecer seus próprios blocos de mídia e informações. Ela mantém a seleção do primeiro produto da lista de destaque ou de um produto aleatório dessa lista. Alterar seus blocos não altera a PDP nem a compra rápida. Compra fixa não é usada nessa seção.
Atualização de instalações existentes
Seção intitulada “Atualização de instalações existentes”Os templates padrão já usam a nova composição. Uma instalação personalizada exige migração dos valores salvos antes de retirar as configurações antigas. O código mantém a renderização dos formatos anteriores para compatibilidade; isso não substitui a conversão dos dados de cada instalação.
Vídeos na página de produto
Seção intitulada “Vídeos na página de produto”O vídeo comprável flutuante usa o primeiro vídeo nativo do produto quando o recurso está ativo no template. A seção Carrossel de vídeos compráveis pode ser adicionada separadamente à PDP ou à home e também aceita vídeos externos.
Conferência após editar
Seção intitulada “Conferência após editar”Teste produtos com e sem variantes, disponibilidade, preço e desconto; abra também a compra rápida e confira o carrinho. Confira desktop e celular. Kits e assinaturas mantêm seus contratos, mas precisam de uma rodada própria de homologação.
As amostras de cor acompanham o arredondamento do tema: o preenchimento interno usa um raio menor conforme o recuo da borda, mantendo os cantos alinhados. A opção circular conserva o formato circular.
Condições da promoção e benefícios
Seção intitulada “Condições da promoção e benefícios”O bloco Condições da promoção pode ser reordenado em Informações sobre a compra ou no grupo Preços e descontos. Ele apresenta as condições automáticas da promoção em um quadro com borda na cor de destaque, seguindo a referência do Flex legado. Os controles Espaçamento e Separação entre elementos ajustam o preenchimento e a distância entre conteúdos. Os textos e regras comerciais vêm das promoções cadastradas na loja; não são conteúdo livre do bloco.
Brinde e frete grátis aparecem como etiquetas na mesma linha quando houver espaço, com quebra automática em telas estreitas. Condições mínimas e restrições de combinação continuam sendo exibidas.
Em Configurações globais → Cartão de produto → Etiqueta de frete grátis, escolha Ícone + Grátis (padrão) ou Texto: Frete grátis, sem ícone. A opção afeta cartões de produto e preserva as cores configuradas em Etiquetas.
O controle Tamanho do texto oferece pequeno, médio e grande em Condições da promoção e no bloco Benefícios da compra. Em Estilo das etiquetas, escolha Discreto (padrão, fundo suave), Destaque (cor de destaque do tema e texto contrastante) ou Sem fundo. Texto e ícones acompanham o estilo escolhido, sem seletores individuais de cor. Benefícios da compra é independente e reordenável. Opções e compra mantém a posição bloqueada, com suas configurações editáveis. O formulário e os controles de compra não usam linhas divisoras; a separação vem dos espaçamentos dos blocos e variantes.
Em Condições da promoção, Apresentação permite escolher Simples ou Cartão. O controle Mostrar descrição da condição é independente: desativado, exibe somente o título da promoção. O padrão continua sendo cartão com descrição; preenchimento interno se aplica ao cartão, e espaçamento à descrição.
Nas composições com Preço e condições de pagamento, o preço de assinatura acompanha o tamanho, a cor e o peso do preço principal. Quando o preço com desconto por pagamento recebe o destaque, a assinatura acompanha o tamanho secundário do preço principal. A cor do desconto de assinatura acompanha a configuração de desconto.
Em Multimídia, use Mostrar selos de promoção e oferta na imagem para controlar as etiquetas comerciais da galeria; avisos de indisponibilidade permanecem independentes.
Em Opções e compra, a opção Mostrar mensagem de produto em estoque apresenta “Em estoque” e acompanha a disponibilidade da variação. Ela é separada dos avisos de última unidade e estoque baixo. Essa composição não exibe mais “Disponíveis” abaixo da quantidade. Nas composições que permitem exibir o número de unidades, a linha é ocultada quando o estoque não tem limite numérico.
A Lista editorial é um bloco do Zenit disponível no conteúdo de Imagem com texto. Não é oferecida no menu de adição de blocos da PDP.
No bloco Preço e condições de pagamento, o cartão engloba preços, parcelamento e o link Ver mais detalhes. A opção de mostrar a porcentagem junto ao preço com desconto por pagamento também está disponível nessa composição. Quando ativa e o preço com desconto está visível, a mensagem repetida de desconto fica oculta; avisos de restrição continuam disponíveis.