Introducing Stiletto - the essential Shopify theme to fuel your ecommerce growth. Learn more.

Collections template

The Collections template controls the content, layout, and style of your collection pages. Use the theme editor to preview, edit, and create new collection templates with Context's available sections and theme settings.

Collection page
Collection page

Using the collections template

At first, there is one Default template for every collections page. This means that changes made to a default template will apply to all collections that use that template.

To change the content or style of specific collections, you will need to create a new template and then assign that template to those pages in the Shopify Admin.

Alternatively, you can use Dynamic sources to automatically display the correct content or settings for pages that use the same template.

Here are the basic steps to using templates:

Open collections template

Use the Templates selector in the theme editor to find the Collections templates. By default, the theme editor opens the Home page template.

Templates selector in the theme editor
Templates selector in the theme editor

Preview different collections

When you open a template, the theme editor selects a collection page to preview the changes made to the template.

To preview a different collection page with that template, click Change in the "PREVIEW" section at the top of the sidebar.

Select a page to preview for the template
Select a page to preview for the template

Assign templates to collections

Templates cannot be assigned on unpublished or trial themes. All changes to your templates will be saved but can only be assigned when purchased and published.

If a warning symbol (!) appears next to the collection name, this means that the template you are editing is not applied to that page. Go to the collection in the Shopify admin and use the Theme template menu to assign a template.

Warning symbol for unassigned template
Warning symbol for unassigned template

Customize sections and blocks

Sections are reusable, customizable features that make up your pages. Sections are listed in the editor sidebar in the order they appear on the page.

Use the theme editor to add, customize, and rearrange sections to create the look and functionality of your collection pages.

Note: Any changes made to sections will apply to every page that uses the same template. To make changes to specific pages, learn how to create and assign multiple templates.

Learn more about using sections and blocks in our "Get to know the theme editor" article.

Create and assign multiple templates

At first, there is one Default template for every collections page. This means that changes made to a default template will apply to all collections that use that template.

To change the content or style of specific pages, you will need to create a new template and then assign that template to those pages in the Shopify Admin.

Alternatively, you can use Dynamic sources to automatically display the correct content or settings for pages that use the same template.

Steps

In your theme editor (Customize):

  1. Open the Collections template.

  2. Click Create template.

    Create template button for collections
    Create template button for collections
  3. Enter a Name for your new template and click Create template.

    The new template will duplicate the settings of the original template.

    Create template settings
    Create template settings
  4. Under Preview, click Change to preview different pages with this template.

    If a warning icon (!) appears, you need to assign the template in your Shopify admin.

    Select a page to preview with your template
    Select a page to preview with your template

  5. To assign a template, go to the collection in the Shopify admin and use the Theme template menu to select a specific template.

    Templates cannot be assigned on unpublished or trial themes. All changes to your templates will be saved but can only be assigned when purchased and published.

  6. Click Save.

Set up the collection banner

The Collection banner can display the collection image and collection description added in your Shopify admin. In the theme editor, you can choose to enable these options and adjust the shape of the collection image.

In the theme editor (Customize):

  1. Click on the Collection banner section to open the section settings.

    Collection banner settings
    Collection banner settings
  2. Choose whether or not to Show collection image.

    Collection page with image
    Collection page with image

    Collection page without image
    Collection page without image

    Collection images are a Shopify feature. See their article Add or change a featured image for a collection for more information.

  3. To change the shape of your collection image, set the Collection image aspect ratio to crop your images to Square, Landscape, or Portrait.

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

    Example of aspect ratio shapes: Square, Landscape, and Portrait
    Example of aspect ratio shapes: Square, Landscape, and Portrait
  4. Choose whether to Show collection description.

    The collection description is set in the Shopify admin. Go to Products > Collections to edit your collections.

  5. Remember to click Save.

Customize the product grid

The Product grid organizes your Collection's products in a grid. You can adjust the layout of the grid, change the shape of all your product images. You can also enable swatches on hover, change the pagination style.

See the next sections to learn about filtering and sorting and quick shop.

In the theme editor (Customize):

  1. Click on the Collection product grid section to open the settings.

  2. Choose whether or not to Show swatches. Swatches must be set up first. You can learn more about swatches here.

    Swatches appear when the image is hovered over.

  3. Use the sliders to set how many Products per row and Products per page to display.

    The size of your product images will change depending on the number of products per row.

  4. To make your product images a uniform shape and size, select the Image aspect ratio to crop your images to Square, Landscape, or Portrait.

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

    Example of aspect ratio shapes: Square, Landscape, and Portrait
    Example of aspect ratio shapes: Square, Landscape, and Portrait
  5. Select the Pagination style to change how customers navigate additional rows of products.

    Infinite: rows of products automatically load as customers scroll down the collection page.

    Click to load: customers click a "Load more" button to reveal more products on the collection page.

    Paginated: customers navigate between numbered pages of products in the collection.

  6. Remember to click Save.

Set up filtering and sorting

Let customers discover products quickly by filtering your products by availability, price, type, vendor, and your variant options. When filters are enabled, Context also displays a price filter.

Filter with sidebar style
Filter with sidebar style
Price filter in sidebar
Price filter in sidebar

In the theme editor (Customize):

  1. Open a Collections template to edit from the dropdown menu in the top bar.

  2. Click on the Collection product grid section to open the settings.

  3. Choose whether to Show filters.

    To select which filter options to enable, go to your Online Store > Navigation settings in your Shopify admin. In the Collection and search filters section, you can add, remove, and reorder your filter options.

    See Shopify's manual for their guide on collection filters.

  4. Choose whether to Show sort options to let customers sort products by Price, Date, Best Selling, Featured, or Alphabetically.

    Sort options when Filter style is buttons
    Sort options when Filter style is buttons

    Sorting is a Shopify feature. Learn how to change the default sort order.

  5. Set the Filter style to Sidebar or Buttons.

    Sidebar shows the filtering options in a column on the page, while _buttons opens the filtering options in a drawer menu.

  6. Remember to click Save.

Product grid settings

Configuration Settings

Show filters

Let customers filter products by filter options enabled in the Navigation settings of the Shopify admin.

Show sort

Let customers sort products by Price, Date, Best Selling, Featured, or Alphabetically.

Filter style

Choose between Sidebar or Buttons. Sidebar shows the filtering options in a column on the page, while buttons opens the filtering options in a drawer menu.

Show swatches

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.

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

Image aspect ratio

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

The default Natural setting will display the original orientation of each image.

Enable quick shop

The Quick shop feature lets customers add products directly to their cart when on collection pages and with feature sections like the Featured collection or Recommended products.

Quick shop product form popup

When the Quick shop button is clicked, the Quick cart opens to let customers select the availble variants and quantity of products they want to add.

In the theme editor (Customize):

  1. Click on the Theme settings tab at the bottom of the editor panel.

    Theme settings tab
    Theme settings tab
  2. Click to open the Cart settings.

  3. Check the Enable quick shop checkbox.

    This option applies to all products that display on your site, including collection pages, recommended products, and featured collections.

  4. Click Save.

Available theme sections

For all templates on Context (except Checkout), you can add and customize the following 15+ feature sections:

You will also find the following static sections with multiple features that appear on every page:

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.