12. Testament Theme: Setting up the Collections Page
In this article, we will go through how to set up the Collections page, with or without filters.
Collection pages show groups of products, sometimes referred to as categories. In Shopify a collection would be a category that you can create, edit and organize. You can access these things through the main Shopify admin by going to Online store > Products > Collections. Within the theme editor, there are also options on which content is shown on the collections page and the order of that content.
To edit the collection page settings, from the theme editor go to the template picker and choose Collection pages.
Step 1: Choose Settings
How many products per page - Shopify has a limit of 50 products per page which must be respected. This theme allows options to show anywhere between 2-50 products per page before a pagination menu linking to pages 2, 3, 4, etc. will show at the bottom of the collection page.
How many products per row - Choose your layout to show 2, 3, 4, 5 or 6 products per row. *Note - This will default to 2 products per row on mobile.
Step 2: Add Sort by and Tag Filters
Show sort by - Allow customers to sort your products by featured products, product name, product creation date, product price, and best selling products. By default, the collection pages will load in the order that you have specified within the collection admin. You can also change the title that is set to "Sort By" as default to whatever you see fit for your store.
Tag Filters - You can add in filter dropdown selectors. These dropdowns filter by using Product Tags. For this example the first filter we set up was for Filter by Color, we listed all the color options separated by a comma (this is case sensitive it must match the product tag exactly).
In order for the filters to work products must be tagged with the tags listed in the filter. For example, this product above comes in sizes S, M, and L, and Olive or Black so it is tagged appropriately.
Step 3: Use Sidebar for Filters and add a Menu
By default, the collection pages filters will show as drop-downs to the left of the product images. You can also add menus to the sidebar to give more and easier navigation to your customers.
To do this scroll to the Content settings and click Add content choose to add a Menu.
If you choose Menu you will need to select a menu to display or create a new one. In this example, we created a new menu called Sidebar List. To do this, we click Add Content > Change (menu) > Create link_list, create your new menu and save.
Step 3: Add Sidebar Vendor List
You can also choose to add an automatically generate Vendor List when selecting it. You will just need to give it a Vendor list title. Be sure to click the save button when you're done.
That's it for the Collection page next up is the Product Page!