Collection list

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.

Check out the Collection list buttons section for an alternate style to feature your collections.

Editing templates will change all pages that use the same template. Create new templates for different page layouts, or show dynamic page content in the same template.

Set up section

In the editor side panel, click (+) Add section and select Collection list. Click and hold the drag handles ⋮⋮ to re-order sections.

Section styles

Sections include general styles. Click the section to find options for spacing, and animations.

Section spacing

Section animations

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.

STEPS

In your theme editor (Customize):

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

  2. Under the Collection listing, use the Select collections button to check off all the collections you want to feature.

  3. Select the Number of columns for both desktop and mobile

    The size of the collection images will change according to the number of columns.

  4. In the Collection list, click and hold the drag-and-drop handles ⋮⋮ to reorder your collections.

  5. Click Save.

Collection items style

Customize the appearance of collection items, titles, and images.

  • Show collection items with an outline, color background, or plain.

  • Choose which images to use and change their shape

  • Show the number of products in each collection

  • Adjust the title font and alignment

Customize the appearance and shape of the collection images.

Click section to find settings

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 layout

Change the layout of collection lists items to fit how many collections you have and the style you want.

  • Display collection items as a Grid or single-row Slider

  • Choose the Number of columns and rows for mobile and desktop

Mobile 4 column layout
Mobile slider enabled

Click section to find settings

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. Show all rows or limit the initial number of rows between 1 and 5. A “Show all” button will reveal additional rows.

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 rotate through.

Number of columns on mobile

Choose how many collections to show per row on mobile screens: either 2, 3, or 4 columns.

Number of rows on mobile

Choose how many rows of collection items to display on moible. Show all rows or limit the initial number of rows between 2and 5. A “Show all” button will reveal additional rows.

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.

Section header

Add section headings and an optional button above the collection list.

STEPS

In your theme editor (Customize):

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

  2. Enter Accent text to display a small label above the heading.

  3. Enter Heading text to display a section title in the top-left.

    The default heading is "Collection list."

  4. Enter Subheading text to display below the heading.

    Use the formatting buttons to add text styles, links, or lists. To learn more, see Shopify's Rich text editor guide ↗.

  5. Select or paste a URL for the Button Link.

    The link is set to "All collections" by default. You can customize your list of collections in the Collections list template.

  6. Change the Button label (e.g. "View all collections").

    Leave this field blank to remove the button.

    The most effective button labels ask customers to do something (e.g. Get started, Join us, Shop now). To learn more, read "What is a Call to Action?"

  7. Click Save.

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.

Related links

Collection list buttons Collection list page Featured collection Featured collection with media

Last updated

Was this helpful?