Popular Articles

  1. Lazy load

    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...
  2. Como mostrar os logos dos meios de pagamento e envio no meu design?

    Para mostrar os logos deve-se utilizar as variáveis settings.payments e settings.shipping. Segue um exemplo de como fazer isso: {% for payment in settings.payments %} {{ payment | payment_logo | img_tag('', {'height' : 29}) }...
  3. Imagens rotativas com textos editáveis

    Neste tutorial, veremos como podemos adicionar texto editável aos banners rotativos da página inicial, deixando campos para: Link (existe por padrão) Título Descrição do produto Botão Cor Para o tema Base, modificaremos o componente que j...
  4. Como crio a paginação da lista de produtos?

    Coloque o seguinte código para criar a paginação: {% if pages.previous %} Anterior {% endif %} {% for page in pages.numbers %} {% if page.selected %} {{ page.number }} {% else %} {{ page.number }} ...
  5. Layout.tpl

    Todas as variáveis que estão disponíveis em layout.tpl também estão disponíveis em todos os arquivos. store Objeto Store que representa a loja. powered_by_url Marcação padrão da URL que deve ser incluída para indicar que a lo...
  6. Hooks de Javascript

    Ao personalizar um template na Nuvem Shop, é importante saber que há componentes críticos para que as funcionalidades funcionem bem. Esses componentes agora são identificados com algo chamado JS Hooks . Fique tranquilo porque isso não é...
  7. Como definir produtos destacados?

    Você pode definir categorias distintas para os produtos em destaque, por exemplo destacados como principais e secundários, dentro do arquivo sections.txt. Saiba mais sobre o funcionamento de sections.txt em Arquivos de Configuração. Usando...
  8. Pontos de ancoragem para aplicações

    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...
  9. Category

    Este objeto representa uma categoria de produtos da loja. id: Id da categoria. name: Nome da categoria. description: Descrição da categoria. url: URL da categoria. parent: Objeto Category correspondente à categoria pai. subcategories: Array d...
  10. Adicione o Google Avaliações do Consumidor

    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 %} ...