Collection Page
The Collection Grid section is a versatile and highly customizable component that displays your products in a responsive grid layout.
It includes filtering, sorting, customizable spacing, and the ability to insert promotional images within the product grid.
Key Features
- Responsive grid layout with customizable columns
- Product filtering and sorting capabilities
- Customizable title and breadcrumb display
- Adjustable spacing between products
- Sticky positioning for filters
- Inner grid promotional images
- Pagination with "load more" functionality
- Compatible with product siblings/swatches feature
Settings Guide
Page Title Settings
| Setting | Description | Options |
|---|---|---|
| Title size | Controls the size of the collection title | XS to 7XL (responsive options available) |
| Title alignment | Sets the horizontal alignment of the title | Left, Center, Right |
Filter Settings
| Setting | Description | Options |
|---|---|---|
| Show product filter | Toggles the display of product filtering options | On/Off |
| Show sort filter | Toggles the display of sorting options | On/Off |
| Enable sticky positioning | Makes filters stick to the top when scrolling | On/Off |
| Filter alignment | Sets the horizontal alignment of filters | Left, Center, Right |
| Filter Groups Default State | Controls how filter groups initially appear | First Group Open, All Groups Open, No Groups Open |
Filter Requirements
Product filtering requires your collection to have filterable tags or metafields. Without these, no filter options will appear to customers.
Breadcrumb Settings
| Setting | Description | Options |
|---|---|---|
| Breadcrumb text size | Controls the size of breadcrumb text | Do not display, XS, S, Base |
| Breadcrumb alignment | Sets the horizontal alignment of breadcrumbs | Left, Center, Right |
Inner Grid Spacing
| Setting | Description | Options |
|---|---|---|
| Horizontal spacing | Controls the horizontal gap between products | 0-100px |
| Vertical spacing | Controls the vertical gap between product cards | 0-100px |
Spacing Guidelines
- Minimal (0-10px): Dense catalog layout
- Moderate (10-20px): Clean, modern look (recommended)
- Spacious (30-40px): Luxury or editorial style
Layout Settings
| Setting | Description | Options |
|---|---|---|
| Remove product info padding | Removes left/right padding from product information | On/Off |
| Horizontal spacing size | Adjusts the overall horizontal spacing | None, Small |
| Number of products per row | Sets the number of columns for desktop view | 2-5 |
| Number of columns on mobile | Sets the number of columns for mobile view | One column, Two columns |
| Products per page | Controls how many products display before pagination | 4-48 |
| Indent section | Adds indentation to the left and right edges | On/Off |
| Color scheme | Sets the color scheme for the collection | Theme color schemes |
Section Padding
| Setting | Description | Options |
|---|---|---|
| Top section padding | Controls the padding at the top of the section | 0-100px |
| Bottom section padding | Controls the padding at the bottom of the section | 0-100px |
Inner Grid Image Blocks
Insert promotional images between product rows in your collection.
| Setting | Description |
|---|---|
| Image | The image to display |
| Link | Optional URL the image links to |
Block placement:
- First image appears after the 2nd row of products
- Second image appears after the 6th row of products
Promotional Images
Use inner grid images to highlight sales, new arrivals, or brand messaging without disrupting the shopping experience.
Setup Instructions
Basic Setup
- Navigate to your Shopify admin → Online Store → Themes
- Click Customize on your current theme
- Select a collection page
- The Collection Grid section should be present by default
Customizing Your Collection Grid
Adjust Grid Layout:
- Set your desired number of columns (2-5 for desktop, 1-2 for mobile)
- Configure horizontal and vertical spacing between products
- Choose products per page (4-48)
Configure Filters:
- Enable/disable product filtering and sorting
- Set filter alignment and default state
- Toggle sticky positioning
Add Inner Grid Images:
- Click "Add block"
- Select "Inner Grid Image"
- Upload an image and add an optional link
- Add up to two promotional images
Product Siblings Integration
The Collection Grid works seamlessly with the Product Siblings feature, displaying color swatches on product cards when enabled:
- Ensure Product Siblings is enabled in Theme Settings → Product siblings
- Set up required metafields for your products (see Product Siblings documentation)
- Color swatches will automatically appear on product cards in your collection
Best Practices
Responsive Design
- Test your collection on mobile, tablet, and desktop
- Consider using fewer columns (3-4) for better readability
- Use 2 columns on mobile for optimal product visibility
Product Images
- Use consistent aspect ratios for product images
- The default aspect ratio is set in Theme Settings → Product cards
- Ensure all images are optimized for web (under 200KB)
Spacing
- Balance spacing for a clean look (10-20px recommended)
- Consider enabling borders in Theme Settings → Borders for visual separation
- Test different spacing values to match your brand aesthetic
Inner Grid Images
- Use images that match your collection's width
- Create images with aspect ratios that complement your products
- Link to relevant collections or promotional pages
Performance
- Keep products per page reasonable (16-24 recommended)
- Use appropriately sized images to maintain fast loading times
- Limit the number of active filters to essential ones
Performance Impact
Showing more than 36 products per page can significantly slow down collection loading. Balance convenience with performance.
Troubleshooting
Filters not appearing:
- Verify that your collection has filterable tags or metafields
- Check that products have tags assigned
- Ensure "Show product filter" is enabled in settings
Product swatches missing:
- Check Product Siblings settings and product metafields
- Verify products share the correct metafield values
- See the Product Siblings Guide
Uneven grid:
- Ensure product images have consistent aspect ratios
- Check that all products have featured images
- Verify image dimensions are similar
Mobile layout issues:
- Adjust mobile columns and test on multiple devices
- Check spacing settings for mobile view
- Test touch targets for filters and buttons
Inner grid images not showing:
- Verify block settings and check image dimensions
- Ensure images are uploaded correctly
- Check that you have enough products to reach the image position
Testing
Always test collection pages on actual mobile devices, not just browser dev tools. Performance and interactions can differ significantly.