Liquid is the templating language that’s used to build Shopify themes. Using Liquid code can give merchants flexibility and control over the look of their storefront.
This guide covers one of the key files that’s included in many themes — the Shopify Liquid collection list template. We’ll show you how to find this template (as well as how to add your own if it doesn’t currently exist), and we’ll go over how to implement some of the most common edits merchants make to this template as well.
The collection list template is the file that’s used to render your store’s collection list page. As you might have guessed, this page lists out all of your store’s collections. You can see what this page currently looks like by adding /collections to the end of your store’s URL.
You can find your collection list template file by simply following these steps:
All of the examples in this guide use the latest version of the Dawn theme. If you use another theme, the exact file names and processes referenced here may differ in your case.
Now, let’s go over how to make three common edits to this template: changing the order of collections in the collection list, hiding a collection from the collection list, and customizing the featured image of a collection in the list.
By default, your collections will be listed alphabetically. To change this, you need to edit the following line in your “list-collections.json” file:
"sort": "alphabetical",
For example, if you wanted your collections to be listed in reverse alphabetical order, you would replace the above line with the following:
"sort": "alphabetical_reversed",
After you save your changes to the code, you’ll be able to immediately see the results on the live version of your site.
In addition to alphabetical and alphabetical_reversed, you can also input the following values here to change how your collections are sorted:
You may want to hide one or more of your collections from the collections list page. For example, in the screenshot above you can see that our sample store’s collection list page includes an option for “Summer fun collection, under $100, Beachwear” — with its long title and highly specific parameters, this collection doesn’t really fit in with the others, so it makes sense to remove it from this page.
To hide a collection, open your theme’s “base.css” file and add the following line of code to the bottom (just swap out the URL suffix referenced here with the URL suffix of the specific collection you want to hide):
.collection-list .collection-list__item:has(a[href="/collections/summer-fun-collection-under-100-beachwear"]){display:none}
That’s it! Once you save your changes, the collection will be hidden.
By default, the primary image of the first item listed in a collection will be used as the featured image for the collection, but you can change this to any other image that you’ve uploaded to your store.
The easiest way to update a collection’s featured image is by using the Shopify control panel:
You also have the option to change the image ratio of the featured images on your collection list page, which can be done by editing your “list-collections.json” file. For example, if you want to change the ratio from square to portrait, you just need to replace this line:
"image_ratio": "square",
With this:
"image_ratio": "portrait",
In addition to square and portrait, you can use the “adapt” value in this field to have each featured image displayed in its original ratio.
If your theme doesn’t have a collection list template, don’t worry — it’s easy to add one yourself.
You’ll need to add two files, actually: the JSON template for the collection list page and the Liquid file for the section that this template references.
First, open the “templates” folder in the Shopify code editor and select “Add a new template”. Name this file “list-collections.json” and add the following code:
{
"sections": {
"main": {
"type": "main-list-collections",
"settings": {
"title": "Collections",
"sort": "alphabetical",
"image_ratio": "square",
"columns_desktop": 3,
"columns_mobile": "2"
}
}
},
"order": [
"main"
]
}
Next, open the “sections” folder and select “Add a new section”. Name this file “main-list-collections.liquid” and add the following code:
{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'section-collection-list.css' | asset_url | stylesheet_tag }}
<div class="page-width">
<h1 class="title title--primary inline-richtext">{{ section.settings.title }}</h1>
{%- liquid
case section.settings.sort
when 'products_high', 'products_low'
assign collections = collections | sort: 'all_products_count'
when 'date', 'date_reversed'
assign collections = collections | sort: 'published_at'
endcase
if section.settings.sort == 'products_high' or section.settings.sort == 'date_reversed' or section.settings.sort == 'alphabetical_reversed'
assign collections = collections | reverse
endif
assign moduloResult = 28 | modulo: section.settings.columns_desktop
assign paginate_by = 30
if moduloResult == 0
assign paginate_by = 28
endif
-%}
{%- paginate collections by paginate_by -%}
<ul
class="collection-list grid grid--{{ section.settings.columns_desktop }}-col-desktop grid--{{ section.settings.columns_mobile }}-col-tablet-down"
role="list"
>
{%- for collection in collections -%}
<li class="collection-list__item grid__item">
{% render 'card-collection',
card_collection: collection,
media_aspect_ratio: section.settings.image_ratio,
columns: 3
%}
</li>
{%- endfor -%}
</ul>
{% render 'pagination', paginate: paginate %}
{%- endpaginate -%}
</div>
{% schema %}
{
"name": "t:sections.main-list-collections.name",
"class": "section",
"settings": [
{
"type": "inline_richtext",
"id": "title",
"label": "t:sections.main-list-collections.settings.title.label",
"default": "Collections"
},
{
"type": "select",
"id": "sort",
"options": [
{
"value": "alphabetical",
"label": "t:sections.main-list-collections.settings.sort.options__1.label"
},
{
"value": "alphabetical_reversed",
"label": "t:sections.main-list-collections.settings.sort.options__2.label"
},
{
"value": "date_reversed",
"label": "t:sections.main-list-collections.settings.sort.options__3.label"
},
{
"value": "date",
"label": "t:sections.main-list-collections.settings.sort.options__4.label"
},
{
"value": "products_high",
"label": "t:sections.main-list-collections.settings.sort.options__5.label"
},
{
"value": "products_low",
"label": "t:sections.main-list-collections.settings.sort.options__6.label"
}
],
"default": "alphabetical",
"label": "t:sections.main-list-collections.settings.sort.label"
},
{
"type": "select",
"id": "image_ratio",
"options": [
{
"value": "adapt",
"label": "t:sections.main-list-collections.settings.image_ratio.options__1.label"
},
{
"value": "portrait",
"label": "t:sections.main-list-collections.settings.image_ratio.options__2.label"
},
{
"value": "square",
"label": "t:sections.main-list-collections.settings.image_ratio.options__3.label"
}
],
"default": "adapt",
"label": "t:sections.main-list-collections.settings.image_ratio.label",
"info": "t:sections.main-list-collections.settings.image_ratio.info"
},
{
"type": "range",
"id": "columns_desktop",
"min": 1,
"max": 5,
"step": 1,
"default": 3,
"label": "t:sections.main-list-collections.settings.columns_desktop.label"
},
{
"type": "header",
"content": "t:sections.main-list-collections.settings.header_mobile.content"
},
{
"type": "select",
"id": "columns_mobile",
"options": [
{
"value": "1",
"label": "t:sections.main-list-collections.settings.columns_mobile.options__1.label"
},
{
"value": "2",
"label": "t:sections.main-list-collections.settings.columns_mobile.options__2.label"
}
],
"default": "2",
"label": "t:sections.main-list-collections.settings.columns_mobile.label"
}
]
}
{% endschema %}
Once these files have been created, go ahead and add /collections to the end of your store’s URL to see what your new collection list page looks like.
If you would like to customize any of the individual collection pages on your site, Shogun makes it especially easy to do so.
You’ll first need to import the collection page you want to edit from Shopify into Shogun, which only takes a couple steps:
After you’ve imported the page, you’ll then be able to customize it with Shogun’s visual editor. This tool provides you with an extensive library of pre-made ecommerce elements that you can use to quickly set up and edit your collection page.
The element library includes structural elements like slider sections and accordion menus, content elements like text and images (as well as more complex content like interactive maps and countdown clocks), and Shopify elements like product boxes and image galleries that are automatically populated with the appropriate data from your Shopify account. You have the flexibility to arrange the elements however you want, and each element is fully customizable.
It’s also worth noting that any page you build with Shogun can be saved as a reusable template. If you plan to use the same design for multiple collection pages, this feature has the potential to save you an enormous amount of time.
Finally, you should consider taking advantage of one of Shogun’s most powerful features: Personalization.
With this tool, you can show a version of a page to one segment of your visitors while simultaneously showing an alternate version to another.
There are many reasons why you might want to do this for your collection list page. For one, you could adjust the order of your collections depending on the visitor’s purchase history, listing the collections they will most likely be interested in first. Also, if you’re not allowed to sell some of your products in certain markets, you could use the Personalization feature to hide such collections from visitors located in areas where they are banned while keeping them displayed in areas where they are allowed.
Overall, Shogun gives you the ability to create truly unique online shopping experiences, allowing you to stand out from the competition and convert more visitors into paying customers.
