Skip to main content
Collection list pages display a grid of collections, allowing customers to browse and shop from various collection categories. You can customize the grid layout, card appearance, pagination style, and choose between automatic or curated collection displays. Collections list page overview

What this section controls

This section manages:
  • Collection grid layout - Set items per row for desktop and mobile displays
  • Collection card styling - Control card title style, aspect ratios, and product count display
  • Collection source - Choose between all collections (automatic) or selected collections (manual curation)
  • Pagination - Control pagination style, load more button, and infinity scroll
  • Section layout - Adjust section width, color scheme, and spacing
  • Individual collection blocks - Customize per-collection images, headings, and color schemes

Getting started

1

Open Theme Customizer

From Shopify admin, access the Theme Customizer
2

Navigate to Collection list

In the left sidebar, find the Collection list section
3

Choose collection source

Decide between All collections (automatic display) or Selected collections (manual curation)
4

Configure grid layout

Set items per row (3 or 4 columns) and card aspect ratio in the Grid Layout tab
5

Customize card appearance

Set title style and product count display in the Card Design tab
6

Add collection blocks (optional)

If using Selected mode, click Add block > Collection to manually add collections with custom styling

Section Settings

Control which collections are displayed and how many per page.Collections display mode
Type: Dropdown
Options: All collections, Selected collections
Default: All collections
Choose which collections to display:
  • All collections - Automatically shows all store collections
  • Selected collections - Only shows collections added as blocks
Use “Selected collections” to curate order, visibility, and customize individual collection cards with custom images and headings.
Type: Range
Range: 3-50
Default: 12
Availability: Only applies when “All collections” is selected
Number of collections loaded before pagination appears. Higher values show more collections at once but may slow page loading.
This setting is ignored when “Selected collections” mode is active. In selected mode, only manually added collection blocks appear.

Block Settings

Collection Block

Add individual collections with custom styling. Only used in “Selected collections” mode. Maximum 50 blocks.
Collection blocks are only visible when “Selected collections” is chosen in the Collections tab.
Collection block settings
Type: Collection picker
Required: Yes
Select which collection to display in this card position. Opens the Shopify collection selector.
Type: Image picker
Optional: Yes
Custom image that overwrites the collection’s default featured image. Use this to create consistent branding or highlight specific aspects of the collection.
Override images in blocks for consistent brand look across all collection cards, even if individual collections have varying image styles.
Type: Text field
Optional: Yes
Custom heading that overwrites the collection’s default title. Use this for marketing-friendly names or seasonal messaging.
Use custom headings for “Sale Collections” or “New Arrivals” when the actual collection name is generic.
Type: Dropdown
Options: XS (h6), S (h5), M (h4), L (h3)
Default: M (h4)
Size of collection title text. Larger headings draw more attention to priority collections.
Type: Text field
Optional: Yes
Additional text below the main heading. Perfect for descriptive content like “New”, “Sale”, “Limited Time”, or product count.
Use subheadings for “New”, “Sale”, “Limited Time” messaging to create urgency and highlight special collections.
Type: Dropdown
Default: scheme-1
Per-collection color scheme. Allows individual cards to have different background and text colors for visual hierarchy.
Use contrasting color schemes for sale or featured collections to make them stand out in the grid.

Common use cases

Display all store collections automatically in a standard grid.Configuration:
  • Collections: All collections
  • Items per row: 4
  • Product count: Show
  • Collections per page: 12
  • Pagination: Page numbers

Best practices

Grid layout optimization

Use 4 columns on desktop for optimal visibility and efficient browsing. This balances card size with variety, letting customers see many options at once.

Aspect ratio consistency

3:4 portrait works well for most collection images and matches common product photography ratios. Maintain consistency across all cards for professional appearance.

Product count display

Always show product counts to help customers understand collection size and make informed browsing decisions. This is especially valuable when collection sizes vary significantly.

Selected mode strategy

Use “Selected collections” when you want to control order, visibility, or customize per-collection. Perfect for curated landing pages and seasonal campaigns.

All mode efficiency

Use “All collections” for stores with many collections that change frequently. This automates display and reduces manual maintenance.

Card style choice

Text with arrow encourages clicking and signals interactivity. Single text provides cleaner, more minimal aesthetic. Choose based on brand style.

Image consistency

Override images in blocks for consistent brand look across all collection cards, even when individual collections have varying image styles.

Mobile optimization

2 columns on mobile provides good balance between card size and scrolling length. Single column makes cards too large for quick browsing.

Pagination strategy

Enable infinity scroll for stores with 20+ collections to improve mobile experience. Traditional pagination works better for smaller collection counts where users want page-level control.