New Products List

The list of new products is an example of dynamic content, and consists of live data that is pulled from your product catalog. By default, the New Products list includes the first eight of the most recently added products. However, it can also be configured to include only products within a specified date range.

New products list on the storefront home page

Step 1: Set each product as new

For Magento Commerce customers, see Scheduling an Update and then continue to the Step 2 on this page. Set Product as New date range setting can be configured only in scheduled updates.

Setting a product as new adds the product to the New products list. You can change the setting back at any point when you no longer want to include it in the list.

  1. On the Admin sidebar, go to Catalog > Products.

  2. Find each product that you want to feature and open in edit mode.

  3. For Set Product as New, toggle the option to set the product as a new product or not.

    Setting the product as new

  4. When complete, click Save.

  5. When you are prompted to reindex and refresh the page cache, click the links at the top of the page and follow the instructions.

Step 2: Create the widget

The code that determines the content of the New Products list and its placement in your store is generated by the Widget tool.

  1. On the Admin sidebar, go to Content > Elements > Widgets.

  2. In the upper-right corner, click Add Widget.

  3. In the Settings section, do the following:

    • Set Type to Catalog New Products List.

    • Choose the Design Theme that is used by the store.

  4. Click Continue.

    New product list widget settings

  5. In the Storefront Properties section, do the following:

    • For Widget Title, enter a descriptive title for the widget. (This title is visible only from the Admin.)

    • For Assign to Store Views, select the store views where the widget will be visible.

      You can select a specific store view, or All Store Views. To select multiple views, hold down the Ctrl key (PC) or the Command key (Mac) and click each option.

    • (Optional) For Sort Order, enter a number to determine the order this item appears with others in the same part of the page. (0 = first, 1 = second, 3 = third, and so on.)

    Widget storefront properties

Step 3: Choose the location

  1. In the Layout Updates section, click Add Layout Update.

  2. Set Display On to Specified Page.

  3. Set Page to CMS Home Page.

  4. Set Block Reference to Main Content Area.

  5. Set Template to one of the following:

    • New Product List Template
    • New Products Grid Template

    Layout updates

  6. Click Save and Continue Edit.

    For now, you can ignore the message to refresh the cache.

Step 4: Configure the List

  1. In the left panel, choose Widget Options.

  2. Set Display Products to one of the following:

    All Products Lists products in sequence, starting with those most recently added.
    New Products Lists only the products that are identified as new. A product is considered to be new during the date range that is specified in Set Product As New From/To. The list will be empty if the date range expires without any new products defined.
  3. To provide navigation control for lists with multiple pages, set Display Page Control to Yes.

    For Number of Products per Page, enter the number of products you want to appear on each page.

  4. Set Number of Products to Display to the number of new products that you want to include in the list.

    The default setting is 10.

  5. For Cache Lifetime (Seconds), choose how often you want to refresh the list of new products.

    By default, the cache is set to 86,400 seconds (24 hours).

    Widget Options

  6. When complete, click Save.

  7. When prompted to refresh the cache, click the link in the message at the top of the page and follow the instructions.

Step 5: Preview your work

  1. On the Admin sidebar, go to Content > Elements > Pages.

  2. Find the page in the grid where the New Products list is to appear and click the Preview link in the Action column.