Appearance

Collections list page ​

This guide describes setting up the Collections list page section.

Use the section to display your store's collections on the Collection list page.

A Collections list page section on a store's collection list page.

The previous image shows a Collections list page section on a store's Collection list page. The section contains two Collection blocks. Each block specifies a particular collection to display.

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

Set up a Collections list page section ​

To set up a Collections list page section:

  1. Go to Customize theme.

    In Theme editor, at the top of the page, use the dropdown to select Collection list.

    Note

    The section is available only on Collection list pages.

  2. From the side menu, select Collections list page.

    A default Collections list page section lists all of your store's collections. To specify the particular collections to display, refer to Configure a collection inside a Collections list page section.

    The Collections list page section selected in Theme editor.

  3. Select a section setting described in the following table.

Setting nameDescription
Show headingSelect the Show heading checkbox to show/hide collection titles inside the section.
Collections per row on desktopUse the Collections per row on desktop options to set the number of collections to display in each row, inside the section. The options are 2, 3 or 4. This setting applies to desktop display devices.
Crop imagesUse the Crop image dropdown to set the shape for images inside the section. The options are No crop, Landscape, Square, and Portrait.
Full widthSelect the Full width checkbox to turn on/off using the full width of the collection image area, inside the section.
Text sizeUse the Text size options to set the size for text inside the section to Medium or Large. Refer to Typography.
Text colorUse the Text color options to specify a color for text inside the section. Set the text color to use the section's color scheme color for Primary, Secondary or Tertiary text. Alternatively, set the text color to White or Black. Refer to Colors.
Theme settingsIf available, select Theme settings to access additional settings for the section. Refer to Section theme settings menu.
Custom CSSSelect Custom CSS. In the box, enter custom CSS styles to apply only to the current section. Refer to Shopify help: Add custom CSS. To apply custom styles to your entire online store, refer to Theme settings > Custom CSS.

Configure a collection inside a Collections list page section ​

A default Collections list page section displays all of your store's collections. Alternatively, you can specify the collections to display inside the section by configuring Collection blocks.

To configure a block inside a Collections list page section:

  1. Go to Customize theme.

    In Theme editor, at the top of the page, use the dropdown to select Collection list.

  2. From the side menu, expand the Collection list page section menu.

  3. To configure an existing block, select the block from the side menu.

    To add a new block, select Add collection, and then select the block you added.

    The add block options for the Collections list page section in Theme editor.

    Note

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

  4. Apply the corresponding block settings described in the following table.

Setting nameDescription
Choose collectionUse the Choose collection selector to set up a collection to display inside the block.
  • To add a collection, choose Select collection, and then select a collection from your store. Then, choose Select.
  • To create a new collection, choose Select collection, and then follow the Create collection link. The link opens your Shopify admin's Collection page. Use the page to create a new collection. Then, select the collection you created, and then choose Select.
  • To replace a collection, choose Change > Change collection, and then select or create a replacement collection.
  • To remove a collection, select Change > Remove collection.
Overlay text colorSelect the Overlay text color dropdown to set a color for text inside the block, like the collection titles. Set the text color to use the section's color scheme color for Primary, Secondary or Tertiary text. Alternatively, set the text color to White or Black. Refer to Colors. This setting overrides the section's overlay text color setting.
Remove blockSelect Remove block to delete the block from the current section.