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
- Open the theme editor
- Click the page selector
- Choose Collections → Default collection
Product Grid
Grid Layout Options
| Setting | Options | Description |
|---|---|---|
| Desktop columns | 2-6 | Products per row on desktop |
| Mobile columns | 1-3 | Products per row on mobile |
| Grid gap | 1-3 rem | Spacing 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
- Go to Shopify Admin → Online Store → Navigation
- Click Collection and search filters
- Add filters you want customers to use
- 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
Breadcrumb Navigation
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
- Collection Page → Product Grid section
- Adjust “Desktop columns” and “Mobile columns”
Add collection image
- Shopify Admin → Products → Collections
- Edit your collection
- Add image in the Collection image section
Change default sort order
- Shopify Admin → Products → Collections
- Edit collection
- Change “Sort” dropdown to desired order
Create a new collection
- Shopify Admin → Products → Collections
- Click “Create collection”
- Set up conditions or manually add products
- 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