Skip to main content
The Collection Page (PLP) displays products within a specific collection on collection detail pages with product grid layout, filtering, sorting, pagination, and optional promotional content injection. This is the core template for displaying product collections and directly impacts browse-to-purchase conversion rates. Configure grid layouts, enable filtering and sorting, and customize the shopping experience to help customers find the perfect product within each collection.

​
Template Settings

The utilities bar appears above the product grid with filtering, sorting, and product count controls.
Display total product count for the collection.
  • Type: Checkbox
  • Default: Enabled
Displays:
  • “120 products” or similar text
  • Updates dynamically with active filters
  • Helps set customer expectations
Product count provides transparency and helps customers understand collection size before browsing.
Allow customers to switch between grid layouts (3 or 4 columns).
  • Type: Checkbox
  • Default: Enabled
  • Provides: Grid view toggle buttons in collection toolbar
When enabled, customers see icon buttons to switch between 3-column and 4-column grid views based on preference.
Display product sorting dropdown.
  • Type: Checkbox
  • Default: Enabled
Sorting Options (typical):
  • Featured (manual collection order)
  • Best Selling
  • Alphabetically: A-Z
  • Alphabetically: Z-A
  • Price: Low to High
  • Price: High to Low
  • Date: Old to New
  • Date: New to Old
Sorting helps customers find products based on their shopping preferences. “Best Selling” is great for social proof.
Choose how product filters display:
  • Hidden - No filtering available
  • Drawer (default) - Opens in slide-out panel
  • Sidebar - Permanent sidebar on desktop

Hidden

No filters, simplest browsing experience

Drawer

Space-efficient, opens on demand, mobile-friendly

Sidebar

Always visible on desktop, quick filter access
Filters are based on product tags, metafields, and variants. Configure in Shopify Admin → Online Store → Navigation → Search & Discovery → Filters.

​
Filter System

Shopify supports multiple filter types:Available Filters:
  • Price Range - Min/max price slider
  • Product Type - Category filters
  • Vendor - Brand filters
  • Tags - Custom tag filters
  • Variants - Size, color, material options
  • Metafields - Custom attributes (fabric, dimensions, etc.)
  • Availability - In stock / Out of stock
Configure filters in Shopify Admin → Online Store → Navigation → Search & Discovery → Filters tab.
Setup Process:
  1. Go to Shopify Admin → Online Store → Navigation
  2. Click “Search & Discovery”
  3. Navigate to “Filters” tab
  4. Add filters for each collection or globally
  5. Choose filter types (list, swatch, range)
  6. Set filter labels and options
Filter Display:
  • Drawer: “Filter & Sort” button opens slide-out panel
  • Sidebar: Filters always visible on left side
  • Hidden: No filters available
When filters are applied:
  • Active filter tags display above product grid
  • Product count updates dynamically
  • “Clear All” option appears
  • URL updates for shareability
  • Filtering works with sorting

​
Best practices

Grid layout strategy

Choose 4 columns for large catalogs (50+ products), simple imagery, fashion/accessories. Choose 3 columns for premium/luxury products, complex items needing detail, lifestyle photography, home decor/furniture/electronics.

Products per page calculation

Match products_per_page to create complete rows. For 4-column grid: 12 (3 rows), 16 (4 rows recommended), 20 (5 rows), 24 (6 rows). For 3-column: 12 (4 rows recommended), 18 (6 rows), 24 (8 rows). Incomplete rows can look unfinished.

Filter implementation

Use filters for collections with 20+ products, multiple variants, price range variety, multiple brands. Skip for small collections (< 20 products), homogeneous products. Limit to 5-7 filter types, use clear labels, order by importance, show product counts per option.

Sorting strategy

Featured (manual) is best for curated collections allowing manual product ordering. Best Selling provides social proof and builds trust. Price sorting is essential for budget shoppers (Low to High for bargain hunters, High to Low for premium browsers). Date (New to Old) is perfect for “New Arrivals” collections.

