Fragmentos HTML para Produtos

{% for category in categories %}
  <li>
  <a href="{{category.url}}"><span>{{category.name}}</span></a>
  <ul>
    {% for product in category.products %}
      <li>{{ product.name }}</li>
    {% endfor %}
  </ul>
  </li>
  {% for subcategory in category.subcategories %}
    <li>
      <a href="{{subcategory.url}}"><span>{{ subcategory.name }}</span></a>
      <ul>
        {% for product in subcategory.products %}
          <li>{{ product.name }}</li>
        {% endfor %}
      </ul>
    </li>
  {% endfor %}
{% endfor %}

<div>
  <label for="order">{% t "Sort by" %}:</label>
  <select onchange="window.location.href = this.value">
    {% for sorting_option in products.sorting_options %}
      <option {% if sorting_option.selected %} selected = "selected"{%endif%} value="{{sorting_option.url}}#galleryProduct">
        {{sorting_option.text}}
      </option>
    {% endfor %}
  </select>
</div>

<div id="galleryProduct">
  {% for product in products.all limit:8 %}
    {{ product.name }}
  {% endfor %}
</div>

{% if product.images.size > 0 %}
  <ul>
    <li class="main-image">
      <a href="{{product.images.first}}">
        <img src="{{product.images.first}}" title="{{product.name}}" alt="{{product.name}}" />
      </a>
    </li>

    {% if product.images.size > 1 %}
      {% for image in product.images offset:1 %}
      <li class="mode-images">
        <a href="{{ image | resize:'640x400'}}">
          <img src="{{ image | thumb:'120x100' }}" title="{{product.name}}" alt="{{product.name}}" />
        </a>
      </li>
      {% endfor %}
    {% endif %}
  </ul>
{% endif %}