Skip to Content
FeaturesCollection Pages

Collection Pages

Collection pages display groups of products, helping customers browse and discover your catalog.

Page Layout

Collection pages include:

  • Breadcrumb navigation - Shows current location
  • Collection title and description - From your collection settings
  • Filter panel - Product filtering options
  • Product grid - Your products in a grid layout

Accessing Collection Settings

  1. Open the theme editor
  2. Click the page selector
  3. Choose CollectionsDefault collection

Product Grid

Grid Layout Options

SettingOptionsDescription
Desktop columns2-6Products per row on desktop
Mobile columns1-3Products per row on mobile
Grid gap1-3 remSpacing between products

Product Card Features

Each product in the grid displays:

  • Product image with hover effect
  • Product title
  • Price (with sale price if applicable)
  • Color swatches (if enabled)
  • Rating (if enabled)
  • Sale/New badges (if enabled)

Filtering Products

The filter panel helps customers narrow down products.

Available Filters

Filters are based on your Shopify search and filtering settings:

  • Availability - In stock, out of stock
  • Price - Price range slider
  • Product type - Category filters
  • Vendor - Brand/vendor filters
  • Options - Size, color, material, etc.
  • Tags - Custom product tags

Setting Up Filters

  1. Go to Shopify AdminOnline StoreNavigation
  2. Click Collection and search filters
  3. Add filters you want customers to use
  4. Drag to reorder filter priority

Filter Panel Settings

Where: Theme Editor → Collections → Filter Panel section

  • Choose filter layout (sidebar or horizontal)
  • Enable/disable specific filter types
  • Configure filter behavior

Sorting Products

Customers can sort products by:

  • Featured (your manual order)
  • Best selling
  • Alphabetically (A-Z, Z-A)
  • Price (low to high, high to low)
  • Date (newest first)

Pagination

For collections with many products:

  • Displays page numbers for navigation
  • Shows products per page
  • Maintains filter and sort selections

The breadcrumb shows the customer’s location:

Home → Collections → [Collection Name]

Helps customers navigate back to previous pages.

Empty Collection State

When a collection has no products:

  • Displays a helpful message
  • Suggests actions like browsing other collections
  • Maintains page design consistency

Common Tasks

Change products per row

  1. Collection Page → Product Grid section
  2. Adjust “Desktop columns” and “Mobile columns”

Add collection image

  1. Shopify Admin → Products → Collections
  2. Edit your collection
  3. Add image in the Collection image section

Change default sort order

  1. Shopify Admin → Products → Collections
  2. Edit collection
  3. Change “Sort” dropdown to desired order

Create a new collection

  1. Shopify Admin → Products → Collections
  2. Click “Create collection”
  3. Set up conditions or manually add products
  4. Save and publish

SEO Considerations

Collection Titles

  • Use descriptive, keyword-rich titles
  • Keep under 60 characters for search results

Collection Descriptions

  • Write unique descriptions for each collection
  • Include relevant keywords naturally
  • Describe what products are included

Collection URLs

  • Keep handles short and descriptive
  • Use hyphens between words
  • Avoid changing URLs after publishing

Troubleshooting

Products not appearing

  • Check that products are published
  • Verify products meet collection conditions
  • Ensure products are in stock (if filtering by availability)

Filters not working

  • Set up filters in Shopify Admin → Navigation
  • Ensure products have the relevant attributes

Sort order not changing

  • Clear browser cache and refresh
  • Check if collection uses automated sorting

Need more help? Contact support

Last updated on