Create more collection lists

This article is for vintage Kingdom theme (versions up to 3.8.0), and doesn't apply to Online Store 2.0 (versions higher than 4.0.0)

With Online Store 2.0, you can now create as many collection list pages as you wish, using the "collection lists" section and custom page templates.

When you have a complex store (lots of projects inside categories and subcategories), you might want to have multiple pages which can hold different collections in then. By default, Shopify only allows for a single "Collections List" template, the one which holds all of your collections (or a selection if you edit the page via the Theme Customizer).

In this article we'll show you how to duplicate this collection list, so you can have more than one page holding your collections.

Please note that the Shopify default "Front page" collection cannot be included here in this custom collection list page.

First of all, go to the theme editor (read this article for more info)
Go the the /sections/ folder and create a new file. Give it a unique name, let's say collection-list-unique.liquid

Insert this content in it:

<div class="page-section list-collections">		
	<div class="list-collections-header">
		<div class="list-collections-header__container">
	    {% render 'breadcrumb' %}
		  <h1 class="collection-header__title h1">{{ 'collections.title' | t }}</h1>
		</div>
	</div>

	{% assign collection_count = 0 %}
	{% assign isEmpty = true %}

	{% if section.settings.display_type == 'all' %}
	  {% case section.settings.sort %}
	    {% when 'products_high' or 'products_low' %}
	      {% assign list_collections = collections | sort: 'all_products_count' %}
	    {% when 'date' or 'date_reversed' %}
	      {% assign list_collections = collections | sort: 'published_at' %}
	    {% else %}
	      {% assign list_collections = collections %}
	  {% endcase %}
	  {% for collection in list_collections %}
	    {% unless collection.handle == 'frontpage' %}
	      {% assign collection_count = collection_count | plus: 1 %}
	    {% endunless %}
	  {% endfor %}
	{% else %}
	  {% assign collection_count = section.blocks.size %}
	{% endif %}

	{% if collection_count > 0 %}
	  {% assign isEmpty = false %}
	{% endif %}
	
	<div class="list-collections-container content-section gutter--on">

		<div class="list-collections__content collection-list gutter--on {{ section.settings.layout }}">

		  {% if section.settings.display_type == 'all' %}

		    {% if section.settings.sort == 'products_low' or section.settings.sort == 'date' or section.settings.sort == 'alphabetical' %}

		      {% if isEmpty %}
		        <p class="no-content-message">{{ 'collections.no_collections' | t }}</p>
		      {% else %}
		        {% for collection in list_collections %}
		          {% if collection.handle == 'frontpage' %}
		            {% continue %}
		          {% endif %}
		          {% render 'collection-item', collection: collection, text_alignment: section.settings.alignment %}
		        {% endfor %}
		      {% endif %}

		    {% else %}

		      {% if isEmpty %}
		        <p class="no-content-message">{{ 'collections.no_collections' | t }}</p>
		      {% else %}
		        {% for collection in list_collections reversed %}
		          {% if collection.handle == 'frontpage' %}
		            {% continue %}
		          {% endif %}
		          {% render 'collection-item', collection: collection, text_alignment: section.settings.alignment %}
		        {% endfor %}
		      {% endif %}

		    {% endif %}

		  {% else %}

		    {% if section.blocks == empty %}

		    {% else %}
		      {% for block in section.blocks %}
		        {% render 'collection-item', collection: collections[block.settings.collection], text_alignment: section.settings.alignment, image: block.settings.image %}
		      {% endfor %}
		    {% endif %}

		  {% endif %}

		</div>

	</div>

</div>
	
{% if section.settings.color_text != 'rgba(0,0,0,0)' %}
	{% style %}
	  #shopify-section-{{ section.id }} .collection-item__header {
	    color: {{ section.settings.color_text }};
	  }
    #shopify-section-{{ section.id }} .collection-item__title span {
      background-image: linear-gradient(to right, {{ section.settings.color_text }}, {{ section.settings.color_text }});
    }
	{% endstyle %}
{% endif %}


