Skip to content

Collection list

This guide describes setting your store's Collection list section to display a selection of collections on a store page. Use the collection list to organize, advertise, and promote particular collections.

In the following video, heading text is added to the collection list on a store's homepage.

For general guidance with modifying sections, refer to Sections overview.

Set up a collection list

To set up your store's collection list:

  1. Go to Customize theme, and then use the dropdown at the top of the page to select a template that contains a collection list section. For example, select the Home page template.

    Note

    The collection list section can be added into any page, except Checkout and Giftcard pages. To add a collection list section to the current page, select Add section > Collection list. Refer to Shopify help: Add a section.

  2. From the side menu, select Collection list.

  3. Select a setting described in the following table.

Section setting nameDescription
HeadingIn the Heading text entry field, enter a title to display above the collection list section.
Text sizeUse the Text size dropdown to set a size for the text inside the collection list section. The dropdown options are S = small, M = medium, L = large, XL= extra large, 2XL = extra large x 2, 2XL/ desktop 3XL = extra large x 2 for smaller displays and extra large x 3 for desktop displays, 2XL/ desktop 4XL, and 2XL/ desktop 5XL.
Crop imagesUse the Crop images dropdown to set the shape of the images inside the collection list section. The dropdown options are No crop, Landscape, Square and Portrait.
Color > Heading color schemeUse the Color scheme dropdown to set a color scheme for headings inside the collection list section to Primary, Secondary or Tertiary. Refer to Customize color schemes.
Theme settingsSelect Theme settings to access additional collection list settings. Refer to Section theme settings menu.
Remove sectionSelect Remove section to delete the collection list section from the current page template.

Configure a collection within a collection list

To configure a collection (block) within a collection list (section):

  1. Go to Customize theme, and then use the dropdown at the top of the page to select a template that contains a collection list section. For example, select the Home page template.

  2. From the side menu, select Collection list > Collection to choose an existing collection block.

    To add a new collection block, select Collection list > Add Collection, and then select the block in Collection list > Collection.

    A collection block inside a collection list section in theme editor

    Note

    Inside a collection list section, you can add, remove, show/ hide, or move collection blocks. Refer to Configure blocks inside a section, or Shopify help: Sections and blocks.

  3. Select a setting described in the following table.

Block setting nameDescription
Collection > Select collectionTo display a collection inside the collection list section, choose Start collection, and then select one of the following options:
  • To find a collection, enter the name of the collection in the Search box.
  • To create a new collection, select Create collection to open the Create collection page in Shopify admin. Refer to Shopify help: Collections.
  • Select a collection from the list.
Indent imageSelect the Indent image checkbox to add/ remove spacing around images inside the collection block.
Background colorSelect the Background color dropdown to set the collection block background color to Primary background, Secondary background or Tertiary background.
Content > Content positionSelect the Content position dropdown to align text inside the collection block. The dropdown options are Top left, Top center, Top right, Left, Center, Right, Bottom left, Bottom center, and Bottom right.
Text colorSelect the Text color dropdown to set a color for text inside the collection block. The dropdown options are Primary text, Secondary text, Tertiary text, White or Black.
Remove blockSelect Remove block to remove the collection block from the current collection list section.

The collection block settings in theme editor