Skip to content
Help
Builder sections and blocks

How do I show featured products (best sellers, newest, on sale) on my home page?

Show a grid or carousel of products on your home page with the Featured products section: newest, oldest, best selling, discounted (on sale), or top rated products, limit it to one collection, set the number of products, columns, show more button, and carousel on mobile.

3 min read

The Featured products section shows a grid or a carousel of your products. It picks them for you, for example your best sellers or your newest products.

Add the section

  1. Open the builder and choose Home page in the Pages tab.
  2. In the Sections tab, click Add new section and pick Featured products from the Products group.
  3. Choose which products to show, then click Publish.

It is only offered on the home page, up to 2 per page. For example, one for best sellers and one for products on sale.

Which products show

Source mode picks and sorts the products:

  • Newest: the products you added last come first.
  • Oldest: the products you added first come first.
  • Best selling: the products with the most units sold. Abandoned checkouts do not count.
  • Discounted: only products with a discount that has not ended. See How do I set product prices, discounts, and per-market pricing?
  • Top rated: only products with at least one published review, highest average rating first.

Collection filter limits the list to one collection, or All. Only products that are published and not hidden can show.

Layout

  • Section width: Page or Full.
  • Layout: Grid or Carousel (a row shoppers swipe or scroll).
  • Columns: cards per row on computers, or cards in view for a carousel.
  • Products count: 4, 6, 8, 10, or 12 products.
  • Show more button (grid only): adds a button under the grid that loads more products. Each click loads the Products count again, and the button only shows when there are more products to load.
  • Mobile columns (1 or 2) and Carousel on mobile, which turns the grid into a carousel on phones (grid only).
  • Navigation icons and Icon background: the arrows of a carousel. They only show when something scrolls.
  • Color scheme, Gap between cards, Padding, and a Custom CSS tab.

Title and product cards

Click Add new block to put a title above or below the products: up to 2 Text blocks, 1 Divider, and 1 Group. The Product card block is always there and sets how each product looks (image, title, price, rating, buy button). See How do I change how product cards and collection cards look?

Recipes

  • Best sellers of one collection: Source mode Best selling, Collection filter set to that collection.
  • Sale section: Source mode Discounted, and set the Savings badge on the card's Price to a percentage.
  • Long product list: Grid layout with Show more button on, so shoppers load more when they want.

Good to know

  • When no product matches, shoppers see a "No products yet" message. Check that your products are published, and that they have a discount (Discounted) or a review (Top rated).
  • Show more button, Mobile columns, and Carousel on mobile are hidden when Layout is Carousel.
  • To show products from a collection on the collection page itself, see Collection products section.

Still need help?

Write to us and we will answer you.

Contact us