Display Product Collections

LemonStand provides the ability to group sets of products into meaningful collections that can then be displayed in the front-end of your store. One of the more common usages for product collections would be to display a list of "featured" products on your home page.

Once you have configured a product collection in the back-end of your store, LemonStand then provides easy to use syntax to display the products contained within your collection on the front-end. Product collection lists can be displayed on any page or partial in your store and can be styled in any way you want.

To learn how to configure product collections in the back-end of your store, reference the managing product collections article.

{% set featuredCollection = 'featured'|collection %}
{% for product in featuredCollection.products %}
    {{ product.name }}
{% endfor %}

To output a list of product collections on one of your pages or partials, first create a variable and set it equal to the value you entered for the API Code when creating your product collection. Also, specify a filter of|collection to tell LemonStand that the API Code being referenced is for a collection.

{% set featuredCollection = 'featured'|collection %}

Now you can iterate through each of the products contained within the collection using {% for product in featuredCollection.products %}}. Any of the usual product variables can be accessed within the for loop, such as {{ product.name }}, {{ product.price }}, {{ product.images }} and so on.

{% set featuredCollection = 'featured'|collection %}
{% paginate featuredCollection.products by 8 %}
    {% for product in pagination.items %}
        {{ product.name }}
    {% endfor %}
{% navigation %}
{% endpaginate %}

Product collection lists can also be paginated using LemonStand's pagination syntax. Simply output your product collection list as illustrated above but wrap the for loop in a paginate tag using {% paginate featuredCollection.products by 8 %}, where "by 8" will equal the number of products that will constitute one page. Then use the {% navigation %} tag to generate the paged navigation and finally close the paginate section using {% endpaginate %}.

Also, ensure that the URL value for the page you are intending to use pagination on has its URL value set to use the :page? parameter. Example:/my-page/:page

You also have the ability to sort your products by passing in the following query string parameters through a URL that renders product collections.

  • orderBy, where valid field names to sort on are id, name, sku, base_price, and created_at.
  • order, where valid values are 'asc' and 'desc' (if this parameter is left unused, the default sort will be ascending).