Change your collections page

All Shopify stores have a collections page that lives at the URL your-store.com/collections, where all of the collections are shown in alphabetical order. This customization shows you how to re-order collections on your collections page, as well as how to choose a limited selection of collections that you want to display there.

Current versions of all Shopify free themes now include a section that allows you to easily make changes to the layout of your collections page from your Customize theme page. Navigate to your collections page in the theme editor, and then click on the Collections page tab that appears in the sidebar:

Collections page

If you use an older theme that does not include the Collections page section, then you will need to complete the customization below.

Create a menu to control your collections page

  1. Click the Add menu button.

  2. Name your menu All collections. It is important to not change this name, as it will be used by your theme to determine which collections to display on the collections page, and in what order. The name will not display on the page.

  3. Add a menu link for each collection that you would like to display on your collections page. For each menu link, choose Collection from the drop-down menu:

    All collections menu

    To move a menu item to a new position, click and drag the dotted icon that appears on the left of the Name.

  4. Click Save.

For some themes, such as Supply, creating the All collections menu is all that you will have to do. On your storefront, navigate to your collections page (your-store.com/collections) to check whether any changes have taken place. If not, then you will need to customize your theme code by following the next steps.

Customize your list-collections.liquid template

  1. Find the theme you want to edit, click Actions, and then click Edit HTML/CSS.

  2. In the Templates directory, click list-collections.liquid. The file will open in the code editor.

  3. Find all occurrences of the following code:

    {% for collection in collections %}
    

    Replace with:

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

Want to discuss this page?

Visit the Shopify Community