How to Add New Products List in Widget in Magento 2?

Sagar Khandekar - August 03, 2020

Today, we’re going to teach you guys how to add new products list in widget in Magento 2.

Adding a new products list is extremely useful for informing your customers about the latest products by marking them as “New”.

Unlike Magento 1, Magento 2 allows adding dynamic products list directly from the admin.

This is possible by using Magento 2’s widget functionality to insert product blocks that are configured to display real-time data from your product catalog.

Now, there are two such widgets available in Magento 2 for displaying new products list:

Catalog Products List
Catalog New Products List

For this tutorial, we will use the “Catalog New Products List” widget to display products with marked as “New”.

That being said, let’s get into it!

Step-by-Step Process to Add New Products List in Widget in Magento 2

Below are the steps you need to follow to insert new products list in the widget in your Magento 2 store.

Step #1 - Setup Data Range

The data range will basically help to decide the time period that a particular product list is considered as new.

Now, to assign a data range, open the admin panel and navigate to Products > Inventory > Catalog.

After that, select the product you want to decide the data range in the grid and click on the “Edit” mode button from the Action column.

Next, navigate to ADVANCED SETTINGS > autosettings.

Here, you need to write a valid date in the “Set Product as New From Date” field or you can also click on the calendar button to select the start date.

Similarly, write a valid date in the “Set Product as New To Date” field or click on the calendar button to directly select an end date.

Steps to Set Up Data Range

Now, click on the “Save” button from the upper-right corner to finish the process.

Step #2 - Create a Widget

In this step, you need to decide how the new products list should display in your store.

For this, open the admin panel and navigate to Content > Elements > Widgets.

After that, click on the “Add New Widget” button from the upper-right corner.

Next, in the Settings section, do the following:

Create a Widget

Now, in the next “Storefront Properties” screen, do the following:

In the Widget Title field, write a title for the widget.

Next, in the Assign to Store Views field, select the store view in which you want to display the widget.

Lastly, in the Sort Order field, enter a number to set the order starting from 0. Although, this field is optional.

Firstly, set the Type to the “Catalog New Products List”.
Step #3 - Set Display Location

In this step, we will determine the appearance of the new products list from the layout updates section.

For this, click on the “Add Layout Update” and do the following:
- First of all, set the “Specified Page” in the Display On field.
- Then, set the “CMS Home Page” in the Page field.
- After that, set the “Main Content Area” in the Block Reference field.
- Lastly, set the “Template” that you want for the new products list display.
Then, set the Design Theme to the currently used theme of your store.

Lastly, click on the “Continue” button as shown in the screenshot below.

Layout Updates

Now, click on the “Save and Continue Exit” button.

Step #4 - Set the Products List

Open the admin panel and click on the “Widget Options” button.

Here, select “All Products” in the display field to display all the recently added products.

Then, select “Yes” in the Display Page Control field to control the number of products to show on one page or you can also select “No” to display all products from the list.

Now, if you select “Yes” in the Display Page Control field, then a box titled as “Number of Products per Page” will appear where you need to enter a number of products to display on each page.

Next, enter the number of products you want to add in the list in the Number of Products to Display field. If you leave it blank, it will display 10 products by default.

After that, set the time interval in the ** Lifetime (Seconds) ** field to refresh the circle of your new products list.

Widget