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 %} <br><br> Adicionando uma ordenação de produtos:

    <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>   <br><br> Mostrar todas as imagens de produtos:


    {% 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 %}