Skip to content

Collection list

This guide describes setting up the Collection list section.

Use the section to set how collections are displayed on the Collections list page.

An example Collection list section on a store's Collections list page.

The previous image shows a Collection list section on a store's Collections list page. In the upper right, the section's Desktop layout radio buttons are set to Two columns. This setting displays the store's Bracelets and Chains collections, arranged in two column layout, inside the section.

For general guidance with modifying sections, refer to Sections overview, and Shopify help: Sections and blocks.

Set up a collection list section

To set up a Collection list section:

  1. Go to Customize theme.

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

    Note

    The section is available only on Collections list pages.

  2. From the side menu, select Collection list.

    The Collection list section selected in Theme editor.

  3. Select a setting described in the following table.

Setting nameDescription
Feature full width collectionsSelect the checkbox Feature full width collections to turn on/off displaying collection tiles at full width inside the section. With this setting off, a mix of half width and full width tiles are displayed.
Desktop layoutSelect the Desktop layout radio buttons to set a layout style for the section's cascading content area. The options are Single column or Two columns. This setting applies to desktop display devices.
First collection positionSelect the First collection position radio buttons to specify a starting position for collection tiles inside the section's cascading content area. The options are: (first collection tile in the) Top left or Top right.
Enable cascade layout on mobileSelect the checkbox Enable cascade layout on mobile to show/hide the section's cascading content area on mobile displays.
Vertical space between itemsSelect the dropdown Vertical space between items to set a size for the vertical space between collection tiles in the section's cascading content area. The options are: Same as theme settings, Small, Medium, and Large. Setup defaults for this setting in Theme Settings > Cascading content.
Media > Variation between media sizesSelect the dropdown Variation between media sizes to make the sizes of collection tiles more or less varied, inside the section's cascading content area. The options are: Same as theme settings, None, Low, Medium, and High (amount of variation). If set to None, all tiles are displayed at the same size. Setup defaults for this setting in Theme Settings > Cascading content.
Media > SequenceAdjust the Sequence slider to set how collection tiles are resized, inside the section's cascading content area. In the section's cascading content area, tiles are resized according to a sequence. Adjust the slider between 1 and 5 to change the sequence.
Color > Color schemeUse the Color scheme options to select a color scheme for the section. Refer to Colors.
Spacing > Remove top paddingSelect the checkbox Remove top padding to add/remove the spacing (padding) that's displayed above the section. Refer to W3 Schools: CSS Padding.
Spacing > Remove bottom paddingSelect the checkbox Remove bottom padding to add/remove the spacing (padding) that's displayed below the section. Refer to W3 Schools: CSS Padding.
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 block within a collection list section

A default Collection list section contains no (collection) blocks. To configure a block inside the section:

  1. Go to Customize theme.

    In Theme editor, at the top of the page, use the dropdown to select Collections List.

  2. From the side menu, expand the Collection list 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 Collection list section's Add block menu in Theme editor.

    Note

    Inside the 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 a setting described in the following table.

Setting nameDescription
HeadingIn the Heading box, enter text to display as a heading (title) inside the block.
Heading > Insert dynamic sourceIf available, to display (heading) text from a dynamic source, if available, select the icon Insert dynamic source beside the Heading box, and then choose a metafield to add. Refer to Shopify help: Metafields.
CollectionUse the following Collection selector options to set up a collection inside the block.
  • To add a collection, choose Select collection, and then select a collection from your store.
  • To create a new collection, choose Select collection, and then follow the Create collection link to open the Create collection page in your Shopify admin. Refer to Shopify help: Collections.
  • To replace a collection, choose Change > Change collection, and then select a new collection.
  • To remove a collection, select Change > Remove collection.
SubheadingIn the Subheading box, enter text to display as subheading text inside the block. Format the text, and/or add links, using the Text editor pane.
Subheading > Insert dynamic sourceTo display subheading text from a dynamic source, if available, select the Insert dynamic source icon beside the Subheading box, and then choose a metafield to add. Refer to Shopify help: Metafields.
Remove blockSelect Remove block to delete the block from the current section.