How to Create a Custom Widget in Magento 2?

Today, we’re going to teach you guys how to create a custom widget in a Magento 2 store.

A widget is basically a content block that contains text, images, and other interactive elements. You can display widgets on any webpage and at any position in your Magento 2 store.

The primary purpose of widgets is to enhance the interaction between customers and your store.

For example, you can create a custom widget for new products, featured products, promotional campaigns, etc to draw visitors’ attention & simulate them to take action.

And the best part is, it is extremely easy to create custom widgets in Magento 2.

In this post, we will show you exactly how to create a custom widget in a Magento 2 store.

How to Create/Add a Custom Widget in Magento 2

Please follow the below steps to learn how to create a custom widget in Magento 2.

Step 1. Log in to your admin panel and navigate to Content > Elements > Widgets.

Step 2. After that, click on the Add Widget button from the top-right corner.

Step 3. Next, go to the Settings section and do as mentioned.

Step 4. Now, Click on the Storefront Properties option from the Widget menu given on the left side and do as mentioned.

Step 5. After that, click on the Widget Options under the Widget menu on the left side and do as mentioned.

Let's learn each step in-depth.

Step - 1

First of all, log in to your admin panel and navigate to Content > Elements > Widgets.

Navigate to Widgets

 

Step - 2

After that, click on the Add Widget button from the top-right corner.

 

Add WidgetStep - 3

Next, go to the Settings section and do the following:

Widgets Settings

  • Select the type of widget that you want in the Type field.
  • Select a theme for your new widget in the Design Theme field.
  • Click on the Continue button.

Step - 4

Now, click on the Storefront Properties option from the Widget menu given on the left side and do the following:

Widget Storefront Properties

  • Write a title for your new widget in the Widget Title field.
  • Select a store view where you want to display your new widget in the Assign to Store Views field.
  • Enter a sort order for your new widget in the Sort Order field.
  • Select specific pages & specific positions where you want to display the new widget in the Layout Updates field.

Step - 5

After that, click on the Widget Options under the Widget menu on the left side and do the following:

Widget Block Options

 

  • Click on the Select Block button in the Block field and select a block where you want to appear in the new widget.
  • Once you’ve selected a block, click on the Save button to finish the process.

Also read: How to Add New Products List in Widget in Magento 2?

Ending Note

And there you go!

This is how you can create a custom widget in your Magento 2 store.

And if you need our professional assistance, feel free to contact us anytime.