New 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. Banners informativos

    Neste tutorial vamos adicionar banners informativos, basicamente eles são banners que contêm: Um ícone Um título Um texto Um link (opcional) Temos um total de 7 banners para mensagens diferentes: Frete Cartões de crédito Segurança Trocas...
  3. Como mostro o preço no produto?

    {{ product.price | money_long }} {{ product.compare_at_price | money_long }} ...
  4. Como mostrar as fotos na pagina do produto?

    Código para mostrar a imagem de um único produto : {% if product.featured_image %} {{ product.featured_image | product_image_url('medium') | img_tag }} {% endif %} Existem tamanhos pré-fixados para as imagens (largura em pixel...
  5. 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 }} ...
  6. Como crio outras seções de destaque?

    Primeiro você deve modificar o arquivo sections.txt, inserindo sua nova seção, como por exemplo: ofertas name = Ofertas description = (Pon aquí los productos que más quieras destacar como ofertas) {% for product in sec...
  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. 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 }} ...
  9. Como carregar uma imagem configurável pelo usuário?

    Código em settings.txt: Homepage     meta         icon = picture-o         advanced = true     title         title = Imagem da homepage     image         title = Imagem da homepage         original = imagen-home.jpg         width = 3...
  10. Como implementar o scroll infinito?

    Os templates da Nuvem Shop oferecem scroll infinito por padrão, ou seja, a medida que o usuário rola a página, mais produtos são mostrados automaticamente. Para aplicar esse comportamento, você deve ter em sua conta as seguintes configurações: ...