Documentação para Web Designers

Crie seus próprios layouts na Nuvem Shop

Como mostrar a lista de produtos?

{% for product in products %}
    <div class="produto">
    {{ product.featured_image | product_image_url("medium") | img_tag(product.name) | a_tag(product.url) }}
    <h3>{{ product.name }}</h3>
    {% if product.display_price %}
        <small>{{ product.price | money }}</small>
    {% endif %}
    </div>
{% endfor %}

Para separar seus produtos em linhas e colunas você pode agrupá-los em um div da seguinte maneira:

{% for product in products %}
    {% if loop.index % 3 == 1 %}
        <div class="linha">
    {% endif %}
    ... producto ...
   {% if loop.index % 3 == 0 or loop.last %}
      </div>
   {% endif %}
{% endfor %}

Você pode reutilizar o código anterior em todo lugar que precisar mostrar a lista de produtos, para isso bata copiar o código em um novo arquivo e salvá-lo com a extensão .tpl por exemplo grid-produtos.tpl. Nas seções que você quer visualizar o grid, você apenas precisa colocar a chamada para esse arquivo {% snipplet “grid-produtos.tpl” %}