How to Create a Page of Collections on Shopify

Collections are a great way to organise your products on Shopify but how do you create a page that just shows a selection of curated collections?

In this Shopify tutorial, I will go through all of the steps to enable you to create a custom collections page.

Show All Collections

If you want to create a page that lists all of your collections, Shopify does include a standard template that allows you to do this.

To add this page to your Shopify store, in your admin dashboard go to Online Store → Navigation → Main Menu and then click add item to menu and the following pop up will appear:

All Shopify Collections

The first option is to add a name for this link, which is completely up to you but when you click in the link box, a menu will appear a you want to click Collections and then All Collections.

This will add a link to your menu and if you want to confirm these changes, click Save Menu at the bottom of the page and this option will be added to your main menu.

You can then go into the Shopify theme customizer (Online Store → Themes → Customize) and you will see the new option added to your main menu and there are some options within the customizer for this page. To access these, choose Collections list from the drop down menu at the top of the customizer.

Shopify Collection List - All

In the right sidebar, you will see options for:

  • Header
  • Collections list page
  • Footer

Click on the Collections list page section and it will display all the options that are available and you can choose to show all collections or just ones that you select, you can also choose how you want them to be sorted and also how many collections are shown per row.

Awesome, job done right? Not quite as Shopify only allows you to have one of these pages on your site. To have multiple custom collections pages takes a little bit more work, but I will show you exactly how to do this below.

Creating a Custom Collections Page

Step 1: Create a New Page Template

To create multiple custom collections pages, we are going to need to create a new page template in Shopify and this requires a little bit of code, this may sound scary but it really is quite simple.

To add the new template, you need to go to Online Store → Themes and select Edit Code from the Actions tab next to Customize as can be seen in the image below:

Important: Back Up Your Theme

Now doing this usually doesn’t cause any problems with your site BUT it is always better to be safe than sorry, so from the Actions drop down menu, click duplicate to create a duplicate copy of your theme that you can restore should anything go wrong.

Shopify Edit Code

In the edit code section, go to the templates section and click the Add a new template option and the following pop up will appear:

Shopify Add Page Template

To add the new template, select page from the drop down menu, name it list-collections and then click Create template to create the new template. By default, Shopify add some basic code to this site, which needs to be removed in order to add the correct code.

So select all of the default code and copy and paste the following code:

{% comment %}
  Collections are listed here.
{% endcomment %}

{% capture uses_minimal_framework %}{% include 'product-loop' %}{% endcapture %}

{% if uses_minimal_framework contains 'Liquid error' %}
  {% assign uses_minimal_framework = false %}
  {% assign grid_item_width = 'large--one-quarter large-up--one-quarter medium--one-third medium-up--one-third small--one-half large--col-3 medium--col-4 small--col-6' %}
{% else %}
  {% assign uses_minimal_framework = true %}
  {% assign grid_item_width = 'span3' %}
{% endif %}

{% assign image_size = 'large' %}

{% if linklists[page.handle].links.size > 0 %}
    
  {% assign number_of_links = 0 %}
    
  <div class="grid-uniform{% if uses_minimal_framework %} row{% endif %} clearfix">

    {% for link in linklists[page.handle].links %}

      {% if link.type == 'collection_link' %}

        {% comment %}
        If we have a collection link.
        {% endcomment %}   

        {% assign collection = link.object %}
        {% assign number_of_links = number_of_links | plus: 1 %}

        <div class="grid__item grid-item product-grid-item {{ grid_item_width }} text-center">
          <div class="grid__image product-grid-image">
            <a href="{{ link.url }}" class="grid-image--centered">
            {% comment %}
              Bring in the featured image of the first product in the collection if no collection
              image has been uploaded for it.
            {% endcomment %}
            {% if collection.image %}
              <img src="{{ collection | img_url: image_size }}" alt="{{ link.title | escape }}">
            {% else %}
              {% assign product = collection.products.first %}
              <img src="{{ product | img_url: image_size }}" alt="{{ link.title | escape }}">
            {% endif %}
            </a>
          </div>
          <p class="collection-grid__item-title">
            <a href="{{ link.url }}" class="collection-item__title">{{ link.title }}</a>
          </p>
        </div>
    
        {% if uses_minimal_framework %}
          {% cycle 'clear-item': '', '', '', '<div style="clear:both"></div>' %}
        {% endif %}

      {% elsif link.type == 'page_link' %}

        {% comment %}
        If we have a page link.
        {% endcomment %}

        {% assign number_of_links = number_of_links | plus: 1 %}

        {% assign linked_page = link.object %}                    
        {% assign have_image = false %}

        {% comment %}
          Does the page contain an image? If so, let's use it.
        {% endcomment %}

        {% if linked_page.content contains '<img' %}

          {% assign have_image = true %}
          {% assign src = linked_page.content | split: 'src="' %}
          {% assign src = src[1] | split: '"' | first %}
          {% capture image_suffix %}_{{ image_size }}.{% endcapture %}
          {% assign src = src | replace: '_small.', image_suffix | replace: '_compact.', image_suffix | replace: '_medium.', image_suffix | replace: '_large.', image_suffix | replace: '_grande.', image_suffix %}
        
        {% comment %}
          If the page contains no image, and that page features collections, let's grab the image of the first
          collection on it.
        {% endcomment %}

        {% elsif linklists[linked_page.handle].links.size > 0 and linklists[linked_page.handle].links.first.type == 'collection_link' %}

          {% assign have_image = true %}
          {% assign collection = linklists[linked_page.handle].links.first.object %}

          {% if collection.image %}
            {% assign src = collection | img_url: image_size %}
          {% else %}
            {% assign src = collection.products.first | img_url: image_size %}
          {% endif %}

        {% endif %}

        <div class="grid__item grid-item product-grid-item {{ grid_item_width }} text-center">
          <div class="grid-image product-grid-image">
            <a href="{{ link.url }}" class="grid-image--centered">
              {% if have_image %}
                <img src="{{ src }}" alt="{{ link.title | escape }}" />
              {% else %}
                <img src="{{ link.title | handle | append: '_' | append: image_size | append: '.png' | file_url }}" alt="{{ link.title | escape }}" />
              {% endif %}
            </a>
          </div>
          <p class="collection-grid__item-title">
            <a href="{{ link.url }}" class="collection-item__title">{{ link.title }}</a>
          </p>
        </div>
    
        {% if uses_minimal_framework %}
          {% cycle 'clear-item': '', '', '', '<div style="clear:both"></div>' %}
        {% endif %}

      {% endif %}

    {% endfor %}

  </div>

  {% if number_of_links == 0 %}

  <div class="grid">
    <div class="grid__item grid-item rte text-center">
      <p>
        There are no links of type <i>Collection</i> in your <b>{{ page.title }}</b> link list.
        Go ahead and <a href="/admin/link_lists/{{ linklists[page.handle].id }}" target="_blank">edit your link list</a> to use links that point to collections.
      </p>
    </div>
  </div>

  {% endif %}

