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 positions (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!

  • The 1st step: Add A New Widget

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

(Admin Panel => CONTENT => Widget)

create widget magento 2

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

how to create new widget magento 2

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

creating widget magento 2

Click on the Continue button when you complete the settings.

  • The 2nd step: 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.

create widget in magento 2
  • The 3rd step: 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.

magento 2 widget
how to create a widget in magento 2

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 Config Sitemap in Magento 2?

How To Use Flat Catalog In Magento 2?

How To Config URL Rewrite in Magento 2?

How To Create New Cart Price Rule In Magento 2

How To Create New Catalog Price Rule In Magento 2


Leave a Reply

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