Overview
Collection pages display your products in a grid, along with additional controls for sorting, filtering, and more.
Customize header
Steps:
- From your Shopify admin, go to Online Store > Themes.
- Find chord theme that you want to edit, and then click Customize.
- You need to open up any product, from inside the theme editor area, or select the collection page from the dropdown at the top.
Note:All settings here will be applied to all collections, not just the one you are on. If you are looking to have different sections on different collections.
Section settings
By default, collection pages have a Collection header section, and a Collection products section.
Collection header section
| Setting |
Description |
| Section width |
Set the width of the section using the drop-down menu:
- Full width
- Full width no gap
|
| Section height |
Set the height of the section using the drop-down menu:
- Fit Content
- Small
- Medium
- Large
|
| Background image |
Leave it blank to use collection's featured image. |
| Edit alt text |
Click to set image alt text for search engine optimization and to describe the image for customers using screen readers. |
| Background color |
Visible when the Background image setting is blank and the collection's featured image is blank. |
Collection products section
| Setting |
Description |
| Section width |
Set the width of the section using the drop-down menu:
|
Blocks
The Collection products section contains the following 4 blocks:
- Product grid block
- Aside block
- Text banner block
Product grid block
| Setting |
Description |
| TOOLBAR |
|
| Enable filtering |
Lets customers filter the products in the collection based on the filters in your Navigation settings. |
| Enable sorting |
Allows customers to sort search results. |
| Number of filters on desktop |
The number of filters that you want to display on desktop computers. Minimum is 0, maximum is 24. |
| GRID |
|
| Products per page |
The number of products that you want to display on each page. Can be any multiple of 4, from 8 to 48. Defaults to 16. |
| Number of columns on desktop |
Use the range scale to select the number of columns that appear on desktop computers. Minimum is 2, maximum is 6. |
| Number of columns on mobile |
Set a specific column layout for mobile devices. Choose between 1 and 2 columns. |
| PRODUCT CARD |
|
| Show product info |
Displays the product info for each product. |
| Show product rating |
Displays the average product rating in stars with the number of reviews in parenthesis, for example: ★★★★★ (8). |
| Show vendor |
Displays the vendor for each product. |
| Show swatch |
Displays the swatch for each product. |
Aside block
| Setting |
Description |
| Quick links |
The menu to use as your quick links menu. Click Change to select a different menu.This menu won't show dropdown items |
Text banner block
| Setting |
Description |
| Heading |
The title for the block. |
| Heading size |
Set the size of heading using the drop-down menu:
|
| Content |
The content for the block. |
| Heading color |
The text color for the heading. |
| Content color |
The text color for the content. |
| Background color |
The background color for the block. |