Icon Theme: Setting up the Collection Pages
On this page:
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.
- Full width:
Allows the page to fill the full width of the browser's window.
- 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.
- Products per page:
Shopify has a limit of 50 products per page which must be respected. The theme allows options to choose how many 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 this is 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 filter dropdowns 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
Collection pages can include an optional sidebar that will contain up to 12 blocks of content.
To enable the sidebar set the Filters position option (above) to: Left Sidebar. This will allow your content to position itself within a left sidebar, adjacent to the products on the page.
Allows you to choose a menu from the Navigation section of your store admin.
For help with creating or editin menus see Shopify's helpful documentation
- Vendor List
A vendor list is an automatically generated list of all vendors that appear in your store.
Note that when clicking on a vendor list, this will not filter just vendors in the current collection but will instead go to a page displaying all products that share the same vendor.
- 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.
Spelling and case are essential, if you have added tags to your products with uppercase letters then that same case must be used within the tag filter settings.
Add an image and link that to any content within your store
Add text that will be visible to customers on all of your collection pages.
Beyond the Section settings for Collection pages you also have Theme settings which differ slightly as they apply to content that is shared with other sections of the store.
To access the Theme settings, in the theme editor at the bottom of the left sidebar look for the Theme settings button which will change the left sidebar view.
Scroll down and open the area named: Product Grid, here you can change how the products and their content are displayed within your collections.
Spacing and alignment
- Space between products
Control the horizontal space between products
- Product details text and alignment
Choose to align the product title + price for each product in the center or to the left
- Product image size
Let the theme control the size of your images by choosing from the given formats:
- Natural: Theme shows the images in the ratio that you have uploaded in
- Square: Product images will show square
- Landscape: Product images will show in Landscape format
- Portrait: Product images will show in Portrait format
- Switch images on hover
When hovering on a product, the image will switch to the 2nd image for each item where applicable
- Show vendor with product titles
Reveals the product vendor on all products
- Show review ratings
If you have installed Shopifys free product reviews app, given ratings will be shown on products
Quick shopping options
- Enable quick view
Toggles a quick shop modal for each product
- Add to cart button
Allows customers to add to the cart directly within the product grid for products where no variant selection is required
Icons and notifications
Icons will be shown for products which fit specific criteria:
Sold out: products are sold out and no inventory is remaining
New: Product belongs to a collection that has the handle "new"
Sale: Product has a compare at price that is higher than it's current price
- Icon shape
Choose between rectangular or circular icons
- Icon position
Choose from 4 available positions for the icons to appear
- Show new icon
Toggles the visibility of the New icon
- Show sale icon
Toggles the visibility of the Sale icon
- Show sold out icon
Toggles the visibility of the Sold out icon