{% if section.settings.color_bg != 'rgba(0,0,0,0)' %}
	{% style %}
	  #shopify-section-{{ section.id }} .collection-item__background:after {
	    background: {{ section.settings.color_bg }};
	  }
	{% endstyle %}
{% endif %}

{% schema %}
	{	  
		"name": "Collections list",
		"class": "overflow-hidden",
		"settings": [
      {
				"type": "select",
				"id": "layout",
				"label": "Layout",
				"options": [
					{
						"value": "layout-fulls",
						"label": "100%"
					},
					{
						"value": "layout-halves",
						"label": "50%"
					},
					{
						"value": "layout-thirds",
						"label": "33.333%"
					}
				],
				"default": "layout-halves"
      },
      {
        "type": "select",
        "id": "alignment",
        "label": "Text alignment",
        "options": [
          {
            "value": "horizontal-left vertical-top",
            "label": "Left top"
          },
          {
            "value": "horizontal-center vertical-top",
            "label": "Center top"
          },
          {
            "value": "horizontal-right vertical-top",
            "label": "Right top"
          },
          {
            "value": "horizontal-left vertical-middle",
            "label": "Left middle"
          },
          {
            "value": "horizontal-center vertical-middle",
            "label": "Center middle"
          },
          {
            "value": "horizontal-right vertical-middle",
            "label": "Right middle"
          },
          {
            "value": "horizontal-left vertical-bottom",
            "label": "Left bottom"
          },
          {
            "value": "horizontal-center vertical-bottom",
            "label": "Center bottom"
          },
          {
            "value": "horizontal-right vertical-bottom",
            "label": "Right bottom"
          }
        ],
        "default": "horizontal-left vertical-top"
      },
      {
        "type": "header",
        "content": "Colors"
      },
      {
        "type": "color",
        "id": "color_text",
        "label": "Custom text color",
        "default": "rgba(0,0,0,0)"
      },
      {
        "type": "color",
        "id": "color_bg",
        "label": "Background overlay",
        "default": "rgba(0,0,0,0)"
      },
      {
				"type": "header",
				"content": "Collections"
      },
		  {
		    "type": "paragraph",
	      "content": "All of your collections are listed by default. To customize your list, choose 'Selected' and add collections."
		  },
		  {
		    "type": "radio",
		    "id": "display_type",
	      "label": "Select collections to show",
		    "default": "all",
		    "options": [
		      {
		        "value": "all",
	          "label": "All"
		      },
		      {
		        "value": "selected",
	          "label": "Selected"
		      }
		    ]
		  },
		  {
		    "type": "select",
		    "id": "sort",
	      "label": "Sort collections by:",
	      "info": "Sorting only applies when 'All' is selected",
		    "default": "alphabetical",
		    "options": [
		      {
		        "value": "products_high",
	          "label": "Product count, high to low"
		      },
		      {
		        "value": "products_low",
	          "label": "Product count, low to high"
		      },
		      {
		        "value": "alphabetical",
	          "label": "Alphabetically, A-Z"
		      },
		      {
		        "value": "alphabetical_reversed",
	          "label": "Alphabetically, Z-A"
		      },
		      {
		        "value": "date",
	          "label": "Date, old to new"
		      },
		      {
		        "value": "date_reversed",
	          "label": "Date, new to old"
		      }
		    ]
		  }
		],
		"blocks": [
		  {
		    "type": "collection",
	      "name": "Collection",
		    "settings": [
	        {
	          "type": "collection",
	          "id": "collection",
	          "label": "Collection"
	        },
	        {
	          "type": "image_picker",
	          "id": "image",
	          "label": "Image",
	          "info": "If the collection doesn't have a featured image."
	        }
		    ]
		  }
		]
	}
{% endschema %}

Go to the /templates/ folder and create a new file. Give it a unique name, but put the "page" prefix, like this: page.collection-list-unique.liquid
Insert this content in it:
```
{% section 'collection-list-unique' %}
	
```
Use the name that you've given to your created section here.
Save all files, go to the page editor, create a new page, and select the newly created page template
Open the theme customizer and choose to customize the page you've just created
Now you can use the blocks to add custom collections.