Section reference
Featured collection
Show products from one collection as a grid or a carousel with Vellora's featured collection section.
Featured collection shows up to 16 products from one collection, with an eyebrow, a heading, a description and a View all link to the collection. Choose a Grid to show every product at once, or a Carousel that shoppers scroll sideways with arrows or by swiping.
Product cards follow your settings in Theme settings → Product cards, including quick add, swatches and the hover image. See Buttons and cards.
Best practices
- Grid for a few, carousel for many. Four or eight products fit a grid neatly. For more, a carousel keeps the section short.
- Match the column count to the grid. With a grid, set Maximum products to show to a multiple of Columns on desktop, so the last row is full.
- Two columns on phones suits most products. Use one column for products that need a large image, like art prints or furniture.
- Use a specific collection, such as bestsellers or new arrivals, rather than all products. The heading should say why these products are here.
- Place it high for speed. As the first section on a page, its product images load right away.
Preset tips
- Graphite uses it on the home page as a five-column carousel of new arrivals.
- The cart and 404 page templates in every preset also include it, so shoppers always have somewhere to go next. Set a collection there too.
- Handle
featured-collection- Group
- Products and collections
- Where
- Add it to any template with Add section in the theme editor.
Settings
| Setting | Type | Default | Options |
|---|---|---|---|
| Eyebrow | Text | Bestsellers | — |
| Heading | Inline rich text | Pieces customers return to | — |
| Heading size | Drop-down | Medium | Small, Medium, Large, Extra large |
| Description | Rich text | None | — |
| Collection | Collection | None | — |
| Maximum products to show | Slider | 8 | 2 to 16, in steps of 1 |
| Layout | Drop-down | Carousel | Grid, Carousel |
| Columns on desktop | Slider | 4 | 2 to 6, in steps of 1 |
| Columns on mobile | Drop-down | 2 columns | 1 column, 2 columns |
| Show view all link | Checkbox | On | — |
| Color scheme | Color scheme | Scheme 1 | — |
| Top padding | Slider | 64px | 0px to 160px, in steps of 4px |
| Bottom padding | Slider | 64px | 0px to 160px, in steps of 4px |