Widgets are modules which can be added to a page to display different types of information. The advantage of using Widgets is that they can display data which is dynamic and real-time. This allows for a more interactive and customer-oriented store website.
Related Articles
Some examples of widgets in use are image sliders, video chats, review systems, promotional content banners and subscription forms.
In this tutorial, you’ll learn what are the different types of widgets and how to add them to your Magento 2 store.
Types of Widgets
The different widgets available for content management in Magento 2 Community edition are:
- CMS Page Link – To display a link to a CMS page. You can set custom text and title for the web page.
- CMS Static Block – To display content block at a specific location on a web page.
- Catalog Category Link – To display a link to a category. You can choose whether you want the link to be displayed inline (text-only) or in block style (rendered visually).
- Catalog New Products List – To display products which are marked as “New”. You can mark products in your store as “New” for a specified time duration.
- Catalog Product Link – To display a link to a particular catalog product. As with the Catalog Category Link widget, you can set whether the link should be displayed inline or block style.
- Catalog Products List – To display a group of products based on a set of conditions.
- Orders and Returns – To allow Guest users to check order status and raise a return request for a purchased product. This function only works for users who are not logged in (guests).
- Recently Compared Products – To display products which have been compared recently. You can set the number of products to be shown in this widget. You can also set how the products should appear in the block – in list or grid format.
- Recently Viewed Products – To display products which have been viewed by customers recently. You can set the number of products to be displayed and how they appear in the block.
Adding a new widget
To add a new widget, you need to follow four steps:
Step 1: Choose Widget Type
Step 2: Set Storefront Properties
Step 3: Configure Widget Options
Step 4: Save the New Widget and Flush Cache
Step 1: Choose Widget Type
Go to Content => Widgets (under Elements)
On the Widgets page, you’ll be displayed a list of existing widgets on your website.
To edit an existing widget, simply click on the Widget name and you’ll be directed to the edit widget page.
To add a new widget, click on Add Widget button.
You’ll see a New Widget form –
Select the type of widget you want to add and choose a design theme from the drop-down list. Click on the Continue button to continue new widget setup.
Step 2: Set Storefront Properties
When you click on the Continue button on the New Widget form, you’re shown this page –
- Widget Title: Type in the widget name here. This title is for backend purposes only.
- Assign to Store Views: Select for which stores the widget is available. You can set this to “All Store Views” or multiple select your stores using the Ctrl key.
- Sort Order: Set a sort order priority for the new widget. This helps in determining the position of the widget if it appears in the same position as another element from the website. Set this number to ‘0’ for highest priority.
- Layout Updates: You can add where you want the widget to be displayed. Click on Add Layout Update button to get the following options –
-
- Set where the widget should appear by selecting an option from the Display On drop-down list.
- Select the Container (position on the page) and Template (how you want the content to appear) for your new widget.
- Click Save and Continue Edit to save the storefront properties.
Step 3: Configure Widget Options
Once you’re done setting up Storefront properties, click on Widget Options tab on the left sidebar.
Widget options for different widget types can vary slightly, but the process for setting up widgets remains the same. For our example, we have chosen the widget to appear on the Simple Products page. We get the following options displayed for configuration:
- Display Type: Set whether you want the widget to show product information for All Products (recently added products) or New Products (products which are marked as “New”).
- Display Page Control: Set this to “Yes” if you want to add pagination controls.
- Number of Products per Page: Specify the number of products to be displayed per page.
- Number of Products to Display: Specify the total number of products you want to display in the widget.
- Cache Lifetime (Seconds): Leave this empty to set cache lifetime to the default value.
Step 4: Save the New Widget and Flush Cache
When you’re done configuring both the Storefront Properties and Widget Options tabs, click Save button on the top right.
You’ll be prompted to update the cache.
Click on Cache Management in the prompt message to refresh invalidated cache types.
Select the invalidated cache types. Choose Refresh from the bulk action drop-down list and click on Submit button.
Once the Magento cache is refreshed, the new widget will be displayed on the frontend of your store.
Follow this tutorial to learn more on how to manage cache in Magento 2.
The post How to Add Widgets in Magento 2 appeared first on HumCommerce.
