A página de Produto é onde seu cliente decide se compra ou não: é ali que ele vê as fotos, o preço e a descrição. Personalizá-la serve, por exemplo, para mostrar melhor as variações do produto, oferecer uma descrição mais completa com imagens ou vídeos, ou sugerir produtos relacionados que aumentem o ticket médio da compra.
O layout Ipanema permite configurar como seu produto aparece na loja. A página de Produto traz 4 seções padrão que você pode configurar e reordenar, mas não excluir: Informações do produto, Descrição do produto, Produtos complementares e Produtos alternativos. Você também pode adicionar seções novas.
Neste tutorial, explicamos como configurar cada uma dessas seções e como adicionar outras novas à página.
Vamos aos passos!
1. Acessar o administrador da sua Nuvemshop.
2. Acessar "Loja online > Layout" e clicar em "Editar layout".
3. Clicar no botão do menu superior central e selecionar a página "Produto".
4. Dentro da página de “Produto" você poderá configurar as seções padrões, Informação do produto, Descrição do produto, Produtos complementares e Produtos alternativos.
5. Clicar em cada uma para abrir as configurações.
Informação do produto
É a área principal de compra da loja: mostra a galeria de fotos, o preço, as variações, o botão de comprar e as opções de frete.
5.1. Clicar na opção “Informação do produto” para poder configurar design, cores e CSS personalizado dentro das informações do produto.
Design
- Largura: define a largura da seção. Selecione Página para alinhá-la ao conteúdo principal ou Completo para que ela ocupe toda a tela.
- Separação entre elementos: controla o espaçamento entre os blocos ou elementos internos da seção, em pixels (px).
- Espaçamento superior e inferior: ajusta o espaçamento vertical interno da seção, em pixels (px).
- Espaçamento esquerdo e direito: ajusta o espaçamento horizontal interno da seção, em pixels (px).
Cores
- Cor de fundo: define a cor de fundo da seção. A opção “Sem preenchimento” mantém o fundo transparente, sem aplicar nenhuma cor.
CSS personalizado
- CSS personalizado: permite adicionar regras de CSS próprias para customizar visualmente a seção além das opções padrão disponíveis no editor.
5.2. Feito isso, você também poderá configurar os outros elementos, como Multimidia e Informações sobre a compra.
Multimídia
- Mostrar miniaturas: quando está ativado, mostra pequenas miniaturas das imagens do produto ao lado ou abaixo da imagem principal, permitindo que seu cliente navegue entre as fotos rapidamente.
- Posição em computadores: define onde as miniaturas aparecem na versão desktop. Escolha entre Esquerda (miniaturas em coluna ao lado da imagem principal) ou Inferior (miniaturas em linha abaixo da imagem principal).
Informações sobre a compra
- Separação entre elementos: controla o espaçamento entre as miniaturas e a imagem principal, em pixels (px).
- Espaçamento superior e inferior: ajusta o espaçamento vertical interno da galeria, em pixels (px).
- Espaçamento esquerdo e direito: ajusta o espaçamento horizontal interno da galeria, em pixels (px).
Descrição do produto
Para detalhar especificações, cuidados, guia de tamanhos e a história do produto, com opção de mostrá-la em formato acordeão.
5.1. Clicar na opção “Descrição do produto” para poder configurar exibição, design, cores e CSS personalizado dentro da descrição do produto.
Exibição
- Mostrar título: quando ativado, exibe o título da seção "Descrição" acima do texto descritivo do produto, ajudando o cliente a identificar o conteúdo rapidamente.
- Mostrar redes sociais: quando ativado, exibe os ícones de compartilhamento em redes sociais junto à descrição, permitindo que o cliente compartilhe o produto facilmente.
Cores
- Cor de fundo: define a cor de fundo da seção de descrição. A opção Sem preenchimento mantém o fundo transparente, sem aplicar nenhuma cor.
- Cor dos textos: define a cor dos textos da descrição. A opção Padrão mantém a cor definida nas configurações gerais do tema.
Design
- Largura: define a largura da seção. Selecione “Página” para alinhá-la ao conteúdo principal ou "Completo" para que ela ocupe toda a tela.
- Espaçamento superior e inferior: ajusta o espaçamento vertical interno da seção, em pixels (px).
- Espaçamento esquerdo e direito: ajusta o espaçamento horizontal interno da seção, em pixels (px).
CSS personalizado
- CSS personalizado: permite adicionar regras de CSS próprias para customizar visualmente a seção de descrição além das opções padrão disponíveis no editor.
Produtos complementares
Para estratégias de venda cruzada ("Você também pode gostar"), com o objetivo de aumentar o ticket médio do pedido.
5.1. Clicar na opção “Produtos complementares” para poder configurar design, cores e CSS personalizado dentro dos produtos complementares.
Design
- Largura: define a largura da seção. Selecione “Página” para alinhá-la ao conteúdo principal ou “Completo” para que ela ocupe toda a tela.
- Separação entre elementos: controla o espaçamento entre os blocos ou elementos internos da seção, em pixels (px).
- Espaçamento superior e inferior: ajusta o espaçamento vertical interno da seção, em pixels (px).
- Espaçamento esquerdo e direito: ajusta o espaçamento horizontal interno da seção, em pixels (px).
Cores e CSS personalizado
- Cor de fundo: define a cor de fundo da seção. A opção “Sem preenchimento” mantém o fundo transparente, sem aplicar nenhuma cor.
- CSS personalizado: permite adicionar regras de CSS próprias para customizar visualmente a seção além das opções padrão disponíveis no editor.
5.2. Feito isso, você também poderá configurar os outros elementos, como definir e formatar o Título e disposição dos Produtos. Para configurar, basta clicar em cada elemento.
Produtos alternativos
Para oferecer opções parecidas com o produto que seu cliente está vendo, útil quando você quer mostrar variedade dentro da mesma categoria.
5.1. Clicar na opção “Produtos alternativos” para poder configurar design, cores e CSS personalizado dentro dos produtos complementares.
Design
- Largura: define a largura da seção. Selecione “Página” para alinhá-la ao conteúdo principal ou “Completo” para que ela ocupe toda a tela.
- Separação entre elementos: controla o espaçamento entre os blocos ou elementos internos da seção, em pixels (px).
- Espaçamento superior e inferior: ajusta o espaçamento vertical interno da seção, em pixels (px).
- Espaçamento esquerdo e direito: ajusta o espaçamento horizontal interno da seção, em pixels (px).
Cores e CSS personalizado
- Cor de fundo: define a cor de fundo da seção. A opção “Sem preenchimento” mantém o fundo transparente, sem aplicar nenhuma cor.
- CSS personalizado: permite adicionar regras de CSS próprias para customizar visualmente a seção além das opções padrão disponíveis no editor.
5.2. Feito isso, você também poderá configurar os outros elementos, como definir e formatar o Título e disposição dos Produtos. Para configurar, basta clicar em cada elemento.
6. Para adicionar novas seções a página de Categoria, basta clicar em “Adicionar seção" e selecionar as seções que deseja incluir.
Helpjuice Warning Callout Title
Para consultar o catálogo completo com o detalhe de cada seção e o que você pode configurar, acessar: Quais seções posso adicionar nas páginas da minha loja com o layout Ipanema?
7. Clicar em “Salvar” para publicar as alterações.
Helpjuice Info Callout Title
Na página de Produto, você pode selecionar um produto específico da sua loja para visualizar como ficam as mudanças. Basta clicar no botão “Visualizar” no meu superior e selecionar.
Pronto!
Agora você já sabe como adicionar e configurar seções na página de Produto da sua loja usando o editor do layout Ipanema. Você também pode personalizar as outras páginas da sua loja, Início, Categoria, Busca e Erro 404, seguindo a mesma lógica de seções e blocos.