Control and Change Order of the Collections List Page

Supported Versions

The compatibility of the steps shared in this article may vary on your theme version. To keep your theme up to date, check out this helpful document.

All of our themes include a Collections List page at the URL your-store.com/collections that shows all of your collections in alphabetical order. Follow the steps below to specify which collections are included, and how to change their order on the page.

Create a menu to control your collections list page

Step 1: From your Shopify Admin, head into Online store > Navigation.

Step 2: Click Add menu.

Step 3: Name your menu All collections. Please note: it must be called this in order for these instructions to work. The menu name doesn't show on your online store.

Step 4: Click Add a menu item. In the Add menu item window, enter the name of a collection that you want to show on the collections list page. Click the Link field and select Collections, and then click the name of the collection:

If you need to re-order menu items, they can be dragged and dropped in order!

Step 5: Save your menu.

Edit your list-collections.liquid template

You can edit the code for your collections list page so that the page displays only the collections that you have included in the All collections menu that you just made.

Step 1: From your Shopify Admin, head into Online store > Themes > Actions > Edit code > Sections.  

Step 2: In the Sections folder, locate the list-collections-template.liquid file.

Please note: in the Flex theme, this will be the list-collections__main.liquid file.

Step 3: Locate the following code:

{% for collection in collections %}

and replace it with this: 

{% for link in linklists.all-collections.links %}
{% assign collection = link.object %}

Step 4: For Flex, Parallax, Retina, Responsive, Mobilia, and Artisan – locate and remove the following code (in older theme versions, this will be include instead of render):

{% render 'pagination' with sidebar %}

For the Turbo theme – locate and remove the following code:

 {% if settings.pagination_type == 'basic_pagination' %}
 {% include 'pagination', paginate: paginate %}
 {% else %}
 {% if paginate.next.url %}
 <span class="js-load-more load-more">
 <a href="{{ paginate.next.url }}" data-no-instant class="load-more__btn action_button continue-button">
 {{ 'collections.general.load_more_collections' | t }}
 </a>
 </span>
 {% endif %}
 {% endif %}

Step 5: Save your file!