Além de personalizar visualmente cada seção da sua loja, o layout Ipanema oferece um conjunto de configurações avançadas que permitem ajustar funcionalidades estratégicas para melhorar a experiência do cliente no site.
Através dessas opções, você pode configurar a aba do navegador, criar pop-ups promocionais, definir o comportamento dos cartões e formulário de produto, personalizar o carrinho de compras e até inserir código CSS para customizações exclusivas.
Neste tutorial, mostramos o passo a passo de como configurar cada uma dessas opções para deixar sua loja ainda mais personalizada.
Vamos aos passos!
1. Acessar o painel administrador Nuvemshop.
2. Seguir o caminho "Loja online > Layout" e clicar em "Editar layout".
3. Clicar no ícone da engrenagem no menu superior para acessar as configurações globais.
4. Em seguida, no menu lateral você irá visualizar a seção de “Configurações avançadas”. Nessa seção, você poderá configurar a aba do navegador, pop-up promocional, cartão de produto, formulário de produto, carrinho de compras e CSS personalizado.
Aba do navegador
Favicon para o carrinho
- Favicon: permite enviar um ícone personalizado que será exibido na aba do navegador quando o cliente tiver produtos adicionados ao carrinho. É uma forma sutil de chamar a atenção do cliente para retornar à compra, especialmente quando ele está navegando em outras abas.
Mensagem para aba inativa
- Mostrar mensagem ao mudar de aba: quando ativado, exibe uma mensagem dinâmica no título da aba do navegador sempre que o cliente sair da sua loja para acessar outra aba. É um recurso eficaz para reengajar visitantes e incentivá-los a retornar.
- Mensagem 1: primeiro texto exibido no título da aba quando o cliente muda para outra janela (ex.: "Não perca essa oferta...").
- Mensagem 2: segundo texto que se alterna com a Mensagem 1, criando um efeito de animação no título da aba (ex.: "Volte logo!").
Pop-up promocional
Pop-up
- Mostrar um pop-up promocional: quando ativado, exibe um pop-up promocional para os visitantes da loja, útil para divulgar campanhas, descontos ou novidades.
- Mostrar um formulário de newsletter dentro do pop-up: quando ativado, inclui um campo de inscrição no pop-up, permitindo capturar e-mails dos visitantes para envio de comunicações futuras.
Imagem
- Imagem: permite enviar a imagem que será exibida dentro do pop-up. Ideal para reforçar a comunicação visual da campanha.
- Usar outra imagem para celulares: ative para enviar uma imagem específica para a versão mobile, garantindo melhor enquadramento em telas menores.
- Link: insira o endereço (URL) para onde o cliente será direcionado ao clicar na imagem do pop-up.
Título
- Título: campo onde você define o texto principal do pop-up (ex.: "Inscreva-se na newsletter").
- Estilo do título: define o estilo visual do título, escolhendo entre os níveis disponíveis (ex.: Título 1, Título 2, Título 3, Título 4), que variam em tamanho e destaque.
- Tamanho para celulares: ative para configurar um tamanho de título diferente na versão mobile.
Descrição
- Descrição: campo de texto livre para apresentar uma mensagem complementar ao título (ex.: "Receba ofertas exclusivas e novidades diretamente no seu e-mail."). Conta com opções de formatação como negrito, itálico, sublinhado, cor do texto, listas e links.
- Estilo: define o estilo visual do texto da descrição. Escolha entre “Parágrafo pequeno”, “Parágrafo” ou “Parágrafo grande”, conforme o destaque desejado.
Botão
- Texto do botão: define o texto exibido no botão de ação do pop-up (ex.: "Inscrever-se", "Aproveitar oferta").
- Link do botão: insira o endereço (URL) para onde o cliente será direcionado ao clicar no botão.
Disposição
- Posição da imagem: define em qual lado do pop-up a imagem será exibida. Escolha entre “Esquerda” ou “Direita”.
- Alinhamento: define o alinhamento dos textos (título, descrição e botão) dentro do pop-up, podendo ser à esquerda, ao centro ou à direita.
Cartão de produto
Disposição
- Posição das etiquetas promocionais: define onde as etiquetas (como "Promoção", “Desconto”) serão exibidas no card. Escolha entre “Abaixo da imagem” (etiquetas posicionadas logo abaixo da foto do produto) ou “Sobre a imagem” (etiquetas sobrepostas à própria imagem).
- Localização das etiquetas: ao selecionar a opção “Sobre a imagem”, defina em qual área do card as etiquetas serão posicionadas. Escolha entre “Acima” ou “Abaixo”, conforme o destaque desejado.
- Mostrar informação de parcelas: quando ativado, exibe no card a informação de parcelamento disponível para o produto (ex.: "em 6x sem juros"), incentivando a conversão.
- Permitir compra rápida: quando ativado, exibe um botão de compra direta no card, permitindo que o cliente adicione o produto ao carrinho sem precisar entrar na página de detalhes.
- Mostrar variações de cor: quando ativado, exibe as variações de cor disponíveis diretamente no card, facilitando a escolha do cliente já na listagem.
Fotos do produto
- Formato da foto: define o formato visual da imagem do produto exibida no card. As opções disponíveis são “Original” (mantém as proporções originais da imagem), “Quadrado (1:1)”, “Horizontal (4:3)” ou “Vertical (3:4)”.
- Mostrar a segunda foto ao passar o mouse: quando ativado, exibe a segunda imagem do produto ao posicionar o cursor sobre o card na versão desktop, criando um efeito visual interativo.
- Mostrar as fotos em um carrossel para cada produto: quando ativado, permite que o cliente navegue pelas imagens do produto diretamente no card, em formato de carrossel.
Helpjuice Warning Callout Title
Este recurso se aplica apenas às listagens de categorias e aos resultados de pesquisa.
Estoque
- Aviso de últimas unidades: quando ativado, exibe um alerta no card quando o produto está com estoque baixo (ex.: "Últimas unidades"), gerando senso de urgência e estimulando a compra.
Formulário de produto
Variações
- Formato: define como as variações do produto (tamanho, cor, etc.) serão exibidas para o cliente. Escolha entre “Lista suspensa” (menu dropdown) ou “Botões” (opções visíveis lado a lado, com seleção direta).
- Mostrar a foto da variação de cor como botão: quando ativado, substitui o botão padrão pela imagem correspondente à variação de cor, tornando a escolha mais visual e intuitiva.
- Guia de medidas: insira o link para a página com a tabela ou guia de medidas dos produtos, ajudando o cliente a escolher o tamanho correto e reduzindo trocas.
Preço
- Mostrar valor economizado em produtos com preço promocional: quando ativado, exibe ao cliente o valor exato que ele está economizando em relação ao preço original.
Helpjuice Success Callout Title
Essa opção não se aplica caso o preço com desconto por meio de pagamento já esteja visível.
- Mostrar o preço com desconto por meio de pagamento: quando ativado, exibe o preço final do produto considerando o desconto aplicado pelo método de pagamento (ex.: pagamento via Pix).
- Mostrar informação de parcelas: quando ativado, exibe a informação de parcelamento disponível para o produto (ex.: "em 12x sem juros"), incentivando a conversão.
Informação
- Mostrar quantidade de produtos vendidos: quando ativado, exibe o total de unidades já vendidas, reforçando a confiança do cliente.
- A partir de: define a quantidade mínima de vendas para informação ser exibida (ex.: mostrar apenas após 9 vendas).
- Mostrar código SKU: quando ativado, exibe o código SKU do produto, útil para identificação interna ou para clientes que buscam itens específicos.
Estoque
- Mostrar estoque disponível: quando ativado, exibe ao cliente a quantidade exata de unidades disponíveis em estoque.
- Mostrar mensagem de últimas unidades em estoque: quando ativado, exibe um aviso de estoque baixo, gerando senso de urgência e estimulando a compra.
- Quando houver menos de: define o limite de estoque para a mensagem de últimas unidades começar a ser exibida (ex.: quando restarem menos de 5 unidades).
- Cor do texto da mensagem de estoque: define a cor do texto da mensagem de últimas unidades, destacando visualmente.
- Mensagem de últimas unidades: campo onde você personaliza o texto exibido (ex.: "Última unidade!", "Restam poucas peças").
Formas de entrega
- Mostrar calculadora de frete: quando ativado, exibe a calculadora de frete diretamente na página do produto, permitindo que o cliente consulte o valor e o prazo de entrega antes de finalizar a compra.
Carrinho de compras
Valor mínimo de compra
- Valor mínimo de compra: define um valor mínimo que o cliente precisa atingir para finalizar a compra. Caso não queira aplicar essa restrição, deixe o campo em branco.
Carrinho de compra rápida
- Permitir que seus clientes adicionem produtos ao carrinho sem precisar ir a outra página: quando ativado, habilita o carrinho de compra rápida, permitindo que o cliente adicione produtos ao carrinho sem sair da página atual, agilizando a experiência de compra.
- Ação ao adicionar um produto ao carrinho: define o que acontece quando o cliente adiciona um produto. Escolha entre “Mostrar notificação” (exibe um aviso discreto confirmando a ação, sem interromper a navegação) ou “Abrir carrinho” (abre automaticamente o resumo do carrinho).
- Mostrar produtos recomendados ao adicionar um produto ao carrinho: quando ativado, exibe sugestões de produtos relacionados no momento da adição ao carrinho, incentivando a compra de itens complementares e aumentando o ticket médio.
Formas de entrega
- Mostrar calculadora de frete: quando ativado, exibe a calculadora de frete diretamente no carrinho, permitindo que o cliente consulte o valor e o prazo de entrega antes do checkout.
CSS personalizado
Configurações para webdesigners
- Código CSS personalizado: campo destinado à códigos de CSS próprios, permitindo personalizar visualmente sua loja além das opções padrão disponíveis no editor.
Helpjuice Info Callout Title
Com ele, é possível ajustar estilos globais (como fontes, cores e espaçamentos) ou criar customizações pontuais. Recomendado para usuários com conhecimento técnico em desenvolvimento web.
5. Clicar em “Salvar” para publicar as alterações.
Pronto!
Agora você já sabe como utilizar as configurações avançadas do layout Ipanema para potencializar a personalização do seu layout.
Para saber como configurar as configurações globais de identidade de marca, acessar o tutorial abaixo: