Popular Articles

  1. Imagem da loja ao compartilhar seu link

    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...
  2. Promoções

    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 ...
  3. 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 }} ...
  4. Carrinho de compras rápidas

    Neste artigo, veremos como adicionar o carrinho de compras ao seu layout, que é mostrado em um pop-up sem ter que atualizar a página ao adicionar um produto ao carrinho: Essa funcionalidade inclui o carrinho de compras com: Uma notificação exi...
  5. 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 %} ...
  6. 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...
  7. 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...
  8. 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 ...
  9. 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...
  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 vamos fazer, é adicionar a segunda imagem (se o produto a possuir) ao item da lista. Vamos procurar o...