Text card usage

Use for promotional messaging (free shipping, sales), cross-selling (related collections, bundles), content marketing (size guides, tips). Position 1-4 for high-priority promotions, 8-12 for natural break, 16+ for engaged scrolling customers. Limit to 1 text card per collection for maximum impact.

Mobile optimization

Use 2-column mobile grid (shows more products) or 1-column for products needing large images. Filters in drawer work better than sidebar on mobile. Keep products_per_page lower on mobile (12-16). Verify touch targets are large enough (44x44px minimum).

​
Use Cases

Fashion Store

4-column grid, drawer filters (Size, Color, Price), Best Selling sort, 24 products per page

Premium Furniture

3-column grid, sidebar filters, Featured sort, 12 products per page, large product cards

Sale Collection

4-column grid, text card at position 1 with “Extra 20% with code SALE20”, Price Low-to-High default

New Arrivals

4-column grid, Date (New-to-Old) sort, text card announcing “Just Landed” collection

Electronics Store

3-column grid, sidebar with detailed filters (Brand, Price, Specs), comparison features

Small Boutique

3-column grid, no filters (< 20 products), Featured sort for manual curation

​
Performance Considerations

Performance Tips:
  • Lower products_per_page for faster initial load (12-16)
  • Use Load More pagination to reduce initial load
  • Optimize product images (compress, use WebP)
  • Enable lazy loading for product images
  • Limit filter complexity (fewer filter types)
  • Use 4-column grid for smaller card images
Collection Page SEO:
  • Use descriptive collection titles and URLs
  • Write unique collection descriptions
  • Optimize collection featured image alt text
  • Use traditional pagination for crawlability
  • Enable product count for transparency
  • Keep URL structure clean when filtering
  • Add schema markup (breadcrumbs, products)

Collection Banner

Hero banner appearing above this collection template

Collection Product Card

Individual product card component within grid

Product Page

Individual product page template customers visit after clicking

Featured Collections

Homepage section for displaying multiple collections

​
Troubleshooting

Possible Causes:
  • Collection has no published products
  • All products are out of stock (if stock filter active)
  • Products don’t match active filters
  • Products not assigned to collection
Solutions:
  1. Add products to collection in Shopify Admin
  2. Publish products (check product status)
  3. Clear active filters
  4. Verify collection conditions (manual vs. automated)
Check:
  • Filters_style is not set to “hidden”
  • Filters configured in Shopify Admin → Search & Discovery
  • Collection has filterable attributes (tags, variants, metafields)
  • Theme filter settings enabled globally
Verify:
  • Enable_sorting checkbox is enabled
  • JavaScript not blocked
  • No theme conflicts
  • Browser cache cleared
Common Issues:
  • Uneven product card heights (mixed image ratios)
  • Incomplete rows (adjust products_per_page)
  • Mobile layout broken (test responsive breakpoints)
Solutions:
  • Use consistent product image aspect ratios (1:1 or 3:4)
  • Match products_per_page to grid columns (multiples of 3 or 4)
  • Test on actual mobile devices
Reasons:
  • Position value exceeds total products on page
  • Block not added to template
  • Position set to value beyond current page products
Fix:
  • Ensure position ≤ products_per_page
  • Add text-card block if missing
  • Adjust position to visible range

​
Quick Summary

  • Purpose: Collection product grid template for individual collection pages
  • Features: Product grid, filtering, sorting, pagination, promotional injection
  • Grid Options: 3 or 4 columns (desktop), 1 or 2 columns (mobile)
  • Products Per Page: 12-36 (default: 16)
  • Filters: Hidden, Drawer, or Sidebar
  • Pagination: Traditional or Load More
  • Blocks: 1 text card for promotional content (position 1-28)
  • Customization: Grid toggles, sorting, sidebar navigation, button styles
Collections are managed in Shopify Admin → Products → Collections. This template controls the visual layout and functionality of collection pages, not which products appear in collections.