Quais blocos posso adicionar nas seções da minha loja com o layout Ipanema na Nuvemshop?

Serve para criar uma chamada para ação (CTA) que direcione o seu cliente para outra página, por exemplo "Comprar agora", "Ver mais produtos" ou "Conhecer a promoção".

Em "Texto do botão", escreva o texto que o botão vai exibir e, em "Link do botão", adicione a URL de destino.

Em "Estilo", escolha qual tipo de botão usar: "Principal" (para a ação mais importante da seção), "Secundário" (para uma ação complementar) ou "Terciário" (para uma opção de menor destaque, como um link auxiliar). A cor, a forma e o resto do estilo visual de cada tipo são definidos de forma global na identidade de marca da sua loja, e se aplicam automaticamente a todos os botões desse tipo.

Também em "Estilo", escolha o "Tamanho" do botão ("Pequeno", "Médio" ou "Grande") e, se quiser, uma "Cor de fundo" e uma "Cor do texto" diferentes das definidas globalmente.

Em "Design", escolha a "Largura": "Ajustar" (o botão ocupa apenas o espaço do seu conteúdo) ou "Preencher" (o botão ocupa toda a largura disponível do contêiner).

Serve para incluir conteúdo gráfico dentro de uma seção, por exemplo uma foto de produto, uma imagem editorial ou um ícone próprio.

Em "Imagem", carregue o arquivo que você quer exibir. Ative "Usar outra imagem para celulares" se quiser carregar uma versão diferente para essa visualização, e preencha "Link" se quiser que a imagem direcione para outra página ao ser clicada.

Em "Design", escolha a "Largura": "Ajustar" (a imagem ocupa apenas o espaço do seu conteúdo) ou "Preencher" (a imagem ocupa toda a largura disponível do contêiner).

Serve para destacar a mensagem principal da seção, por exemplo o nome de uma promoção ou o cabeçalho de um bloco editorial.

Escreva o texto no campo de texto, com opções de formatação como negrito, itálico, cor e links.

Em "Design", escolha a "Largura": "Ajustar" (o título ocupa apenas o espaço do seu conteúdo) ou "Preencher" (ocupa toda a largura disponível do contêiner).

Em "Ajustes de texto", escolha o "Estilo", ou seja, o nível de título: por exemplo, de "Título 1" a "Título 6", ou "Personalizado" se quiser definir outro tamanho. Quanto menor o número, maior e mais destacado o texto aparece. Ative "Tamanho para celulares" se quiser definir um tamanho diferente nessa visualização.

Serve para incluir uma mensagem complementar ao título, por exemplo uma descrição breve da promoção ou o desenvolvimento de um conteúdo editorial.

Escreva o texto no campo de texto, com opções de formatação como negrito, itálico, cor e links.

Em "Design", escolha a "Largura" do bloco: "Ajustar" (o texto ocupa apenas o espaço do seu conteúdo) ou "Preencher" (ocupa toda a largura disponível do contêiner). Em "Ajustes de texto", escolha o "Tamanho" ("Pequeno", "Médio" ou "Grande").

Serve para destacar uma palavra-chave curta junto a outro conteúdo, por exemplo "Novo", "Oferta" ou "Últimas unidades".

Em "Texto da etiqueta", escreva a palavra ou frase curta que vai aparecer. Por padrão, "Novo".

Em "Design", escolha o "Estilo": "Principal" ou "Secundária". Se quiser, defina também uma "Cor de fundo" e uma "Cor do texto" diferentes das definidas globalmente.

Serve para gerar espaço entre blocos ou marcar uma divisão visual dentro de uma seção, por exemplo entre dois módulos de conteúdo diferentes.

Em "Design", ajuste o "Espaçamento" (em pixels) ao redor do separador: quanto maior o valor, mais espaço fica entre os blocos de cada lado.

Ative "Linha divisória" se quiser exibir uma linha visível em vez de deixar apenas o espaço vazio, e escolha a "Cor da linha" (esse campo só aparece se você ativar a linha divisória).

