Product grid from a selected collection with comprehensive customization settings.
Featured Collection
The Featured Collection section displays a product grid from a selected Shopify collection. It is the most commonly used section for showcasing products on the homepage or any other page.
Main Settings
Collection
| Setting | Description | Options |
|---|---|---|
| Collection | Source collection for products | Collection picker |
| Product limit | Number of products displayed | 2-24 |
| "View all" button | Link to the full collection | On / Off |
| Button text | Custom link text | Text |
Grid
| Setting | Description | Options |
|---|---|---|
| Desktop columns | Number of columns | 2 / 3 / 4 / 5 |
| Tablet columns | Columns on tablet | 2 / 3 |
| Mobile columns | Columns on mobile | 1 / 2 |
| Gap | Spacing between cards | Small / Medium / Large |
| Grid style | Display mode | Grid / Slider |
Product Card
| Setting | Description | Options |
|---|---|---|
| Image ratio | Image proportions | Adapt / Square / Portrait / Landscape |
| Secondary image | Show the 2nd image on hover | On / Off |
| Promo badge | Show the discount badge | On / Off |
| Vendor | Show the vendor name | On / Off |
| Product type | Show the type | On / Off |
| Quick Add | Quick add button | On / Off |
| Color swatches | Show color swatches | On / Off |
Available Blocks
| Block | Description |
|---|---|
| Heading | Section title |
| Subheading | Subtitle |
| Text | Description |
| Button | Additional CTA button |
Use Cases
Best Sellers on Homepage
- "Best-sellers" collection
- 8 products, 4 desktop columns
- Promo badge enabled
- Secondary image on hover
- Quick Add enabled
- "View entire collection" button
New Arrivals
- "New Arrivals" collection
- 4 products, 4 columns
- Slider on mobile
- Color swatches enabled
- Medium gap
Cross-Sell on Product Page
- Collection related to the displayed product
- 4 products, 4 desktop columns
- No "View all" button
- Quick Add enabled
- Title: "You may also like"
Mini Catalog
- 12 products, 3 columns
- Portrait ratio
- Vendor displayed
- Large gap for a premium look
- "Discover the collection" button
💡Enable the secondary image on hover for clothing/accessories collections. The visitor sees the product from another angle without clicking, which increases engagement.
ℹ️Slider mode on the grid transforms the grid into a horizontal carousel. Useful when you want to display many products without taking up too much vertical space.
⚠️Avoid exceeding 12-16 products per section. Beyond that, loading time increases and the user experience degrades. Use the "View all" button to redirect to the full collection.