Collection pages
The Collection pages section includes settings to change the look and feel of product collection pages.
This article is just about the collection pages settings. For more information about the other sections you can add to collection pages, see the article about the Collection pages template.
Change the collection pages settings
From the Collection pages settings, you can change the look and feel of the collections being displayed:
-
From your theme’s “Customize” screen, choose Collection pages from the pages drop-down menu at the top of the screen.
-
Scroll down the list of available settings until you see the Collection pages button. Click on it.
-
Choose whether to Show collection image, above the list of products in the collection. See an example:
Adding an image for a collection is a Shopify feature. See their article Add or change a featured image for a collection for more information.
-
If you chose to turn on the Show collection image setting, you can configure the image overlay using the next settings: Overlay opacity, Overlay, and Text colors.
For more information about these settings, see Settings below.
-
Choose whether to show a border line (Show border), the collection name (Heading), and a small heading that indicates that you’re on a collection page (Show small heading).
-
Choose whether to Show collection description. See an example:
Adding a description to a collection is a Shopify feature. See their article Change the name or description for a collection.
-
Choose a Heading alignment, either Left or Center
-
Choose a Max width of text, between 16 and 50.
The text max width lets you control the shape of the text, and make it look good no matter how long your collection descriptions are.
-
Choose whether to Show collection filters.
Product filtering uses the tags that are set on your products. For more information see Shopify’s Creating and using tags article.
Learn how to set this up from the How to set up product filtering article.
-
Choose whether to Show swatches.
If you have product swatches set up, they appear when you hover over an item in the collection.
-
Pick how many Products per row should be displayed. Choose between 2 and 4 products per row.
-
Choose the Image aspect ratio to be used for all collection images.
Use Natural to use the original images. Or, use Square (1:1), Landscape (3:2), or Portrait (2:3) to have the images cropped to match one another.
-
Choose how the collection should be Paginated.
- Choose Infinite to have your collection page automatically load the next products as the customer loads.
- Choose Click to load to let customers click a Load more button to see the next group of products.
- Choose Paginated to let customers navigate between numbered pages of products in the collection.
-
Use the Save button in the top-right corner when you are finished editing.
Settings
- Show collection image
- Check this checkbox to show the collection image.
Adding an image for a collection is a Shopify feature. See their article Add or change a featured image for a collection for more information.
If you use the Show collection image setting, the following settings are also available:
- Overlay opacity
- Use the slider to choose how opaque the overlay color should be. Where 0% is invisible and 100% is completely opaque.
- Overlay color
- Pick the color of the overlay.
- Text color
- Pick the color of all text in the heading area.
The following settings apply whether the collection image is hidden or shown:
- Show border
- Choose whether to show a border between the collection heading section and the list of products.
- Show heading
- Choose whether to show the collection name as a heading.
- Show small heading
- Choose whether to display a small heading that indicates that you’re viewing a collection page. The small heading text says “Collection”.
- Show description
- Choose whether to display the collection description.
- Heading alignment
- Choose a heading text alignment. Either Left or Center.
- Max width of text
- Using the slider, choose how wide the heading text should appear, at a maximum.
- Show collection filters
- Choose whether the product filters should be displayed.
- Products per row
- Choose how many products should be displayed per row. Either 2, 3, or 4.
- Products per page
- Choose how many products should be displayed per page. Choose anywhere between 2 and 24.
- Image aspect ratio
- Choose the aspect ratio for all collection images displayed.
Use Square (1:1), Landscape (3:2), or Portrait (2:3) to have the images cropped to match one another
Use Natural if you do not want your images cropped at all.
- Paginated
- Choose how each page of the collection should be paginated.
- Choose Infinite to have your collection page automatically load the next products as the customer loads.
- Choose Click to load to let customers click a Load more button to see the next group of products.
- Choose Paginated to let customers navigate between numbered pages of products in the collection.
How to set up product filtering
In the Collection page settings, you can choose to Show collection filters. This article explains how you can configure different filters for your products.
Note that to use this filter style, you need to add special tags to your products. You may want to read Shopify’s Creating and using tags article.
How the groups filter works
The filter looks for tags in the format Group_Filter, where Group is the filter group (like Color, Size, Material, and so on) and Filter is the name of the filter. It is important that you use an _ underscore as a separator.
As an example, see the following products and their tags:
| Product | Tags |
|---|---|
| Large Bag | Size_Large, Type_Bag |
| Small Bag | Size_Small, Type_Bag |
If these products were part of the same collection, there would be three filterable tags (Large, Small, Bag) in two groups (Size, Type).
They would be displayed like this:
Type
Bag
Size
Large
Small