Serve para agrupar vários blocos (por exemplo, Título, Texto e Botão) e mantê-los organizados como uma única unidade dentro da seção, para que se movam e se alinhem juntos.

Em "Disposição", escolha a "Direção": a seta para baixo empilha os blocos um abaixo do outro, e a seta para a direita os coloca um ao lado do outro. Ative "Direção diferente para celulares" se quiser que ela mude nessa visualização.

Em "Alinhamento", defina como os blocos ficam posicionados dentro do grupo: a primeira linha de ícones controla o alinhamento no sentido contrário à direção escolhida (por exemplo, se a direção for vertical, essa linha alinha à esquerda, ao centro ou à direita), e a segunda linha controla o alinhamento no sentido da direção escolhida (acima, no meio ou abaixo).

Em "Design", escolha a "Largura": "Ajustar" (o grupo ocupa apenas o espaço do seu conteúdo) ou "Preencher" (ocupa toda a largura disponível do contêiner). Ajuste também a "Separação entre elementos" (o espaço entre cada bloco agrupado), o "Espaçamento superior e inferior" e o "Espaçamento esquerdo e direito" (a margem interna do grupo em relação ao seu conteúdo).

Em "Cores", defina a "Cor de fundo" e a "Cor do texto" do grupo.

Serve para inserir HTML, CSS e JavaScript próprios dentro de uma seção ou bloco aninhado, por exemplo para um elemento sob medida que os blocos padrão não cobrem, como um widget externo ou uma animação personalizada.

Em "Design", escolha a "Largura" do bloco: "Ajustar" (ocupa apenas o espaço do seu conteúdo) ou "Preencher" (ocupa toda a largura disponível do contêiner).

O editor de código inclui ferramentas para ajudar na escrita e detectar erros antes de publicar.

Escolha o modo de sintaxe de acordo com o que você vai escrever: "HTML" (padrão, aceita HTML com blocos de estilo e de script incorporados) ou "CSS" (para escrever somente CSS, com uma validação mais rígida).

Conforme você escreve, o editor sugere o autocompletar: propriedades e valores CSS quando o cursor está dentro de uma tag <style>, tags e atributos HTML em contexto HTML, e palavras-chave e globais de JavaScript dentro de uma tag <script>. Navegue pelas sugestões com as setas do teclado e confirme com "Enter" ou "Tab".

Use "Tab" para inserir uma indentação de 2 espaços. Ao pressionar "Enter", o editor mantém automaticamente o nível de indentação da linha anterior. Ao fechar uma chave "}" ou uma barra "/", o editor reduz a indentação automaticamente.

Se você precisar de mais espaço para escrever um código extenso, clique no botão localizado no canto superior direito do editor para abri-lo em uma janela flutuante independente. As alterações feitas ali são sincronizadas automaticamente com o painel do editor. Se você fechar a janela flutuante sem salvar, as alterações são mantidas no painel do editor; se fechar a aba do navegador onde ela foi aberta, o estado do painel não é afetado.

O editor valida o código automaticamente depois que você para de escrever, e mostra os erros abaixo do campo de texto com o número da linha e da coluna em que ocorrem. Se houver muitos erros, são exibidos os primeiros e o resto é agrupado como "+ N mais".

No modo HTML, o editor verifica se as tags estão corretamente abertas e fechadas, se não há comentários nem aspas sem fechar, e valida separadamente o conteúdo das tags <style> e <script>. No modo CSS, a validação é mais rígida.

Um CSS inválido bloqueia o salvamento do bloco. Um HTML ou JavaScript inválido mostra o aviso, mas permite salvar do mesmo jeito.

O campo de código aceita até 50.000 caracteres. O editor avisa assim que você alcança esse limite, e não vai ser possível salvar o bloco se você passar dele.

Serve para exibir mensagens curtas e rotativas na barra de navegação, por exemplo "Frete para todo o Brasil" ou "20% de desconto na primeira compra".

Ao adicionar o bloco, clique em "+ Adicionar Anúncio" para incluir cada mensagem.

