---
description: Displays a product list.
---
{# takes products as an argument #}
<div class="grid-container fluid">
  <div class="grid-x grid-margin-x small-up-2 medium-up-3 large-up-6">
    {% for product in products %}
      <div class="cell">
        <div class="card">
          <a href="product/{{ product.url_name }}">
            <img
              src="{{ product.images.first.thumbnail(400, 400)
                | default('http://placehold.it/400x400') }}"
              alt="{{ product.images.first.description }}"
              title="{{ product.images.first.description }}" />
            <section class="card-section">
              <div class="grid-x">
                <div class="cell medium-8">{{ product.name }}</div>
                <div class="cell medium-4">
                  {{ product.price | currency }}
                </div>
              </div>
            </section>
          </a>
        </div>
      </div>
    {% endfor %}
  </div>
</div>

---
description: Displays a product list.
---
{# takes products as an argument #}
<div class="grid-container fluid">
  <div class="grid-x grid-margin-x small-up-2 medium-up-3 large-up-6">
    {% for product in products %}
      <div class="cell">
        <div class="card">
          <a href="product/{{ product.url_name }}">
            <img
              src="{{ product.images.first.thumbnail(400, 400)
                | default('http://placehold.it/400x400') }}"
              alt="{{ product.images.first.description }}"
              title="{{ product.images.first.title }}" />
            <section class="card-section">
              <div class="grid-x">
                <div class="cell medium-8">{{ product.name }}</div>
                <div class="cell medium-4">
                  {{ product.price | currency }}
                </div>
              </div>
            </section>
          </a>
        </div>
      </div>
    {% endfor %}
  </div>
</div>

Set image title text to correct field.
Set image title text to correct field.
