Funcionalidades

Neste tutorial veremos como adicionar o selo de pesquisas do Google em sua loja. HTML 1. Na pasta static/js , adicionamos o arquivo google-survey.js.tpl : {# Google survey JS for Tiendanube /#} {% if store.google_merchant_id %} ...

Os layouts da Nuvemshop possuem seletores HTML projetados para que aplicativos ou agentes externos possam ser ancorados ao design de cada loja sem ter que adaptar seu código com base em cada layout. Esses componentes são representados pelo atributo...

A página em construção permite ocultar produtos e páginas internas da loja quando a mesma não puder receber visitas, seja porque ainda não foi lançada ou está recebendo atualização. É uma página que mostra informações básicas de contato da lo...

Neste tutorial, explicaremos como você pode adicionar um selo ou logotipo personalizado para aparecer no rodapé da loja, na seção ‘Personalizar meu layout atual’ no Administrador Nuvem. Geralmente é usado para incluir logotipos ou parcerias de relac...

Neste tutorial vamos adicionar as promoções em seu layout, oferecendo a possibilidade de mostrar e aplicar promoções do tipo: 2x1, 3x1,% de desconto em um produto ou de um determinado número de unidades. As promoções são mostradas em: No item da ...

Neste tutorial, te ensinamos a implementar o botão que possibilita o contato com o administrador da loja, pelo WhatsApp: HTML 1. Crie o arquivo whatsapp-chat.tpl dentro da pasta snipplets com o seguinte conteúdo: {% if store.whatsapp %} ...

Em alguns tutoriais, incluímos a técnica de lazy load, para a qual usamos o plugin Lazysizes . Ele evita o carregamento de imagens que não estão dentro do campo visual na tela do dispositivo onde o site é exibido. Quando o usuário está próximo (e...

Nos layouts da Nuvemshop, usamos classes chamadas Helpers ou Utilities, que são usadas para aplicar uma propriedade CSS isolada. Por exemplo, se precisarmos de um texto para ser alinhado ao centro, usamos a classe "text-center": {{ “Texto” | tran...

Neste tutorial, vamos melhorar a visibilidade do frete grátis quando ele é a partir de um valor mínimo, da seguinte forma: Exibindo uma etiqueta de "Frete Grátis" quando o preço do produto (ou variante) excede o valor mínimo para frete grátis ...

Neste tutorial, explicamos como exibir os resultados da calculadora de frete, destacando as melhores opções e dividindo entre as opções de entrega em domicílio e os pontos de retirada. Antes de iniciar, é necessário esclarecer que este tutorial ...

Neste tutorial, explicamos como adicionar uma mensagem de demoras na calculadora de frete antes da finalização da compra. HTML No snipplet shipping_options.tpl adicionamos o seguinte código para que se mostre uma mensagem ao calcular um frete...

No tutorial a seguir, explicamos como adicionar uma mensagem à calculadora de envio para quando a compra tiver frete grátis. A compra com frete grátis depende de fatores como o valor mínimo de compra, a região ou da categoria de produto. HTML ...

No tutorial a seguir, explicamos como fazer uma loja adaptar o fluxo de compras ao vender produtos físicos e produtos digitais ou serviços, considerando a possibilidade de ter carrinhos “mistos” com os dois tipos de produtos. As alterações neste tu...

Neste tutorial veremos como adicionar a possibilidade de usar uma imagem diferente do logo da loja ao compartilhar o link de sua página inicial. Essa imagem, tecnicamente conhecida como imagem OG (Open Graph Image), é a utilizada por plataformas co...

Neste tutorial, vamos adicionar visibilidade aos meios de pagamento e parcelas em seu design: O código neste tutorial inclui: Parcelas na lista de produtos, detalhes do produto e carrinho (aplica-se apenas em lojas no Brasil) Modal que mostra ...

Neste tutorial veremos como adicionar CSS para o checkout e assim adaptar seu design ao de nossa loja. IMPORTANTE: Antes de continuar, vale esclarecer que o checkout é uma etapa crítica para a compra e na hora de efetuar alterações, devemos ter mui...

Neste tutorial te ensinamos como adicionar essas 2 redes sociais em sua loja. HTML 1. Dentro da pasta snipplets/social vamos editar o arquivo social-links.tpl com o seguinte conteúdo: {% for sn in ['instagram', 'facebook', 'youtube', 'ti...

A Discount API é um conjunto de ferramentas que permite o desenvolvimento de uma ampla gama de regras promocionais. Antes de começar a ver onde e como as promoções e descontos devem ser exibidos nas lojas, vamos explicar esses termos. Promoção ...

Nesse tutorial apresentamos como alterar o código para ativar a funcionalidade de bloqueio de sessão a fim de proteger a conta dos usuários registrados na sua loja. HTML Quando um usuário tenta por várias vezes consecutivas iniciar sessão, vamo...

No tutorial a seguir explicamos como adicionar o calculador de frete e as lojas físicas em seu layout: O código neste tutorial inclui: A calculador de frete, tanto no detalhe do produto como no carrinho O filtro entre opções de envio semelhantes...

Queremos verificar se o usuário insere seu e-mail real, adicionando uma instância de validação através de um link que enviaremos para o e-mail que foi inserido. As alterações que descrevemos neste artigo são baseadas no tema Base. Mas também pod...

Neste tutorial, explicamos como exibir os resultados da calculadora de frete, destacando as melhores opções e dividindo entre as opções de entrega em domicílio e os pontos de retirada. Antes de iniciar, é necessário esclarecer que este tutorial ...

Neste tutorial veremos como adicionar a possibilidade de calcular frete para outros países sem ter que mudar a moeda ou idioma. Vale a pena explicar que nas lojas existem dois tipos de entidades para cada país configuradas na tela Configurações > I...

Neste tutorial vamos adicionar uma notificação que informa a seus clientes sobre o uso de cookies. Isso não afetará a experiência de compra ou as estatisticas Aplicar esta funcionalidade fará com que você cumpra a LGPD (Lei Geral de Proteção d...

Os componentes privados são semelhantes aos componentes HTML e twig encontrados nos layouts, a única diferença é que o código não pode ser modificado livremente (é um código privado dentro da Nuvemshop sem acesso por FTP), mas permitem parâmetros ...