How to insert widgets in Magento 2

You can insert widgets in Magento 2 using Content > Widgets interface or directly in content of the page, block or any editor which support widgets. When to use each method depends on the situation. More details about each method below.

1. Add widgets directly in page/block content

This method allows you to add widget directly in page/block or other text editor content. It allows you to place it in any place of your page content and wrap widgets in html tags. So if you want to add let’s say banner widget or product carousel somewhere in your page content (e.g. home page) then you will have to use this method. Here are some examples below.

Let’s say you want to edit home page of Athlete2 Magento theme. Navigate to Content > Pages and select to edit your home page.

Now on the page edit screen you will see Insert Widget just above the content editor.

Click it and choose desired widget from a drop down. After you adjust widget setting and click Insert Widget it will be place in content editor.

If you are in visual mode you will see a block with icon and name of your widget. You can click this element to edit widget settings.

If you switch editor mode by clicking Show/Hide Editor button above the editor you will see that it is added as code. e.g.:

2. Add Widgets via Content > Widget section

You can add widgets to various predefined locations/containers in Magento, like sidebar, page top or bottom, contact page and so on. To do this open Content > Widgets.

Choose widget that you want to add and click continue.

Now you can choose where to show your widget using Layout Updates