Collection List Page Template

The collection list page displays all collections in your store in a grid layout. It's the main page where customers can browse and discover all available collections at once.

Overview

The collection list page shows all collections in a customizable grid with pagination. Each collection is displayed as a card with its image, title, description, and product count. This page is perfect for helping customers discover all your product categories and collections.

Where to Use

The collection list page template (list-collections.json) is automatically used when customers visit /collections or click "View all collections" links. It's the main hub for browsing all collections in your store.

Access the page:

  • Direct URL: /collections
  • "View all" button from collection list sections
  • Navigation links (if configured)
  • Automatically created by Shopify

Settings

Content

Heading

  • What it does: Main heading displayed at the top of the page
  • Type: Inline rich text (supports basic formatting)
  • Default: "Collections"
  • Tip:
    • Use clear, descriptive heading
    • Examples: "Shop by Category", "Our Collections", "Browse Products"
    • Can include basic formatting (bold, italic)

Subheading

  • What it does: Optional subheading below the main heading
  • Type: Rich text (supports full formatting)
  • Default: Empty
  • Tip:
    • Use for additional context or description
    • Examples: "Discover our curated collections", "Shop by style, color, or category"
    • Supports full rich text formatting

Heading Size

  • What it does: Controls the size of the main heading
  • Options: XL, 2XL, 3XL, 4XL
  • Default: 3XL
  • Tip:
    • XL: Subtle, minimal
    • 2XL: Standard, balanced
    • 3XL: Prominent, attention-grabbing (recommended)
    • 4XL: Very large, bold statement

Text Alignment

  • What it does: Controls how heading and subheading are aligned
  • Options: Left, Center, Right
  • Default: Center
  • Tip:
    • Left: Standard, readable
    • Center: Balanced, centered layout (recommended)
    • Right: Unique, right-aligned design

Layout

Columns on Desktop

  • What it does: Number of collection columns on desktop screens (1024px+)
  • Range: 1-6 columns
  • Default: 3 columns
  • Tip:
    • 1 column: Very large cards, premium feel
    • 2 columns: Large cards, easy to see
    • 3 columns: Balanced, good default (recommended)
    • 4 columns: Standard grid, more collections visible
    • 5-6 columns: Dense grid, many collections visible

Columns on Tablet

  • What it does: Number of collection columns on tablet screens (768px-1023px)
  • Range: 1-4 columns
  • Default: 2 columns
  • Tip:
    • 1 column: Large cards, easier to see
    • 2 columns: Balanced, good default (recommended)
    • 3-4 columns: Dense grid, more collections visible

Columns on Mobile

  • What it does: Number of collection columns on mobile screens (<768px)
  • Options: 1 column, 2 columns
  • Default: 1 column
  • Tip:
    • 1 column: Large cards, easy to view (recommended)
    • 2 columns: More collections visible, smaller cards

Collection Cards

Show Collection Description

  • What it does: Displays collection description on each collection card
  • Default: Enabled (true)
  • Tip:
    • Helpful for explaining what each collection contains
    • Can be disabled for cleaner, image-focused cards
    • Descriptions come from collection settings in Shopify admin

Pagination

Collections Per Page

  • What it does: Controls how many collections display before pagination
  • Range: 6-48 collections
  • Step: 6 collections
  • Default: 12 collections
  • Tip:
    • 6: Few collections, faster loading
    • 12: Balanced, good default (recommended)
    • 18-24: More collections, more scrolling
    • 30-48: Maximum collections, best for stores with many collections

Show Pagination

  • What it does: Displays pagination controls when there are multiple pages
  • Default: Enabled (true)
  • Tip:
    • Essential for stores with many collections
    • Can be disabled if all collections fit on one page
    • Only shows when collections exceed collections per page

Show Pagination Info

  • What it does: Displays pagination information (e.g., "Page 1 of 3")
  • Default: Enabled (true)
  • Tip:
    • Helps customers understand their position
    • Can be hidden for cleaner look
    • Usually shows "Showing X-Y of Z collections"

