Skip to content

Featured Products

Design a featured products section that keeps your store feeling current: five patterns, how to choose the products, and mobile and accessibility rules.

About this path

Level
Intermediate
Reading time
About 22 minutes
Sections
10
Account needed
No

Written for store owners, builders, and designers refining high-performance ecommerce stores.

Foundation · 2 min

Choosing your pattern

If this is true of your store Start with
You have not built one of these before The single labelled row
You have real sales or view data and nobody to merchandise by hand The data-driven automatic row
You have two or three genuinely different true claims to make The tabbed multi-row
You have a point of view and are willing to state your reasoning The editorial pick, with a reason
A real occasion is coming up and someone will own taking it down afterwards The seasonal or campaign row

They combine well. A common, sturdy homepage shape is one data-driven row (“Bestsellers”) plus one editorial row with a stated reason lower down — the first is defensible with no ongoing effort, the second is where your judgement actually shows.

Foundation · 2 min

Choosing which products go in it

The single biggest quality gap between a good featured row and a bad one is not layout, it is whether the products were chosen from evidence or from preference.

  • Prefer data over taste. Sales volume, view-to-purchase rate, or rating and review count are all more defensible than “the products the merchandising team likes best”.
  • Span the catalogue, don’t cluster. A row of four near-identical products wastes the slot; pick across categories or price points so the row also does a little of a category section’s job of showing breadth.
  • Only feature what’s in stock. A featured out-of-stock product is worse than an empty slot — it is a promise the page cannot keep the moment someone clicks.
  • Rotate on a schedule you can actually sustain. A stale row is more damaging than no row. If nobody has capacity to refresh it monthly, prefer the automatic data-driven pattern, which refreshes itself.
  • Cap it at four to eight. A featured section that shows twenty products has stopped being featured — that is a grid wearing a featured section’s heading. See the featured category guide’s parallel argument about category tiles; the same logic applies to products.

Foundation · 2 min

What the section and each card need

What the section and each card need

Heading, an optional one-line reason, equal cards, and a way out to the full range.

Element Rule
Heading States exactly what the section is; no vague phrases like “You might like”.
Reason line (optional) One sentence, only if the curation has a stated logic worth sharing.
Product cards Same rules as any product grid — one image ratio, consistent attributes, equal card heights. Don’t re-invent the card here; reuse the one from your product grid.
Count Four to eight. Fewer feels thin; more turns the row into an unstyled grid.
“View all” link Goes to the category or collection that the row is drawn from, not to the homepage or a dead end.
Loading behaviour The first row of images loads eagerly; anything below the fold lazy-loads.

Foundation · 2 min

Do and don’t

Don’t Do instead Why
Label a row “Bestsellers” and hand-pick it from favourites Either source it from real sales data, or give it an honest editorial label instead A false label is discovered by anyone who checks, and it costs more trust than the row earns
Feature a product that’s out of stock Filter the source query by availability A featured dead end costs more than showing one fewer product
Show twenty products in a “featured” row Cap it at four to eight and link to “View all” Past eight it reads as an unstyled grid, not a curated set
Let a seasonal row run past its season Set an end date when you publish it A stale campaign row signals an abandoned store faster than almost anything else
Mix card styles or image ratios inside one row Use the exact same card everywhere else in the store Inconsistent cards slow comparison even in a row this short
Bury the heading in a slogan (“Just for you”) Say exactly what the row is A vague heading gives a shopper no reason to look closer

Foundation · 2 min

Mobile and accessibility

  • Horizontal scroll on mobile works well for this pattern specifically, because the set is small and finite — unlike a full grid, a shopper isn’t expected to see everything at once. Show a partially cut-off card at the edge so the row visibly continues.
  • Two columns is the alternative if you’d rather not scroll; either is fine, but pick one rather than a cramped row of five squeezed onto a phone screen.
  • Every card is a real link with the product name as its accessible name, not “View product” repeated five times.
  • Ratings conveyed in text as well as stars, so a screen reader user gets “4.6 out of 5, 82 reviews” rather than five ambiguous icons.
  • Keyboard and scroll-snap — if you use a horizontally scrolling row, make sure it’s reachable and operable by keyboard, not only by touch or drag.

Foundation · 2 min

Building it in ZenBasket

What this guide asks for What to use
A data-driven row (bestsellers, single/pick product) A data-driven slider mapped to Products → Featured Products or Pick Product, with fields for image, name, price and rating
A tabbed multi-row Switchable panels, one data-driven slider per tab
An editorial or seasonal pick Products / Pick Product mapping with Choose Specific Product(s) selected by hand, plus a heading and reason-line text element
Hover image swap on cards Enable other-angle images in Data Mapping, then the standard hover-swap interaction (see the ZenBasket Builder mechanics reference)
Seasonal row cut-off A timer or a calendar reminder tied to a real end date, not a countdown gimmick

New to the builder? Start with Getting started and adding a new section.

Foundation · 2 min

Frequently asked questions

What is a featured products section?

A short, curated row of individual products — such as “Bestsellers” or “New in” — placed on a homepage or landing page to give a browsing visitor something concrete to click before they have chosen a category. It differs from a product grid, a featured category section, a single-product story and a shop-the-look set, each of which solves a different merchandising problem.

How many products should a featured section show?

Four to eight. Fewer feels thin; more and the row stops reading as curated and becomes an unstyled grid. Link to “View all” for anyone who wants to see the full set the row was drawn from.

Should “Bestsellers” actually be my real bestsellers?

Yes. A label that doesn’t match its contents is discovered quickly, especially by returning customers, and it costs more trust than the section gains. Source it from real sales or view data where you can; if you want to hand-pick instead, give the section an honest editorial label and say why the products were chosen.

Should featured products be chosen by hand or generated automatically?

Both are legitimate. Automatic, data-driven rows are more defensible and need no ongoing effort, which suits stores without a dedicated merchandiser. Hand-picked rows let you make a genuine editorial argument, but only earn that trust if you state the reasoning rather than presenting curation as data.

Can a featured products section include out-of-stock items?

No. A featured out-of-stock product is worse than showing one fewer product, because it is a promise the page breaks the moment someone clicks. Filter the source by availability, whether the row is manual or automatic.

How is this different from a featured category section?

A featured category section routes a shopper into a department of the catalogue; a featured products section puts individual, purchasable items in front of them directly. Both are selective merchandising blocks, and a homepage often benefits from one of each — see the featured category guide for the parallel pattern.

Foundation · 2 min

12. Where to go next

Ready for the next stage?

Continue through the Academy sequence to apply advanced optimization and scaling techniques.

Start Advanced techniques