Em cada um, preencha o "Texto" que você quer exibir e, de forma opcional, um "Link" de destino. Você pode adicionar quantos anúncios precisar: eles vão se alternar na barra de navegação.

Em "Disposição", escolha o "Alinhamento em computadores" (esquerda, centro ou direita). Em "Design", ajuste a "Separação entre elementos".

Serve para exibir os ícones das suas redes sociais na barra de navegação, por exemplo Instagram ou Facebook, e facilitar que os seus clientes encontrem você nelas.

Em "Disposição", escolha o "Alinhamento em computadores" (esquerda, centro ou direita). Em "Design", ajuste a "Separação entre elementos".

Esse bloco exibe as redes sociais que você já tem configuradas no seu administrador, ele não tem campos próprios para preencher. Se você ainda não as adicionou, siga os passos em como inserir os ícones das redes sociais na minha loja.

Serve para exibir na barra de navegação os dados de contato que você configurou no seu administrador, por exemplo o seu telefone ou WhatsApp, e facilitar que os seus clientes entrem em contato com você.

Ative "Mostrar telefone", "Mostrar WhatsApp" e "Mostrar e-mail" de acordo com os dados que você quer que apareçam.

Em "Disposição", escolha o "Alinhamento em computadores" (esquerda, centro ou direita). Em "Design", ajuste a "Separação entre elementos".

Serve para exibir um menu de navegação adicional dentro da barra, por exemplo um submenu de categorias ou de páginas de conteúdo.

Em "Menu a exibir", escolha o menu que você já tem criado na sua loja.

Em "Disposição", escolha o "Alinhamento em computadores" (esquerda, centro ou direita). Em "Design", ajuste a "Separação entre elementos".

Serve para destacar uma informação breve com um ícone, por exemplo frete grátis, formas de pagamento ou política de trocas e devoluções, dentro da barra de navegação.

Ao adicionar o bloco, clique em "+ Adicionar Ícone e texto" para incluir cada item.

Em "Tipo de ícone", escolha entre "Ícones do layout" ou "Imagem própria" para subir o seu próprio ícone.

Se você escolher "Ícones do layout", pode selecionar entre estas opções: Frete, Cartão de crédito, Segurança, Devoluções, Dinheiro, Promoções, Sacola, Carrinho, Loja, Presente, Favoritos, Estrela, Telefone, E-mail, Localização, Internacional, Calendário, Verificado e WhatsApp.

Preencha a "Descrição" com o texto do benefício e, de forma opcional, um "Link" de destino. Você pode adicionar quantos itens precisar.

Mostra quantas unidades do produto foram vendidas, para gerar confiança no seu cliente. Aparece abaixo do nome do produto ou junto ao preço, dependendo do grupo em que você adicionar o bloco: Cabeçalho ou Preços e descontos da Informação do produto.

Em "Mostrar quantidade de vendas a partir de", defina o número mínimo de vendas que o produto precisa ter para que essa informação apareça. Por padrão, 10.

Dentro do grupo Cabeçalho da Informação do produto, mostra o código SKU do produto. Não tem opções de personalização.

Dentro do grupo Formulário de compra da Informação do produto, mostra um aviso quando resta pouco estoque do produto, para gerar urgência de compra.

Em "Mostrar alerta quando restarem menos de", defina a quantidade de unidades a partir da qual o aviso de estoque baixo aparece. Em "Mensagem de últimas unidades", escreva o texto que aparece junto ao alerta (por exemplo, "Última unidade!"). Em "Cores", escolha a cor do "Texto" do alerta.

Dentro do grupo Detalhes do produto da Informação do produto, mostra ícones com benefícios ou informações em destaque do produto, por exemplo frete grátis ou troca sem custo.

Em "Tamanho do ícone", ajuste o tamanho em pixels. Em "Estilo do título" e "Tamanho da descrição", escolha o formato do texto de cada ícone. Ajuste a "Separação entre elementos" (o espaço entre cada ícone) e defina a "Cor dos textos" e a "Cor do ícone".

Dentro da Informação do produto, mostra os ícones das suas redes sociais para que o seu cliente possa compartilhar o produto. Não tem opções de personalização.