{% else %}

<div class="grid">
  <div class="grid__item grid-item rte text-center">
    <p>
      You do not have a link list with a handle set to <kbd>{{ page.handle }}</kbd>, or you do and it's empty. 
      Go ahead and create a link list called <b>{{ page.title }}</b> on your <a href="/admin/links" target="_blank">Navigation page</a> and populate that link list with links that point to collections, to see collections listed here.
      Make sure the link list also has a handle set to <kbd>{{ page.handle }}</kbd>.
    </p>
  </div>
</div>

{% endif %}

<style>
  kbd { 
    background-color: #FBFBE4;
    padding: 1px 4px;
    border-radius: 3px;
  }
</style>

Just to be clear, I didn’t create this code (I’m not that clever!) and you can view the original source on Github.

Once you have pasted the code in to the newly created template, click save and you are ready to move on to the next stage, which is actually creating a page of collections.

Step 2: Create a New Page

Now that we have created our new page template, it is time to put it to use and to do this we are going to create a new page, to do this go to Online Store → Pages → Add page.

Shopify Add a New Page

There are only two things you need to do when you are creating a new page for collections and that is set the name of the page and select the newly created page.list-collections option from the Template suffix drop down menu on the right hand side of the page.

Once this is done, click save to create the new page.

Step 3: Create a New Menu

The next step does seem a little strange but it is an important part of the process, this is because the collections that we are going to include in this menu are what are going to appear on the page the we just created.

To create a new menu go to Online Store → Navigation → Add menu. When naming the new menu, you want it to match the page that you just created, so in this example we are going to be calling them Watches.

Shopify Create Menu

Then choose the collections that you want to appear on the page, as you can see in the image above, these are all different types of watches.

Once you are happy with the collections that you want to display on this page, click Save to create the new menu.

Step 4: Add Page to Main Menu

The final step is to add a link to the new page in your main navigation menu and it is basically the same as the steps show in the Show All Collections sections at the start of this post but I’ll still give a quick summary!

Go to Online Store → Navigation → Main Menu → Add item to menu but instead of going to the Collections section from menu that appears when you click the link box, you want to look under Pages and find the page that you created.

Shopify Add Page to Menu

Once you have found the page, click add and then save the menu and your new collections page will have been added to your main navigation menu. If you then view the front end of your site, when you click on the link to your new collections page, like the image below:

Shopify Collections Page

Important: Add Images to your Collections

If you haven’t added an image to your collection, then it will display the default Shopify placeholder. So make sure you have added images so that it displays properly.

Conclusion

So, there it is, how to create a custom collections page within Shopify and it is a pretty simple process to do.

You can also extend this to have multiple pages of collections that are linked together and this is very simple to do as the process is nearly identical, the only step that is slightly different is that when you create a new menu, link to the pages that you created (in this example watches), rather than collections (hope that makes sense!).

This creates an additional layer for your collection pages and makes navigating around your Shopify store even easier for your visitors and customers.

How to Print Shopify Orders
Shopify Tutorial
How to Create Shopify Collections
Integrate Shopify with WordPress
How to Sell Digital Products on Shopify