1. What is a collection list page?
A Collection List Page is a type of page that displays all active collections or specifically chosen collections. It serves as a central hub where customers can browse through various collections of products offered by the store.
2. How to add a heading at the top of my collection list page?
Step 1:
Open the Collection list page in Theme Editor.
Step 2:
Under Template, click “Add section” to add a new Collection banner section
Step 3:
On the new panel that appears on the right side, make changes to the following sections to customize your Heading:
|
Section |
Function |
 |
Enter the content to add a heading for the collection list page
|
 |
Slide left/right or enter the specific number to the box to change the font size of your heading |
 |
Change the text alignment of your heading |
 |
Select the tag of your heading (for SEO purposes) |
Step 4:
Click Save to save your changes.
3. How to add a banner at the top of my collection list page?
Step 1:
Open the Collection list page in Theme Editor.
Step 2:
Under Template, click “Add section” to add a new Collection banner section
Step 3:
On the new panel that appears on the right side, make changes to the following settings:
|
Section |
Function |
 |
Add the image that you want to make the banner
|
 |
If you want to add a heading text above your image, this will place a layer over your background image. So, your heading will be easier to read. Slide right or left to adjust the opacity of the overlay |
 |
Change the DESKTOP layout for the banner
|
 |
Change the MOBILE layout for the banner
|
Step 4:
Click Save to save your changes.
4. How to add breadcrumbs to my collection list page?
Step 1:
Open the Collection list page in Theme Editor.
Step 2:
Under Template, below the Collection banner, select “Add breadcrumbs”
Step 3:
Change the setting to make the breadcrumbs appear the way you want.
Step 4:
Click “Save”
5. How to set up the collection list page?
To set up the collection list page, follow these grouped configuration steps:
- Enter the heading for this page
- Set the heading tag (e.g., H1) for the page title.
Collections
- By default, all active collections are displayed on this page. To show selected collections, you need to configure "Show collections" to "Selected" and add a block for each collection.
In case you choose to show only selected collections, follow these steps:
- Go to the section settings of your collection list page, configure "Show collections" to "Selected"
- Add a block for each selected collection.
- Choose the specific collection you want to display.
- Upload or select images for the collection if the collection itself does not have a featured image.
- Set the number of columns/rows the collection spans (e.g., 1).
- Sort collections alphabetically or by other options (Only applied when all collections are shown)
Collection Card
- Choose the image style to display among [style], [style 2] and [style 3]...
- To add an image to the collection on this page, edit it from the admin.
- Adjust the title size (e.g., 80%).
- Enable Text Overlay
- Choose content alignment (Left, Center, Right) & Choose content position (Top, Center, Bottom).
- Adjust the overlay opacity (e.g., 5%).
Color Settings: Set the title & text color for dark/light backgrounds.
Layout
- Set the number of columns on the desktop/mobile (e.g., 5).
- Adjust spacing between blocks (e.g., 28 px).
- Set top/bottom padding (e.g., 36 px).
By following these steps and configurations, you can effectively set up and customize your collection list page to display all or selected collections, enhancing user navigation and engagement on your site.
6. How to display only specific collections on a page?
Step 1:
Open the Collection list page in Theme Editor.
Step 2:
Select the Collection list page section.
Step 3:
On the new panel popup, under Show Collections, click on “Selected”.
Step 4:
Add a new Collection block and change the setting to:
- Assign a collection to the block
- Add a cover image for the collection
- Change the width and height of the collection.
The final look!
7. How to change the sort order of the collections?
There are two main ways to change the order of collections displayed on your collection list page:
a) Method 1: Automatic Sorting (All Collections):
This automatic sorting can only apply if you're showing All collections:
Click on the Collection list page section, under Sort collections by, and choose the way you want your collection to be displayed:
b) Method 2: Manual Sorting (Selected Collections):
You can only give your collection list a custom order if you choose to show only Selected collections.
Following the guide on How to display only specific collections on a page
After choosing all the collections you want to appear on your collection list page, hold and drag the Collection block into your desired order.
8. How to customize the look of my collection cards?
All customizations for your collection cards can be made directly in your theme editor. Here's how:
Step 1:
Go to your Shopify admin, navigate to Online Store > Themes, and click Customize next to your active theme.
Step 2:
In the theme editor dropdown menu, within Template, find and select the Collection list page.
Step 3:
On the new panel shown, locate the section called Collection card. This is where you'll make all your changes.
🔍 To change the aspect ratio of your collection card…
Choose your favorite Image style option
🔍 To change the title size of your collection card…
Slide left or right, or enter a specific number to the Title size
🔍To make the title shown on your collection card…
Click the box to Enable Text overlay
You can also adjust the transparency of the overlay using the Overlay opacity setting
🔍 To change the title alignment of your collection card…
Select your preferred Content Alignment.
🔍To change the title position on your collection card…
Select your preferred Content position:
Note: This is only applicable when the Text overlay setting is enabled.