Pagination Style

  • What it does: Controls how pagination controls appear
  • Options:
    • Numbers: Page numbers (1, 2, 3, etc.) - default
    • Arrows Only: Previous/Next arrows only
    • Dots: Dot indicators for each page
    • Minimal: Minimal pagination style
  • Default: Numbers
  • Tip:
    • Numbers: Most common, easy to navigate
    • Arrows: Clean, simple
    • Dots: Visual, modern
    • Minimal: Subtle, minimal design

Pagination Alignment

  • What it does: Controls where pagination appears
  • Options: Left, Center, Right
  • Default: Center
  • Tip:
    • Left: Aligned with collections
    • Center: Balanced, most common (recommended)
    • Right: Right-aligned design

Colors

Color Scheme

  • What it does: Selects a color scheme for the collection list page
  • Controls background color, text colors, and link colors
  • Leave empty to use default theme colors
  • Tip: Choose a scheme that complements your collections and brand

Padding

Top Padding

  • What it does: Space above the collection list content
  • Range: 0-100px
  • Default: 40px
  • Tip: More padding creates more breathing room from header/navigation

Bottom Padding

  • What it does: Space below the collection list content
  • Range: 0-100px
  • Default: 40px
  • Tip: Adjust to balance spacing with footer

How It Works

Page Structure

The collection list page displays in this order:

  1. Page Header: Heading and subheading (if set)
  2. Collection Grid: Collections displayed in a responsive grid
  3. Pagination: Page navigation (if multiple pages)

Collection Cards

Each collection card displays:

  • Collection Image: Featured image from collection
  • Collection Title: Name of the collection
  • Collection Description: Description text (if enabled and available)
  • Product Count: Number of products in collection (automatic)
  • Link: Clickable card that links to collection page

Grid Layout

Collections are displayed in a responsive grid:

  • Desktop: Configurable columns (1-6)
  • Tablet: Configurable columns (1-4)
  • Mobile: 1 or 2 columns

Pagination

When collections exceed the "Collections per page" setting:

  • Pagination controls appear
  • Customers can navigate between pages
  • Shows current page and total pages
  • Maintains layout and styling

Automatic Collection Display

The page automatically shows:

  • All published collections from your store
  • Collections in the order they appear in Shopify admin
  • Only collections that are published and available
  • Empty collections (if they exist)

Common Use Cases

Standard Collection List

  • Layout: 3 columns desktop, 2 columns tablet, 1 column mobile
  • Settings: 12 collections per page, descriptions enabled, pagination with numbers
  • Use Case: Most stores with standard collection browsing

Large Store (20+ Collections)

  • Layout: 4 columns desktop, 3 columns tablet, 2 columns mobile
  • Settings: 18-24 collections per page, descriptions optional, pagination with numbers
  • Use Case: Stores with many collections requiring efficient browsing

Small Store (< 10 Collections)

  • Layout: 2-3 columns desktop, 2 columns tablet, 1 column mobile
  • Settings: 6-12 collections per page, descriptions enabled, pagination may not be needed
  • Use Case: Stores with few collections, all fit on one page

Visual/Image-Focused

  • Layout: 3 columns desktop, 2 columns tablet, 1 column mobile
  • Settings: 12 collections per page, descriptions disabled, large images
  • Use Case: Collections where images are the main focus

Tips & Best Practices

✅ Do's

  • Use clear headings: Help customers understand the page
  • Add subheadings: Provide context about your collections
  • Use appropriate columns: Balance visibility with layout
  • Enable descriptions: Help customers understand collections
  • Test on mobile: Ensure mobile experience is good
  • Use consistent grid: Maintain visual consistency
  • Show pagination: Essential for stores with many collections
  • Optimize collection images: Fast loading is crucial
  • Add collection descriptions: Help customers understand collections
  • Use appropriate collections per page: Balance loading speed and user experience

