We've recently relaunched all three of our themes. Watch the launch video here.

Collection pages

The Collection pages section includes settings to change the look and feel of product collection pages.

Collection page
Collection page

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][collection-pages-template] template.

Change the collection pages settings

From the Collection pages settings, you can change the look and feel of the collections being displayed:

  1. From your Customize theme editor, choose Collection pages from the pages drop-down menu at the top of the screen.

    Drop-down menu with page types listed
    Drop-down menu with page types listed
  2. Choose the Collection pages button.

  3. Choose whether to Show collection image.

    Collection page with collection image
    Collection page with collection image
  4. Select the Collection image aspect ratio.

    Choose to display your collection image as Square, Landscape, or Portrait.

    The default Natural setting will display the original orientation of your images.

  5. Choose whether to Show collection description.

    Adding a description to a collection is a Shopify feature. See their article Change the name or description for a collection.

  6. Choose whether to Show sort options.

    You can set the default sort order in your Shopify Admin by going to the Collection you want to modify. Scroll down to the Products section and use the Sort dropdown.

  7. Choose whether to Show filters.

    Product filtering uses the tags that are set on your products. For more information see Shopify's Creating and using tags article.

  8. Choose to change the Filter type to By group to add multiple groups of filters to the product filter:

    Collection pages with group filter enabled
    Collection pages with group filter enabled

    Learn how to set this up from the How to set up the "Groups" filter style section.

    By default, the filter style By tag shows all of the tags in a single list.

  9. Pick how many Columns per row and Products per page should be displayed.

  10. Choose the Pagination style of how customers navigate additional pages of products.

    Paginated displays arrow buttons to navigate previous or next pages, Click to Load displays a button to load more products below, and Infinite automatically loads more products as customers scroll down.

  11. Choose to display your Product swatches and chips on hover.

  12. Choose the Image aspect ratio for products on your collection pages.

    Choose to display your product images as Square, Landscape, or Portrait.

    The default Natural setting will display the original orientation of your images.

  13. Use the Save button in the top-right corner when you are finished editing.

Collection page settings

Configuration Settings

Show collection image

Check this checkbox to display the collection image as a header next to the collection title.

You need to add an image to your collection from the Shopify dashboard before an image will be displayed.

Collection image aspect ratio

Choose to display your featured collection image as Square, Landscape, or Portrait.

The default Natural setting will display the original orientation of your images.

Show collection description

Check this checkbox to show the collection description.

Max width of text

Control the width of the description section.

Show sort options

Choose whether the sort options should be displayed.

Learn how to change the order of the sort options in Shopify's Collections layout article.

Filter type

Choose a filter style, either By tag or By Group.

For more information about how the Groups filter type works, see the How to set up the "Groups" filter type article.

Columns 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 12 and 36.

Pagination

Choose the Pagination style of how customers navigate additional pages of products, either Paginated, Click to Load, or Infinite.

Show Swatches and Chips

Show your product's swatches and/or chips when a user hovers over the product image.

For more information on how to set these up, see our Swatches and Chips documentation.

Image aspect ratio

Choose to display your product images as Square, Landscape, or Portrait.

The default Natural setting will display the original orientation of your images.

How to set up the "Groups" filter style

In the Collection page settings, you can choose from two Filter types to filter products with. This article helps you set up the Groups product filter style.

This filter style adds multiple groups (like Material, Style, or Size) that customers may want to filter by.

Groups filter style
Groups filter style

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 tag group (like Color, Size, Material, and so on) and Filter is the name of the tag. It is important that you use an _ underscore as a separator.

As an example, see the following products and their tags:

ProductTags
Large BagSize_Large, Type_Bag
Small BagSize_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

Contact

🇨🇦 Fluorescent Design Inc.

Send us a message
  • Toronto OfficeMonday to Friday, 10am to 6pm ET
  • Victoria (B.C.) OfficeMonday to Friday, 10am to 6pm PT
  • Average Response Time~1 Business Day
* Excludes statutory holidays. All offices closed to the public.