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, you can create, edit and organize your collections from 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 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.
How many products per page - Shopify has a limit of 50 products per page which must be respected. The theme allows options to show 24, 36 or 48 products per page before a pagination menu linking to pages 2, 3, 4, etc. will show at the bottom of a collection page.
Step 2: Add Sort by and Tag Filters
Show sort by - Allow customers to sort your products by name, date, price and best selling. By default, the collection pages will load in the order that you have specified within the collection admin.
Tag Filters - You can add up to three 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 filter will show as dropdowns above the product images. However, you can show these as a sidebar if you use section blocks.
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. You can add more menus to give easy navigation to your customers.
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!