Collection Grid Guide
The Collection Grid displays your products in a responsive grid layout with powerful filtering and sorting capabilities.
Perfect for showcasing your product catalog with an intuitive browsing experience.
Key Features
- Responsive grid layout with customizable columns
- Product filtering and sorting capabilities
- Customizable spacing between products
- Sticky positioning for filters
- Pagination with "load more" functionality
- Compatible with product siblings/swatches feature
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
Grid Layout Configuration
Products Per Row
| Setting | Description | Options |
|---|---|---|
| Products per row (desktop) | Number of columns on larger screens | 2-5 products |
| Products per row (mobile) | Number of columns on mobile | 1-2 products |
Recommended settings:
- Fashion/Apparel: 4 products per row (desktop), 2 (mobile)
- Home Goods: 3-4 products per row (desktop), 2 (mobile)
- Jewelry/Small items: 4-5 products per row (desktop), 2 (mobile)
Spacing
| Setting | Description | Options |
|---|---|---|
| Horizontal spacing | Gap between products horizontally | 0-100px |
| Vertical spacing | Gap between product rows | 0-100px |
Use 10-20px spacing for a clean, modern look. Larger spacing (30-40px) works well for luxury brands, while minimal spacing (0-10px) suits catalogs with many products.
Filtering & Sorting
Filter Settings
| Setting | Description | Options |
|---|---|---|
| Show product filter | Toggles filtering options | On/Off |
| Show sort filter | Toggles sorting dropdown | On/Off |
| Enable sticky positioning | Makes filters stick when scrolling | On/Off |
| Filter alignment | Position of filter controls | Left, Center, Right |
| Filter Groups Default State | How filters initially appear | First Open, All Open, None Open |
Product filtering requires your products to have tags, metafields, or other filterable attributes set up in Shopify. Without these, no filter options will appear.
Pagination
| Setting | Description | Recommended |
|---|---|---|
| Products per page | Items shown before pagination | 16-24 for best performance |
Performance considerations:
- Fewer products (12-16) = Faster loading, more pages
- More products (24-36) = Less clicking, slower loading
Product Card Display
The collection grid uses your global product card settings from Theme Settings → Product Cards:
- Image aspect ratio
- Show vendor
- Show second image on hover
- Enable quick add
- Product badges
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
- Set the aspect ratio in Theme Settings → Product cards
- Ensure all product images are optimized for web
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
Performance
- Keep products per page reasonable (16-24 recommended)
- Use appropriately sized images to maintain fast loading times
- Limit the number of enabled filters to essential ones only
Integration with Product Siblings
The Collection Grid works seamlessly with the Product Siblings feature:
- Ensure Product Siblings is enabled in Theme Settings → Product siblings
- Set up required metafields for your products
- Color swatches will automatically appear on product cards in your collection
See the Product Siblings Guide for detailed setup instructions.
Troubleshooting
Filters not appearing:
- Verify that your collection has filterable tags or metafields
- Check that "Show product filter" is enabled in settings
Product swatches missing:
- Check Product Siblings settings and product metafields
- Ensure products share the correct metafield values
Uneven grid:
- Ensure product images have consistent aspect ratios
- Check that all products have featured images
Mobile layout issues:
- Adjust mobile columns setting
- Test on multiple actual devices (not just browser dev tools)
Slow loading:
- Reduce products per page
- Optimize product images (compress before uploading)
- Disable quick add if not essential
Always test collection pages on actual mobile devices. Browser dev tools don't accurately represent real-world performance and touch interactions.