Popular Articles

  1. Barra de categorias na página inicial

    Neste tutorial vamos adicionar um componente na página inicial para mostrar as categorias. HTML A primeira coisa que vamos fazer é criar as pastas home e navigation dentro da pasta snipplets, se você ainda não as tiver. 1. Dentro da pasta  s...
  2. Como adaptar o zoom de produtos para dispositivos móveis

    Com a crescente prolifeiração de dispositivos móveis, muitas das interações de nossos websites precisam ser reformuladas. Uma delas é o evento "hover" . Ele é a ação de posicionar o cursor do mouse sobre um elemento, sem clicar. O evento hover acom...
  3. Como mostrar menus de navegação no meu layout?

    Dentro do seu administrador você pode criar menus para incluir links que podem ser categorias, páginas de conteúdo, links externos etc. Estes menus podem ser independentes ou podem serem incluídos em outros menus como sub-menus. É possível ac...
  4. Como coloco os links de login, logout e minha conta?

    Os compradores de sua loja podem criar uma conta para poder ver o status de seus pedidos. Para incluir os links necessários em sua loja você apenas precisa colocar o seguinte código: {% if 'mandatory' not in store.customer_accounts %} ...
  5. Barra de anúncios

    No tutorial a seguir adicionaremos a barra localizada acima do head da loja. Ela contém uma área de texto com a possibilidade de atribuir um link. HTML 1.  Para começar vamos criar um novo snipplet chamado header-advertising.tpl , onde criamo...
  6. Como mostrar a lista de produtos?

    {% for product in products %} {{ product.featured_image | product_image_url("medium") | img_tag(product.name) | a_tag(product.url) }} {{ product.name }} {% if product.display_price %} {{ product.price | money }} ...
  7. Classes helper ou utilities

    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...
  8. Medindo a velocidade do seu site

    Comprender como seu site fica em termos de velocidade, é muito importante para saber onde pode aplicar mudanças. Na Nuvem Shop usamos duas ferramentas do Google para medir a velocidade: PageSpeed e Lighthouse . As duas retornam resultados com...
  9. Settings.txt

    Dentro do arquivo settings.txt definimos variáveis que podem ser configuradas pelo dono da loja no administrador Nuvem Shop, dentro de Opções de Layout. A estruturação do arquivo se dá da seguinte forma: Título Nome da variável ...
  10. Segunda imagem em rolagem

    Neste tutorial, implementaremos uma segunda imagem na listagem de produtos, que é exibida ao passar pelo produto. HTML 1. A primeira coisa que faremos é substituir a imagem pelo componente privado de imagem para o item de produto produ...