Featured Collection Row
Display products from any collection in a responsive grid with customizable card options.
Quick Setup
- Add section → Featured collection row
- Select a collection
- Configure grid columns and card options
Section Settings
Content
| Setting | Type | Default | Description |
|---|---|---|---|
| Heading | text | - | Section title (e.g., 'Shop the Collection'). |
| Collection | collection | - | Select which collection to display products from. |
| Products | range | 12 | Number of products to display. Range: 4–24. |
Card Animation
| Setting | Type | Default | Description |
|---|---|---|---|
| Scroll effect | select | None | Animation for product cards: None, Reveal, or Zoom. |
Card Layout
| Setting | Type | Default | Description |
|---|---|---|---|
| Card content alignment | select | Left | Text alignment: Left, Center, or Right. |
| Show color swatches | checkbox | true | Display variant color swatches on product cards. |
| Enable card hover preview | checkbox | true | Show secondary image on hover. |
| Maximum swatches per product | range | 5 | Limit shown swatches. Range: 3–8. |
| Card click behavior | select | Link to product with selected variant | What happens when clicking: go to product page or quick add. |
| Show quick add button | checkbox | false | Display an add-to-cart button on cards. |
| Card image aspect ratio | select | Portrait (3:4) | Image proportions: Portrait (3:4), Square (1:1), or Landscape (4:3). |
| Image position | select | Top center | Focal point: Top, Center, or Top center. |
Features
| Setting | Type | Default | Description |
|---|---|---|---|
| Favorites | checkbox | true | Show 'Add to favorites' heart icon. |
| NEW badges | checkbox | true | Display 'NEW' badge on recently added products. |
Responsive Grid Behavior
The section automatically adjusts columns based on screen size:
Desktop (1200px+)
4+ columns, responsive to container
Tablet
3 columns
Mobile
2 columns
Products are displayed in a CSS Grid that auto-fits based on available space, ensuring optimal viewing on all devices.
Best Practices
Collection Selection
- Choose curated collections — Best for hand-picked product groups
- Limit product count — 8-12 products is optimal for engagement
- Consider seasonality — Feature timely or trending collections
- Use descriptive headings — "Shop Summer Essentials" works better than "Products"
Card Options
- Enable swatches — Helps customers see variant options quickly
- Hover preview — Let customers see products from multiple angles
- Portrait aspect ratio — Works best for most product photography
- Quick add — Great for low-consideration purchases
Performance
- More products = longer load times
- Consider lazy loading for below-the-fold placement
- Optimize collection images
Use Cases
Cross-Selling on Collection Pages
- Add to collection template
- Select a complementary collection
- Heading: "Complete Your Look"
Homepage Feature
- Select your best-selling collection
- Limit to 8 products
- Add "Shop All" link in heading
Product Page Upsells
- Feature accessories or related products
- Enable quick add for convenience
- Heading: "Goes Great With..."
Troubleshooting
No products showing
- Ensure a Collection is selected
- Verify the collection has published products
- Check that Products limit isn't set to 0
Grid looks uneven
- Products auto-fit based on screen width
- Use an even number of products (4, 8, 12)
- All product images should have similar aspect ratios
Swatches not appearing
- Enable Show color swatches
- Products need variants with color options
- Check swatch configuration in theme settings