Introducing Magento 2 Widgets – part I

NOTE: UB Trex -- our free Magento 2 theme is available for download.

In our earlier posts, we have covered the topics installation guide for Magento 2, and how to install Magento 2 demo with sample data. Continuing the tutorial series, today we will introduce some basic Magento 2 widgets and how to implement them for your web content management.

Magento Widgets are Magento extensions with a predefined set of configuration options. They provide great control and flexibility in creating informational and marketing content through the Magento administrator panel. Once installed, the widgets options can be fine tuned by the Magento store administrators.

Some of the possible implementations of the Magento widgets are:

I. Call Magento widget

You can call a Magento widget from anywhere on the site.

Here is an example of how to display a static block CONTACT on your 404 page.

#Step 1: Go to Content >> Pages

#Step 2: Select 404 Page to edit

#Step 3: click on tab [Content]

#Step 4: Click [Show/ Hide Editor]

#Step 5: Select [Insert widget]

#Step 6: Select [Widget Type] = CMS Static Block

#Step 7: Select Block from Block List

#Step 8: Click Save Page

Front-end Appearance:

How the widget display depends on which static block you choose to configure. You can manage its content by editing directly in the static block. This method is also applied for editing block content on different pages.

II. Magento Widget Types

In this post, we will introduce to you 3 types of widget types.

1. CMS Static Block

As example above, CMS static block widget contains all blocks defined in CMS. For example, If you want to display the static block CONTACT FORM and show it on the homepage, all you need to do is making some configuration in the static block widget and it will display the block as you wish.

Front-end Appearance:

2. Catalog New Product List

Just like its name, this widget displays the list of new products. Simply insert the right widget, set the title and position for it to display then you are all set.

Front-end Appearance:

3. Recently Viewed Product

It’s easy to display two product lists on the same page without the need to meddle with any code line. Simply choose the right widget and Magento will help you with the display.

Front-end Appearance:

Hope this article was of help.

List of Magento 2 tutorials :

1.Installation guide for Magento 2.

2. How to install Magento 2 demo with sample data