Collection Page Template

The collection page displays all products within a collection in a grid layout. It's the main browsing page where customers discover and filter products by various criteria like price, size, color, and more.

Overview

The collection page shows products in a customizable grid with filtering and sorting options. You can control the layout, number of products per page, grid columns, and how customers filter products. The page automatically displays the collection title, description, and all products in the collection.

Where to Use

The collection page template (collection.json) is automatically used for all collections in your store. When customers click on a collection from navigation, menu, or collection list, they'll see this template.

Collections are created in Shopify admin:

  1. Go to Products → Collections in Shopify admin
  2. Create a new collection or edit existing
  3. Add products to the collection
  4. The collection page automatically uses this template

Settings

Heading

Heading Size

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

Heading Alignment

  • What it does: Controls how the collection title is aligned
  • Options: Left, Center, Right
  • Default: Left
  • Tip:
    • Left: Standard, readable
    • Center: Balanced, centered layout
    • Right: Unique, right-aligned design

Facets & Filtering

Show Facets

  • What it does: Enables product filtering by price, availability, product type, vendor, and other criteria
  • Default: Enabled (true)
  • Tip:
    • Enable for collections with many products
    • Helps customers find specific products
    • Can be disabled for simple collections

Show Sorting

  • What it does: Allows customers to sort products (price, name, newest, etc.)
  • Default: Enabled (true)
  • Tip:
    • Essential for collections with many products
    • Helps customers find products quickly
    • Can be disabled for curated collections

Show Product Count

  • What it does: Displays the number of products in the collection
  • Default: Enabled (true)
  • Tip:
    • Shows "X products" in collection header
    • Helps customers understand collection size
    • Can be hidden for cleaner look

Facets Layout

  • What it does: Controls where filters appear on the page
  • Options:
    • Left Sidebar: Filters appear in a left sidebar (default)
    • Top Horizontal: Filters appear above products in a horizontal bar
  • Default: Left Sidebar
  • Tip:
    • Sidebar: Better for many filters, more space, traditional e-commerce
    • Top: Better for fewer filters, more product space, modern look

Show Mobile Facets

  • What it does: Enables filtering on mobile devices
  • Default: Enabled (true)
  • Tip:
    • Essential for mobile shopping
    • Usually opens as a drawer/modal on mobile
    • Can be disabled if not needed

Products

Products Per Page

  • What it does: Controls how many products display before pagination
  • Range: 12-48 products
  • Step: 4 products
  • Default: 20 products
  • Tip:
    • 12-16: Fewer products, faster loading, less scrolling
    • 20-24: Balanced, good default
    • 28-32: More products, more scrolling, fewer pages
    • 36-48: Maximum products, best for large collections

Grid Layout

Columns on Desktop

  • What it does: Number of product columns on desktop screens
  • Range: 2-6 columns
  • Default: 4 columns
  • Tip:
    • 2 columns: Large product cards, premium feel
    • 3 columns: Balanced, good for most stores
    • 4 columns: Standard, most common (recommended)
    • 5-6 columns: Dense grid, many products visible

Columns on Tablet

  • What it does: Number of product columns on tablet screens
  • Range: 2-4 columns
  • Default: 3 columns
  • Tip:
    • 2 columns: Larger cards, easier to see
    • 3 columns: Balanced, good default
    • 4 columns: Dense, more products visible

Columns on Mobile

  • What it does: Number of product columns on mobile screens
  • Range: 1-3 columns
  • Default: 2 columns
  • Tip:
    • 1 column: Large cards, easy to view
    • 2 columns: Balanced, most common (recommended)
    • 3 columns: Dense, many products, smaller cards

Pagination

Show Pagination

  • What it does: Displays pagination controls when there are multiple pages
  • Default: Enabled (true)
  • Tip:
    • Essential for collections with many products
    • Can be disabled for infinite scroll (if implemented)
    • Only shows when products exceed products per page

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 products
    • Center: Balanced, most common
    • Right: Right-aligned design

Show Pagination Info

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

Colors

Color Scheme

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

Padding

Top Padding

  • What it does: Space above the collection 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 content
  • Range: 0-100px
  • Default: 40px
  • Tip: Adjust to balance spacing with footer or next section

Animations

Enable Scroll Animations

  • What it does: Enables scroll-triggered animations for products
  • Default: Enabled (true)
  • Tip:
    • Products animate in as you scroll
    • Can be disabled for performance
    • Leave unchecked to use global animation settings
    • Overrides global animation settings when enabled

How It Works

Page Structure

The collection page displays in this order:

  1. Collection Header: Title and description (if available)
  2. Facets/Filters: Filtering and sorting options (if enabled)
  3. Product Grid: Products displayed in a grid layout
  4. Pagination: Page navigation (if multiple pages)

Facets Layout

