Collection Product Grid
The traditional, structured grid layout for collection pages. Includes native Shopify filtering, sorting, and responsive product cards.
Overview
The Collection Product Grid provides a clean, predictable layout for browsing products. It integrates with Shopify's filtering and sorting APIs for a seamless shopping experience.
🔍
Native Filtering
Shopify Search & Discovery integration
📊
Sort Options
Price, date, best selling, etc.
📐
Responsive Grid
Configurable columns per breakpoint
🎨
Card Customization
Swatches, badges, quick add
When to Use
📦
Collection Product Grid
Standard collection pages with filtering and sorting. Traditional e-commerce layout with predictable grid structure.
Best for: Standard browsing, catalog pages, filtered shopping
🎨
Editorial Grid
Luxury, editorial layouts with mixed product and content tiles. Hero moments and flexible modular structure.
Best for: Luxury brands, lookbooks, campaign pages
Use this section when you need:
- Shopify Search & Discovery filtering
- Standard, predictable grid layouts
- Simple product browsing experience
- Promo blocks within the product stream
Quick Setup
1
Add the Section
In the Theme Editor, click Add section and choose Collection Product Grid.
2
Select Collection
If not on a collection template, select a collection in the section settings.
Responsive Grid Behavior
The Collection Product Grid automatically adjusts columns based on screen size. Use the interactive demo to preview how settings affect the layout at each breakpoint:
📐Responsive Columns Demo
See how the grid adapts across screen sizes
Preview: desktop (4 columns)
Product 1
$99
Product 2
$99
Product 3
$99
Product 4
$99
Product 5
$99
Product 6
$99
Product 7
$99
Product 8
$99
Animation Settings
| Setting | Type | Default | Description |
|---|---|---|---|
| Image scroll effect | radio | Reveal on scroll | Animation for product cards: None, Reveal on scroll, or Zoom on scroll. |
| Card content alignment | select | Left | Text alignment for product info: Left, Center, or Right. |
| Reveal duration | text | 800ms | Animation duration (e.g., '600ms' or '0.6s'). |
| Reveal delay | text | 0ms | Delay before animation starts. |
| Reveal easing | text | cubic-bezier(0.22, 1, 0.36, 1) | CSS easing function for animation. |
Collection Header
| Setting | Type | Default | Description |
|---|---|---|---|
| Collection | collection | - | Select a collection to display. Not needed on collection templates. |
| Show collection title | checkbox | true | Display the collection name as a heading. |
| Collection title font weight | select | Normal | Title weight: Normal or Bold. |
| Collection title font size | select | Large | Title size: Small, Medium, Large, or Extra Large. |
| Show collection description | checkbox | true | Display the collection description text. |
| Collection description font weight | select | Normal | Description weight: Normal or Bold. |
| Collection description font size | select | Medium | Description size: Small, Medium, or Large. |
Title Size Options
Small
Desktop ~1.75rem / Mobile ~1.25rem
Medium
Desktop ~2.8rem / Mobile ~1.8rem
Large
Desktop ~4.2rem / Mobile ~2.6rem
Extra Large
Desktop ~5.6rem / Mobile ~3.2rem
Filtering & Sorting
| Setting | Type | Default | Description |
|---|---|---|---|
| Products per page | range | 24 | Number of products before pagination. Range: 4–48. |
| Enable filtering | checkbox | true | Show filter options. Customize filters with the Search & Discovery app. |
| Enable sorting | checkbox | true | Show sort dropdown (Featured, Price, Date, etc.). |
| Filter alignment | select | Left | Position of filter bar: Left, Center, or Right. |
💡
Configure advanced filtering options in your Shopify admin under Apps → Search & Discovery. You can create filter groups, customize labels, and set filter order.
Grid Layout
| Setting | Type | Default | Description |
|---|---|---|---|
| Image ratio | select | Adapt to image | How product images are cropped. |
| Columns on desktop | range | 4 | Number of columns on large screens. Range: 1–5. |
| Columns on tablet | range | 2 | Number of columns on medium screens. Range: 1–4. |
| Columns on mobile | range | 1 | Number of columns on small screens. Range: 1–3. |
| Color scheme | select | Scheme 1 | Apply a predefined color scheme. |
Image Ratio Options
🖼️
Adapt
Uses original image proportions
📱
Portrait
Taller than wide (3:4)
⬜
Square
Equal width and height
🖥️
Landscape
Wider than tall (4:3)
Product Card Settings
| Setting | Type | Default | Description |
|---|---|---|---|
| Image position | select | Top center | Focal point for card images: Top, Center, or Top center. |
| Show vendor | checkbox | false | Display the product brand/vendor name. |
| Show secondary image on hover | checkbox | false | Reveal a second product image when hovering. |
| Show quick add button | checkbox | false | Display add-to-cart button on cards. |
| Enable favorites | checkbox | true | Show wishlist/favorite button on cards. |
| Show NEW badges | checkbox | true | Display NEW badge on recent products. |
Color Swatches
| Setting | Type | Default | Description |
|---|---|---|---|
| Show color swatches | checkbox | true | Display color variant options as swatches. |
| Enable card hover preview | checkbox | true | Hover over color swatches to preview variant images. |
| Swatch display style | select | Hover overlay | How swatches appear: Always visible below card, or Overlay on hover. |
| Show color count until hover | checkbox | false | Only show the count ('+3') until user hovers. Only for 'Below card' style. |
| Maximum swatches to show | range | 5 | Additional colors show as '+N' indicator. Range: 3–10. |
Swatch Display Styles
👇
Below Card
Swatches are always visible underneath the product info. Great for color-driven products.
Best for: Fashion, accessories, home decor
👆
Hover Overlay
Swatches appear as an overlay when hovering over the card. Cleaner initial appearance.
Best for: Minimal designs, focused browsing
Promo Blocks
Insert promotional content between products to break up the grid and highlight offers.
| Setting | Type | Default | Description |
|---|---|---|---|
| Insert after product | range | 4 | Position in the grid (e.g., 4 = after 4th product). Range: 1–50. |
| Type | select | Image | Content type: Image or Rich text. |
| Image | image | - | Promotional image (for Image type). |
| Content | richtext | - | Text content (for Rich text type). |
Promo Block Ideas
🏷️
Sale Banner
Text highlighting a promotion
📂
Category Link
Image to related collection
✨
Brand Story
Lifestyle content or quote
📧
Newsletter
Email signup CTA
Grid vs Editorial Comparison
| Feature | Product Grid | Editorial Grid |
|---|---|---|
| Native Shopify Filtering | ✓ | ✗ |
| Hero Tiles (2×2, tall, wide) | ✗ | ✓ |
| Editorial Tiles (looks, promos) | ✗ | ✓ |
| Layout Style | Standard grid | Flexible modular |
| Best Use Case | Traditional shopping | Luxury/editorial feel |
Best Practices
Grid Configuration
Recommended column settings for optimal display
4 columns on desktopRecommended
Balance between visibility and product size
2 columns on tablet
Large enough to see product details clearly
1-2 columns on mobile
1 column recommended for most products
24 products per pageRecommended
Good balance for initial page load performance
Performance Tips
Limit products per page
Start with 24, increase carefully based on performance
Images are lazy loaded
Built-in optimization, no action needed
Optimize product images
Compress images and use appropriate dimensions
Filtering Guidelines
Enable for larger catalogsRecommended
Collections with 50+ products benefit most from filtering
Configure in Search & Discovery
Create custom filter groups and labels in Shopify admin
Left alignment is standard
Most users expect filters on the left side
Troubleshooting
⚠️Products not showing
- Verify a collection is selected (or you're on a collection template)
- Check that the collection has visible products
- Ensure products are not all set to hidden/draft status
🔍Filters not appearing
- Confirm Enable filtering is turned on
- Ensure the collection has filterable attributes (size, color, etc.)
- Configure filters in the Search & Discovery app
🎨Swatches not working
- Enable Show color swatches in settings
- Products need color variants properly configured
- Check the Maximum swatches setting
🎬Animation issues
- Reduce Reveal duration for faster animations
- Check for JavaScript conflicts with other apps
- Test on different browsers
📢Promo blocks not visible
- Verify Insert after product is within your product range
- Check that content (image or text) has been added
- Ensure the promo type matches the content you've added