12. Icon 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 Shopify Admin > 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

Full width - Allows the page to fill the full width of the browser's window.

How many products per row - Choose your layout to show 2, 3, 4, 5 or 6 products per row.
*Note - This will default to 4 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.

Infinite scroll products - Allows products to continuously load as you scroll down the page. Pagination is not shown when enabled.

Description position - Specifies the position of the collection's description. By default will be set to the "Top of page" option, setting to the "Bottom of page" option will position the description beneath the collection grid.

Filters position - Specifies the position of the filters drop downs on the page. By default is set to the "Left sidebar" option which can be changed to the "Top of page" option will display on top of the product grid.

Make sidebar sticky - Allows the sidebar to remain in view when scrolling down the page. Will only work when the Filters position option is set to "Left sidebar".

Filter Styles - Allows changing the colors that are applied to the filter drop downs, including the background color, border color and

Step 2: Add a sidebar with re-orderable blocks

You can add the following re-orderable, drag and drop blocks to your sidebar. Up to 12 blocks of content can be added.

Menu

You can add two content blocks to the collection sidebar, Menu, and Vendors List. 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 menu, create your new menu and save. You can add more menus to give easy navigation to your customers.

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.

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 

These drop downs filter by using product tags. For this example the first filter we set up was for Filter by Print, we listed all the print names 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 the color red, mint, and gold so it is tagged appropriately. 

Image

You can upload a sidebar image or an advertisement.

Text

If you want to feature a coupon code or share simple text use the text block and add a heading and subheading.