Sidebar Layout

  • Filters appear in a left sidebar
  • Products grid takes remaining space on the right
  • Best for many filters or detailed filtering
  • Traditional e-commerce layout

Top Horizontal Layout

  • Filters appear above products in a horizontal bar
  • Products grid takes full width below
  • Best for fewer filters or modern design
  • More space for products

Product Grid

Products are displayed in a responsive grid:

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

Each product card shows:

  • Product image
  • Product title
  • Price
  • Vendor (if enabled)
  • Quick view or add to cart (depending on settings)

Filtering & Sorting

Available Filters (when facets enabled):

  • Price range
  • Product availability
  • Product type
  • Vendor
  • Tags
  • Custom filters (if configured)

Sorting Options (when sorting enabled):

  • Best selling
  • Title (A-Z, Z-A)
  • Price (Low to High, High to Low)
  • Newest
  • Oldest

Pagination

When products exceed the "Products per page" setting:

  • Pagination controls appear
  • Customers can navigate between pages
  • Shows current page and total pages
  • Maintains filters and sorting when navigating

Common Use Cases

Standard Collection

  • Layout: Sidebar facets, 4 columns desktop, 20 products per page
  • Settings: Facets enabled, sorting enabled, product count shown
  • Use Case: Most collections with standard filtering needs

Large Collection (100+ products)

  • Layout: Sidebar facets, 4-5 columns desktop, 24-32 products per page
  • Settings: All filtering enabled, pagination with numbers
  • Use Case: Collections with many products requiring extensive filtering

Small/Curated Collection (< 20 products)

  • Layout: Top facets or no facets, 3 columns desktop, 12 products per page
  • Settings: Facets optional, sorting optional, pagination may not be needed
  • Use Case: Hand-picked collections where all products fit on one page

Visual Collection (Fashion, Art)

  • Layout: Top facets, 3 columns desktop, 16 products per page
  • Settings: Facets enabled, large product images
  • Use Case: Collections where product images are the main focus

B2B Collection

  • Layout: Sidebar facets, 4 columns desktop, 24 products per page
  • Settings: Extensive filtering, sorting, product count
  • Use Case: Business collections with many filtering options

Tips & Best Practices

✅ Do's

  • Use appropriate products per page: Balance between loading speed and user experience
  • Enable facets for large collections: Help customers find products
  • Test on mobile: Ensure mobile experience is good
  • Use consistent grid columns: Maintain visual consistency
  • Show product count: Help customers understand collection size
  • Enable sorting: Essential for collections with many products
  • Use sidebar facets for many filters: Better organization
  • Test pagination: Ensure it works correctly
  • Optimize product images: Fast loading is crucial
  • Use clear collection descriptions: Help customers understand the collection

❌ Don'ts

  • Don't use too many products per page: Can slow down page loading
  • Don't disable facets for large collections: Makes it hard to find products
  • Don't use too many columns on mobile: Keep mobile experience readable
  • Don't forget mobile facets: Essential for mobile shopping
  • Don't hide product count: Customers want to know collection size
  • Don't use inconsistent grid layouts: Maintain visual consistency
  • Don't forget pagination: Essential for large collections
  • Don't use low-quality images: Product images are crucial
  • Don't skip collection descriptions: Help customers understand collections

Facets Layout Guide

Sidebar Layout

When to Use:

  • ✅ Collections with many filters
  • ✅ Detailed filtering needed
  • ✅ Traditional e-commerce feel
  • ✅ More filter options

Benefits:

  • More space for filters
  • Better organization
  • Traditional, familiar layout
  • Can show more filter options

Considerations:

  • Takes up horizontal space
  • Products grid is narrower
  • May need scrolling on mobile

Top Horizontal Layout

When to Use:

  • ✅ Collections with fewer filters
  • ✅ Modern, clean design
  • ✅ More space for products
  • ✅ Simplified filtering

Benefits:

  • More space for products
  • Modern, clean appearance
  • Full-width product grid
  • Better for visual products

Considerations:

  • Less space for filters
  • May need horizontal scrolling
  • Fewer visible filter options

Grid Columns Guide

Desktop Columns

2 Columns:

  • Large product cards
  • Premium, high-end feel
  • Best for visual products
  • More space per product

3 Columns:

  • Balanced layout
  • Good for most products
  • Comfortable spacing
  • Professional appearance

4 Columns (Recommended):

  • Standard e-commerce layout
  • Most common choice
  • Good balance
  • Works for most products

5-6 Columns:

  • Dense product grid
  • Many products visible
  • Best for large collections
  • Smaller product cards

Tablet Columns

2 Columns:

  • Larger cards
  • Easier to see details
  • Better for visual products

3 Columns (Recommended):

  • Balanced layout
  • Good default
  • Works for most products

4 Columns:

  • Dense grid
  • More products visible
  • Smaller cards

Mobile Columns