❌ Don'ts

  • Don't use too many columns on mobile: Keep mobile experience readable
  • Don't disable descriptions unnecessarily: Help customers understand collections
  • Don't forget pagination: Essential for large stores
  • Don't use low-quality images: Collection images are crucial
  • Don't skip collection descriptions: Help customers understand what each collection contains
  • Don't use inconsistent grid layouts: Maintain visual consistency
  • Don't forget mobile: Test on phones and tablets
  • Don't use too many collections per page: Can slow down page loading

Grid Columns Guide

Desktop Columns

1 Column:

  • Very large collection cards
  • Premium, high-end feel
  • Best for visual collections
  • More space per collection

2 Columns:

  • Large collection cards
  • Easy to see details
  • Good for detailed collections
  • Comfortable spacing

3 Columns (Recommended):

  • Balanced layout
  • Good for most stores
  • Standard choice
  • Works for most collections

4 Columns:

  • Standard grid layout
  • More collections visible
  • Good for many collections
  • Denser appearance

5-6 Columns:

  • Dense collection grid
  • Many collections visible
  • Best for stores with many collections
  • Smaller collection cards

Tablet Columns

1 Column:

  • Large cards
  • Easier to see details
  • Better for visual collections

2 Columns (Recommended):

  • Balanced layout
  • Good default
  • Works for most collections

3-4 Columns:

  • Dense grid
  • More collections visible
  • Smaller cards

Mobile Columns

1 Column (Recommended):

  • Large collection cards
  • Easy to view
  • Best for detailed collections
  • More scrolling

2 Columns:

  • More collections visible
  • Smaller cards
  • Less scrolling
  • Denser appearance

Collections Per Page Guide

6 Collections

  • Best for: Small stores, premium feel, fast loading
  • Benefits: Fast loading, less scrolling, focused browsing
  • Considerations: More pagination clicks, fewer collections visible

12 Collections (Recommended)

  • Best for: Most stores, standard e-commerce
  • Benefits: Good balance, standard choice
  • Considerations: Works for most stores

18 Collections

  • Best for: Medium stores, more collections visible
  • Benefits: More collections, less pagination
  • Considerations: Slightly slower loading

24 Collections

  • Best for: Large stores, maximum visibility
  • Benefits: Many collections visible, fewer pages
  • Considerations: Slower loading, more scrolling

30-48 Collections

  • Best for: Very large stores, maximum collections
  • Benefits: Maximum collections per page
  • Considerations: Slower loading, long scrolling, may impact performance

Pagination Best Practices

Pagination Style

Numbers:

  • Most common and familiar
  • Easy to navigate
  • Shows exact page numbers
  • Best for most stores

Arrows Only:

  • Clean, minimal design
  • Simple navigation
  • Less visual clutter
  • Best for simple browsing

Dots:

  • Visual, modern design
  • Good for few pages
  • Less informative
  • Best for visual collections

Minimal:

  • Subtle, minimal design
  • Less prominent
  • Clean appearance
  • Best for curated collections

Pagination Alignment

  • Left: Aligned with collections, natural flow
  • Center: Balanced, most common (recommended)
  • Right: Right-aligned, unique design

Collection Cards

What's Displayed

Each collection card automatically shows:

  • Collection Image: Featured image from collection settings
  • Collection Title: Name of the collection
  • Collection Description: Description text (if enabled)
  • Product Count: Number of products (automatic)

Collection Images

  • Use high-quality images for best results
  • Images should represent the collection
  • Square or landscape images work best
  • Images are automatically cropped to fit

Collection Descriptions

  • Add descriptions in Shopify admin for each collection
  • Descriptions help customers understand collections
  • Can be enabled or disabled per section
  • Supports rich text formatting

Examples

Example 1: Standard Collection List

Settings:

  • Heading: "Collections"
  • Heading Size: 3XL
  • Text Alignment: Center
  • Desktop Columns: 3
  • Tablet Columns: 2
  • Mobile Columns: 1
  • Collections Per Page: 12
  • Show Descriptions: Enabled
  • Pagination: Numbers, Center
  • Padding: 40px top/bottom

