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

SettingTypeDefaultOptions
EyebrowTextBestsellers—
HeadingInline rich textPieces customers return to—
Heading sizeDrop-downMediumSmall, Medium, Large, Extra large
DescriptionRich textNone—
CollectionCollectionNone—
Maximum products to showSlider82 to 16, in steps of 1
LayoutDrop-downCarouselGrid, Carousel
Columns on desktopSlider42 to 6, in steps of 1
Columns on mobileDrop-down2 columns1 column, 2 columns
Show view all linkCheckboxOn—
Color schemeColor schemeScheme 1—
Top paddingSlider64px0px to 160px, in steps of 4px
Bottom paddingSlider64px0px to 160px, in steps of 4px

Edited . Written for Vellora 1.0.0.

Something unclear or missing? Contact support.