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

Collection list

The Collection list section displays a tiled selection of your collections with featured images.

Collection list section
Collection list section

Add a collections list section

The Collections list section can be added to any template (except the Checkout). To learn more about sections and templates, see our article about how to use the theme editor.

In the theme editor (Customize):

  1. Select a Template to edit from the dropdown menu in the top bar.

  2. In the side panel, click +Add section and select Collections list.

  3. Change the order of your sections by using the drag and drop handles ⋮⋮

Add collections

Add up to 12 Collections to display in multiple rows with featured images that link to your collections.

Collection list section

In your theme editor (Customize):

  1. Click +Add Collection and/or click on a Collection block to edit.

    This opens the Collection block settings.

  2. Click Select collection to find and select one of your collections.

    We recommend adding a Collection image in your Shopify admin. If no image is set, Context will use a product image from that collection.

    To crop the collection images to a uniform shape, use the Image aspect ratio option in the section settings

  3. (Optional.) Click and hold the drag handles ⋮⋮ to rearrange the blocks:

    Click Remove block in the block settings to delete a block.

    Click the Eye icon to hide or unhide a block.

  4. Click Save.

Change the section heading and style

Change the overall style and layout of the section, including the section heading, collections per row, and the image aspect ratio.

Collection list section settings
Collection list section settings

In the theme editor (Customize):

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

  2. Use the slider to set the number of Collections per row to 2, 3, or 4.

    On mobile, collections are shown in a single column.

  3. Change the Heading text that displays above the section.

    We recommend a short title of 2 to 3 words.

  4. Choose whether to enable the Show collection description below the collection images.

  5. To make your 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 each image.

    Example of aspect ratio shapes: Square, Landscape, and Portrait
    Example of aspect ratio shapes: Square, Landscape, and Portrait
  6. Remember to click Save.

Collection list block settings

For each collection you add, the following setting is available:

Configuration Settings

Select collection

Choose from your store's list of product collections.

The collection list section has the following settings:

Heading

Change the "Collection list" heading that displays at the top of the section.

We recommend a short title of 2 to 3 words.

Collections per row

Choose how many collections to display per row. The section can display a maximum of 12 collections.

On mobile, collections are shown in a single column.

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.

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.