Featured collection
Show products from one collection on any page. Use it to promote best sellers, new arrivals or a seasonal collection.
The Featured collection section shows products from a collection you choose, as a grid or a carousel. Add it to your home page or any other page to point shoppers to the products you want them to see first.
1. Our guide to set up a Featured collection section:
2. Section settings
Section header
Heading: The title above the products. Leave it blank to hide it.
Heading size: 15–80px.
Heading alignment: Left / Center. With Left, the View all link sits next to the heading. With Center, it becomes a View all button below the products.
General
Collection: The collection whose products are shown.
Maximum products to show: 2–12, in steps of 2.
Number of columns on desktop: 2–4.
Enable "View all" button if collection has more products than shown: Adds a link to the full collection page. It only appears when the collection has more products than Maximum products to show.
Enable carousel on desktop: Shows the products in a slider on desktop and tablet (3 per row on tablet), with arrows when Maximum products to show is higher than Number of columns on desktop. Turn it off to show a regular grid.
Product card
Font size scale: Size of the product titles, 100–200%.
Content alignment: Left / Center.
Image ratio: Adapt to image / Portrait / Square / Arch. Adapt to image keeps each image's original shape.
Show second image on hover: Shows the product's second image when shoppers hover over the card.
Add image padding: Adds space around the product image inside the card.
Show image border: Adds a border around the product image.
Show vendor: Shows the product's vendor.
Show product rating: Shows star ratings. Requires a product rating app.
Show product swatches: Shows color/variant swatches on the product cards. Set the swatch style in Theme settings → Swatches.
Enable quick add button: Lets shoppers add a product to the cart without leaving the page. For products with more than one variant, they choose options first.
Mobile layout
Number of columns on mobile: 1 column / 2 columns.
Enable swipe on mobile: Turns the products into a swipeable slider on phones.
Section padding
Top padding and Bottom padding: 0–100px.
3. Tips
Create a dedicated collection (for example "Best sellers" or "New in") so you can change what's featured without editing the section.
Set Maximum products to show higher than Number of columns on desktop and turn on Enable carousel on desktop to show more products without taking up more space.
On mobile, 2 columns with Enable swipe on mobile off gives shoppers a compact grid; turn swipe on if you prefer a single scrolling row.
Last updated
Was this helpful?