Collection
The collection context in a StoreOS Fluid theme, with its route, sorting, pagination, the collection object and an example widget.
The collection context renders a collection of products, 24 to a page.
Route
/collections/:handle
/collections/all shows every product in the store. Its collection is called All products and has the handle all. A handle that matches no collection isn't rendered by the theme.
The page reads three query string parameters:
| Parameter | Meaning |
|---|---|
page | The page number. Default 1 |
sort | newest (default), oldest or title |
q | Only products matching this text |
For example, /collections/shoes?sort=title&page=2. They're also available in templates as request.page, request.sort and request.q.
Widgets
The widgets listed under pages.collection in the theme document.
{ "pages": { "collection": ["main-collection"] } }Data
| Object | Contents |
|---|---|
collection | The collection being viewed, with the current page of its products. See collection |
page_title | The collection's title |
Plus the data on every page.
Pagination
| Field | Contents |
|---|---|
collection.products | The 24 products on this page |
collection.products_count | How many products there are in all, across every page |
collection.current_page | The page being viewed |
collection.page_size | Products per page |
collection.pages | The number of pages |
collection.previous_page, collection.next_page | The neighbouring page numbers, or empty on the first and last page |
Filters
collection_href builds a link to a collection page that keeps the sort order and search. money, image_url. See Filters and tags.
Example
{% comment %} widgets/main-collection.fluid {% endcomment %}
<section class="collection">
<h1>{{ collection.title }}</h1>
{% if collection.description != blank %}<p>{{ collection.description }}</p>{% endif %}
<nav class="sort">
<a href="{{ collection.handle | collection_href: 'newest' }}">Newest</a>
<a href="{{ collection.handle | collection_href: 'oldest' }}">Oldest</a>
<a href="{{ collection.handle | collection_href: 'title' }}">A–Z</a>
</nav>
<ul class="grid">
{% for product in collection.products %}
<li>
<a href="{{ product.url }}">
<img src="{{ product.featured_image | image_url }}" alt="{{ product.title }}" loading="lazy">
<h3>{{ product.title }}</h3>
<p>{{ product.price | money }}</p>
</a>
</li>
{% else %}
<li>No products found.</li>
{% endfor %}
</ul>
{% if collection.pages > 1 %}
<nav class="pagination">
{% if collection.previous_page %}
<a href="{{ collection.handle | collection_href: request.sort, collection.previous_page, request.q }}">Previous</a>
{% endif %}
<span>Page {{ collection.current_page }} of {{ collection.pages }}</span>
{% if collection.next_page %}
<a href="{{ collection.handle | collection_href: request.sort, collection.next_page, request.q }}">Next</a>
{% endif %}
</nav>
{% endif %}
</section>