Result: Standard collection list page with 3-column grid, descriptions, and pagination

Example 2: Large Store (Many Collections)

Settings:

  • Heading: "Shop by Category"
  • Heading Size: 4XL
  • Text Alignment: Center
  • Desktop Columns: 4
  • Tablet Columns: 3
  • Mobile Columns: 2
  • Collections Per Page: 24
  • Show Descriptions: Enabled
  • Pagination: Numbers, Center
  • Padding: 40px top/bottom

Result: Dense collection grid for stores with many collections

Example 3: Visual/Image-Focused

Settings:

  • Heading: "Our Collections"
  • Heading Size: 3XL
  • Text Alignment: Center
  • Desktop Columns: 3
  • Tablet Columns: 2
  • Mobile Columns: 1
  • Collections Per Page: 12
  • Show Descriptions: Disabled
  • Pagination: Numbers, Center
  • Padding: 40px top/bottom

Result: Image-focused collection list with large collection cards

Example 4: Small Store (< 10 Collections)

Settings:

  • Heading: "Collections"
  • Heading Size: 3XL
  • Text Alignment: Center
  • Desktop Columns: 2
  • Tablet Columns: 2
  • Mobile Columns: 1
  • Collections Per Page: 6
  • Show Descriptions: Enabled
  • Pagination: Disabled (all fit on one page)
  • Padding: 40px top/bottom

Result: Small collection list with all collections visible, no pagination needed

Troubleshooting

Collections Not Showing

  • Check: Verify collections exist in Shopify admin
  • Check: Ensure collections are published
  • Check: Check collection settings in Shopify admin
  • Check: Verify collections have products (optional)

Pagination Not Showing

  • Check: Verify "Show Pagination" is enabled
  • Check: Ensure collections exceed "Collections per page" setting
  • Check: Test with store that has many collections
  • Check: Verify pagination style is set correctly

Grid Columns Not Working

  • Check: Verify column settings are set correctly
  • Check: Test on different screen sizes
  • Check: Clear browser cache
  • Check: Verify CSS is loading correctly

Collection Descriptions Not Showing

  • Check: Verify "Show Collection Description" is enabled
  • Check: Ensure collections have descriptions in Shopify admin
  • Check: Add descriptions in collection settings
  • Check: Descriptions appear automatically if available

Collection Images Not Showing

  • Check: Verify collections have images in Shopify admin
  • Check: Ensure images are published
  • Check: Test with different collections
  • Check: Verify image files are not corrupted

Empty Collections Showing

  • Check: This is normal - empty collections can appear
  • Check: Hide or delete empty collections in Shopify admin
  • Check: Add products to collections to populate them
  • Check: Empty collections show "0 products"

Customizing Collections

Adding Collection Descriptions

  1. Go to Products → Collections in Shopify admin
  2. Select a collection
  3. Scroll to Description
  4. Add collection description
  5. Description appears automatically on collection cards (if enabled)

Setting Collection Images

  1. Go to Products → Collections in Shopify admin
  2. Select a collection
  3. Click Collection image
  4. Upload or select an image
  5. Image appears on collection card

Organizing Collections

  1. Go to Products → Collections in Shopify admin
  2. Collections appear in the order they're created
  3. Order affects how collections appear on the list page
  4. Can't manually reorder, but can create collections in desired order

Hiding Collections

  1. Go to Products → Collections in Shopify admin
  2. Select a collection
  3. Unpublish or delete the collection
  4. Collection won't appear on list page

Related Templates

  • Collection Page - Individual collection with products
  • Product Page - Individual product details
  • Search Page - Search results
  • Home Page - Store homepage

Related Sections

  • Collection List Section - Display collections on other pages
  • Featured Collection - Feature a collection on homepage
  • Collection Card - Individual collection display

Next Steps: