How to add Widgets in Magento 2 - Humcommerce Magento Tutorial
Magento 2 Tutorials

How to Add Widgets in Magento 2

Widgets are modules which can be added to a page to display different types of information. The advantage of using widgets is that they can display data which is dynamic and real-time. This allows for a more interactive and customer-oriented store website.

Some examples of widgets in use are image sliders, video chats, review systems, promotional content banners and subscription forms.

In this tutorial, you’ll learn what are the different types of widgets and how to add them to your Magento 2 store.

Types of Widgets

The different widgets available for content management in Magento 2 Community edition are:

  • CMS Page Link – To display a link to a CMS page. You can set custom text and title for the web page.
  • CMS Static Block – To display content block at a specific location on a web page.
  • Catalog Category Link – To display a link to a category. You can choose whether you want the link to be displayed inline (text-only) or in block style (rendered visually).
  • Catalog New Products List – To display products which are marked as “New”. You can mark products in your store as “New” for a specified time duration.
  • Catalog Product Link – To display a link to a particular catalog product. As with the Catalog Category Link widget, you can set whether the link should be displayed inline or block style.
  • Catalog Products List – To display a group of products based on a set of conditions.
  • Orders and Returns – To allow Guest users to check order status and raise a return request for a purchased product. This function only works for users who are not logged in (guests).
  • Recently Compared Products – To display products which have been compared recently. You can set the number of products to be shown in this widget. You can also set how the products should appear in the block – in list or grid format.
  • Recently Viewed Products – To display products which have been viewed by customers recently. You can set the number of products to be displayed and how they appear in the block.


Adding a new widget

To add a new widget, you need to follow four steps:

Step 1: Choose Widget Type

Step 2: Set Storefront Properties

Step 3: Configure Widget Options

Step 4: Save the New Widget and Flush Cache


Step 1: Choose Widget Type

Go to Content => Widgets (under Elements)

Select Widgets Submenu from Admin Panel

On the Widgets page, you’ll be displayed a list of existing widgets on your website.

To edit an existing widget, simply click on the Widget name and you’ll be directed to the edit widget page.

To add a new widget, click on Add Widget button.

Add New Widget

You’ll see a New Widget form –

Select Widget Type

Select the type of widget you want to add and choose a design theme from the drop-down list. Click on the Continue button to continue new widget setup.


Step 2: Set Storefront Properties

When you click on the Continue button on the New Widget form, you’re shown this page –

Set Storefront Properties

  • Widget Title: Type in the widget name here. This title is for backend purposes only.
  • Assign to Store Views: Select for which stores the widget is available. You can set this to “All Store Views” or multiple select your stores using the Ctrl key.
  • Sort Order: Set a sort order priority for the new widget. This helps in determining the position of the widget if it appears in the same position as another element from the website. Set this number to ‘0’ for highest priority.
  • Layout Updates: You can add where you want the widget to be displayed. Click on Add Layout Update button to get the following options –Add layout update
    • Set where the widget should appear by selecting an option from the Display On drop-down list.
    • Select the Container (position on the page) and Template (how you want the content to appear) for your new widget.
    • Click Save and Continue Edit to save the storefront properties.


Step 3: Configure Widget Options

Once you’re done setting up Storefront properties, click on Widget Options tab on the left sidebar.

Widget options for different widget types can vary slightly, but the process for setting up widgets remains the same. For our example, we have chosen the widget to appear on the Simple Products page. We get the following options displayed for configuration:

Set Widget Options

  • Display Type: Set whether you want the widget to show product information for All Products (recently added products) or New Products (products which are marked as “New”).
  • Display Page Control: Set this to “Yes” if you want to add pagination controls.
    • Number of Products per Page: Specify the number of products to be displayed per page.
  • Number of Products to Display: Specify the total number of products you want to display in the widget.
  • Cache Lifetime (Seconds): Leave this empty to set cache lifetime to the default value.


Step 4: Save the New Widget and Flush Cache

When you’re done configuring both the Storefront Properties and Widget Options tabs, click Save button on the top right.

You’ll be prompted to update the cache.

Cache Management pop up

Click on Cache Management in the prompt message to refresh invalidated cache types.

Refresh Invalidated Cache

Select the invalidated cache types. Choose Refresh from the bulk action drop-down list and click on Submit button.

Cache Refresh Successful

Once the Magento cache is refreshed, the new widget will be displayed on the frontend of your store.

Follow this tutorial to learn more on how to manage cache in Magento 2.

Share this Story
Load More Related Articles
Load More By Editorial Staff
Load More In Magento 2 Tutorials

Check Also

How A/B Testing Using Humcommerce Can Increase Conversions on Your Magento Store

Magento is one of the most powerful e-commerce ...