Collection list
Theme section
Use the Collection list section to display selected collections as either a grid or as a single-row slider that visitors can click or swipe through.
Tip See the Collection list buttons section to use an alternate style to feature your collections.
Set up section
Add this section to your template and use the drag-and-drop handles to re-order its position. You can add this section multiple times with different content and settings.
Editing a template changes all pages that use that template. To edit specific pages, you can you can create new templates or insert dynamic content with metafields.
Select feature collections
Select multiple Collections to display with featured collection images that link to those collections.
We recommend adding a Collection image in your Shopify Admin. If no image is set, Cornerstone will use a product image from that collection by default.
Add section content
Add section headings and an optional button that can link to all your blog posts.
Settings reference
Click the Collection list section to find the following settings.
Header content
Setting | Description |
---|---|
Center header content | Display headings in the center above the section. Uncheck this option to align headings to the left. |
Accent | Add text to show a small heading above the main section heading. |
Heading | Add text to show a main heading above the section. |
Subheading | Add text to show a subheading below the main heading. |
Maximum text width | Set the maximum width of heading text between 400 and 1000 pixels. |
Collection list
Setting | Description |
---|---|
Select collections | Select collections that you want to display. |
Section layout
Setting | Description |
---|---|
Number of columns on desktop | Choose how many collections to show per row on desktop screens: either 4, 5, or 6 columns. |
Number of rows on desktop | Choose how many rows of collection items to display on desktop screens. You can Show all rows of collection items at once or limit the initial number of rows between 1 and 5. Visitors can reveal additional rows by clicking a “Show all” button. This settings does not apply if you enable the slider. |
Enable slider on desktop | Display collection list items in a single-row carousel that visitors can click through to view more. |
Number of columns on mobile | Choose how many collections to show per row on mobile screens: either 2 or 3 columns. |
Number of rows on mobile | Choose how many rows of collection items to display on mobile screens. You can Show all rows of collection items at once or limit the initial number of rows between 2 and 5. Visitors can reveal additional rows by clicking a “Show all” button. This settings does not apply if you enable the slider. |
Enable slider on mobile | Display collection list items in a single-row carousel that visitors can swipe left and right view more. |
Collection items style
Setting | Description |
---|---|
Show product counts | Choose to display the number of products in each collection. |
Style | Choose to display collection items with a simple border (Outlined), a solid color background (Filled), or without a border or background (Plain). |
Image source | Choose to display the Collection image or First product image for the collection items. |
Image aspect ratio | Choose to crop all images to be a single uniform shape. Select Portrait (2:3), Portrait (4:5), Square (1:1), Landscape (5:4), or Landscape (3:2). Select Natural to display images in their original shape (without cropping). Learn more about aspect ratios in our Image settings guide. |
Apply circle crop to images | Choose to crop all images to appear as circles. This setting applies only when the Image aspect ratio is set to Square. |
Image spacing | Change the spacing around the images. Select Comfortable for more spacing or Compact for less. |
Title font | Set the collection title font to the Body or Heading font selected in your theme settings. |
Title alignment | Display headings either to the Left, Center, or Right, underneath the collection item image. |
Section style
Setting | Description |
---|---|
Top spacing | Increase or decrease the amount of space above the section. |
Bottom spacing | Increase or decrease the amount of space below the section. |
Enable animation | Choose whether to display visual effects when scrolling, hovering, or interacting with the section. See the Animation guide to learn more. |
Related links
Collection list buttons Collection list page Featured collection Featured collection with media
Last updated