Collections

Collections are hand-picked products that you’d like to display in a group on the front end of your store. A common usage is outputting a "featured" collection of products on the home page. This could include “On Sale” products, “Most Popular” products, “New” products, and so forth.

Collections are managed from Product Catalog > Collections.

For a walkthrough on displaying collections, check out the Tutorial. Collections code snippets are located in our code examples.

Adding Collections

To add a new Collection, simply click the plus button and specify the following values.

Name: The value entered here will be the name used for your product collection in the back-end of your store.

API Code: The value set here will be used for accessing the collection in the front-end of your store.

<

Adding Products to a Collection

To add products to the collection, expand the products tab on the add collections form. Find products to add to the collection by using the search field. Click the Select button next to a product name to add it to the collection. Once selected, the button will switch from Select to Added and the product text will turn green in the list products returned by the search.



Setting Display Order for Collections

To set the default order in which products in a collection will be displayed, click the 3 bars on the right for any product in the collection and drag it up or down to change the order.



Displaying Product Collections

Once you have configured a product collection in the back-end of your store, LemonStand 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. See our theme documentation for more information on displaying product collections.

To learn how to configure product collections in the back-end of your store, check out the Overview tab.

{% 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).