Collection list buttons

Theme section

Use the Collection lists buttons section to display selected collections as clickable buttons, either in multiple rows or in a single row slider that visitors can swipe through.

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.

STEPS

In your theme editor (Customize):

1. Select a Template to edit from the dropdown menu in the top bar.

   Learn how to use templates in our Templates guide.

2. Under Template, click (+) Add section and select Collection list buttons.

3. Click and hold the drag-and-drop handles ⋮⋮ to re-order your sections.

Select feature collections

Select multiple Collections to display as buttons 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 buttons to open the 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 to display on both desktop and mobile screens_._

   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.

Settings reference

Click the Collection list buttons 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 as buttons.

Section layout

Setting	Description
Number of columns on desktop	Choose how many collections to show per row on desktop screens: either 3 or 4 columns.
Number of rows on desktop	Choose how many rows of collection buttons to display. You can Show all rows of collection buttons 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.
Grid spacing	Change the spacing between collection list buttons. Select Comfortable for more spacing or Compact for less.
Number of rows on mobile	Choose how many rows of collection buttons to display. You can Show all rows of collection buttons 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 buttons 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) or with a solid color background (Filled).
Shape	Choose to display collection items as a Rectangle or with Slightly rounded corners.
Image source	Choose to display the Collection image or First product image for the collection items.
Image position	Display images to the Left or Right of collection item titles.
Image aspect ratio	Choose to crop all images to be a single uniform shape. Select Square (1:1), Portrait (2:3), 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.
Desktop image spacing	Increase or decrease the space around images when viewed on desktops: between 0px and 20px.
Mobile image spacing	Increase or decrease the space around images when viewed on mobile: between 0px and 20px.
Desktop image size	Set the pixel width of images for desktop screens: between 50 and 80 pixels.
Mobile image size	Set the pixel width of images for mobile screens: between 40 and 80 pixels.
Title font	Set the collection title font to the Body or Heading font selected in your theme settings.

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 Collection list page Featured collection Featured collection with media