Create a Widget in Magento 2

Widget is a manageable component of Magento 2, which allows users to display data anywhere on their own front-end site.

create a widget in Magento 2

So are you looking for the way how to create a widget in Magento 2?

You’re welcome!

In this blog, I would like to share with you the detailed procedure of adding a custom widget that can show a list of Instagram photos on your store’s front-end as an particular example for my instruction.

Step 1: Setting up Module

First, we need to create a custom module.

  • Create a registration file: your_magento_base/app/code/Magenest/InstagramShop/resgistration.php
  • Create file: your_magento_base/app/code/Magenest/InstagramShop/etc/module.xml
  • Create file: your_magento_base/app/code/Magenest/InstagramShop/composer.json

Step 2: Declare new Widget

Initialize your widget by creating the file : Magenest/InstagramShop/etc/widget.xml :

  • As in this file, the class=”Magenest\InstagramShop\Block\Photo\Slider” is the block file we’re gonna create later, and value=”slider/slider.phtml” is the widget’s template file.

Step 3: Add Widget Block

Follow this path Magenest/InstagramShop/Block/Photo and create a file named Slider.php to add block class for our widget:

  • This is where we’re gonna call to get some Images Data to display.

Step 4: Create Widget Template

File template: Magenest/InstagramShop/view/frontend/templates/slider/slider.phtml


  • This is where the content of the widget is.

And we’re done for the coding path. Let’s move on with the configuration on the Magento Backend.

Step 5: Configuration and Result

  • Go to Magento Backend -> Content -> Widget ->Add new


  • Choose Type as Instagram Slider and Choose your Design theme.image3
  • This is where you choose to display the Widget. For example, we chose Main Content Top on All Pages.


  • On Widget Options tab, enter the title of the widget.


  • Press Save, flush your Magento cache and let’s go to your front-end site to see the final result.



Bravo! You just created a slide of Instagram photos on your store’s front-end. Pretty easy, right?

Hope this topic is helpful to you, and don’t mind leave your questions in the comments section. I always appreciate all of them.