How To Creating a Widget in Magento 2

The progress of creating a widget is nearly the same for each type. You can follow the first part of the instructions, and then complete the last part for the specific type of widget.

 

Step 1: Choose the Type

1. On the Admin sidebar, click Content. Under Elements, click Widgets.
2. Click Add Widget. Then follow these tips:

In the Settings option, choose the Type of widget that you want to create. After that, click Continue.

Make sure that Design Theme is set to the current theme.

1. Click Continue

1. Under Storefront Properties, follow these tips:

In the Widget Title textfield, input a descriptive title for internal reference only.

Configure Assign to Store Views to “All Store Views,” or to the view where the app will be available. To select more than one, hold the Ctrl key down and select each option.

Input a number in the Sort Order field to determine the order of the block if it displays in the same location as other content elements. The top position is 0.

Step 2: Specify Where It Goes

1. In the Layout Updates option, click Add Layout Update.
2. Change Display On to the type of page where it is to display.
3. In the Block Reference list, select the area of the page layout where it’s to be placed.

1. If the widget is a link, change Template to one of the following:

 

Block Template	Formats the content so it can be placed as standalone unit on the page.
Inline Template	Formats the content so it can be placed inside other content. For example, a link that goes inside a paragraph of text.

Step 3: Complete the Options

The options for each widget type vary slightly, but the progress is basically the same. The following example displays the product list for a specific category, with pagination controls.

1. On the left of the panel, click Widget Options.
2. Click Select Block.
3. Input a Title to display above the list. In example, “Featured Products.”
4. For pagination controls, change Display Page Control to “Yes.” After that, follow these tips:

Input the Number of Products per Page.

Input the total Number of Products to Display.

Configure Condition to the category of products to be featured. The progress is the same as setting a condition for a price rule.

1. After completed, click Save.
2. When prompted, follow the tips on the top of the workspace to update the cache, if needed.

Step 4: Check It Out!

Return to your frontend to check if the widget is working correctly. To move it to another location, you can reopen the widget and try another page or block reference.