Tutorial: How to Insert Product List Widgets in Magento 2

The vast majority of ecommerce stores you visit will have areas of their category and product pages dedicated to showcasing new products, best-sellers and featured product categories. To utilise these lists on your ecommerce store when using Magento 1, the store-owner or developer would either have to install an extension or implement a shortcode fix, which meant that introducing this functionality wasn't as straightforward as you would like.

Introducing Magento 2 dynamic product lists

In Magento 2 it is now possible to introduce dynamic product lists straight from the admin. The new Product Lists feature makes use of Magento's widget functionality to introduce product blocks configured to display live data from your product catalog in an instant. There are two main list widgets available; Catalog New Products List and Catalog Products List.

Catalog New Products List by default displays the first eight of the most recently added products. This can be configured to include only products within a specified date range.

The Catalog Products List widget can be configured to display all products based on conditions. Using conditions you can then create any combination of attributes to refine your product list to items that match these rules exactly. This gives great flexibility for the use of this widget. You can mix and match rules to basically show any combination of products that you can think of, and display them on any cms page you like.

In our two examples below, we will first show you a way to create a Product List widgets, and then the second example will explain how to specifically create a widget that'll showcase new products, called a Catalog New Products List widget.

How to Create a Product List Widget

The process of creating a Product List widget is fairly straightforward. If you have ever used Shopping Cart Price Rules in Magento, then the process to applying conditions for which products will show in your list will be familiar.

One way in which you can use conditions is to feature products from a specific category. Which we will show in the method below.

Step 1: Choose Location Of Widget

1. On the admin menu, hover over Content then click on Pages
2. Find the page that you want to show the product list on, for example the Home Page.
3. In the Action column, select Edit from the dropdown menu
4. Next, click on the Insert Widget icon in the page editor.

Step 2: Configure The Widget

1. Select "Catalog Products List" from the Widget Type dropdown list
2. Complete the remaining information as follows:
1. Give the widget a descriptive Title. This is for internal use only.
2. To provide control for navigation for product lists with multiple pages, set Display Page Control to "Yes".
3. Set Number of Products to Display to the number of products that you want to include in the list. The default setting is 10.
3. Now, scroll to the Conditions attribute.
4. Select the Category option
5. Then you can choose the category of your choice that you wish to show.
1. Note that conditions will be dependant on what products you want to show in your list.
6. Then, click Insert Widget
7. Finally, click on Save Page in the top right of the page editor.

Then, follow the instructions to update the cache.

Step 3: Take a Look

1. In the menu in the admin panel, click Content, then hover over Elements and click Pages.
2. Find the page in the grid where your Product list will appear. Then in the Action drop-down, select Preview.

How to Create a New Products List Widget

The lists of new products is an example of dynamic content, which consists of live data that is pulled from your product catalog.

Step 1: Set the Date Range for Each product

To make a product appear in the list by date range, the 'New Form' dates must be entered for the product.

1. On the admin menu, click Catalog, then Manage products.
2. Find each product that you want to feature and open them in edit mode.
3. Then, in the Set Product as New Form field, click the calendar. Then, choose the first date that you want the product to be featured on.
4. In the To field, click the calendar. Then, choose the last date you want the product to be featured.
5. Click Save.

Then, follow the instructions to update the cache.

The list of products will now appear on the Homepage for the specified date range.

Step 2: Create the Widget

The Widget tool generates the code that determines the content of the New Products list and its placement in store.

1. On the admin menu, click Content. Then hover over Elements and click on Widgets.
2. In the upper-right hand corner, click Add Widget.
3. In the Settings section do the following;
4. Set Type to "Catalog New Products List."
5. Choose the Design Theme that is used by the store.
6. Click Continue.
7. In the Storefront Properties section, complete the following fields;
1. Widget Title: Enter a descriptive title for your widget.
2. Assign to Store Views: Select the store views where you can widget to be seen.
3. Sort Order: (Optional) enter a number to determine the order this item appears.

Step 3: Choose the Location

1. In the Layout Updates section, click Add Layout Update, then, do the following;
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
1. New Product List Template
2. New Products Grid Template
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 panel on the left-hand side, click Widget Options. Then, do the following.
2. Set Display Products to one of the following:
1. All Products - lists products in sequence, starting with those most recently added.
2. New Products - lists only products which are identified as "New". A product is considered to be new during the date range that is specified in the "Set Product As New From/To" fields.
3. Complete the remaining information as follows:
1. To provide control for navigation for product lists with multiple pages, set Display Page Control to "Yes". After, in the Number of Products per Page field, enter however many products you want to show per page.
2. 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.
3. In the Cache Lifetime field, choose how often you want the list to refresh. Default is 24 hours (or 86400 seconds).
4. Click Save.

Then, follow the instructions to update the cache.

Step 5: Take a Look

1. In the menu in the admin panel, click Content, then hover over Elements and click Pages.
2. Find the page in the grid where your New Products list will appear. Then in the Action drop-down, select Preview.

Give Us A Call

If this post has shown you that adding products list widgets in Magento 2 is worth it, then we can help. Call us directly today on 01183 805 705 or visit our Website Maintenance Page.

Find out more