How To Create A Custom Widget in Magento 2 (5 minutes)

how to create a custom widget in magento 2

What Are Widgets In Magento 2?

In simple words, the widget is a content block that consists of images, text, and interactive elements. You can easily display the widget on any page (home, simple product page, grouped product page, category page,…)  and any position (e.g.: page header, page footer, page bottom, …) on your site. In general, the purposes of using the widgets are to enhance the interaction between customers and the store. For instance, you can use the widget to draw visitors’ attention to the new promotional campaigns/ new products/ featured items, to stimulate them to leave feedback, participate in a poll, and so on.

How To Create A Custom Widget In Magento 2?

There are just 3 simple steps to create a new custom widget in Magento 2. Let’s get started!

1. Add A New Widget

Go to the admin panel, navigate to CONTENT and choose Widgets (under Elements)

(Admin Panel => CONTENT => Widget)

Then, click on the Add Widget button to create a new widget.

After that, select the type of widget that you want to create as well as choose the Design Theme (your current theme).

Click on the Continue button when you complete the settings.

2. Add Widget Information

You must complete the Storefront Properties by adding the title of the widget, choosing a store view, setting a sort order for the widget (when there is more than one widget in the same place, only the one that has higher priority – a lower number is displayed).  Also, you need to set up where to show the widget – select a specific position in a/ some pages in the Layout Updates section.

3. Select A Block Included In The Widget

Moving to the Widget Options. Let’s click on the Select Block button and choose a block that you want to appear in the widget.

After you select the block, let’s save the configuration, go to your storefront and check the results.

We have shown you the basic conception of the widgets in Magento 2 and more importantly, how to create a custom one in the back-end menu. If you have any problems when following this tutorial, be free to ask us by leaving a comment below. See you in the next tutorials!


See More Our Magento “How To” Series:

How To Use Flat Catalog In Magento 2?

How To Config URL Rewrite in Magento 2?

Leave a Reply

Your email address will not be published. Required fields are marked *