1 Column:

  • Large product cards
  • Easy to view
  • Best for detailed products
  • More scrolling

2 Columns (Recommended):

  • Balanced layout
  • Most common
  • Good default
  • Comfortable viewing

3 Columns:

  • Dense grid
  • Many products visible
  • Smaller cards
  • Less scrolling

Products Per Page Guide

12 Products

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

16 Products

  • Best for: Medium collections, balanced experience
  • Benefits: Good balance, reasonable loading
  • Considerations: Standard choice

20 Products (Recommended)

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

24 Products

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

28-32 Products

  • Best for: Very large collections, maximum visibility
  • Benefits: Many products visible, fewer pages
  • Considerations: Slower loading, more scrolling

36-48 Products

  • Best for: Extremely large collections, maximum products
  • Benefits: Maximum products 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 collections

Arrows Only:

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

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 products, natural flow
  • Center: Balanced, most common (recommended)
  • Right: Right-aligned, unique design

Examples

Example 1: Standard Collection

Settings:

  • Heading Size: 2XL
  • Heading Alignment: Left
  • Show Facets: Enabled
  • Facets Layout: Sidebar
  • Products Per Page: 20
  • Desktop Columns: 4
  • Tablet Columns: 3
  • Mobile Columns: 2
  • Pagination: Numbers, Center
  • Animations: Enabled

Result: Standard collection page with sidebar filters, 4-column grid, and pagination

Example 2: Large Collection (Fashion)

Settings:

  • Heading Size: 3XL
  • Heading Alignment: Center
  • Show Facets: Enabled
  • Facets Layout: Top
  • Products Per Page: 24
  • Desktop Columns: 3
  • Tablet Columns: 3
  • Mobile Columns: 2
  • Pagination: Numbers, Center
  • Animations: Enabled

Result: Visual collection with top filters, 3-column grid for larger product images

Example 3: Small Curated Collection

Settings:

  • Heading Size: 3XL
  • Heading Alignment: Center
  • Show Facets: Disabled
  • Products Per Page: 12
  • Desktop Columns: 3
  • Tablet Columns: 2
  • Mobile Columns: 2
  • Pagination: Disabled (all products fit on one page)
  • Animations: Enabled

Result: Curated collection with all products visible, no pagination needed

Example 4: B2B Collection

Settings:

  • Heading Size: 2XL
  • Heading Alignment: Left
  • Show Facets: Enabled
  • Facets Layout: Sidebar
  • Products Per Page: 32
  • Desktop Columns: 4
  • Tablet Columns: 3
  • Mobile Columns: 2
  • Pagination: Numbers, Center
  • Show Product Count: Enabled
  • Animations: Disabled (for performance)

Result: Large B2B collection with extensive filtering and many products per page

Troubleshooting

Products Not Showing

  • Check: Verify collection has products in Shopify admin
  • Check: Ensure products are published and available
  • Check: Check collection settings in Shopify admin
  • Check: Verify products are assigned to collection

Facets Not Working

  • Check: Verify "Show Facets" is enabled
  • Check: Ensure collection has filterable attributes
  • Check: Test filters in preview
  • Check: Check browser console for errors

Pagination Not Showing

  • Check: Verify "Show Pagination" is enabled
  • Check: Ensure products exceed "Products per page" setting
  • Check: Test with collection that has many products
  • 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

Sorting Not Working

  • Check: Verify "Show Sorting" is enabled
  • Check: Test sorting options
  • Check: Check browser console for errors
  • Check: Ensure collection has products

Mobile Facets Not Showing

  • Check: Verify "Show Mobile Facets" is enabled
  • Check: Test on actual mobile device or responsive mode
  • Check: Check mobile menu/drawer functionality
  • Check: Verify JavaScript is loading

Collection Description Not Showing

  • Check: Verify collection has description in Shopify admin
  • Check: Add description in collection settings
  • Check: Description appears automatically if available

Animations Not Working

  • Check: Verify "Enable Scroll Animations" is enabled
  • Check: Check global animation settings
  • Check: Test scroll behavior
  • Check: Verify JavaScript is loading

Customizing Collections

Adding Collection Description

  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 page

Setting Up Filters

  1. Go to Online Store → Navigation in Shopify admin
  2. Click Filters
  3. Add filter options (Price, Availability, Product Type, etc.)
  4. Filters appear automatically when facets are enabled

Organizing Products in Collection

  1. Go to Products → Collections in Shopify admin
  2. Select a collection
  3. Click Products tab
  4. Drag and drop to reorder products
  5. Order affects how products appear (unless sorted)

Related Templates

  • Product Page - Individual product details
  • Search Page - Search results
  • Cart Page - Shopping cart
  • List Collections Page - All collections

Related Sections

  • Collection List - Display multiple collections
  • Featured Collection - Feature a collection on other pages
  • Product Card - Individual product display in grid

Next Steps: