{% for product in collection.products %}
<li class="product threecol{% cycle ' first', '', '', ' last' %}" data-alpha="{{ product.title }}" data-price="{{ product.price }}">     
    <a href="{{ product.url | within: collection }}">  
        <img src="{{ product.images[0] | product_img_url: 'large' }}" alt="{{ product.title | escape }}" />
    </a>
    {% if product.price < product.compare_at_price %}<div class="sale"></div>{% endif %}
        {% for col in product.collections %}
            {% if col.handle == 'new' %}
                <div class="new"></div>
            {% endif %}
        {% endfor %}  
    <div id="product-info"> 
        <a href="{{ product.url | within: collection }}"> 
            {% if settings.show-vendor %}<p>{{ product.vendor }}</p>{% endif %}
            <h3>{{ product.title | truncate: 70 }}</h3>
        </a>
        <div class="price">
          {% if product.price < product.compare_at_price %}
          <span class="onsale">{{ product.price | money }}</span>
          <span class="was">{{ product.compare_at_price | money }}</span>
            {% else %}
          {{ product.price | money }}{% endif %}
      	</div>
    </div>
</li>
{% endfor %}