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.
From the Collection pages settings, you can change the look and feel of the collections being displayed:
Check this checkbox to show the collection image.
Adding an image for a collection is a Shopify feature. See their article for more information.
If you use the Show collection image setting, the following settings apply to the image:
Use the slider to choose how opaque the overlay color should be. Where 0% is invisible and 100% is completely opaque.
Pick the color of the overlay.
Pick the color of all text in the heading area that is overlaid over the image. Choose a color opposite to the overlay color for legibility.
The following settings apply whether or not the collection image is hidden or shown:
Choose whether to show a border between the collection heading section and the list of products.
Choose whether to show the collection name as a heading.
Choose whether to display a small heading that indicates that you're viewing a collection page. The small heading text says "Collection".
Choose whether to display the collection description.
Choose a heading text alignment. Either Left or Center.
Using the slider, choose how wide the heading text should appear, at a maximum.
Allow your users to sort the collection based on options like Price, Date, Best Selling, Featured, or Alphabetically.
Choose whether the product filters should be displayed.
Choose either By group or By tag.
By group Uses a special tag syntax to categorize your product filters into groups. Learn more on how to set that up here.
By tag shows every product tag in the collection in a list.
Choose either Sidebar or Buttons.
Sidebar shows your tag and sort options in a sidebar menu on the left side of the page.
Buttons Shows your tag and sort options as a button, and opens a drawer with options when clicked.
Show color swatches on your product when a user hovers over them.
In order to show swatches, you need to set up the product swatches feature. See the Swatches article for more information.
Choose how many products should be displayed per row. Either 2, 3, or 4.
Choose how many products should be displayed per page. Choose anywhere between 2 and 24.
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.
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.
In the Collection page settings, you can choose to Show collection filters. This article explains how you can configure different filters for your products.
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:
Tags
Size_Large, Type_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:
Collection pages template
Swatches
Note that to use this filter style, you need to add special tags to your products. You may want to read Shopify's article.